More Related Content
Similar to Frontend Application Architecture, Patterns, and Workflows
Similar to Frontend Application Architecture, Patterns, and Workflows (20)
More from Treasure Data, Inc.
More from Treasure Data, Inc. (20)
Frontend Application Architecture, Patterns, and Workflows
- 9. 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)
})
- 15. Assets
// Create <img>
var logo = document.createElement('img')
// "/assets/0dcbbaa701328a3c262cfd45869e351f.png"
logo.src = require('./logo.png')
- 18. 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')
- 21. // 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()
})
}
- 22. // 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()
})
}
}
- 25. 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
- 33. 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