javascript toolkit

THE JAVASCRIPT TOOLKITAn 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 @bymarkoneRenan Martins @renan89

THE IDEA OF THE TOOLKIT

2

The Idea Of A 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.

purpose:

4

AGILE PURPOSE FOR DELIVERY

5

Deliver Fast

Deliver Often

Deliver Value

AGILE CHANGES IN PROCESS

6

Iterations

User Stores

Planning

Stand Ups

Retrospectives

Inception

Scrum - Lean - XP Kanban

Team Communication

…

TECHNICAL SUPPORT FOR AGILE

7

Continuous Delivery

Continuous IntegrationEvolutionary Architecture

Evolutive DesignTDD

Lot’s of Automation

Programming LanguagesDesign Patterns

…

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

And Javascript?

10

The great enabler…

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

11

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 UtilitiesDOM 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.js12

13

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

14

SCAFFOLD

15

Several tools. Several ways.

Several Practices. Need to

organize, and give some good

foundation - best practices,

good design.

16

BUILD - AUTOMATION

17

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

18github.com/broccolijs/broccoli

DEPENDENCY MANAGEMENT

19

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

frameworks.

20

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

github.com/cujojs/curl

github.com/webpack/webpack

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.

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

APPLICATION

25

Applications on web are getting complex, need for frameworks that

support app development.

26

DOM UTILITIES

27

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

28

LANGUAGE UTILITIES

29

Clean code, functional programming style, reactive programming features,

helpers and utilities

30

31

lodash.com

github.com/kriskowal/q

CI

32

Continuous integration, continuous delivery, continuous deployment

33

github.com/ryankee/concrete

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

github.com/clojure/clojurescript

OTHER JAVASCRIPT

36

Several tools. Several ways. Several Practices. Need to organize, and give

some good foundation - best practices, good design.

37

minify-toolsconcat-tools

WRAP UP

38

Difference Needs|Tools and their relation

Agile demands for you as a developer

Keep your mind open

For questions or suggestions: !

Marcos Vinicius @bymarkone

github.com/bymarkone !

Renan Martins @renan89

THANK YOU