1. 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 Marcos Vinicius @bymarkone Renan Martins @renan89

2. THE IDEA OF THE TOOLKIT 2 The Idea Of A Toolkit 3. 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. purpose: 4. 4 5. AGILE PURPOSE FOR DELIVERY 5 Deliver Fast Deliver Often Deliver Value 6. AGILE CHANGES IN PROCESS 6 Iterations User Stores Planning Stand Ups Retrospectives Inception Scrum - Lean - XP Kanban Team Communication 7. TECHNICAL SUPPORT FOR AGILE 7 Continuous Delivery Continuous Integration Evolutionary Architecture Evolutive Design TDD Lots of Automation Programming Languages Design Patterns 8. AGILE - TOOLKIT 8 Gradle, Maven, Ant, Ivy jUnit, TestNG, Cucumber Design, Analysis, Architecture Patterns Jenkins, GO, Snap, Bamboo Java, Ruby, Scala, Python, Clojure, Racket, Javascript www.thoughtworks.com/radar/ 9. 9 And Javascript? 10. 10 The great enabler 11. https://github.com/bymarkone/ javascript-toolkit 11 12. NEED MOTIVATION TOOLS Scaold Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design. yeoman Build / Automation Lots of tasks to execute. Compile. Test. Minify. Concat. Etc. grunt, gulp, broccoli 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, broserify, webpack Testing Testing is all around. Need to tests on dierent browsers, need to write the tests, need to run the tests, need to report test results. karma, jasmine, phatom, mocha, qunit, protractor, sinon, sourcelabs, duck angular Application Applications on web are getting complex, need for frameworks that support app development. angular, backbone, ember, knockout Dom Utilities DOM selection and maniputation, some auxiliary functions, need for utilities that make work simple (and cross- browser) jquey, zepto Language Utilities Clean code, functional programming style, reactive programming features, helpers and utilities lodash, underscore, promise, fn, q CI Continuous integration, continuous delivery, continuous deployment travis-ci, jenkins, concrete, semaphore, go, snap Other Languages Have a syntactic sugar element, or even completely dierent syntax (that in the end turn into javascript to run in the browser) coeescript, clojurescript, typescript Other Javascript ?? concat, minify, uglify, lint, jshint, watch, page, director, crossroads, moment.js 12 13. 13 WHAT TOOLS CSS Preprocessors sass, less Preprocessors Libs compass, bourbon CSS Helpers susy, zenGrids, neat, normalize, modernizr, exbox CSS Frameworks boostrap, foundation, skeleton 14. Lets talk about this needs, And take a look at some tools 14 15. SCAFFOLD 15 Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design. 16. 16 17. BUILD - AUTOMATION 17 Lots of tasks to execute. Compile. Test. Minify. Concat. Uglify. Etc. 18. 18 github.com/broccolijs/broccoli 19. DEPENDENCY MANAGEMENT 19 Applications are getting complex. They rely on several other libraries and frameworks. 20. 20 21. DYNAMIC LOADING 21 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. 22. 22 github.com/cujojs/curl github.com/webpack/webpack 23. TESTING 23 Testing is all around. Need to tests on dierent browsers, need to write the tests, need to run the tests, need to report test results. 24. 24 mocha, qunit, protractor, sinon, saucelabs, duck angular 25. APPLICATION 25 Applications on web are getting complex, need for frameworks that support app development. 26. 26 27. DOM UTILITIES 27 DOM selection and manipulation, some auxiliary functions, need for utilities that make work simple (and cross-browser) 28. 28 29. LANGUAGE UTILITIES 29 Clean code, functional programming style, reactive programming features, helpers and utilities 30. 30 31. 31 lodash.com github.com/kriskowal/q 32. CI 32 Continuous integration, continuous delivery, continuous deployment 33. 33 github.com/ryankee/concrete 34. OTHER LANGUAGES 34 Have a syntactic sugar element, or even completely dierent syntax (that in the end turn into javascript to run in the browser) 35. 35 github.com/clojure/clojurescript 36. OTHER JAVASCRIPT 36 Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design. 37. 37 minify-tools concat-tools 38. WRAP UP 38 Dierence Needs|Tools and their relation Agile demands for you as a developer Keep your mind open 39. For questions or suggestions: ! Marcos Vinicius @bymarkone github.com/bymarkone ! Renan Martins @renan89 THANK YOU