Javascript toolkit-2.0
16 likes1,474 views
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.
Javascript toolkit-2.0
- 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
- 37. MUITO OBRIGADO Dúvidas e sugestões: ! rmartins@thoughtworks.com