The New Front End Stack: A really really really high level introduction

A quick talk I gave to the wider dev team at Envato to introduce everyone to the stack we're using for our front end.

Transcript

1. The New Front End Stack A really really really high level introduction
2. npm ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp
3. npm ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp
4. npm What does “npm” stand for?
5. npm a recursive bacronymic abbreviation for "npm is not an acronym"
6. npm Kind of like Bundler + RubyGems + some other stuff
7. npm Not just for JS CSS frameworks Sass mixins & functions Icon sets … anything on GitHub or the registry with a package.json
8. package.json { "name": "our-project", "dependencies": { "react": "^0.13.3" }, "engines": { "node": "0.10.38" }, "scripts": { "test": "karma start config/karma.conf.js", "build": "gulp build:production" } }
9. package.json { "name": "our-project", "dependencies": { "react": "^0.13.3" }, "engines": { "node": "0.10.38" }, "scripts": { "test": "karma start config/karma.conf.js", "build": "gulp build:production" } }
10. package.json { "name": "our-project", "dependencies": { "react": "^0.13.3" }, "engines": { "node": "0.10.38" }, "scripts": { "test": "karma start config/karma.conf.js", "build": "gulp build:production" } }
11. package.json { "name": "our-project", "dependencies": { "react": "^0.13.3" }, "engines": { "node": "0.10.38" }, "scripts": { "test": "karma start config/karma.conf.js", "build": "gulp build:production" } }
12. package.json { "name": "our-project", "dependencies": { "react": "^0.13.3" }, "engines": { "node": "0.10.38" }, "scripts": { "test": "karma start config/karma.conf.js", "build": "gulp build:production" } }
13. Bower is kinda like npm, but with a flattened dependency tree & it’s own registry
14. npm ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp
15. npm Package Manager ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp
16. npm Package Manager ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp
17. The JS you probably know & hate with the firey passion of a thousand suns love is ECMAScript 3
18. ES3 was finalised in 1999
19. ES4 proposed fixes for many of the issues but was abandoned in 2008
20. ES5.1 was published in 2009 It’s got some nice features! Tons of new methods on Object JSON Function.prototype.bind Array map, filter, reduce, forEach… and lots more!
21. IE8 supports pretty much none of ES5
22. ES6 is scheduled for release this year It’s pretty great
23. block scoped variables class constants arrow functions with lexical this default parameters spread operator [1, 2, ...params] template strings & interpolation `Hello ${name}` computed property names destructuring assignment [a, b] = [b, a]; {foo, bar} = options; modules import React from "react" promises and heaps more!
24. ES7 features are currently being proposed
25. JSX is a syntax for expressing a tree of UI components in JS
26. <Avatar href="/profile/ben"> <img src="ben.jpg" /> </Avatar> React.createElement( Avatar, { href: "/profile/ben" }, React.createElement( “img", { src: "ben.jpg" } ) );
27. npm Package Manager ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp
28. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel Webpack Flux with React Karma & Jasmine Gulp
29. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel Webpack Flux with React Karma & Jasmine Gulp
30. Browsers are starting to support some ES6 features but full support is a while away
31. Our target language is ES5 (we can shim ES5 in IE8)
32. Babel transpiles ES6, JSX & experimental ES7 into browser-friendly ES5
33. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel Webpack Flux with React Karma & Jasmine Gulp
34. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Flux with React Karma & Jasmine Gulp
35. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Flux with React Karma & Jasmine Gulp
36. CommonJS Module var React = require("react"); var Avatar = React.createClass(...); module.exports = Avatar;
37. ES6 Module import React from "react"; const Avatar = React.createClass(...); export default Avatar;
38. Webpack is a Module Bundler Lets you author like you have access to individual modules as if they were files
39. Webpack is a 
 web app-aware
 Module Bundler
40. import React from "react"; import "css/modules/avatar"; import Ben from "images/ben.jpg"; const Avatar = React.createClass({ render () { return ( <img className="avatar" src={Ben} /> ); } }); export default Avatar;
41. DEMO webpack CSS see http://bensmithett.com/smarter-css-builds-with-webpack/ for how this works
42. Webpack does lots of cool stuff Hot Module Reloading!
43. DEMO hot module reloading (go play with https://github.com/bensmithett/cssconfracer)
44. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Flux with React Karma & Jasmine Gulp
45. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Karma & Jasmine Gulp
46. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Karma & Jasmine Gulp
47. React is a JS library for building UIs Easily compose Component-based UIs Declaratively describe your UI at any point in time Don’t make imperative DOM changes - the library handles all direct DOM manipulation
48. Flux is an application architecture An alternative to MVC for web apps
49. MV* in JS
50. Flux
51. Flux React works really well as the View layer
52. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Karma & Jasmine Gulp
53. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Gulp
54. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Gulp
55. Jasmine is a test framework Assertion functions & matchers Mocks/spies/doubles
56. Karma is a test runner Run tests in multiple browsers (even via SauceLabs!) CLI Browser-based debugger
57. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Gulp
58. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Test framework & runner Gulp
59. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Test framework & runner Gulp
60. Gulp is a task runner Used for the same things you use rake or make for Grunt, Broccoli, Jake, Cake or officially “a streaming build system”
61. gulp.task('scripts', function() { return gulp.src("./js/**/*") .pipe(jshint()) .pipe(header('(function () {')) .pipe(footer('})();')) .pipe(remember('scripts')) .pipe(concat('app.js')) .pipe(gulp.dest('public/')); });
62. You probably don’t need Gulp …especially if you’re using webpack Just use npm scripts & run the CLI tools directly instead of via a Gulp plugin
63. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Test framework & runner Gulp
64. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel ES6/ES7/JSX to ES5 transpiler Webpack Amazing module bundler Flux with React Architecture & UI library Karma & Jasmine Test framework & runner Gulp Task runner (designed for builds)
65. Rails Asset Pipeline Death bed