The document discusses frontend application architecture, patterns, and workflows. It covers topics like ES6 features and transpilation to enable modern JavaScript, dependency injection to make code more testable, immutable data to prevent bugs, and workflows like using Node Version Manager and ESLint. Hot module replacement with tools like Webpack and React enable faster development.

1. Frontend Application
Architecture, Patterns,
and Workflows
César Andreu
@CesarAndreu

2. Treasure Data
● ~2 years
● Full-stack engineer
○ Frontend
○ API

4. ♥ ramen

5. Goals
● Improve dev experience
● Learn something new

6. Application
Architecture

7. Future JavaScript
● ES6, ES7
● Write better JavaScript
● Backwards compatible
● Usable today => babeljs.io

8. Some ES6 features
● Generators
● Class syntax
● Module system
● Template strings

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

10. Builds
● Transpilation
● Debugging
● Modules
● Assets

12. Transpilation
module: {
loaders: [{
loader: 'babel',
test: /.(js|jsx)$/,
exclude: /node_modules/
}]
}

13. Debugging

14. Modules
● ES6
● CommonJS
● AMD
● globals

15. Assets
// Create <img>
var logo = document.createElement('img')
// "/assets/0dcbbaa701328a3c262cfd45869e351f.png"
logo.src = require('./logo.png')

16. Environments
● development
● production
● staging
● test

17. DefinePlugin
new webpack.DefinePlugin({
ENV: JSON.stringify(process.env.ENV)
})

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')

19. Application
Patterns

20. Dependency Injection
● Use higher-order functions
● No libraries needed
● Easier to test

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()
})
}
}

23. DI guidelines
● Don't overdo it!
● Static? Avoid DI
● Dynamic? Consider DI

24. Immutability
● Predictable
● Transparent changes
● Easier to understand

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

26. Flux
Action
Action
Dispatcher Store View
Unidirectional data flow

27. Application
Workflows

28. Node version manager
● Both node.js and io.js
● No magic
https://github.com/creationix/nvm

29. eslint
● Catch errors early
● ES6 with babel-eslint
● Cross-platform
● Great editor support

30. Webpack HMR
● Hot module replacement
● react-hot-loader
● style-loader

32. Contact
● César Andreu
● @CesarAndreu
● github.com/cesarandreu
● cesar@treasure-data.com
Fin.

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