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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

npm ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp

Slide 3

Slide 3 text

npm ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp

Slide 4

Slide 4 text

npm What does “npm” stand for?

Slide 5

Slide 5 text

npm a recursive bacronymic abbreviation for "npm is not an acronym"

Slide 6

Slide 6 text

npm Kind of like Bundler + RubyGems + some other stuff

Slide 7

Slide 7 text

npm Not just for JS CSS frameworks Sass mixins & functions Icon sets … anything on GitHub or the registry with a package.json

Slide 8

Slide 8 text

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" } }

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Bower is kinda like npm, but with a flattened dependency tree & it’s own registry

Slide 14

Slide 14 text

npm ES6, ES7 & JSX Babel Webpack Flux with React Karma & Jasmine Gulp

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

The JS you probably know & hate with the firey passion of a thousand suns love is ECMAScript 3

Slide 18

Slide 18 text

ES3 was finalised in 1999

Slide 19

Slide 19 text

ES4 proposed fixes for many of the issues but was abandoned in 2008

Slide 20

Slide 20 text

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!

Slide 21

Slide 21 text

IE8 supports pretty much none of ES5

Slide 22

Slide 22 text

ES6 is scheduled for release this year It’s pretty great

Slide 23

Slide 23 text

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!

Slide 24

Slide 24 text

ES7 features are currently being proposed

Slide 25

Slide 25 text

JSX is a syntax for expressing a tree of UI components in JS

Slide 26

Slide 26 text

React.createElement( Avatar, { href: "/profile/ben" }, React.createElement( “img", { src: "ben.jpg" } ) );

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Browsers are starting to support some ES6 features but full support is a while away

Slide 31

Slide 31 text

Our target language is ES5 (we can shim ES5 in IE8)

Slide 32

Slide 32 text

Babel transpiles ES6, JSX & experimental ES7 into browser-friendly ES5

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

CommonJS Module var React = require("react"); var Avatar = React.createClass(...); module.exports = Avatar;

Slide 37

Slide 37 text

ES6 Module import React from "react"; const Avatar = React.createClass(...); export default Avatar;

Slide 38

Slide 38 text

Webpack is a Module Bundler Lets you author like you have access to individual modules as if they were files

Slide 39

Slide 39 text

Webpack is a   web app-aware  Module Bundler

Slide 40

Slide 40 text

import React from "react"; import "css/modules/avatar"; import Ben from "images/ben.jpg"; const Avatar = React.createClass({ render () { return (

); } }); export default Avatar;

Slide 41

Slide 41 text

DEMO webpack CSS see http://bensmithett.com/smarter-css-builds-with-webpack/ for how this works

Slide 42

Slide 42 text

Webpack does lots of cool stuff Hot Module Reloading!

Slide 43

Slide 43 text

DEMO hot module reloading (go play with https://github.com/bensmithett/cssconfracer)

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Flux is an application architecture An alternative to MVC for web apps

Slide 49

Slide 49 text

MV* in JS

Slide 50

Slide 50 text

Flux

Slide 51

Slide 51 text

Flux React works really well as the View layer

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Jasmine is a test framework Assertion functions & matchers Mocks/spies/doubles

Slide 56

Slide 56 text

Karma is a test runner Run tests in multiple browsers (even via SauceLabs!) CLI Browser-based debugger

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Slide 60

Slide 60 text

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”

Slide 61

Slide 61 text

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/')); });

Slide 62

Slide 62 text

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