Javascript toolkit-2.0
-
Upload
thoughtworks -
Category
Technology
-
view
676 -
download
0
description
Transcript of Javascript toolkit-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.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;
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