The Javascript Toolkit 2.0

  • 7,558 views
Uploaded on

Version 2.0. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,558
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
69
Comments
0
Likes
29

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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