The document discusses organizing JavaScript technologies and frameworks into a coherent toolkit for web application developers. It identifies needs such as scaffolding, building and automating tasks, managing dependencies, dynamic loading, testing, applications, DOM utilities, language utilities, continuous integration (CI), and other languages. For each need, it suggests relevant tools like Yeoman, Grunt, Bower, RequireJS, Karma, Angular, jQuery, Lodash, Travis CI, and ClojureScript. The document emphasizes keeping an open mind and notes how the toolkit relates needs to tools while addressing agile demands on developers.

1. THE JAVASCRIPT
TOOLKIT
An attempt to organize the recent explosion of Javascript based technologies and
frameworks into a coherent toolkit to be used by a web application developer.
1
Marcos Vinicius @bymarkone
Renan Martins @renan89

2. THE IDEA OF THE TOOLKIT
2
The Idea
Of A Toolkit

3. An attempt to organize the recent
explosion of Javascript based
technologies and frameworks into a
coherent toolkit to be used by a web
application developer.
purpose:

4. 4

5. AGILE PURPOSE FOR DELIVERY
5
Deliver Fast
Deliver Often
Deliver Value

6. AGILE CHANGES IN PROCESS
6
Iterations
User Stores
Planning
Stand Ups
Retrospectives
Inception
Scrum - Lean -
XP Kanban
Team
Communication
…

7. TECHNICAL SUPPORT FOR AGILE
7
Continuous Delivery
Continuous Integration
Evolutionary Architecture
Evolutive Design
TDD
Lot’s of Automation
Programming Languages
Design Patterns
…

8. AGILE - TOOLKIT
8
Gradle, Maven, Ant, Ivy
jUnit, TestNG,
Cucumber
Design, Analysis,
Architecture Patterns
Jenkins, GO,
Snap, Bamboo
Java, Ruby, Scala,
Python, Clojure,
Racket, Javascript
www.thoughtworks.com/radar/

9. 9
And
Javascript?

10. 10
The great enabler…

11. https://github.com/bymarkone/
javascript-toolkit
11

12. NEED MOTIVATION TOOLS
Scaffold
Several tools. Several ways. Several Practices. Need to organize,
and give some good foundation - best practices, good design. yeoman
Build / Automation Lots of tasks to execute. Compile. Test. Minify. Concat. Etc. grunt, gulp, broccoli
Dependency
Management
Applications are getting complex. They rely on several other
libraries and frameworks. bower, component, NPM
Dynamic Loading
Big projects are split among several pieces of js for the sake of
modularization. No all of them should be loaded at the same time.
require, curl, broserify,
webpack
Testing
Testing is all around. Need to tests on different browsers, need to
write the tests, need to run the tests, need to report test results.
karma, jasmine, phatom, mocha, qunit,
protractor, sinon, sourcelabs, duck angular
Application
Applications on web are getting complex, need for
frameworks that support app development.
angular, backbone, ember,
knockout
Dom Utilities
DOM selection and maniputation, some auxiliary functions,
need for utilities that make work simple (and cross-
browser)
jquey, zepto
Language Utilities
Clean code, functional programming style, reactive
programming features, helpers and utilities
lodash, underscore, promise,
fn, q
CI
Continuous integration, continuous delivery, continuous
deployment
travis-ci, jenkins, concrete,
semaphore, go, snap
Other Languages
Have a syntactic sugar element, or even completely different syntax
(that in the end turn into javascript to run in the browser)
coffeescript, clojurescript,
typescript
Other Javascript ??
concat, minify, uglify, lint, jshint, watch,
page, director, crossroads, moment.js
12

13. 13
WHAT TOOLS
CSS Preprocessors sass, less
Preprocessors Libs compass, bourbon
CSS Helpers
susy, zenGrids, neat, normalize,
modernizr, flexbox
CSS Frameworks boostrap, foundation, skeleton

14. Let’s talk about this needs,
And take a look at some tools
14

15. SCAFFOLD
15
Several tools. Several ways.
Several Practices. Need to
organize, and give some good
foundation - best practices,
good design.

16. 16

17. BUILD - AUTOMATION
17
Lots of tasks to execute. Compile. Test.
Minify. Concat. Uglify. Etc.

18. 18
github.com/broccolijs/broccoli

19. DEPENDENCY MANAGEMENT
19
Applications are getting complex. They
rely on several other libraries and
frameworks.

20. 20

21. DYNAMIC LOADING
21
Big projects are split among several
pieces of javascript for the sake of
modularisation. No all of them should
be loaded at the same time.

22. 22
github.com/cujojs/curl
github.com/webpack/webpack

23. TESTING
23
Testing is all around. Need to tests on
different browsers, need to write the
tests, need to run the tests, need to
report test results.

24. 24
mocha, qunit, protractor, sinon, saucelabs, duck angular

25. APPLICATION
25
Applications on web are getting
complex, need for frameworks that
support app development.

26. 26

27. DOM UTILITIES
27
DOM selection and manipulation, some
auxiliary functions, need for utilities that
make work simple (and cross-browser)

28. 28

29. LANGUAGE UTILITIES
29
Clean code, functional programming
style, reactive programming features,
helpers and utilities

30. 30

31. 31
lodash.com
github.com/kriskowal/q

32. CI
32
Continuous integration, continuous
delivery, continuous deployment

33. 33
github.com/ryankee/concrete

34. OTHER LANGUAGES
34
Have a syntactic sugar element, or even
completely different syntax (that in the
end turn into javascript to run in the
browser)

35. 35
github.com/clojure/clojurescript

36. OTHER JAVASCRIPT
36
Several tools. Several ways. Several
Practices. Need to organize, and give
some good foundation - best practices,
good design.

37. 37
minify-tools
concat-tools

38. WRAP UP
38
Difference Needs|Tools and
their relation
Agile demands for you as
a developer
Keep your mind open

39. For questions or suggestions:
!
Marcos Vinicius
@bymarkone
github.com/bymarkone
!
Renan Martins
@renan89
THANK YOU