frontend application architecture, patterns, and workflows
TRANSCRIPT
Future JavaScript ● ES6, ES7 ● Write better JavaScript ● Backwards compatible ● Usable today => babeljs.io
ES7: Async function async function getUserFileList (id) { var user = await User.get(id) var fileList = await s3.listObjects({ Bucket: user.bucket }) return fileList.Contents } getUserFileList(1).then(list => { console.log('list', list) })
Transpilation module: { loaders: [{ loader: 'babel', test: /\.(js|jsx)$/, exclude: /node_modules/ }] }
Assets // Create <img> var logo = document.createElement('img') // "/assets/0dcbbaa701328a3c262cfd45869e351f.png" logo.src = require('./logo.png')
DefinePlugin example // process.env.ENV = 'production' if (ENV === 'production') // true log('production message') if (ENV === 'development') // false log('development message') // After minification log('production message')
// No dependency injection var fetch = require('fetch') module.exports = function get (id) { return fetch('/resource/' + id) .then(function checkAuth (response) { if (response.status === 401) document.location.refresh() }) }
// Dependency injection module.exports = function getFactory (params) { var location = params.location var fetch = params.fetch return function get (id) { return fetch('/resource/' + id) .then(function checkAuth (response) { if (response.status === 401) location.refresh() }) } }
immutable.js var Immutable = require('immutable') var map1 = Immutable.Map({a:1, b:2, c:3}) var map2 = map1.set('b', 50) map1.get('b') // 2 map2.get('b') // 50
Links ● https://babeljs.io/ ● https://babeljs.io/docs/learn-es6/ ● https://github.com/lukehoban/ecmascript-asyncawait ● http://webpack.github.io/ ● https://github.com/ryanseddon/source-map/wiki/ ● http://facebook.github.io/immutable-js/ ● https://github.com/creationix/nvm ● http://eslint.org/ ● https://github.com/babel/babel-eslint ● http://gaearon.github.io/react-hot-loader/ ● http://webpack.github.io/docs/hot-module-replacement-with-webpack.html