Magento PWA Studio, 5 Mar 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Magento Layout Loader - Early Preview

Description

This is a very early preview (first implementation) of Magento PWA Studio's "layout-loader." This tooling enables extension authors to augment the UI, similar to how Layout XML works in Magento 2.

Please note that this is still in active development, and is missing many pieces of functionality that would be necessary for a real-world application.

Feedback can be provided in the pwa-buildpack repository: https://github.com/magento-research/pwa-buildpack

A

Hey Magento community, my name is Andrew Irvine and I'm, a front-end architect, Oh Magento's, PWA studio project. I'm excited to give you a brief run-through of our first implementation of the layout modification mechanism in Magento's PWA studio. This is functionality that will be used within PWA studio to supplant the common layout XML operations in Magento to the target audience for this, tooling is anyone who will be authoring extensions for PWA studio applications when watching this content, I encourage you to keep in mind that this is the first implementation.

A

This means that will gladly accept feedback and we're happy to hear what else we can do to accommodate all your use. Cases at the end of the video I'll go over the best ways for you to provide feedback to us before we dive into any implementation details, let's walk through a quick demo to help provide some context.

A

Here is a very simple react: application that renders one component named my cool component in a react application and consequently, in a PW, a studio application. The UI is driven by a component oriented architecture, has an extension developer to influence content rendered to the UI you'll, find it necessary to augment the component tree. Let's rebuild this small application, but this time we'll run it with the magenta layout. Loader enabled.

A

Notice that we now have some additional content injected into the UI, this was injected by an extension using the layout loader, and we can verify that by inspecting the UI using reacts in browser development tools.

A

If we inspect the wrapper for my cool extension in reacts, dev tools, we can see useful information that our tooling is added to inform you of the reason that this extension was injected into the UI. Now, let's backtrack can go over some of the basic concepts. You'll need familiarize yourself with to write your own basic extension.

A

The Magento layout loader has two distinct phases. The first phase, the authoring phase, is where a theme developer will annotate, which parts of the UI should be available to extensions for modification. This is done using what we call a container component and a container child component. A container is similar to the concept of a container in Magento 2. Today, a container child is similar to a structural block. The second phase, the compile phase, is where the PWA studio tooling, collects.

A

All the layout operations registered by extensions resolves any possible conflicts between them and then applies them to the UI. This is done during compilation rather than at runtime, to prevent your store from needing to over ship code to a Shoppers browser when authoring an extension, a developer will be able to use a predefined set of operations that allows them to add content to the UI relative to other content or remove content entirely from the UI. This will be much easier to explain by building a small extension, so let's jump right into it.

A

Let's write a small extension that injects a new component into the UI relative to another component.

A

The first thing we'll do is just create a simple react component notice that at this time, there's nothing here. That's Magento specific, but one other thing we'll want to do is create a configuration file that tells Magento layout loader how our component should be injected.

A

Let's say that we want to insert our component after another component in the UI. The first thing, we'll need to say, is which container we're targeting.

A

So let's go look in our UI and will say that this is the container that we want to target.

A

A

And since we're doing insert after we're saying within the target container, my cool component wrapper, we want to target being next to another child, so we'll go back and expand this and find the ID of the child that we want to be inserted after.

A

And the last thing we need to do is say: what component we want to be injected.

A

Now that we've written our extension I'll go ahead and run our development server, real, quick you- and we now have our new extension in the UI and once again we can go into reax developer tools, verify that that was injected.

A

Before I, let you go I'd like to call out one more thing: we've been focused on with our tooling debug ability. We've received plenty of feedback about the cost of extension development, and one of our primary focuses has been to make development in PWA studio, more predictable and intuitive, but also easy to debug. When things go wrong to highlight this, let's modify our extension and cause it to misbehave a bit.

A

We'll go ahead and save that real, quick and notice that now we're our extension was showing before we now have an admittedly ugly air that lets us know that we can look in the console for further information and when we go to the console will see, reacts normal debugging, but will also see additional debugging from the PWA studio tooling.

A

If we open that up we'll see exactly which component was injected, why it was injected and it gives us an opportunity to go and debug that further and that's it for now, if you'd like to provide input on this feature or track its progress, please visit the PWA buildpack repository within the Magento research organization on github. There's plenty more work to be done, so don't be surprised if the API you've seen in this video continues to change as we dog food it within our reference team. Thanks for watching.