Your SlideShare is downloading. ×

Javascript toolkit

3,089
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.

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
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,089
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
28
Comments
0
Likes
11
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 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 Lot’s 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 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 WHAT TOOLS CSS Preprocessors sass, less Preprocessors Libs compass, bourbon CSS Helpers susy, zenGrids, neat, normalize, modernizr, flexbox CSS Frameworks boostrap, foundation, skeleton
  • 14. Let’s 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 different 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 different 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 Difference 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