Present and Future of Front End Development in Magento 2

Presentation given at Mage Titans Manchester, 12th November 2016.

3. Front-End Development in Magento 2 [ Present and Future of ]
4. We Hold This Truth to be Self Evident Front end development revs itself faster than Magento can rev its front end framework.
5. Prototype jQuery Angular Backbone Ember React Moo Tools Prototype Netscape Vue Knockout ? ? ?? ? ?
6. So Why a Front end? Magento ❤ the out of little "Mom & Pop" shops.
7. So Why a Front end? Some customers are optimising for longevity, rather than coolness.
8. The Present
9. Developer Experience Security Capability Performance
10. Developer Experience Security Capability Performance D B A- B
11. Developer Experience Decrease time to build things. Make developers love working with your platform, or at least not dislike it. Minimise WTFs/min
12. Sass An extension to CSS, similar to LESS. Developers tend to prefer it. Magento noticed.
13. Fast Compilation Possible to measure Magento's Grunt, or setup:static- content:deploy in minutes. Frontools: ~6 seconds
14. Watch: What? Goal: I change a thing, I reload, I see my change.
15. Watch: How? Make compilation fast, so you can do it all the time.
16. ES6: What? import $ from 'jquery'; const component = (config, element) => $(element).hide(); export default component;
17. ES6: How? Compilation to "normal" JavaScript, for browser support. Handled by a tool called Babel, easily integrated into Grunt/ Gulp.
18. ES6: Why? It's a better language, and it represents the future. For a moderate increase in build complexity, you get huge benefits in language niceness and sensibility.
19. Performance Magento is okay, certainly a huge improvement on
 Magento 1. Best practice: Use AJAX for all customer data, to maximise varnish usage.
20. Capability If not state of the art, is it at least possible to build ambitious things? Yeah, it is actually. So what’s the problem?
21. Nobody Understands It
22. What to Do Documentation, training, building expertise over time, killing old habits. Magento need to adopt their own best practices.
23. Security What’s next for the future of web security? What do we need to do? What does Magento need to do?
24. Sub-Resource Integrity: What? <!-- Run only if the file matches the hash --> <script src="..." integrity="sha384-oqVu...JwY8wC" ></script>
25. Sub-Resource Integrity: How? The hash is in your markup, so is calculated at build time. SRI checks whether the files you deployed are the ones you are getting. If it's different, it won't run. Your site might break, but your customers are safe.
26. Sub-Resource Integrity: 99% Build a hash map as part of the build process. Serve it on the front end. Use Require JS' onNodeCreated hook to add the integrity attribute.
27. Content Security Policy: How? A special HTTP header that tells the browser from which hosts it can load things. You tell it to only trust the domains you are expecting: Your CDN, tagmanager.google.com, etc. When used properly, it makes XSS much more difficult.
28. Content Security Policy: 100% Remove all inline scripts. This means full migration to JS components, rather than inline calls to require(). Add a configuration field for allowed hosts. Send it as a header in every request.