Download as PDF, PPTX
![Transpilation module: { loaders: [{ loader: 'babel', test: /.(js|jsx)$/, exclude: /node_modules/ }] }](https://image.slidesharecdn.com/frontendapplicationarchitecturepatternsandworkflows-150518063214-lva1-app6891/75/Frontend-Application-Architecture-Patterns-and-Workflows-12-2048.jpg)
Uploaded byTreasure Data, Inc.
Frontend Application Architecture, Patterns, and Workflows
The document discusses frontend application architecture, patterns, and workflows. It covers topics like transpilation with Babel, debugging, modules, assets, environments, dependency injection, immutability with Immutable.js, Flux architecture, and development workflows using tools like Node Version Manager, ESLint, and Webpack Hot Module Replacement.
Frontend Application Architecture, Patterns, and Workflows
- 1. Frontend Application Architecture, Patterns, andWorkflows César Andreu @CesarAndreu
- 2. Treasure Data ● ~2 years ● Full-stackengineer ○ Frontend ○ API
- 4.
- 5. Goals ● Improve dev experience ● Learnsomething new
- 6.
- 7. Future JavaScript ● ES6, ES7 ● Writebetter JavaScript ● Backwards compatible ● Usable today => babeljs.io
- 8. Some ES6 features ● Generators ● Classsyntax ● Module system ● Template strings
- 9. ES7: Async function asyncfunction 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.
- 12. Transpilation module: { loaders: [{ loader:'babel', test: /.(js|jsx)$/, exclude: /node_modules/ }] }
- 13.
- 14.
- 15. Assets // Create <img> varlogo = document.createElement('img') // "/assets/0dcbbaa701328a3c262cfd45869e351f.png" logo.src = require('./logo.png')
- 16.
- 17.
- 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.
- 20. Dependency Injection ● Use higher-orderfunctions ● No libraries needed ● Easier to test
- 21. // No dependencyinjection 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 overdoit! ● Static? Avoid DI ● Dynamic? Consider DI
- 24.
- 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.
- 27.
- 28. Node version manager ● Bothnode.js and io.js ● No magic https://github.com/creationix/nvm
- 29. eslint ● Catch errors early ● ES6with babel-eslint ● Cross-platform ● Great editor support
- 30. Webpack HMR ● Hot modulereplacement ● 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