Javascript toolkit

3,930 views
3,810 views

Published on

Toolkit Javascript: 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.

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

No Downloads
Views
Total views
3,930
On SlideShare
0
From Embeds
0
Number of Embeds
1,553
Actions
Shares
0
Downloads
33
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Javascript toolkit

  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 Marcos Vinicius @bymarkone Renan Martins @renan89
  2. 2. THE IDEA OF THE TOOLKIT 2 The Idea Of A Toolkit
  3. 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. 4
  5. 5. AGILE PURPOSE FOR DELIVERY 5 Deliver Fast Deliver Often Deliver Value
  6. 6. AGILE CHANGES IN PROCESS 6 Iterations User Stores Planning Stand Ups Retrospectives Inception Scrum - Lean - XP Kanban Team Communication …
  7. 7. TECHNICAL SUPPORT FOR AGILE 7 Continuous Delivery Continuous Integration Evolutionary Architecture Evolutive Design TDD Lot’s of Automation Programming Languages Design Patterns …
  8. 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. 9 And Javascript?
  10. 10. 10 The great enabler…
  11. 11. https://github.com/bymarkone/ javascript-toolkit 11
  12. 12. NEED MOTIVATION TOOLS Scaffold 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 different 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 different syntax (that in the end turn into javascript to run in the browser) coffeescript, clojurescript, typescript Other Javascript ?? concat, minify, uglify, lint, jshint, watch, page, director, crossroads, moment.js 12
  13. 13. 13 WHAT TOOLS CSS Preprocessors sass, less Preprocessors Libs compass, bourbon CSS Helpers susy, zenGrids, neat, normalize, modernizr, flexbox CSS Frameworks boostrap, foundation, skeleton
  14. 14. Let’s talk about this needs, And take a look at some tools 14
  15. 15. SCAFFOLD 15 Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design.
  16. 16. 16
  17. 17. BUILD - AUTOMATION 17 Lots of tasks to execute. Compile. Test. Minify. Concat. Uglify. Etc.
  18. 18. 18 github.com/broccolijs/broccoli
  19. 19. DEPENDENCY MANAGEMENT 19 Applications are getting complex. They rely on several other libraries and frameworks.
  20. 20. 20
  21. 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. 22 github.com/cujojs/curl github.com/webpack/webpack
  23. 23. TESTING 23 Testing is all around. Need to tests on different browsers, need to write the tests, need to run the tests, need to report test results.
  24. 24. 24 mocha, qunit, protractor, sinon, saucelabs, duck angular
  25. 25. APPLICATION 25 Applications on web are getting complex, need for frameworks that support app development.
  26. 26. 26
  27. 27. DOM UTILITIES 27 DOM selection and manipulation, some auxiliary functions, need for utilities that make work simple (and cross-browser)
  28. 28. 28
  29. 29. LANGUAGE UTILITIES 29 Clean code, functional programming style, reactive programming features, helpers and utilities
  30. 30. 30
  31. 31. 31 lodash.com github.com/kriskowal/q
  32. 32. CI 32 Continuous integration, continuous delivery, continuous deployment
  33. 33. 33 github.com/ryankee/concrete
  34. 34. OTHER LANGUAGES 34 Have a syntactic sugar element, or even completely different syntax (that in the end turn into javascript to run in the browser)
  35. 35. 35 github.com/clojure/clojurescript
  36. 36. OTHER JAVASCRIPT 36 Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design.
  37. 37. 37 minify-tools concat-tools
  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: ! Marcos Vinicius @bymarkone github.com/bymarkone ! Renan Martins @renan89 THANK YOU

×