Successfully reported this slideshow.
Your SlideShare is downloading. ×

Reacticon Deck

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 22 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

Reacticon Deck

  1. 1. ANDREW LEVINE • Front-End Architect • Owner of m2 Front-End • A glutton for punishment • Clearly not a designer
  2. 2. BE RESPECTFUL ✌️
  3. 3. WEBPACK + M2? 🤔 🤔 🤔
  4. 4. WHAT ABOUT PWA?
  5. 5. QUICK TOUR OF THE TALK WHY BUNDLE? BUNDLING CURRENT STATE HOW TO FIX IT? CAN I HELP?
  6. 6. WHY BUNDLE? 😿 😿 😿 😿
  7. 7. M2 BUNDLING – CURRENT STATE
  8. 8. M2 BUNDLING – CURRENT STATE home-page.js product- page.js catalog-page.js checkout- page.js account- page.js moment.js jquery.js knockout.js fotorama.js jquery-ui.js captcha.js collapsible.js https://www.kitty-kommerce.com/home /bundle.js
  9. 9. HOW DO WE FIX IT? • Create bundles per page type • Lazy load JS not used for first render • Sounds simple, right?
  10. 10. M2 BUNDLING – CURRENT STATE home-page.js jquery.js jquery-ui.js https://www.kitty-kommerce- optimized.com/home /home-bundle.js /commons-bundle.js slider.js featured- products.js /home-d7978asd79agsd.js PRELOAD LAZY LOAD
  11. 11. ALTERNATIVES TO WEBPACK • RequireJS Optimizer does its job as advertised • Manual bundle config with RequireJS optimizer (already being used in production by some)
  12. 12. SO, UHH…WHY WEBPACK? • Trojan Horse used to sneak in better tooling • Can incrementally compile Less or SASS • Compile modern JS (Oh hey Babel) • Support for standardized modules (ES2015), CommonJS, and AMD • Auto refresh page on JS change/Hot Reload CSS • Heavy FE community adoption • Share with PWA Studio project

Editor's Notes

  • Experimental work ahead
    0 guarantees this will ship
    Consider this a sneak-peek
  • Will be talking critically about some features
    Do *not* take this as an attack on any authors
    When commenting or tweeting, keep in mind there is a person or people behind every line of code
    Hindsight is 20/20, we all learn
  • - Current on again off again experiment
  • Default for new stores when released
    Migration of existing stores will take a few years at a minimum
    Focused on perf wins for existing stores
    Not mutually exclusive
  • HTTP 1.1 only allows 6 max TCP connections to a single host
    Promises of HTTP2 push helping did not pan out (cache & overpushing issues)
    https://tinyurl.com/goog-server-push
    Web packaging spec with h2 push better candidate for success - https://github.com/WICG/webpackage
    Note for PWA enthusiasts: web packaging spec would enable sending your “app” to others offline (think airdrop)
  • All JavaScript files – too many! Bundles abound with dead code
  • Always a good idea to put a large chart with lots of data in a slidedeck, right?
  • Per-site bundling
    Too much dead code makes kitty sad
  • Per-page bundling
  • Credits to Kril for original work on optimized r.js configuration
    Credits to Roman for work on this internally
    Credits to Shane O from JH for automating this work
  • Backend devs in Magento have great tooling…what about the FE?
    Rare situation where happier dev experience can === happier end-user experience

×