bad idea. The reason is that every JavaScript file included in the page runs in the same scope. If you have global variables or functions in your code, scripts included after yours that contain the same variable and function names will overwrite your variables/functions.
good methodologies, patterns, or better technologies to make our code to be maintained easier. “A bug could be fixed within 10 mins by a newbie, but a good developer is willing spend 4 hours to make it better.”
variables Ease of define dependencies No dependencies Load modules asynchronously No compile needed by default Ease of define dependencies Always need to compile Synchronous loading by a single file (via global) define(['./a', './b'], function (a, b) {! }); var Acl = require('js/acl/acl.js');
app/media/js/admin/acl/acl.js • The stylesheet will be injected into HTML with <style> tag • The images inside will be converted to Data URIs. Define dependencies between JS and CSS
var list = ['<ul>',! ' <li>Buy Milk</li>',! ' <li>Be kind to Pandas</li>',! ' <li>Forget about Dre</li>',! '</ul>'].join(''); ES5 // This doesn't work! var list = '<ul>! <li>Buy Milk</li>! <li>Be kind to Pandas</li>! <li>Forget about Dre</li>! </ul>';! // This does, but urgh… ! var list = '<ul>\! <li>Buy Milk</li>\! <li>Be kind to Pandas</li>\! <li>Forget about Dre</li>\! </ul>'; // This is the most common way, and urgh, too…! var list = '<ul>' +! ' <li>Buy Milk</li>' +! ' <li>Be kind to Pandas</li>' +! ' <li>Forget about Dre</li>' +! '</ul>'; ES6 // This works!! var list = `<ul>! <li>Buy Milk</li>! <li>Be kind to Pandas</li>! <li>Forget about Dre</li>! </ul>`;! http://christianheilmann.com/2015/08/28/es6-for-now-template-strings/
• CSS in JS - Inline style in JavaScript? • Easy to learn • Embracing Functional Programming • One-way data flow model • Impacting different areas • ImmutableJS, GraphQL Why so Popular?
</button> <Button kind="danger" ! size="medium" ! solid>Delete</Button> Button New Way Using Class Names Using React.js Old Way Legible & Less Guessing
we want, picking up technologies for right abstraction is crucial. No single library can fulfil our need. Can we build an app without a single DOM element?
➡ DOM • react-canvas in Browser • JSX ➡ Canvas • react-isomorphics in Server • JSX ➡ HTML • react-native in iOS • JSX ➡ UIKit • react-native in Android • JSX ➡ android.view
➡ ➡ ! ! ! Will these tools go out of fashion in the following 18 months? POSSIBLY! However, everything is becoming more mature and future-compatible We developers just need to choose right tools to do improvements