The Javascript Toolkit 2.0
Upcoming SlideShare
Loading in...5
×
 

The Javascript Toolkit 2.0

on

  • 7,411 views

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

Statistics

Views

Total Views
7,411
Views on SlideShare
7,040
Embed Views
371

Actions

Likes
28
Downloads
64
Comments
0

11 Embeds 371

http://www.scoop.it 226
https://twitter.com 48
http://localhost 39
http://127.0.0.1 37
http://tweetedtimes.com 8
https://www.linkedin.com 5
http://br.pinterest.com 4
http://www.slideee.com 1
http://gazeta.yandex.ru 1
http://kurapov.name 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Javascript Toolkit 2.0 The Javascript Toolkit 2.0 Presentation Transcript

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