Contenu connexe
Similaire à Frontend Application Architecture, Patterns, and Workflows
Similaire à Frontend Application Architecture, Patterns, and Workflows (20)
Plus de Treasure Data, Inc.
Plus de 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