keeping your head with magento - reacticon

Keeping your head with Magento

Reacticon 2020

Willem Wigman / integer_net GmbH@willemwigman / @integer_net

Watch back the recording of this presentation:https://www.youtube.com/watch?v=kGRkAQNzL1c&t=362m0s

https://twitter.com/willemwigman

https://twitter.com/integer_net/

https://www.youtube.com/watch?v=kGRkAQNzL1c&t=362m0s



Optimizing Luma - not easy

- Months of research- PageSpeed* from 0 to 90+- Wrote ultimate JavaScript

optimization guide, 8.984 words.

* We only measure mobile PageSpeed





In conclusion, Google does not like your 4+ mb of JS, nor your 1mb of CSS.

You can polish it and stick a flag in it. But this pile of JS doesn’t get prettier.

Google PageSpeed Update in March 2020, scores dropped back to 15 - 40.





Issues have been masked pretty well with critical CSS, but in real life projects the smallest customizations cause a large drop in performance.





Magento’s own tool [Baler] that bundled requireJS files, has been abandoned.

(still, do make use of MagePack or our advanced bundled method to at least improve the perceived performance for visitors)



https://www.integer-net.com/magento-2-javascript-bundling-integer-net-2/


PWA is not nailing it yet, either

PWA Studio currently ships with 4mb of resources (excluding images/media) on initial load.

1mb of this is JS.




eCommerce !== PWA

I’m experienced in React. I’ve studied JavaScript extensively and love to use modern JS frameworks.

But, I don’t believe the web should be apps by default.

Some websites could be more app-like, for sure.

And some are even nailing it. But currently those are unicorns.PWAs usually feel clunky to me. I’m sure that will improve...

But I am passionate about the web. And I don’t want to be an app developer.

I’ve been there, building Flash/Flex apps for years. And we all stepped away from that. Browsers have evolved. 4mb of JS is not needed for an interactive website. Nor for speed.




eCommerce !== PWA

I am a web developer.

I might build a PWA for the right use-case, sure.

But by default, I don’t think any eCommerce site is a use-case.

On contrary.

Recommended reading: “Second guessing the modern web”https://macwright.com/2020/05/10/spa-fatigue.html



https://macwright.com/2020/05/10/spa-fatigue.html


Where do we go from here?

Magento dropped the ball on Luma years ago.

Apart from the discussion “is PWA ready yet”... do we want PWA?




Where do we go from here?

We’re left with little alternative for middle market.

One could say we currently have NO proper solution to build a stable, performant webshop.




General mood

- “Makes me wanna quit”

- “Dropped frontend after

release”

- “Wrong choices”

- “There’s so much fun and

better things outside

Magento ecosystem”




Tech stack has degraded

“I lament the loss of learning via reverse engineering”.

- I feel this. Strongly.

Current PWA technologies do not lower the barrier of entry.The tech stack keeps growing together with levels of complexity.

This is partly the cause of Magento “Moving up-market”.

We want juniors to enter the market, startups, freelancers.




Reverse engineer this




developerHappiness--

I started Magento development with little PHP experience in 2011.Installed it with FTP and a commercial template.

I got something to work within no time. There were plenty of issues and I struggled making customizations, but I managed.

I learned and grew with every project / year / update.

I have a great passion for Magento and love the ecosystem.

But the trend we’ve been seeing is that freelancers and small agencies disappear.

And I’ve been wondering myself what to do next, for the last couple years.

Doing Magento 2 front-end development is. just. no. fun.




The mission

The solution:

We need to reduce complexity and ship less code.




The mission

Also




The mission

Also,




The mission

Also, we need to reduce complexity




The mission

Also, we need to reduce complexity,and ship less code.




Where am I going with this?

Beginning 2020 my wife asks me for a small webshop.

What should I use?

I even doubted, after 9 years of doing Magento. Should I use Magento for this?

Or, put her business on a SaaS solution?

(10k luxury webshop reference anyone?)




Can we create a great developer experience?

… of course I’m using Magento.

But now I have the choice: If I can do anything I want, how would I build a new Magento shop from scratch?

Particularly; for a small merchant, but with a pretty design, good performance and a lot of customizability?




separate the wheat from the chaff

What’s good about Luma?- Layout.xml- Blocks and viewModels- Routing, cookies, private-data- Caching

What’s “not that good” about Luma?- (all) Js libs: jQuery, require, knockout- UI-components- Layout complexity- Amount and complexity of CSS




Cleaning house

Experiment; how fast is Magento, if you run the frontend as slim as possible?

Let’s find out.

Step 1: get rid of all the things




Unset all the blocks

Base override layout until there’s no block output left.

I used overrides because <block removed=true> keeps the nodes in the xml layout.

I keep the <containers>, because they are point for extensibility and hook into backend configuration.




The baseline

Great!

Empty homepage, all caches disabled.

All default Magento 2.4 modules are installed, with sample-data.

Were left with just one request, 330 ms. (80ms with all caches on).

And we’re still in developer mode...

This is what I’ll keep as a reference.




So much achieved already!

Look at what we already have:

- Server side rendering- Routing- Backend coupling- Session handling- Extensibility- Caching





Now, let’s rebuild a template from scratch. Bringing back every element with a close look at performance impact, both SSR as front-end render.

Simplify everything as much as possible. Use browser standards where possible.

No 3rd party libraries.

Keep it slim, keep it simple.

(you often don’t need JS)




Choosing a new Tech stack

AlpineJS - copy from Vue, without virtual DOM. It’s just 26 kB, or 8 kB gzipped

TailwindCSS - utility-based CSS framework. Excellent for building interfaces without creating a massive set of stylesheets.It’s 2380 kB by default, but you can strip out all unused classes automatically, typically leaving you with <35 kB of CSS (7.5 kB gzipped)




A new homepage

JUNE 8, 20204 days in, promising progress




A new happy place




Tackling the basics, with SIMPLICITY!

A brief example of how classic Magento logic has been refactored to a library-free code-snippet.

Main take-away:We dispatch a CustomEvent, which native browser functionality.




Decoupling and Modularity. Plus, SIMPLICITY!

Here we receive the private-content. Anywhere, on any page.




Putting it to the test

JULY 28, 2020One month in, I have a prototype with most basic functionalities working.

I pitch the project at integer_net for a possible build.

Less than a day spent on a prototype, this was ready. Almost a full user interface with most basic styling done.




Putting it to the test




First finished project. DEMO

Let’s look at a Demo.




Introducing: Hyvä Themes

Presenting: Hyvä Themes.

A coöperation by integer_net and me (wigman-interactive).




Keeping your head with Magento 2!

Hyvä Themes is a way to “ Not lose your head “ with Magento 2




Let’s do a PWS* instead.

The first Magento PWS*.

A set of themes that are built for performance. On a modern stack.Looking beautiful. Fun to work with. Component based and event-driven.

Soon with multiple themes (included). Featuring a library of interchangeable components.

* ProperWebSite





Licenses at 1000€ ex. VAT, including 1 year of updates.

Built with and backed by integer_net.

4 projects done by end of the year.

Waiting-list for early access at hyva.io.Gradually accepting first people before the end of this month (October 2020).





Support via Slack.

Docs are being written.

Ships with a Luma fallback checkout, so you don’t have to worry about shipping and payment integration if you’re not React savvy (yet).





A highly customizable React checkout.Completely headless through GraphQL.

Works with Hyvä, Luma AND PWA Studio.

Free and Open Source.

https://github.com/hyva-themes/hyva-checkout/

Planned to be fully featured before january 2021.



https://github.com/hyva-themes/hyva-checkout/


DEMO TIME.

Let’s look at the demo.



Keeping your head with Magento

Reacticon 2020


Watch back the recording of this presentation:https://www.youtube.com/watch?v=kGRkAQNzL1c&t=362m0s

And find us at @hyva_io on Twitter or https://hyva.io/





https://twitter.com/hyva_io

https://hyva.io/contact

keeping your head with magento - reacticon

Documents