Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend Application Architecture, Patterns, and Workflows

3,068 views

Published on

César Andreu

Published in: Engineering
  • Be the first to comment

Frontend Application Architecture, Patterns, and Workflows

  1. 1. Frontend Application Architecture, Patterns, and Workflows César Andreu @CesarAndreu
  2. 2. Treasure Data ● ~2 years ● Full-stack engineer ○  Frontend ○  API
  3. 3. ♥ ramen
  4. 4. Goals ● Improve dev experience ● Learn something new
  5. 5. Application Architecture
  6. 6. Future JavaScript ● ES6, ES7 ● Write better JavaScript ● Backwards compatible ● Usable today => babeljs.io
  7. 7. Some ES6 features ● Generators ● Class syntax ● Module system ● Template strings
  8. 8. 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) })
  9. 9. Builds ● Transpilation ● Debugging ● Modules ● Assets
  10. 10. Transpilation module: { loaders: [{ loader: 'babel', test: /.(js|jsx)$/, exclude: /node_modules/ }] }
  11. 11. Debugging
  12. 12. Modules ● ES6 ● CommonJS ● AMD ● globals
  13. 13. Assets // Create <img> var logo = document.createElement('img') // "/assets/0dcbbaa701328a3c262cfd45869e351f.png" logo.src = require('./logo.png')
  14. 14. Environments ● development ● production ● staging ● test
  15. 15. DefinePlugin new webpack.DefinePlugin({ ENV: JSON.stringify(process.env.ENV) })
  16. 16. 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')
  17. 17. Application Patterns
  18. 18. Dependency Injection ● Use higher-order functions ● No libraries needed ● Easier to test
  19. 19. // 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() }) }
  20. 20. // 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() }) } }
  21. 21. DI guidelines ● Don't overdo it! ● Static? Avoid DI ● Dynamic? Consider DI
  22. 22. Immutability ● Predictable ● Transparent changes ● Easier to understand
  23. 23. 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
  24. 24. Flux Action Action Dispatcher Store View Unidirectional data flow
  25. 25. Application Workflows
  26. 26. Node version manager ● Both node.js and io.js ● No magic https://github.com/creationix/nvm
  27. 27. eslint ● Catch errors early ● ES6 with babel-eslint ● Cross-platform ● Great editor support
  28. 28. Webpack HMR ● Hot module replacement ● react-hot-loader ● style-loader
  29. 29. Contact ●  César Andreu ●  @CesarAndreu ●  github.com/cesarandreu ●  cesar@treasure-data.com Fin.
  30. 30. 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

×