Upload
marcos-vinicius-santos
View
6.952
Download
0
Embed Size (px)
DESCRIPTION
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
Citation preview
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
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