the javascript toolkit 2.0

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

NEED MOTIVATION TOOLS

ScaffoldSeveral 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, crossroads

2

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 flowprotractor, casperjs,

nightwatch.js, watir webdriver

Test Support Support tests and helpers phantomjs, zombie.js, sinon, chai

Dom UtilitiesDOM 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)

LanguageHave 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

WHAT TOOLS

CSS Preprocessors sass, less

Preprocessors Libs compass, bourbon

CSS Helpers susy, zenGrids, neat, normalize, modernizr, flexbox

CSS Frameworks boostrap, foundation, skeleton

Let’s talk about this needs,

And take a look at some tools

5

SCAFFOLD

6

Several tools. Several ways.

Several Practices. Need to

organize, and give some good

foundation - best practices,

good design.

7

bootstraps seed projects

AUTOMATION

8

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

9

github.com/broccolijs/broccoli

…ake’s (Make, Rake, etc)

AUTOMATION UTILITIES

10

Tasks that can be put in the build pipeline.

11

minify-tools

concat-tools watch

DEPENDENCY MANAGEMENT

12

Applications are getting complex. They rely on several other libraries and

frameworks.

13

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

github.com/cujojs/curl

github.com/amdjs/amdjs-api

github.com/amdjs/caolan/async

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

github.com/webpack/webpack

TEST RUNNER

18

Execute and visualize test results

19

TEST FRAMEWORKS

20

Write tests

21

TESTING END TO END

22

Write tests for the whole application flow

23

github.com/angular/protractor

TEST SUPPORT

24

Support for tests and others helpers

25

APPLICATION

26

Applications on web are getting complex, need for frameworks that

support app development.

27

Google Closure Tools

APPLICATION UTILITIES

28

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

29

DOM UTILITIES

30

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

31

JS UTILITIES

32

Clean code, functional programming style, reactive programming features,

helpers and utilities

33

lodash.com

github.com/kriskowal/q

baconjs sugarjs chancejs microjs

CI

34

Continuous integration, continuous delivery, continuous deployment

35

github.com/ryankee/concrete

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

github.com/clojure/clojurescript

WRAP UP

38

Difference Needs|Tools and their relation

Agile demands for you as a developer

Keep your mind open

For questions or suggestions: !

THANK YOU