Modern javascript
2 likes1,218 views
The document provides an overview of the modern JavaScript ecosystem. It discusses the main execution environments (browsers, Node.js, io.js), web servers (Express, Hapi, Koa), package managers (NPM, Bower), task runners (Grunt, Gulp, Broccoli), front-end frameworks (jQuery, Backbone, Angular, Ember, React), module systems (AMD, CommonJS, ES6 modules), and JavaScript flavors/transpilers (CoffeeScript, TypeScript, Dart, ES6). It also outlines the typical development workflow from writing code to compilation/packaging to deployment on a web server to usage in a browser.
![Kevin Ball @kbal11
Sample Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
!
grunt.registerTask('default', ['jshint']);
};](https://image.slidesharecdn.com/modernjavascript-150624024711-lva1-app6891/85/Modern-javascript-40-320.jpg)
![Kevin Ball @kbal11
Sample gulpfile.js
var gulp = require(‘gulp’);
var jshint = require(‘gulp-jshint’);
!
gulp.task(‘jshint’, function() {
return gulp.src(['gulpfile.js', 'src/**/*.js', ‘test/**/*.js’])
.pipe(jshint())
.pipe(jshint.reporter(‘jshint-stylish’))
.pipe(jshint.reporter(‘fail’));
});
!
gulp.watch([‘src/**/*.js’, ‘test/**/*.js’], ‘jshint’);
gulp.task(‘default’, ‘jshint’);](https://image.slidesharecdn.com/modernjavascript-150624024711-lva1-app6891/85/Modern-javascript-42-320.jpg)
![Kevin Ball @kbal11
Sample Brocfile.js
// Brocfile.js
var concat = require('broccoli-concat'),
pickFiles = require('broccoli-static-compiler'),
mergeTrees = require('broccoli-merge-trees');
!
// concat the JS
var scripts = concat('app/', {
inputFiles: ['**/*.js'],
outputFile: '/assets/scripts.js'
});
// concat the CSS
var styles = concat('app/styles', {
inputFiles: ['**/*.css'],
outputFile: '/assets/styles.css'
});
!
// and merge all the trees together
module.exports = mergeTrees([scripts, styles]);](https://image.slidesharecdn.com/modernjavascript-150624024711-lva1-app6891/85/Modern-javascript-44-320.jpg)
More Related Content
![[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwednesdaywebinars-angularjs-141001063445-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Similar to Modern javascript (20)
Modern javascript
- 1. Kevin Ball @kbal11 Modern Javascript An Overview of the Javascript Ecosystem in 2015
- 2. Kevin Ball @kbal11 Why Javascript? Image Source: https://twitter.com/dberkholz/status/395922559151009792
- 3. Kevin Ball @kbal11 Why Javascript? Image Source: http://www.internetlivestats.com/total-number-of-websites/#trend
- 4. Kevin Ball @kbal11 Why Javascript? Source: Vision Mobile 2014 Developer Economics Report
- 5. Kevin Ball @kbal11 Great, where do I start? NPM Bower Node.js Grunt Gulp Broccoli Angular Ember BackboneExpress AMD React io.js Require.js ES6 Modules TypeScript CoffeeScript Dart jQuery
- 7. Kevin Ball @kbal11 Let’s Break It Down • Execution Environments (Browsers, node.js, io.js) • Webservers (Express, Hapi) • Package Management (NPM, Bower) • Task Runners and Build (Grunt, Gulp, Broccoli) • Front End Tools (jQuery, Backbone, Angular, Ember, React) • Module Systems (AMD, Require, Node Modules, ES6 Modules) • Javascript “Flavors” (CoffeeScript, TypeScript, Dart, ES6)
- 8. Kevin Ball @kbal11 Let’s Break It Down Your Application Code Client Application Lifecycle Compilation & Packaging Webserver User Browser
- 9. Kevin Ball @kbal11 Let’s Break It Down • Execution Environments (Browsers, node.js, io.js) • Webservers (Express, Hapi) • Package Management (NPM, Bower) • Task Runners and Build (Grunt, Gulp, Broccoli) • Front End Tools (jQuery, Backbone, Angular, Ember, React) • Module Systems (AMD, Require, Node Modules, ES6 Modules) • Javascript “Flavors” (CoffeeScript, TypeScript, Dart, ES6)
- 10. Kevin Ball @kbal11 Let’s Break It Down • Execution Environments (Browsers, node.js, io.js) • Webservers (Express, Hapi) • Package Management (NPM, Bower) • Task Runners and Build (Grunt, Gulp, Broccoli) • Front End Tools (jQuery, Backbone, Angular, Ember, React) • Module Systems (AMD, Require, Node Modules, ES6 Modules) • Javascript “Flavors” (CoffeeScript, TypeScript, Dart, ES6) Your Application Code
- 11. Kevin Ball @kbal11 • Execution Environments (Browsers, node.js, io.js) • Webservers (Express, Hapi) • Package Management (NPM, Bower) • Task Runners and Build (Grunt, Gulp, Broccoli) • Front End Tools (jQuery, Backbone, Angular, Ember, React) • Module Systems (AMD, Require, Node Modules, ES6 Modules) • Javascript “Flavors” (CoffeeScript, TypeScript, Dart, ES6) Let’s Break It Down Your Application Code Compilation & Packaging
- 12. Kevin Ball @kbal11 • Execution Environments (Browsers, node.js, io.js) • Webservers (Express, Hapi) • Package Management (NPM, Bower) • Task Runners and Build (Grunt, Gulp, Broccoli) • Front End Tools (jQuery, Backbone, Angular, Ember, React) • Module Systems (AMD, Require, Node Modules, ES6 Modules) • Javascript “Flavors” (CoffeeScript, TypeScript, Dart, ES6) Let’s Break It Down Your Application Code Webserver
- 13. Kevin Ball @kbal11 • Execution Environments (Browsers, node.js, io.js) • Webservers (Express, Hapi) • Package Management (NPM, Bower) • Task Runners and Build (Grunt, Gulp, Broccoli) • Front End Tools (jQuery, Backbone, Angular, Ember, React) • Module Systems (AMD, Require, Node Modules, ES6 Modules) • Javascript “Flavors” (CoffeeScript, TypeScript, Dart, ES6) Let’s Break It Down Your Application Code User Browser
- 14. Kevin Ball @kbal11 Let’s Break It Down Your Application Code Client Application Lifecycle Compilation & Packaging Webserver User Browser
- 15. Kevin Ball @kbal11 Your Application Code • Javascript “Flavors” • Front End Tools • Module Systems • Package Management
- 16. Kevin Ball @kbal11 Javascript “Flavors” • “Plain old Javascript” (EcmaScript 5) • EcmaScript 6 • Coffeescript • Typescript • Dart
- 17. Kevin Ball @kbal11 Javascript “Flavors” Image Source: http://hakumilol123.deviantart.com/art/Luffy-is-confused-332924357
- 18. Kevin Ball @kbal11 Javascript “Flavors” • ES5 requires the least work (no build required). • ES6 is where the world is going. • Coffeescript popular among ruby developers. • Typescript adds strict typing & structure. • Dart appears to be orphaned. • Some tools emphasize one flavor or another.
- 19. Kevin Ball @kbal11 Front End Tools • jQuery • Backbone • Angular • Ember • React
- 20. Kevin Ball @kbal11 jQuery • The “Browser API” that should have been. • Used on over 60% of ALL websites. • Easy to learn, easy to use.
- 21. Kevin Ball @kbal11 Backbone • Lightweight, minimalist MVC. • Straightforward to learn. • Minimalistic - doesn’t provide structure, just tools.
- 22. Kevin Ball @kbal11 Angular • Opinionated framework. • Huge community, backed by Google. • Very structured, written for testability. • Big learning curve from novice to expert. • 1.0 in Javascript, 2.0 in Typescript.
- 23. Kevin Ball @kbal11 Ember • Opinionated framework. • Big community focus. • Big learning curve. • Big performance focus. • Absorbing many of the best concepts from other frameworks. • Jumped in head-first on ES6.
- 24. Kevin Ball @kbal11 React • View layer only. • Built by & used extensively by Facebook. • “Different” approach to bindings and state. • Very fast.
- 25. Kevin Ball @kbal11 Front End Tools • If you’re just getting started, start with jQuery. • Backbone is the easiest next step. • Angular 2.0 looks good but they’re abandoning backwards compatibility. • Ember appears to be absorbing all of the good ideas, with focus on maintaining compatibility. • React is super cool and very different.
- 26. Kevin Ball @kbal11 Module Systems –Eloquent JavaScript “Most modern programming languages have some kind of module system built in. Not JavaScript. Once again, we have to invent something ourselves.”
- 27. Kevin Ball @kbal11 Module Systems • AMD (RequireJS) • CommonJS (Node Modules) • ES6 Modules
- 28. Kevin Ball @kbal11 Module Systems • AMD (RequireJS) • Asynchronous, suited to browser environment. • CommonJS (Node Modules) • ES6 Modules
- 29. Kevin Ball @kbal11 Module Systems • AMD (RequireJS) • Asynchronous, suited to browser environment. • CommonJS (Node Modules) • Synchronous. Package for browser with web pack or browserify. • ES6 Modules
- 30. Kevin Ball @kbal11 Module Systems • AMD (RequireJS) • Asynchronous, suited to browser environment. • CommonJS (Node Modules) • Synchronous. Package for browser with web pack or browserify. • ES6 Modules • The future.
- 31. Kevin Ball @kbal11 Package Management • NPM • bower
- 32. Kevin Ball @kbal11 Package Management • NPM • Node Package Manager • bower
- 33. Kevin Ball @kbal11 Package Management • NPM • Node Package Manager. • Bower • “Front End Package Manager”
- 34. Kevin Ball @kbal11 Let’s Break It Down Your Application Code Client Application Lifecycle Compilation & Packaging Webserver User Browser
- 35. Kevin Ball @kbal11 Compilation and Packaging • Minifiers and Concatinators • Compilers and Transpilers • Task Runners to get it all done
- 36. Kevin Ball @kbal11 Minifiers and Concatinators • Exist to minimize the number and size of web requests. • “Rewrite” javascript changing names of all internal variables to as short as possible. • Concatinators put it all together to only require one request. • Source maps allow you to trace it back for debug.
- 37. Kevin Ball @kbal11 Compilers and Transpilers • How you get from ES6/CoffeeScript/TypeScript/ etc to “Plain Old Javascript”. • Typically run first in your build chain. • Source maps doubly important.
- 38. Kevin Ball @kbal11 Task Runners • Grunt • Gulp • Broccoli
- 39. Kevin Ball @kbal11 Task Runners: Grunt • Most popular task runner in Node world. • Configuration based using JSON Objects. • Communication between tasks via files.
- 40. Kevin Ball @kbal11 Sample Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { globals: { jQuery: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); ! grunt.registerTask('default', ['jshint']); };
- 41. Kevin Ball @kbal11 Task Runners: Gulp • 2nd most popular Node task runner. • Code over configuration. • Communication between tasks as pipes.
- 42. Kevin Ball @kbal11 Sample gulpfile.js var gulp = require(‘gulp’); var jshint = require(‘gulp-jshint’); ! gulp.task(‘jshint’, function() { return gulp.src(['gulpfile.js', 'src/**/*.js', ‘test/**/*.js’]) .pipe(jshint()) .pipe(jshint.reporter(‘jshint-stylish’)) .pipe(jshint.reporter(‘fail’)); }); ! gulp.watch([‘src/**/*.js’, ‘test/**/*.js’], ‘jshint’); gulp.task(‘default’, ‘jshint’);
- 43. Kevin Ball @kbal11 Task Runners: Broccoli • Really a build tool, not a task runner. • Newest of the 3, still immature (especially on Windows). • Tree-based system.
- 44. Kevin Ball @kbal11 Sample Brocfile.js // Brocfile.js var concat = require('broccoli-concat'), pickFiles = require('broccoli-static-compiler'), mergeTrees = require('broccoli-merge-trees'); ! // concat the JS var scripts = concat('app/', { inputFiles: ['**/*.js'], outputFile: '/assets/scripts.js' }); // concat the CSS var styles = concat('app/styles', { inputFiles: ['**/*.css'], outputFile: '/assets/styles.css' }); ! // and merge all the trees together module.exports = mergeTrees([scripts, styles]);
- 45. Kevin Ball @kbal11 Task Runners • Grunt - Good for beginners, most familiar style.! • Gulp • Broccoli
- 46. Kevin Ball @kbal11 Task Runners • Grunt • Gulp - Good for Linux/piped background.! • Broccoli
- 47. Kevin Ball @kbal11 Task Runners • Grunt • Gulp • Broccoli - The next big thing. Experts should check it out.
- 48. Kevin Ball @kbal11 Let’s Break It Down Your Application Code Client Application Lifecycle Compilation & Packaging Webserver User Browser
- 49. Kevin Ball @kbal11 Webserver • Execution Environments • Webservers
- 50. Kevin Ball @kbal11 Execution Environments • Browsers • Node.js • io.js
- 51. Kevin Ball @kbal11 Node.js • Server-side javascript execution framework • Built on Chrome’s v8 javascript runtime • Asynchronous, event-driven framework • Defines it’s own modules system
- 52. Kevin Ball @kbal11 io.js • Fork of Node.js • Moves much more quickly • More community-managed • In the process of merging back with node.js
- 53. Kevin Ball @kbal11 Webservers • Express • Hapi • Koa
- 54. Kevin Ball @kbal11 Webservers • Express • The de facto standard • Hapi • Koa
- 55. Kevin Ball @kbal11 Webservers • Express • The de facto standard • Hapi • Configuration over code • Koa
- 56. Kevin Ball @kbal11 Webservers • Express • The de facto standard • Hapi • Configuration over code • Koa • Minimalist successor to Express
- 57. Kevin Ball @kbal11 Let’s Break It Down Your Application Code Client Application Lifecycle Compilation & Packaging Webserver User Browser
- 58. Kevin Ball @kbal11 User Browser • The “Traditional” place where javascript runs • May be a desktop browser, but may also be on laptop, mobile browser, or even embedded within a mobile application. • Different browsers have different levels of spec support.
- 59. Kevin Ball @kbal11 Cross-Browser Support • Typically support last 2 versions of each browser. • Quickest way to good cross-browser support is use frameworks with good cross-browser support. • Things mostly break down on the bleeding edge.
- 60. Kevin Ball @kbal11 But really, where do I start? • yeoman • ember-cli Let someone else choose for you!
- 62. Kevin Ball @kbal11 Javascript is the Future I’ll see you there. Kevin Ball http://kevinball.com http://twitter.com/kbal11