In one of the more technical episodes of late, Phillip is joined by James Zetlen as they explore the future of UI components, UPWARD and the importance of a common coding language, and some nitty-gritty details of PWA Studio.

Listen Now!

1:36 Down a Kalen, Up a Zetlen

Today, Phillip is joined by James Zetlen (@JamesZetlen) the Senior Frontend Architect from Adobe. Kalen is not here so he’s probably off eating a banana somewhere.

Or maybe for the first time actually taking his sabbatical.

3:05 A Brief History on James Zetlen

Phillip asks James to talk about his history with Magento.

James takes us through a quick background and lets us know that he has been with Magento since December of 2016 and when he started there, he was one of the few engineers that were actually located in the Austin office. When he first started, they had just finished polishing Magento 2.2Now that’s a flashback.

Phillip recalls when it was really difficult to vertically center things.

7:19 A Flashback Shoutout

Ten years ago, Phillip recalls that Nicole Sullivan (@stubbornella) (who invented OOCSS by the way) worked in the Austin office and now she works on the Google Chrome team.

She was kind of a hero to him.

James points out that at Google.io (Or Googley-Oh for the initiated) this year, she did a talk on Elevating the Web Platform with the Javascript Framework Community.

The boys discuss what Nicole is doing today, and how valuable her work is.

Phillip is also surprised to find out that Paul Irish (@paul_irish) was at Imagine.

11:28 The Complex UI Problem

Largely, the response of the community to Magento 2.2’s UI components might have been too much. The frontend development got very tricky and full stack developers ran into complex issues that might have been past what their skillsets allowed them to comfortably build.

Phillip goes on record saying that the implementation surpassed the maturity level of a typical open source developer working for a merchant that doesn’t have an enormous commerce budget.

18:20 The Separation of Concerns Horizontally

There’s a general principle that used to be called the separation of concerns horizontally that leads to things being decoupled in the web stack.

James goes through some of the layers of abstraction that make up the Magento framework and the history of its development.

“The web was designed as a way to surf around using hyperlinks through academic documentation and you can see that history everywhere.” -James Zetlen

Some really good technical stuff here.

Most programming shows hallmarks of its era and we have compounded functionality on top of essentially basic mechanics.

24:21 The Future of UI Components

James predicts that the future of UI components looks like a vertical integration that instead of its connectors being PHP interfaces and XML dialects, they are more broadly accepted industry standard portal directives.

Phillip then states that it seems like James has done away with all the existing UI components and rebuilt it from the ground up with a more sensible orientation.

Maybe James is the hero we need.

30:03 A Big Circle Back to Lighthouse

Phillip asked about Google Lighthouse back at the beginning of the episode and the discussion has naturally spiraled back to it.

James gives lots of juicy information on how PWA Studio was initially a project to begin the creation of the new stack for Magento. He also lets Phillip know that the process has not always moved as fast as he would want it to.

33:51 What are some exciting things on the horizon?

Phillip asks James to talk about some of the exciting things that are coming up in the pipeline.

James starts out by saying that PWA in itself is exciting. Once you begin to mess around with the capabilities of PWA, you start to see just how powerful a tool it can be. Once you’ve played around with it and bring that perspective to PWA Studio, you will have the perspective to give feedback on how to improve PWA Studio itself.

“PWA Studio will help to establish a pattern that other people will recognize, so that when they go to build their own extension concepts then they have code that doesn’t surprise them and code that works together.” -James Zetlen

James also gives some examples of how PWA will work with other languages and components out there.

39:30 Runtime Dependencies and Required JS

Required JS is a runtime dependency manager, and it has a builder that is not used in standard Magento 2 Production. James talks about some of the workarounds to make this process more efficient.

Phillip brings up how a documented javascript module system is a first-class feature nowadays, but it was not always that way.

James talks about how what they have today is not really a runtime system, but more of a build-time system.

44:30 Additional Magento Needs

James talks about how he wants the extension manifest to function, and how most of what is written in the extension manifest is Magento specific.

We should be able to identify within a component what Magento schema are present and the ability to identify the schema is and the additional component to developing the stack.

48:22 Criticism On Complex Deployment

Phillip asks James to talk about what he would say to the argument that other third-party ecosystem progressive web app approaches that exist solely because Magento has to solve them for themselves.

James explains why Magento needs to support multiple deployment scenarios, and why this can lead to complexity.

James also brings up UPWARD (Unified Progressive Web App Response Definition) that he invented because it wasn’t guaranteed that they would be able to run Node JS at run time in order to deliver up PWA made with their tool.

Say Unified Progressive Web App Response Definition five times fast.

53:59 No One Left Behind

James and the team wanted to build an environment in which no one was left behind. They wanted something that was deployable yet also something that wasn’t invasive to their existing tech stack.

James quotes Star Trek: Insurrection and Phillip signs off on the perfect analogy.

56:53 Let’s Clarify a Couple Things

James clarifies that UPWARD is a definition file for how a custom-written back end server would work. It would be great if you could maintain node servers with several different languages but what if instead of writing the same code in five different languages, you identified the commonalities in all of those languages and objects?

What if we could create a domain specific language that you need on the fly?

UPWARD has a small(ish) number of instructions and was only confusing initially because James wrote a document that wasn’t very easy to read.

“There are some things that, no matter how technical they are, need to be promoted”. -James Zetlen

1:04:10 PWA Studio 3.0.0

PWA Studio 3.0.0 has just been released.

James let us know that the most exciting thing about it to him is the existence of the release itself. This was done almost entirely without him writing commands by the awesome team of Craig Herdman, Dev Patil, and their developers.

James also thanks a lot more people and it begins to sound like an Oscar Speech.

A big update for developers in 3.0.0 is the inclusion of Peregrine hooks that is a React-based API. Peregrine uses a new paradigm that feels like magic.

1:08:08 A Big Thank You 

James wants to address his last appearance on MageTalk and commends Kalen and Phillip for their efforts in making him feel welcome and not attacked. James also gives thanks to the boys for giving them insight into what is like to actually use the tools and calls that episode revelatory in their process of development.

With praise like that, I’d check it out

1:09:25 One Other Thing About UPWARD

Phillip points out that it does us no good to have a spec for HTTP without someone building something that actually allows us to use the web. The implementation is just as important as the spec.

James asks Phillip what things would like without UPWARD and also states that he’s willing to throw it out if it’s not useful in the future.

If Magento was able to produce a proof of concept of an alternative, something that is maybe more turnkey and less flexible in its deployment, would that seem like they were invited others into UPWARD?

Phillip says that it would have to be something that is Commerce Cloud-centric first because that is where we are today.

James also talks about some of the issues in UPWARD that make it appear more confusing than it actually is.

Does anyone else have a tired brain after all the genius in this episode?

Mentions/Links

Guest Host: James Zetlen (@JamesZetlen)

  • Nicole Sullivan ([@stubbornella](https://twitter.com/stubbornella?lang=en]))
  • Paul Irish ([@paul_irish](https://twitter.com/paul_irish?lang=en))
  • [Craig Herdman](https://github.com/cherdman)
  • [Dev Patil](https://github.com/dpatil-magento)
  • [OOCSS](http://thesassway.com/intermediate/using-object-oriented-css-with-sass)
  • [Elevating the Web Platform with the Javascript Framework Community](https://www.youtube.com/watch?v=-xZHWK-vHbQ)
  • [Google Lighthouse]([Google Lighthouse](https://developers.google.com/web/tools/lighthouse/))
  • [PWA Studio](https://magento-research.github.io/pwa-studio/)
  • [UPWARD](https://magento-research.github.io/pwa-studio/technologies/upward/)
  • [PWA Studio 3.0.0 Release Notes](https://github.com/magento-research/pwa-studio/wiki/Release-notes)
  • [Peregrine hooks](https://github.com/magento-research/pwa-studio/pull/1278)
  • [MageTalk Classics with James Zetlen](https://magetalk.com/magetalk-classics-james-zetlen-tony-brown-and-brendan-falkowski/)