Version 2.0. This is an attempt by some colleagues and I to organize the recent explosion of Javascript based technologies and frameworks into a coherent toolkit to be used by a web application developer. After some time discussing and studying some of the technologies we'd like to include in this toolkit, we realized that more important that the tool itself, is the motivation that is behind that tool

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
2.0

2. NEED MOTIVATION TOOLS
Scaffold
Several tools. Several ways. Several Practices. Need to
organize, and give some good foundation - best
practices, good design.
yeoman, Seed Projects,
Html5Boilerplate, bootstraps
(e.g. Twitter Bootstrap)
Build / Automation Lots of tasks to execute. Compile. Test. Minify. Concat. Etc.
grunt gulp, broccoli,
component, ...ake's (e.g. Make,
Rake, etc.)
Automation
Utilities
Tasks that can be put in build the pipeline.
minify, uglify, lint, jshint,
watch
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, amd.js, async.js
Javascript
Preprocessor
The way you organize code in development time is different the
way you publish your code. Need to do some processing in your
javascript files before using them.
browserift, webpack
Application
Applications on web are getting complex, need for
frameworks that support app development.
angular, backbone, ember,
knockout
Application
Utilities
Several application features that can be necessary (e.g.
routing)
page, director, crossroads2

3. NEED MOTIVATION TOOLS
Test Runner Execute and visualize test results karma, saucelabs
Test Framework Write tests jasmine, mocha, qunit
Test End to End Write tests for the whole application flow
protractor, casperjs,
nightwatch.js, watir webdriver
Test Support Support tests and helpers
phantomjs, zombie.js, sinon,
chai
Dom Utilities
DOM selection and maniputation, some auxiliary
functions, need for utilities that make work simple (and
cross-browser)
jquery, zepto, polymer,
prototype
JS Utilities
Clean code, functional programming style, reactive
programming features, helpers and utilities
lodash, underscore, promise,
fn.js, q.js, bacons.js, sugar.js,
chance.js, moment.js, micro.js
CI
Continuous integration, continuous delivery,
continuous deployment
Any! (e.g. travis ci, jenkins,
concrete, semaphore, go, snap)
Language
Have a syntactic sugar element, or even completelly
different syntax (that in the end turn into javascript to
run in the browser)
coffeescript, clojurescript,
typescript 3

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

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

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

7. 7
bootstraps
seed
projects

8. AUTOMATION
8
Lots of tasks to execute. Compile. Test.
Minify. Concat. Uglify. Etc.

9. 9
github.com/broccolijs/broccoli
…ake’s (Make, Rake, etc)

10. AUTOMATION UTILITIES
10
Tasks that can be put in the build
pipeline.

11. 11
minify-tools
concat-tools
watch

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

13. 13

14. DYNAMIC LOADING
14
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.

15. 15
github.com/cujojs/curl
github.com/amdjs/amdjs-api
github.com/amdjs/caolan/async

16. JAVASCRIPT PREPROCESSOR
16
The way you organize code in
development time is different the way
you publish your code. Need to do some
processing in your javascript files before
using them.

17. 17
github.com/webpack/webpack

18. TEST RUNNER
18
Execute and visualize test results

19. 19

20. TEST FRAMEWORKS
20
Write tests

21. 21

22. TESTING END TO END
22
Write tests for the whole application
flow

23. 23
github.com/angular/protractor

24. TEST SUPPORT
24
Support for tests and others helpers

25. 25

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

27. 27
Google Closure Tools

28. APPLICATION UTILITIES
28
Several application features that can be
necessary (e.g. routing)

29. 29

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

31. 31

32. JS UTILITIES
32
Clean code, functional programming
style, reactive programming features,
helpers and utilities

33. 33
lodash.com
github.com/kriskowal/q
baconjs sugarjs chancejs microjs

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

35. 35
github.com/ryankee/concrete

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

37. 37
github.com/clojure/clojurescript

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:
!
THANK YOU