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
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…
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
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