Present and Future of Front End Development in Magento 2

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Front-End Development in Magento 2 [ Present and Future of ]

Slide 4

Slide 4 text

We Hold This Truth to be Self Evident Front end development revs itself faster than Magento can rev its front end framework.

Slide 5

Slide 5 text

Prototype jQuery Angular Backbone Ember React Moo Tools Prototype Netscape Vue Knockout ? ? ?? ? ?

Slide 6

Slide 6 text

So Why a Front end? Magento ❤ the out of little "Mom & Pop" shops.

Slide 7

Slide 7 text

So Why a Front end? Some customers are optimising for longevity, rather than coolness.

Slide 8

Slide 8 text

The Present

Slide 9

Slide 9 text

Developer Experience Security Capability Performance

Slide 10

Slide 10 text

Developer Experience Security Capability Performance D B A- B

Slide 11

Slide 11 text

Developer Experience Decrease time to build things. Make developers love working with your platform, or at least not dislike it. Minimise WTFs/min

Slide 12

Slide 12 text

Sass An extension to CSS, similar to LESS. Developers tend to prefer it. Magento noticed.

Slide 13

Slide 13 text

Fast Compilation Possible to measure Magento's Grunt, or setup:static- content:deploy in minutes. Frontools: ~6 seconds

Slide 14

Slide 14 text

Watch: What? Goal: I change a thing, I reload, I see my change.

Slide 15

Slide 15 text

Watch: How? Make compilation fast, so you can do it all the time.

Slide 16

Slide 16 text

ES6: What? import $ from 'jquery'; const component = (config, element) => $(element).hide(); export default component;

Slide 17

Slide 17 text

ES6: How? Compilation to "normal" JavaScript, for browser support. Handled by a tool called Babel, easily integrated into Grunt/ Gulp.

Slide 18

Slide 18 text

ES6: Why? It's a better language, and it represents the future. For a moderate increase in build complexity, you get huge beneﬁts in language niceness and sensibility.

Slide 19

Slide 19 text

Performance Magento is okay, certainly a huge improvement on  Magento 1. Best practice: Use AJAX for all customer data, to maximise varnish usage.

Slide 20

Slide 20 text

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?

Slide 21

Slide 21 text

Nobody Understands It

Slide 22

Slide 22 text

What to Do Documentation, training, building expertise over time, killing old habits. Magento need to adopt their own best practices.

Slide 23

Slide 23 text

Security What’s next for the future of web security? What do we need to do? What does Magento need to do?

Slide 24

Slide 24 text

Sub-Resource Integrity: What?

Slide 25

Slide 25 text

Sub-Resource Integrity: How? The hash is in your markup, so is calculated at build time. SRI checks whether the ﬁles you deployed are the ones you are getting. If it's diﬀerent, it won't run. Your site might break, but your customers are safe.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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 diﬃcult.

Slide 28

Slide 28 text

Content Security Policy: 100% Remove all inline scripts. This means full migration to JS components, rather than inline calls to require(). Add a conﬁguration ﬁeld for allowed hosts. Send it as a header in every request.

Slide 29

Slide 29 text

No content