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

Vamos falar sobre as necessidades,

E então olhar para algumas ferramentas

2

SCAFFOLD (ANDAIME, ESQUELETO)

3

Iniciar novos projetos.

Produtividade.

4

bootstraps seed projects

AUTOMAÇÃO

5

Diversas tarefas/rotinas que precisam ser executadas frequentemente.

!

Compile, Test, Minify, Concat, Uglify, Etc.

6

github.com/broccolijs/broccoli

…ake’s (Make, Rake, etc)

7

minify-tools

concat-tools watch

8

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

CARREGAMENTO PREGUIÇOSO

11

Grandes projetos estão divididos em diferentes módulos.

Nem todos devem ser carregados de uma vez.

12

github.com/cujojs/curl

github.com/amdjs/amdjs-api

github.com/amdjs/caolan/async

TESTES

13

Executar e visualizar o resultado dos testes

14

15

FRAMEWORKS DE TESTES

16

Escrever os testes

!

Utilidades para mocking, spying, etc

17

18

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

21

TESTES SEM GUI

22

Como testar JavaScript sem um navegador com interface gráfica?

23

APLICAÇÕES

24

As aplicações estão ficando complexas e diversos frameworks foram criados

para suportar o desenvolvimento delas.

25

Google Closure Tools

UTILITÁRIOS PARA APLICAÇÕES

26

Você não precisa de um canhão para matar uma mosca.

27

UTILITÁRIOS PARA MANIPULAÇÃO DO DOM

28

Seleção e manipulação do DOM e funções auxiliares que funcionam

cross-browser

29

SIMPLES E INDISPENSÁVEIS UTILITÁRIOS

30

Código limpo; Programação funcional; Helpers e Utilitários;

31

lodash.com

github.com/kriskowal/q

baconjs sugarjs chancejs microjs

OUTRAS LINGUAGENS. ABSTRAÇÕES

32

github.com/clojure/clojurescript

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

33

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 34

35

WHAT TOOLS

CSS Preprocessors sass, less

Preprocessors Libs compass, bourbon

CSS Helpers susy, zenGrids, neat, normalize, modernizr, flexbox

CSS Frameworks boostrap, foundation, skeleton

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

36

Dúvidas e sugestões: !

rmartins@thoughtworks.com

MUITO OBRIGADO