Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The New Front End Stack: A really really really...

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.

Ben Smithett

May 22, 2015
Tweet

More Decks by Ben Smithett

Other Decks in Programming

Transcript

  1. npm Not just for JS CSS frameworks Sass mixins &

    functions Icon sets … anything on GitHub or the registry with a package.json
  2. 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" } }
  3. 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" } }
  4. 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" } }
  5. 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" } }
  6. 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" } }
  7. The JS you probably know & hate with the firey

    passion of a thousand suns love is ECMAScript 3
  8. 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!
  9. 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!
  10. <Avatar href="/profile/ben"> <img src="ben.jpg" /> </Avatar> React.createElement( Avatar, { href:

    "/profile/ben" }, React.createElement( “img", { src: "ben.jpg" } ) );
  11. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel

    Webpack Flux with React Karma & Jasmine Gulp
  12. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel

    Webpack Flux with React Karma & Jasmine Gulp
  13. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel

    Webpack Flux with React Karma & Jasmine Gulp
  14. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel

    ES6/ES7/JSX to ES5 transpiler Webpack Flux with React Karma & Jasmine Gulp
  15. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel

    ES6/ES7/JSX to ES5 transpiler Webpack Flux with React Karma & Jasmine Gulp
  16. Webpack is a Module Bundler Lets you author like you

    have access to individual modules as if they were files
  17. 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;
  18. npm Package Manager ES6, ES7 & JSX Authoring syntax Babel

    ES6/ES7/JSX to ES5 transpiler Webpack Flux with React Karma & Jasmine Gulp
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. Karma is a test runner Run tests in multiple browsers

    (even via SauceLabs!) CLI Browser-based debugger
  26. 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
  27. 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
  28. 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
  29. 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”
  30. 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
  31. 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
  32. 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)