Slide 1
Slide 1 text
hands on with
the modern
front end stack
Slide 2
Slide 2 text
who am I?
Ben Smithett
Front End Dev @
@bensmithett / bensmithett.com
Slide 3
Slide 3 text
tomorrow @15:45
The UI is an
Application
Slide 4
Slide 4 text
today:
meet the stack
build an app
explore the bleeding edge
hack!
Slide 5
Slide 5 text
it’s not a lecture!
there are no stupid questions!
Slide 6
Slide 6 text
no, really… ask questions!
Slide 7
Slide 7 text
the plan
• Meet the stack!
• npm
• Managing dependencies
• Running tasks
• JS Modules
• Webpack for JS
• Babel
• ES6 & ES7
• React
• Webpack for CSS & images
Slide 8
Slide 8 text
the bonus plan (if we have time!)
• Hot module reloading
• Isomorphic React
• Styling with JS
Slide 9
Slide 9 text
laptops armed & ready?
github.com/bensmithett/dpcon-primer
npm install
npm start
Slide 10
Slide 10 text
meet
the modern front end stack
Slide 11
Slide 11 text
this stack has
united
the front end community
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
It is a recursive bacronymic abbreviation
for "npm is not an acronym”
https:/
/docs.npmjs.com/misc/faq
Slide 14
Slide 14 text
managing dependencies
with npm
Slide 15
Slide 15 text
yay! now I can use window.$
Slide 16
Slide 16 text
views/
css/
js/
jquery.js
jquery.fancy-slider.js
backbone.min.js
underscore.js
video-player.min.js
...
Slide 17
Slide 17 text
enter
dependency management
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
nested folder structure
by convention, JS packages are
expected to export a module
flat folder structure
no expected module format
depends on npm
Slide 20
Slide 20 text
workshop tasks
•Create a new package.json with npm init
•Search npm for React using npm search
•Install & save React to your package.json
with npm install
Slide 21
Slide 21 text
running tasks
with npm
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Grunt & Gulp require wrapper plugins
Slide 24
Slide 24 text
Just use the original command line tools
directly!
Slide 25
Slide 25 text
without npm scripts
node-sass --watch app.scss app.css
karma start ./config/karma.conf.js
http-server ./build -p 3000 --cors
with npm scripts
npm run sass
npm test
npm start
Slide 26
Slide 26 text
workshop tasks
•Run the existing npm test script
•Install http-server from npm & add a new
npm script to start a local server on port
1337
Slide 27
Slide 27 text
JavaScript
modules
Slide 28
Slide 28 text
the old way: expose global variables
// jquery.js
window.$ = function () { /* ... */ }
// fancy_modal.js
window.fancyModal = function () { /* ... */ }
// my_app.js
window.MyApp = {
init: function () {
$('.content').slideDown()
fancyModal('Hello!')
}
}
Slide 29
Slide 29 text
a better way: modules
// my_app.js
var $ = require('jquery')
var fancyModal = require('fancy_modal')
var init = function () {
$(".content").slideDown()
fancyModal('Hello!')
}
module.exports = {init: init}
Slide 30
Slide 30 text
module formats
AMD
CommonJS
ES6
Slide 31
Slide 31 text
workshop tasks
•Using CommonJS format, use the add()
function from the supplied add.js module
to add two numbers together.
console.log the result
•Run it with node my_app.js
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
webpack is a module bundler
// my_app.js
var add = require("./add")
console.log(add(4, 6))
Slide 34
Slide 34 text
webpack is a module bundler
// my_app.js
var add = require("./add")
console.log(add(4, 6))
•Browsers don’t have access to your local
filesystem
•Even if you can require individual files from
the server (i.e. AMD modules) the request is
asynchronous
Slide 35
Slide 35 text
a module bundler lets you
author as if you have access to
multiple files on a filesystem
but outputs a single JS file for
end users
Slide 36
Slide 36 text
workshop tasks
•Build a simple bundle with webpack
npm run 03
•Open up the generated file & look at it!
03_webpack/build/bundle.js
Slide 37
Slide 37 text
webpack config
Slide 38
Slide 38 text
workshop tasks
•Check out the webpack configuration in
03_webpack/webpack.config.js
Slide 39
Slide 39 text
webpack code splitting
Slide 40
Slide 40 text
webpack code splitting
my_app.js
myapp.com/home myapp.com/timeline
Slide 41
Slide 41 text
webpack code splitting
myapp.com/home
timeline.js
myapp.com/timeline
router.js
home.js
Slide 42
Slide 42 text
webpack common chunk extraction
myapp.com/home
timeline.js
myapp.com/timeline
router.js
home.js common.js
Slide 43
Slide 43 text
webpack gives you
powerful optimisation tools
what you do with them is
up to you
Slide 44
Slide 44 text
(previously known as 6to5)
Slide 45
Slide 45 text
javascript is evolving
not all browsers are keeping up
Slide 46
Slide 46 text
http:/
/kangax.github.io/compat-table/es5/
Slide 47
Slide 47 text
http:/
/kangax.github.io/compat-table/es6/
Slide 48
Slide 48 text
treat ES5 as a compile target
author in bleeding edge syntax
Slide 49
Slide 49 text
babel: transforms ES6 to equivalent ES5
`Hi ${name}. Welcome to ${city}!`
"Hi " + name + ". Welcome to " + city + "!";
Slide 50
Slide 50 text
babel: polyfills missing features
class Australian {
sayHello () { return “G'day" }
}
var _createClass = (function () { /* Babel polyfill... */ })();
function _classCallCheck(instance, Constructor) { /* Babel polyfill... */ }
var Australian = (function () {
function Australian() {
_classCallCheck(this, Australian);
}
_createClass(Australian, [{
key: "sayHello",
value: function sayHello() {
return "G'day";
}
}]);
return Australian;
})();
Slide 51
Slide 51 text
babel: checks your code at compile time
const speedOfLight = 299792458
speedOfLight = 17
COMPILE ERROR
Line 2: "speedOfLight" is read-only
Slide 52
Slide 52 text
workshop tasks
•Open babeljs.io/repl & play around with
some new ES6 features!
•class
•const
•destructuring
•default function arguments
•arrow functions
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
webpack loaders
Loaders allow you to preprocess files
as you require() or “load” them.
Slide 55
Slide 55 text
webpack loaders
module.exports = {
module: {
loaders: [
{
test: /\.js$/,
loaders: ["babel"]
}
]
}
};
Slide 56
Slide 56 text
workshop tasks
Let’s build a real app!
•From the root folder, run npm run app
• If you haven’t installed Webpack, start a static web server instead
•Try changing the language in entry.js
congratulations!
you now have a modular JS app written in ES6 syntax,
compiled by Babel & bundled by Webpack!
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
react fast facts
Slide 59
Slide 59 text
built (& battle tested in prod) by
the Facebook & Instagram team
Slide 60
Slide 60 text
a JavaScript library for
building user interfaces
Slide 61
Slide 61 text
uses virtual DOM diffing
to make the minimum possible set
of DOM operations
Slide 62
Slide 62 text
react important facts
Slide 63
Slide 63 text
re-render the entire app
whenever data changes
Slide 64
Slide 64 text
describe what your UI looks like
at a given point in time
Slide 65
Slide 65 text
workshop tasks
•Demo the simple PhotoApp React
component
•Add a click event handler to PhotoApp
Slide 66
Slide 66 text
react components can be
composed
Slide 67
Slide 67 text
const Child = React.createClass({
render () {
return
}
})
const Parent = React.createClass({
render () {
return (
)
}
})
Slide 68
Slide 68 text
every React component has
props & state
Slide 69
Slide 69 text
props
• Passed down from parent to child
• Cannot be directly changed
Slide 70
Slide 70 text
const Child = React.createClass({
render () {
return
}
})
const Parent = React.createClass({
render () {
return (
)
}
})
Slide 71
Slide 71 text
const Child = React.createClass({
render () {
return
)
}
})
Name: {this.props.name}
}
})
const Parent = React.createClass({
render () {
return (
Slide 72
Slide 72 text
state
• Local data for each component
• Can be changed via this.setState
• Every state change causes a new
render()
Slide 73
Slide 73 text
const Counter = React.createClass({
getInitialState () {
return {count: 0}
},
increment () {
this.setState({
count: this.state.count + 1
})
},
render () {
return (
Count: {this.state.count}
)
}
})
Slide 74
Slide 74 text
workshop tasks
•Build the PhotoThumb component
•Render a PhotoThumb for each photo in
the supplied data
•When a PhotoThumb is clicked, store that
photo in PhotoApp’s state
•Build a PhotoDetail component
•Pass the currently selected photo into
PhotoDetail as a prop
Slide 75
Slide 75 text
building a CSS bundle with
webpack
Slide 76
Slide 76 text
import React from 'react'
const FancyButton = React.createClass({
render () {
return Hi
}
})
Slide 77
Slide 77 text
import React from 'react'
import 'css/components/fancy-btn'
const FancyButton = React.createClass({
render () {
return Hi
}
})
Slide 78
Slide 78 text
workshop tasks
•Configure webpack so that it can require
CSS
•Style the app, requiring each component’s
CSS dependencies
Slide 79
Slide 79 text
hot module replacement
Slide 80
Slide 80 text
Hot Module Replacement exchanges,
adds, or removes modules while an
application is running without a page
reload.
Slide 81
Slide 81 text
Reminder
Webpack bundles all of your individual
modules into a giant array
and looks a module up in that array
whenever another module requires it
Slide 82
Slide 82 text
Hot Module Replacement
Small client runtime polls dev server
When a file changes, client runtime loads
new version
Module stored in array is updated
Slide 83
Slide 83 text
Advantages
Real time updates as you edit JS views &
CSS
Client state is maintained (even if you had
to click 5 things to get it in that state)
Slide 84
Slide 84 text
demo
•CSS
•JS
•JS with state (i.e. an input)
Slide 85
Slide 85 text
workshop tasks
•Configure your app to use hot module
reloading
•Experiment!
Slide 86
Slide 86 text
isomorphic javascript
Slide 87
Slide 87 text
Reusing the same JavaScript on the
server & client.
Slide 88
Slide 88 text
http:/
/bensmithett.github.io/going-
isomorphic-with-react
Slide 89
Slide 89 text
universal
isomorphic javascript
Slide 90
Slide 90 text
progressive
universal
isomorphic javascript
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
React.renderToString()
This is my photo app
Slide 93
Slide 93 text
Generate real HTML on the server
When client JS loads, mount onto server-
rendered HTML, adding event listeners
Reuse the same React components on the
client & server!
Slide 94
Slide 94 text
demo
•http:/
/sample-react-rails-app.herokuapp.com/
Slide 95
Slide 95 text
workshop tasks
•npm run isomorphic
Slide 96
Slide 96 text
styling with
javascript
Slide 97
Slide 97 text
Who uses a CSS Preprocessor?
Slide 98
Slide 98 text
EVERYONE!
Slide 99
Slide 99 text
Why?
Slide 100
Slide 100 text
variables
functions
loops
conditionals
… real programming language things!
Slide 101
Slide 101 text
javascript already has all those things!
Slide 102
Slide 102 text
var myStyles = {
color: colors.red,
backgroundColor: signedInUser ? colors.green : colors.grey,
backgroundImage: CDNPathFor('forest_bg.png'),
width: Math.round(viewportSize / 2) + 'px'
}
Slide 103
Slide 103 text
var totalCols = 12
var gridColClasses = {}
for (var i = 1; i <= totalCols; i++) {
gridColClasses['col-' + i] = {
width: ((100 / totalCols) * i) + '%'
}
}
Slide 104
Slide 104 text
var styles = {
border: '2px solid #0f0',
height: '100px',
width: '100px',
float: left
}
var PhotoThumb = React.createClass({
render () {
return (
)
}
})
Slide 105
Slide 105 text
https:/
/github.com/js-next/react-style
https:/
/github.com/jsstyles/jss
Slide 106
Slide 106 text
workshop tasks
•Convert your app’s styles to JavaScript!
Slide 107
Slide 107 text
extras!
•React component lifecycle
•CSS Modules