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

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.

D8de178c08fe406eceeba711709ed3da?s=128

Ben Smithett

May 22, 2015
Tweet

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