Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Present and Future of Front End Development in Magento 2

Max Bucknell
November 15, 2016

Present and Future of Front End Development in Magento 2

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

Max Bucknell

November 15, 2016


  1. None
  2. None
  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

    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.
  29. None