Magento PWA Studio, 10 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Meeting 10 January, 2020

Description

Demos for New Cart Experience, Order Summary in Cart, Service worker fix, and Extensibility Framework preview

A

All right great welcome everybody to our first community sync and demo of 2020.

A

We have a pretty busy slate today, I think demos, so we'll do a few demos from the team. Mr. Semler online will jump in here and preview, some of the extensibility concept work that he's been doing and then we'll open up for questions or topics from the community. Anybody that's on the line so getting us started today. We have.

B

C

C

But we have a new car page, so many is getting coming in v2.

C

And a dedicated page for their car, so we'll still have the sidebar I think as an option, but Benny in itself will have a cart page like a full page. So this is.

B

C

Won't go too in depth into the mock-ups, but.

C

But you can see all the things that are in the cart little sidebar, pull that thing right now and extras: I get some gift cards, coupon codes, things like that that we're playing on so here's mobile. Here's desktop really the big difference there is that the order summary cart summary floats over here to the right, instead of being just that single column display here, I'm on the mobile view. So the first thing I did this week was kind of layout. This cart page.

C

So there's a lot of placeholder content now, but here's the items list would be here: here's here we're calling things like price adjustments like shipping method, coupon codes and such and then the order summary there on the bottom. This is the mobile view. If I switch to the desktop view, you can see where summary kind of pops up to another column there on the right.

C

Yeah so it it kind of floats everything and stays in view, which I think was the primary goal of that, so that's kind of them layout at the page. That was the first one and then you can see here. I picked a price adjustments after that. So a lot of these things are just like. Oh hey, this items list is gonna show up once this other ticket is complete, but I picked up one for price adjustments, which has this kind of cool according in a good thing, so I thought that was useful could be useful.

C

So we already have like an accordion section for filters, so I made this kind of a part of the public API as a new accordion component that you can use wherever you want so to show off some of that have story book up in here. So this is kind of here. If you just have, you know, I'm not sharing my code, but there's an accordion component in within it is like accordion sections, then you give each one a title and some contents, and so here's kind of the default.

C

If you don't have anything else, all the sections open, they can all be open. At the same time, the other had a major prop or a property you can send into your accordion is have only want I want to restrict this thing. To only have one of these open at a time, and so here's a story for that or if you open another one, you know the previous one closes I didn't try to do an exhaustive list of use cases with I kind of figured we'd.

C

Add them as we go as people need them, but those are two pretty common ones. You can also say: hey I, want this section open, initially yeah the mock-ups have the shipping methods open initially, so that was an easy one.

C

Here's just showing that it works when you're only allowed one section, and then you can also have multiple sections initially. So if you wanted like every single section or something like that, you could do that pretty easily. So this is just kind of showing off some of that stuff.

D

E

C

New page, anything that you saw their price adjustments, accordion.

C

Thanks for reminding me also so this cart page I didn't show off getting it there by just going to slash cart at the end of your URL so and we're lazy loading it so yeah, it's not fully ready yet obviously, there's a lot of placeholder content there, so it shouldn't be shipped with your bundles unless you actually go there.

C

Am I sharing the.

D

Screen, yes, you are okay, cool, do to tack on to what Andy has been saying so he broke out. We broke up much of the stories for the cart page and I picked up the order, summary view, which is this thing on the right, really simple, little component. That, like any said, floats along on the right. It's got a nice sticky top to the sort of slide, along with the content. I artificially expanded the item idleness just so that it would, for example, purses.

D

But this was a pretty simple looking component at first and then I realized that certain line items and certain.

D

Things that we need to get from graph QL are accessible in certain versions of Magento. The two three three has disc art discount and two three four has cart discounts and then Enterprise Edition has gift cards and Community Edition has no cards, so that was interesting, so I'll kind of just dive into this a little bit and try to show what I'm working on right now, which is sort of like customized components for each line item.

D

So we have a discount store and gift card summary for now, just because those are the ones they're more difficult ones. If you look inside gift card summary we're exposing these fragments that we have access to I think actually in both two three two three four I just try this, and so what will happen is in tooth or in Enterprise Edition, and this will maybe like some build. Plugin will actually run some schema, validator and then sort of swap out this.

D

This graph kill string at Build time instead of doing this feature flag toggles, but it will basically just replace the contents of this of this fragment so that when the query and runtime is made here, you can see the fragment is- is passed in interpolate into the into the gate. Price summary query string, but when, when we build this, the build the build plugin could say get this this. This client doesn't have community edition, they don't have gift cards, so this just be.

D

Basically no op is just requesting the type name as you saw, and then the gift cart summary component itself would probably just be a no op. So all this would just be excluded from the bundle just trying to save some bytes here and there, and then I had to do something similar with discount because of the difference in name so I'm still working on this code and I still have a ways to go and definitely don't I, don't have a story book or anything I'm going to get.

D

But this is functioning off of an actual cart and no coupons and taxes. It does represent things properly, but it's deceivingly typical, looking not as simple.

D

That's it I can go into.

E

The other pause for questions on your order, summary work, any questions for Steve on that.

A

D

Right cool: let's see if Esther insoles.

D

The other thing I wanted to talk about was this spike. That I did before the break, and purpose of this was to kind of figure out how right now, right now.

D

We are where we've moved a lot of stuff to read: Uggs or I mean it's already. Redux we've been moving things to graph QL, one of the things that Apollo does. Is it catches data for you and then you can sort of render based on that cache. But we are not really taking advantage of that.

D

We've been sort of making queries just like we used to do in rest, and then we've been taking those the data back and we've been propagating that to the redux and then, as you see, we I think that would eat Redux with all right. The context would update with the Redux values and your components would then would then update. So what I wanted to do was see if we could do that without Redux, and so in this spike close it. Since then, it was open for a while, but we have a cart trigger component.

D

Not running car trigger component used to make a query for data every time it would render and other things would also make queries for data, and it was a little bit duplicative so instead, I can get this to work. The cart trigger now makes an initial query for data and then other stuff, like adding an item to the cart, also makes queries in for that same data, but instead of this being being rendered off of, instead of this being rendered off the cart value from context, it's now just updated from from the Apollo cache.

D

So you can see here a little departure. I was going to show you I.

D

Had to restart my computer and it just like totally messed up this view, because it was like okay so now so, as you can see here, we used to call an effect that every time this this ran would call get carded details. Now we only call it whenever of the Carnegie changes, and we have one and- and you can see here, data is just constantly monitoring that value coming back from from from the query.

D

So if you were just looking at this component, you might wonder how this query is refire and that's because every time that you add an item, the cart, it updated it to this. This query isn't actually recalled, and so that's because inside that add insight like add or remove. We call this refetch query, which read, which calls a gate card details: query which happens to update the data that that karcher component cares about. This is all to say that very long-winded around it.

D

That way, but basically you can have components that monitor data using Apollo queries and then other things can form queries that update that data and the Apollo caption will get updated accordingly and your components will update to render and you don't have to care about or wait for Redux door.

D

Yeah, okay, that's all I wanted to say very simple. You know no big deal yeah.

F

Yeah accessible demos, any questions.

D

For Stevens, using Apollo cash I threw the link to this in the public eye slack, so it was a while ago, but if anybody had wants to talk about this stuff, you know that was a spike. We don't actually have any of this in the develop briefing, but hoping that we can sort of modernize our use of data in our application.

A

All right was there any questions. I think we're long.

G

So this was a bug that was reported. They go because um so what happened was once we started using the serviceworker. We were caching, the HTML files. So whenever someone reaches the page, it won't return. They'll cast his team in fire, but in the back it is to fetch the new testament file and it compares both of them by two bite. If this is a change, it throws a notification to the UI saying something has changed.

G

Please refresh the page, so that was working just fine in the local and also hand and listen everywhere else, but once we deployed it to the cloud server, I guess, Neelix knew and like analytics was was added to it, and one of the things that you really adds to the HTML is is a time stamp in the tanks.

G

Time changes every time you refresh the page and now the condition fails because white applied the time stamp jeans and every time you refresh the page, the service worker went through a notification saying please refresh and that's bugging to the user, because nothing actually has changed nothing, something that really matters hasn't changed. So if you look at this cord, this is developed right now and all we do is we look at the cached response, also the response from the service and we get the text and be simply too well and not equals to n FX.

G

If it's true, it sends a message to the UI about an HTML update the changes we made.

G

Look so huge changeable, but nothing really is so. We still have the same condition along with it. We have created a function or the system will changed, which gets the new new HTML and also the voltage stable, the cached responses. What we have in the previous refresh and cloned responses is actually what we got from the service.

G

You look at it as its. You know changed it. Just has these verifications from verification functions and it runs to some function of it. What it means is, even if one of the verification step fails, the Refresh has to be.

G

If there's notification has to be sent to the UI, and since these are like this is like an array of functions, you can add any number of them later right now we are looking for if resources are changed when I see sources, its J's file, CSS files, anything that changes because of a new build this, this function is going to fail and the UI is going to be rendered you can you can do the rest based on title a written title changes you want to have a refresh every time the backend URL has changed.

G

This is what we injected with HTML time about the cloud, server, images and stuff from. Even if that has changed, you would do it and each of those functions. If you look at their signature, they get the new Tom and also the hold on, and you can do anything and all it has to do is return boolean value. If it's true, which means something, has actually changed. The UI has to refresh if it's a.

G

G

Let's say someone wants to change based on mega taxes. Well, you can just add a new function at a time. Changed change and write your own function. It gets the new term and also the old arm, make your comparisons and just return the value and all the functions you see have the exact same signature.

G

That's it so that's how so, since we don't really care about nearly timestamp right now. That's why the UI never say, but if you change the build like any code changes or anything like that, the UI does so.

D

In the Aeneid commented about the fact that this is a whitelist versus blacklist of the other things we don't care about, it.

F

D

There a reason why we did one- not the other, was this sort of so.

G

Instead of looking forward has not changed, it's easy to say what has changed, because we only care about certain X in the whole head, stable file. So it's easy to say only look for these things. Instead of saying you're, the.

H

Owner of these- and you don't see.

G

That that list of things changing yeah, but not of them. Because if you look at the HTML that we have.

G

We are looking for style tags, we are looking for link tags and we're looking for.

G

Yeah, if you look at this one, this is the final Testament that is served from the wetbacks over to the UI. We are looking for all the is here all the J's files we are looking for. If you go to the top, we are looking for all the tines. If something has changed, we're looking for gate, optimizing hydrogen also the packin URL, and these are the things as of now that we really care about.

G

But if something comes up in the future, we could just hide a function, but if let's say we are looking only at the whitelist blacklist, it's like you have to go ahead and change the whole.

G

Also, it's just a trade-off of how many changes you want to make it a future. But how often do you make these changes.

D

Then this is all happening in the service workers.

G

G

A

Great any questions for a month.

A

All right so I think last on our list of demos is mr.

A

H

This isn't precisely a demo I, just kind of want to talk to photos about the progress of the concepts, so I'll try not to make this just me. Rambling I would definitely like to see some conversation happening. It's okay, if it doesn't I know that people weren't necessarily prepared for this stuff, but I have a couple of diagrams.

H

That I would like to sort of show.

H

Ya and I think what I'll do to introduce. This is start with one. That's a little bit scary, looking because of my own unfortunate dependencies with diagrams, but nevertheless we'll see.

F

Can y'all do that?

F

H

This is a lot of stuff and if you follow the numbered blue, arrows you'll see ended, work flow path, but the diagram will definitely be revised and be a little bit more sensible to folks who aren't be the lead force, brain trusts that are on this current call. So that said, what this diagram is supposed to demonstrate, or at least what's supposed to illuminate, is how an extension process or an extension framework will work so that it provides granularity and flexibility.

H

But at the same time it does so in a PWA friendly way, so it uses concepts that are already native to the build processes the world Steven. Do you just want to talk.

H

So again, this is supposed to demonstrate how we would make an extension framework that supports the level of granularity that Magento extension developers and users are accustomed to. That would then lead to rich ecosystem of extensions that could install into a PWA project and augment or change its functionality at all sorts of ways, but the way Magento does, that is with a whole lot of at run time, evaluation of the configuration of the store, and that leads to some performance problems which we then mitigate with cash.

H

But that's Magento, which is a you know, as we've talked about at length, and this team is an application designed for a post fact, web or web full connectivity and high bandwidth and for the progressive web app. We want to avoid doing things at runtime. That is at the time that the user is looking at their phone at the or or inside their phones, little heating up CPU. We want to avoid doing extension type stuff at that time and instead do everything we can ahead of time. So what we've done here is try to migrate.

H

Some of the basic extension concepts from the Magento a way of things into web pack, so that we can do as many extension things at Build time as possible. So you can see that in an extensible project which has extensions that you'll see here in the out. If you could see my mouse pointer.

H

That way from Polaroid, if you can see my mouse pointer, it's going like this. Yes, okay, so so here we have a set of dependencies. These would be in your node modules, folder and direct dependencies that use it's specifying your package JSON and some of those dependencies will have a special signal file. We're calling it plug-in j/s here just for example purposes, but it may not be that the point is that each these extensions will have a way of indicating that they are an extension.

H

I won't relate this back to Magento concepts in every case going on, but in this case, for instance, it would be the equivalent of the composer JSON specifying that the type of the package isn't into extension. So in these node modules, our PWA project has extensions for page builder and upward SEO and adobe launch and even peregrine and Vimeo. Ui themselves are extensions, there's still first level dependencies, but they also have special behavior, as indicated by the extensibility flags.

H

So when a PWA project folder runs its build script, touches the build, configuration and begins to execute build pack, which is also an extension. It should create a kind of universal bus. You can think of this as an event bus, but in Magento terms you can also think of it as a map of intercept Abul handles in. In this sort of example, we have color coded some of the ones that belong to the app natively, so your app would have extension points built into it from scaffolding that allow other things to touch these things.

H

When the app mounts some special thing, when the upward file generates some special thing, when the application shell generates maybe stuff that modifies the HTML and then the orange lists here are, for instance, extension points that are contributed by extensions themselves which we'll get into later, and then the blue ones here are things that are actually built into web pack and built into our build packing, build processes themselves.

H

But so once this build process is created, it goes through gathers all of the direct dependencies in node modules that declare themselves as extensions and then sorts them based on their dependencies, which is basically the same thing that Magento does today it's important in our case, because each of these things may have dependencies on other things, so Magento peregrine litter, if page builder, literally lists that it depends on venía UI, as it will then will execute the venía UI plugin J's handler before page builder and so forth.

H

So now that this is here, we get to this crazy mess of arrows. This is actually just illustration. I'm. Sorry, if it looks complicated, the point here is that there's a many-to-many relationship and in a future version of this diagram will make it look less busy', but the the next step is for the registration process to occur. Where build path will take.

H

This hooks registry object and ship it to each of the extensions okay, Magento Peregrine register, your hooks, so it'll, add stuff in orange, and then Venier, UI, upward, SEO, page builder and so forth and finally, to the project source which will register it. Hooks, then, is the next phase. The same orders run again and then that's called the attached phase where the same event, bus or the same hook. Bus is what it ought to be called goes from Peregrine's through the whole thing to the project source. Again.

H

This is all of the installed modules, but this time it exposes the event bus with everything that all of these plugins registered on the first pass. Now you have these handles that are available, and then you now have the ability to attach handlers in the manner of attaching events. This is a little bit more explicit and tightly bound because these things are more like interceptors. An example of this would be that Paragon registers use app extension points, and it's at its intent, for this is that it has a use, app talent implemented in a module.

H

But if a third party wants to do something to use app, maybe wrap it or mutate, it then Peregrin exposes this extension point and then inside the curve and source it subscribes to the the webpack asset pipeline and will invoke any of its own registered hooks on news app when it sees use app passing by so essentially, each plug-in is responsible for the implementation of making the hook useful to the next plugins. I know that was a little complicated.

H

Basically, Peregrine's is at the attach phase, subscribing to the web pack hooks, and then it sees every module go by and when it sees the one it wants, it will call its own hook, there's a subsequent diagram which will demonstrate this a little bit better and so anyway, once all of those attachments have taken place that a bundler is created, and then it runs these phases, which then do the third thing to the hooks that have a registered and actually calls them in the source code for build pack when it loads its environment.

H

It will also have access to this hooks registry and it will literally call the load end hook, which will then execute anything that attach to it and then at the load. Phase webpack calls its own hooks, which are also exposed as part of the global hooks registry, and then Peregrine's calls its ones and many IUI calls its ones and then, finally, during the bundle phase for any assets that you would want to change that are directly output into the bundle.

H

Then plugins could opt into and subscribe or sorry tap into these hooks and then finally, what's emitted is a deployable build artifact, just like this built today, but all throughout the process. All of these plugins were given access to different interception points during the process and they were able to compile together a good application.

H

The hope is that this stays pretty robust, because each of the plugins that are implementing hooks and that our subscribing hooks are all basically interacting with the fundamental objects inside the build system, that is to say web pack, compilers web pack, compilations and a few of the environments hooks etc exposed by build pack. So the convenient thing to do if you're developing a third party plug-in, will probably be to use utilities that touch these low-level things and will produce a library of utilities to make it easier for third-party developers.

H

But the basic principle here is that interceptors, if build time, do not have the performance penalty at runtime and they do have the safety of being able to do a compositional pipeline instead of doing a dangerous merge. That's the basic idea of the proposed extension system. There are a couple other diagrams, but let me pause here to ask: if there are any major objections, it looks like Stephen wants to make some more noises.

D

No, this is this is a lot I. Don't have any objections right now, but one thing that it seems like this is for sort of modifying existing components in place. I, don't know if maybe I missed it, but was there? Is there a way to handle like custom components being injected right now is this? Is that a different thing I'm talking about? Where is that covered under this.

H

That I would say that it's a special case of the things that an interceptor can do. We don't have all of the use cases kind of highlighted in this high level diagram, but a great example of that would be if you want to add functionality to venía UI. Let's say that you wanted to add another step and check out. Then you I would expose a hook for its check out component and then you'd be able to manipulate or to place that check out component with your own wrapped functions.

H

Maybe what it would do would be to render the first three steps to checkout and then insert yours, but so being able to mutate and change the source code as it runs through the compilation process, would include just being able to add things to it.

D

H

How would you do it? What would what would you do to this source code as it comes through? I wouldn't be hand, editing text. What I recommend instead is that we have again a sort of a utility library, so that page builder can like imports. The simple utility a little like Babel, has its path utility, so the page builder could call a simple method like wrap the default export of the CMS route component, so that you can do something before it.

H

The react component, rennes and then after so essentially like a like a higher-order component effectively right.

H

That's one thing you can do and then because parison will also expose its hooks. There are other things today, so that's this diagram, any other concerns or.

E

You drop its phone. Pec is Air Fund, it does.

F

Hello James.

H

Hey I'm here, I'm sorry, I'm, I, hate, blue jeans. I loathe this program. It's a bad program that sucks.

A

G

Let's go on and on save them. If you go back to the picture charge, yeah.

G

H

Knows I, don't even know what to can you say yeah yeah I can say, do.

G

You have this ring. How often do you think new books are going to be added early, remove change the functionality like once the system is made sure enough to be published to everyone like? How often does the podium have to change this or how often to extension, developers have to keep up with new books of changes to the current works Alec? How.

H

Are be well I think you can look to the way that web pack hooks are maintained or a an example of how this would go. It is public API, its additional API surface to expose, but I think it's the right way to do it, even if it seems like well it's more than an XML dialect. Oh no, you know the XML dialects her Magento extensions, really just connect PHP interfaces together, which then suffer from the same issues. In this case, you can look at the way that web pack compiler hooks and compilation hooks are described.

H

They're not super well documented, actually, but they still are a pretty good system that people have built whole plug-in ecosystem. Around looks like there's just no way for my computer to work normally with this terrible, terrible, terrible conferencing system um anyway, Rena so yeah. You look at web packs, compilation, hooks, compiler, hooks and you'll see that they do have api's and they are revved pretty slowly.

H

But the the reason that we're doing hooks here is because we have kind of have that precedent to follow, and it means that we can expose the web pack stuff using kind of the same concepts and the same api's. That are the things that we're going to add to it. Okay,.

H

Another great example is that you can look at the HTML web pack plug-in, which you yourself added to our project, because HTML web pack plug-in is a really mature, webpack plug-in that integrates very well and it uses web pack hooks, and it also exposes its own hooks for downstream the plugins to do stuff to HTML web pack. Plugins behavior and that's the basic pattern we want to follow.

G

Okay, so if let's say we're building the card right now and then folks coming up in the car, we might want to do something else that has to go into this.

G

H

Sorry, can you can you ask that one more time, yeah.

G

We'll be writing new hooks as part of upcoming changes. So will they be going into the folks registry, or is that something else so.

H

Good good question: the major concern that I had I- maybe you are prompting me because you saw this in chat, but the major concern that I have, even though web pack hooks are clearly the way to go, is that the word hook is overloaded because react hooks are a completely different concept and there's something that we bought into completely with Paragon, and we love them they're, not gonna, go anywhere. The only problem is react for all of the things that it's good at should not have called these things hooks.

H

That is totally out of sync with every other kind of software. But what you do? um We got to figure out how to make that clear. I think just saying react, hooks Paragon talents or webpack hooks. May you know.

A

All right we have one minute left or to make sure anybody. That's on the call has a time as a chance to ask any questions or bring up any topics that we did not cover today. Here's another diagram and then wait for it. Here's a.

H

Third diagram make sense to everyone.

A

All right so double questions for James I would say. Obviously there's more work to do here. There's more work, that's going to happen here. This is a topic. That's of interest to you. Please make sure to reach out to James. You can reach out to the larger group here through the community slack or stay tuned on the PRS and you'll start to see move across the board, so we're at time.

A

So, thanks to everyone for joining we'll have the reporting up shortly after the meeting and look look for more updates as we continue to move forward with new venue features, accessibility, concept, work and we'll have more updates next week. So recording is about to stop, don't forget to smash like and subscribe honk. If you like it, alright, what else we have! That's it! That's it all right thanks everyone! Thank you.