The Javascript Toolkit 2.0

18,286
-1

Published on

Version 2.0.
This is an attempt by some colleagues and I to organize the recent explosion of Javascript based technologies and frameworks into a coherent toolkit to be used by a web application developer.
After some time discussing and studying some of the technologies we'd like to include in this toolkit, we realized that more important that the tool itself, is the motivation that is behind that tool

Published in: Technology
0 Comments
64 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,286
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
189
Comments
0
Likes
64
Embeds 0
No embeds

No notes for slide

The Javascript Toolkit 2.0

  1. 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 2.0
  2. 2. 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, crossroads2
  3. 3. 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 3
  4. 4. 4 WHAT TOOLS CSS Preprocessors sass, less Preprocessors Libs compass, bourbon CSS Helpers susy, zenGrids, neat, normalize, modernizr, flexbox CSS Frameworks boostrap, foundation, skeleton
  5. 5. Let’s talk about this needs, And take a look at some tools 5
  6. 6. SCAFFOLD 6 Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design.
  7. 7. 7 bootstraps seed projects
  8. 8. AUTOMATION 8 Lots of tasks to execute. Compile. Test. Minify. Concat. Uglify. Etc.
  9. 9. 9 github.com/broccolijs/broccoli …ake’s (Make, Rake, etc)
  10. 10. AUTOMATION UTILITIES 10 Tasks that can be put in the build pipeline.
  11. 11. 11 minify-tools concat-tools watch
  12. 12. DEPENDENCY MANAGEMENT 12 Applications are getting complex. They rely on several other libraries and frameworks.
  13. 13. 13
  14. 14. DYNAMIC LOADING 14 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.
  15. 15. 15 github.com/cujojs/curl github.com/amdjs/amdjs-api github.com/amdjs/caolan/async
  16. 16. JAVASCRIPT PREPROCESSOR 16 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.
  17. 17. 17 github.com/webpack/webpack
  18. 18. TEST RUNNER 18 Execute and visualize test results
  19. 19. 19
  20. 20. TEST FRAMEWORKS 20 Write tests
  21. 21. 21
  22. 22. TESTING END TO END 22 Write tests for the whole application flow
  23. 23. 23 github.com/angular/protractor
  24. 24. TEST SUPPORT 24 Support for tests and others helpers
  25. 25. 25
  26. 26. APPLICATION 26 Applications on web are getting complex, need for frameworks that support app development.
  27. 27. 27 Google Closure Tools
  28. 28. APPLICATION UTILITIES 28 Several application features that can be necessary (e.g. routing)
  29. 29. 29
  30. 30. DOM UTILITIES 30 DOM selection and manipulation, some auxiliary functions, need for utilities that make work simple (and cross-browser)
  31. 31. 31
  32. 32. JS UTILITIES 32 Clean code, functional programming style, reactive programming features, helpers and utilities
  33. 33. 33 lodash.com github.com/kriskowal/q baconjs sugarjs chancejs microjs
  34. 34. CI 34 Continuous integration, continuous delivery, continuous deployment
  35. 35. 35 github.com/ryankee/concrete
  36. 36. OTHER LANGUAGES 36 Have a syntactic sugar element, or even completely different syntax (that in the end turn into javascript to run in the browser)
  37. 37. 37 github.com/clojure/clojurescript
  38. 38. WRAP UP 38 Difference Needs|Tools and their relation Agile demands for you as a developer Keep your mind open
  39. 39. For questions or suggestions: ! THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×