javascript toolkit
DESCRIPTION
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.TRANSCRIPT
![Page 1: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/1.jpg)
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
![Page 2: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/2.jpg)
THE IDEA OF THE TOOLKIT
2
The Idea Of A Toolkit
![Page 3: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/3.jpg)
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:
![Page 4: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/4.jpg)
4
![Page 5: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/5.jpg)
AGILE PURPOSE FOR DELIVERY
5
Deliver Fast
Deliver Often
Deliver Value
![Page 6: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/6.jpg)
AGILE CHANGES IN PROCESS
6
Iterations
User Stores
Planning
Stand Ups
Retrospectives
Inception
Scrum - Lean - XP Kanban
Team Communication
…
![Page 7: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/7.jpg)
TECHNICAL SUPPORT FOR AGILE
7
Continuous Delivery
Continuous IntegrationEvolutionary Architecture
Evolutive DesignTDD
Lot’s of Automation
Programming LanguagesDesign Patterns
…
![Page 8: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/8.jpg)
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/
![Page 9: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/9.jpg)
9
And Javascript?
![Page 10: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/10.jpg)
10
The great enabler…
![Page 12: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/12.jpg)
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
![Page 13: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/13.jpg)
13
WHAT TOOLS
CSS Preprocessors sass, less
Preprocessors Libs compass, bourbon
CSS Helpers susy, zenGrids, neat, normalize, modernizr, flexbox
CSS Frameworks boostrap, foundation, skeleton
![Page 14: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/14.jpg)
Let’s talk about this needs,
And take a look at some tools
14
![Page 15: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/15.jpg)
SCAFFOLD
15
Several tools. Several ways.
Several Practices. Need to
organize, and give some good
foundation - best practices,
good design.
![Page 16: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/16.jpg)
16
![Page 17: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/17.jpg)
BUILD - AUTOMATION
17
Lots of tasks to execute. Compile. Test. Minify. Concat. Uglify. Etc.
![Page 18: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/18.jpg)
18github.com/broccolijs/broccoli
![Page 19: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/19.jpg)
DEPENDENCY MANAGEMENT
19
Applications are getting complex. They rely on several other libraries and
frameworks.
![Page 20: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/20.jpg)
20
![Page 21: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/21.jpg)
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.
![Page 22: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/22.jpg)
22
github.com/cujojs/curl
github.com/webpack/webpack
![Page 23: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/23.jpg)
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.
![Page 24: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/24.jpg)
24mocha, qunit, protractor, sinon, saucelabs, duck angular
![Page 25: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/25.jpg)
APPLICATION
25
Applications on web are getting complex, need for frameworks that
support app development.
![Page 26: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/26.jpg)
26
![Page 27: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/27.jpg)
DOM UTILITIES
27
DOM selection and manipulation, some auxiliary functions, need for utilities that make work simple (and cross-browser)
![Page 28: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/28.jpg)
28
![Page 29: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/29.jpg)
LANGUAGE UTILITIES
29
Clean code, functional programming style, reactive programming features,
helpers and utilities
![Page 30: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/30.jpg)
30
![Page 32: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/32.jpg)
CI
32
Continuous integration, continuous delivery, continuous deployment
![Page 33: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/33.jpg)
33
github.com/ryankee/concrete
![Page 34: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/34.jpg)
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)
![Page 35: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/35.jpg)
35
github.com/clojure/clojurescript
![Page 36: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/36.jpg)
OTHER JAVASCRIPT
36
Several tools. Several ways. Several Practices. Need to organize, and give
some good foundation - best practices, good design.
![Page 37: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/37.jpg)
37
minify-toolsconcat-tools
![Page 38: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/38.jpg)
WRAP UP
38
Difference Needs|Tools and their relation
Agile demands for you as a developer
Keep your mind open
![Page 39: Javascript toolkit](https://reader036.vdocument.in/reader036/viewer/2022062319/554a07c8b4c905557a8b56f0/html5/thumbnails/39.jpg)
For questions or suggestions: !
Marcos Vinicius @bymarkone
github.com/bymarkone !
Renan Martins @renan89
THANK YOU