This document outlines a toolkit of JavaScript technologies and frameworks organized into categories like scaffolding, automation, testing, applications, and utilities. It provides examples of specific tools under each category, such as Yeoman and Grunt for scaffolding and automation, Jasmine and Mocha for testing frameworks, and jQuery, Lodash and Underscore for utilities. The goal is to organize the growing number of JavaScript tools into a coherent toolkit to help web developers.

1. 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. Vamos falar sobre as necessidades,
E então olhar para algumas ferramentas
2

3. SCAFFOLD (ANDAIME, ESQUELETO)
3
Iniciar novos projetos.
Produtividade.

4. 4
bootstraps seed
projects

5. AUTOMAÇÃO
5
Diversas tarefas/rotinas que precisam
ser executadas frequentemente.
!
Compile, Test, Minify, Concat, Uglify, Etc.

6. 6
github.com/broccolijs/broccoli
…ake’s (Make, Rake, etc)

7. 7
concat-tools watch
minify-tools

8. 8

9. GERENCIAMENTO DE DEPENDÊNCIAS
9
Aplicações JavaScript estão ficando
cada vez maiores e complexas.
!
Dependem cada vez mais de diversos
frameworks e bibliotecas

10. 10

11. CARREGAMENTO PREGUIÇOSO
11
Grandes projetos estão divididos em
diferentes módulos.
Nem todos devem ser carregados de
uma vez.

12. 12
github.com/cujojs/curl
github.com/amdjs/caolan/async
github.com/amdjs/amdjs-api

13. TESTES
13
Executar e visualizar o resultado dos testes

14. 14

15. 15

16. FRAMEWORKS DE TESTES
16
Escrever os testes
!
Utilidades para mocking, spying, etc

17. 17

18. 18

19. TESTE PONTA A PONTA
19
Escrever testes que exercitam todo o
fluxo da aplicação, da mesma maneira
como um usuário final faria.

20. 20

21. 21

22. TESTES SEM GUI
22
Como testar JavaScript sem um
navegador com interface gráfica?

23. 23

24. APLICAÇÕES
24
As aplicações estão ficando complexas e
diversos frameworks foram criados
para suportar o desenvolvimento delas.

25. 25
Google Closure Tools

26. UTILITÁRIOS PARA APLICAÇÕES
26
Você não precisa de um canhão para
matar uma mosca.

27. 27

28. UTILITÁRIOS PARA MANIPULAÇÃO DO DOM
28
Seleção e manipulação do DOM e
funções auxiliares que funcionam
cross-browser

29. 29

30. SIMPLES E INDISPENSÁVEIS UTILITÁRIOS
30
Código limpo; Programação funcional;
Helpers e Utilitários;

31. 31
lodash.com
github.com/kriskowal/q
baconjs sugarjs chancejs microjs

32. OUTRAS LINGUAGENS. ABSTRAÇÕES
32
github.com/clojure/clojurescript

33. NEED MOTIVATION TOOLS
Scaffold
Several 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 33

34. 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 flow
protractor, casperjs,
nightwatch.js, watir webdriver
Test Support Support tests and helpers phantomjs, zombie.js, sinon,
chai
Dom Utilities
DOM 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)
Language
Have a syntactic sugar element, or even completelly
different syntax (that in the end turn into javascript to
run in the browser)
coffeescript, clojurescript,
typescript 34

35. 35
WHAT TOOLS
CSS Preprocessors sass, less
Preprocessors Libs compass, bourbon
CSS Helpers susy, zenGrids, neat, normalize,
modernizr, flexbox
CSS Frameworks boostrap, foundation, skeleton

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

37. MUITO OBRIGADO
Dúvidas e sugestões:
!
rmartins@thoughtworks.com