Magento PWA Studio, 10 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Sync 10 Feb, 2021

Description

Demos from NewQuest and the Evian site launch, Lazy Loading, and Targetables Tutorials.

A

Welcome everybody to the pwa studio community sync: we have several demos lined up today for you all. First we have emeric and paul from newquest who are going to talk about their new launch.

A

Then I will demo some work that I've been doing or did last week to uh tidy up the builds a little bit and then finally we'll wrap it up with james calcuben talking about uh targetables tutorial um that he's been working on so I will hand it over to emmerich and paul. Can you guys share your screen?

A

I don't know if I have to do anything to give you all the ability there. You are hi thanks for joining guys.

B

Pleasure um so yeah we're just going to chat a bit about the site, so it's been called it's a french um french website uh based in paris. uh So it's with uh the dunon group.

B

Basically, it's was been online in production for two weeks roughly um it was an old magento one website, so it was. uh I think it was about six or seven years back uh that we migrated to magento 2 and pwa studio at the same time, so a fairly big big job. It took us about a year to get out um where's. Well, I'm back in the evening like his front end and we had a couple of couple of uh helping hands along the way, so uh yeah a fairly big project.

B

um So basically it's uh it's a website that allows parisians to have water delivered to their door.

B

um It's a fairly simple catalog as a couple hundred products, all water uh well modern, associated products, um nothing fresh at the moment, but um yeah several different brands on it, there's quite a big marketing team, as you can imagine uh beyond that on all these big brands, there's a big marketing team behind it to do a ton of work on it and make it look pretty pretty damn good and continuously improving it. So um yeah, it's a pretty good, solid website, uh so yeah.

B

So it's a fairly simple website until you get to the checkout and once you get into the checkout, you start to realize that you can. You can have a subscription or you can just uh buy one-off orders um and so subscriptions. You can do so. Every week, two weeks, three weeks or four weeks, that's gonna evolve quite a bit in the next few months, but uh yeah you can um it's fairly flexible uh and once you've started creating your order.

B

You get into delivery details, um so you've there's a fairly hefty uh sign-up form because they they pride yourselves on really good delivery service. So it can be next day delivery or in the next over the few days. A few ongoing days, um the yeah the delivery system allows you to basically choose any sort of time slot over the next um time period as you'll see in a second.

B

um So once you've chosen your address with all the extra fields, there's a ton of custom attributes to allow this precise delivery, and then you get the these like time slots that allow you to choose exactly when you're going to be delivered. So that's one time slots. There are several others like uh 204, 406, etc, and um this basically is a massive system on the back end that uh basically each course each postcode in paris allows you a different uh delivery time.

B

So it's um at max weights and there's all sorts of configurations done in the back end to allow you to to see all this stuff um so yeah, then all that is sent off to the to the delivery companies who then actually do the physical deliveries the so. Basically the project was our first full-on magento, 2 pwa studio project.

B

We chose pw studio because um then under fairly into their up-and-coming technologies, so they they knew about pwa, they cared about it and they wanted something. uh Something that could handle it and um they were magento before so they stayed on magento and we we discussed several possibilities uh like uw studio and there were a few other solutions available at the time. So obviously the fact that you guys working on pw studio from work with magento was uh it helped convince everybody basically to to use it.

B

So we set off on that.

B

We didn't really know what we were jumping into to begin with. uh We'd done minimal testing on it right at the beginning, but it looked fairly solid. So we were fairly confident so uh yeah we managed to get all installed all set up and yeah.

B

We started working on it so after the first phase of quite a steep learning curve, uh just basically using graphql setting up the front end getting linked into the back end and all that we yeah we were on a roll and moving along quite quickly, so yeah it was we're fairly satisfied. um We managed to get quite a lot done and then we started to find missing missing parts to magento. So we had to finish all that off as well.

B

So that was a bit of a surprise in some areas, um but we yeah, so we did the the devs together going and um what else can I say: yeah, it's just well, it's been pretty well frankly, great to work using graphql and uh well the the whole separation aspect between the back and the front. The fact is totally separate and you don't need to sort of mix in front and back end.

B

Developers is pretty cool, um although you would exp, so you can expect to sort of work apart a lot more since it's totally separate, but we ended up working really quite closely together because one really relies on the other, even though we're not doing any dev together, you really rely on on each other.

B

So probably means you should work closer together than before, so that was quite quite a cool discovery and we're both pretty satisfied about the way. uh The way it worked out so um yeah generally. Well, I'm really pleased to be to work on uh the back end of the magenta too and um yeah. So we still got uh quite a lot of optimization and things to do on the website.

B

uh Graphql would quite like to to reduce uh the amount of data. That's sent back on quite a lot of the calls uh to just speed it up a bit. There's a lot of things. We don't necessarily need all the time and we could win could gain quite a lot of uh of of time on that sort of stuff. So um I mean that's my point of view I'll push over to mike to.

C

Yeah, so I'm not english, so sorry for if I use some french words something like that uh so yeah, I work a lot uh with uh magento one major on two, even prestashop, but pwl studio. Even pwa wasn't my first project, so I need to learn a lot more about javascript react and uh packets, etc. It was a really hard at the beginning, but quite challenging. Also, um it's um sorry.

C

The ptw studio is really cool because it's it's way easier to understand what you are doing compared to a classic magento. It's always, I think, faster, to implement new new functionalities.

C

But, as I said it's many many times to to understand how pwa studio works, because it's it's not a thing. It's a complex application, yeah! That's it.

C

But it was cool honestly yeah. I can show you a few functionality we have on on avianchivu.

C

So first on the listing page, if you want to hide the product, you will see the the product uh around there, because that's what the client wanted. You wanted something like this like a supermarket.

C

Even if I refreshing the page, I still have the data.

C

We also customize other, and we customize everything I mean it can't really tell it's a pdw studio because we changed almost everything.

C

The the big part was also the cart on the right, because we have two mods uh light mode with only the project mobile product, and when you clicked you on the card, you have a classic version with the product info coupon code, all the the data for that for the subscription or punctual order.

C

Shipping even um time starts with step. Three extra extra uh pretty much the product page for now is quite simple, but we will we want this in the next month. uh The home page is also quite simple. We have a slider some push brands and a few products there, but, as port said, the complex thing was for the checkout, because once you want to order, you have the choice between a punctual order or for subscription or installing in french.

C

If you so select for the subscription, you will need to to select an address, and then you can select your frequency yeah. If you want to every week, two three or four weeks the day and finally, the time starts.

A

This looks really great guys. This is uh refreshing.

C

A

C

Are quite happy.

A

I mean it looks great and, like you were saying it's kind of it's it's you built it on p2b studio, but you can't really tell I I'm curious personally.

A

What um maybe was the most difficult aspect and your favorite aspect like which which pieces were difficult to work with, but also which pieces were your favorite uh to work with.

C

My favorite aspect was almost everything with pwas with javascript. It's really easy to create something or to have something new, but the bad aspect is that we customize everything. So I mean for uh if I have to do something similar again with this kind of big project, I will pretty sure we do something from scratch, because we change everything. But if it's a you know, classic magento with a classic listing video studio is really really cool.

A

Okay, yeah, that's good feedback, really great feedback for us to hear.

A

Well, I want to toss it over to people if there's any questions in chat.

A

And look like it well cool. Did you guys have anything else you wanted to share today that.

B

Nice special yeah, it's just been a good good amount of work and a good good experience to work on this. It took us a lot longer than we expected, but it has been a massive project and we also had the migration to to think about doing the whole process so yeah. It was a fun and interesting project and can't wait.

A

There was a question in chat from yuri. He said uh any insights into optimization love. The page speed results.

B

uh Well, so far, it's not especially optimized.

B

It's um yeah. We we, we pushed back the deployment to production uh several times, just because we were just it was just a massive project. So, frankly, optimization has not been one of the priorities uh we installed varnish on it to reduce all the on the back end, to reduce all the graphql calls sizes and cases that cache them uh we'd like to. As I said earlier, yeah we'd like to optimize all the graphql calls and get them just basically down to their bare minimum um and yeah.

B

That's one of the great things.

A

About graphql right you can, you can request just the data you need um yeah. Hopefully that's not too difficult for you all to do, but would love insight into how that goes for y'all in terms of customizing. Those graphql calls if you're, using the pw studio ones out of the box, anyways.

B

Yeah at the moment is mainly all the basic stuff that existed in graph in pw studio is being used and, uh while we'll see all the custom stuff is uh brand new and that's that is down to its bare minimum. But some things especially check out there's quite a lot of data moving around so yeah. We need to get that done.

B

A

Thank you very much for demoing that um that was really cool. Thank you.

A

I think we have about 10 minutes left, so I will try and I'll take over from here rush through my demo, so that we can get to calcovins.

A

A

So I'm just gonna demo, uh some some performance, optimization that we've been doing speaking of performance. um The uh one of the last tickets in this epic that we've been working on was to clean up some of the bundles. um The main to the client and vendor bundles were pretty big and they still are pretty big um and we'll, hopefully be able to continue optimizing.

A

Those as we go, but um just uh just some low-hanging fruit was this the the these things that we include and are rendered, even though they're not actually visible, so things like modals drawers and drop downs and to to optimize this uh well, let me see if I look at that, um you'll see.

A

You'll see um throughout the app in certain components, uh there'll be areas will where we use react, lazy to import the component and then suspense to render, and that will let webpack chunk that component and lazy load as necessary so that it doesn't block the main rendering and just to demo that performance. So this is this.

A

This change set is pretty big, but this is most of the changes in here are literally just moving things from react, or just from direct imports to react, lazy and then wrapping them in suspense and potentially a fallback, so immediate savings, if you're in chrome- and you open the dev tools and you open the coverage tool, you can run it on a page, I'm just showing you the vineyard bottoms category page for as an example.

A

So you see the client and vendor bundles are 540, total byte, 5 and 40 000 bytes 385.

A

You can see all the chunks that are loaded here and it shows you, the coverage tool is kind of cool. It shows you, the un unused bytes in that bundle, so this is develop.

A

I don't think my pr has been merged yet, so that's why you won't see the impact yet, but I've got this running locally. A staged bundle to compare and, as you can see already, the client bundle is smaller by almost 130 000 bytes and the unused bytes has dropped by about 50k. So uh you know right off the bat. The client is going to be a much smaller bundle. There's there's more chunks, as you can see, compared to the develop page.

A

That's because of all those new uh lazy load imports, but the biggest the big, the biggest assets that the client vendor should get should get better. Actually we didn't touch vendor here doesn't look like, but but that client bundle is smaller. So hopefully, as we go, we'll identify more places where we can, we can clean this up.

A

I mean, obviously we still have a lot of unused bites um and I even kind of call that out in the pr there's a lot of stuff that we need from to initialize um when the app loads, like apollo cache and the coverage tool, doesn't um doesn't think we need it. So if you were to look at this, uh you can see uh how how it kind of tells you this red on the left indicates code.

A

That's not executed, um but a lot of this is dependency code, that we don't really have fine fine grain control over. So so the easiest thing for us to do to clean up these unused bites is that lazy loading and then hopefully we can identify future places to improve as we go.

A

That's pr2988 and uh yep already saving 130k from the initial client bundle. So I think that's pretty cool um yeah. Are there any questions for me or pass it over to james.

D

I don't see any questions so I'll go ahead: okay, cool! Okay! Let me share my screen.

A

A little quiet james by the way.

D

um Now, you're good! Alright, uh do you see my screen principality framework? Okay, so uh my updates mostly focus on the targetables documentation uh published.

D

If you don't know, targetables are the new feature in the extensibility framework and there's a new section on this page. You can find in the overview uh extensively framework uh this section that talks about what exactly they are. Basically they let you apply code transformations um right, apply transformations to the source code on or code from dependencies.

D

It also opens up opens up a lot of new possibilities for extensions to interact with storefront projects. So that's all discussed here in this section. um In addition to that, there are two tutorials uh that are available: the attention, development and modifying code targetables.

D

uh This extension development tutorial is basically an overview of. You know how to create uh an extension for pwa studio storefront, and it's very you know explicit and what you need. You know you need the manifest file and what goes in there. You know where and how to declare, intercept and declare files, and it also talks about how you can create an api for your extension, that other extensions or the storefront project can use.

D

That's all in here and also talks about project dependencies and how that relates to um the targetables and what order they're executed and the section how to install and test your extension locally on a local instance of storefront.

D

um This other tutorial modifying code. Targetables is exactly what you know. How what it says is: just it teaches you how to use the targetables feature to.

D

Do code modifications in your projects there's a lot of example code here that you can look at in addition to that, there's also new reference documentation for each of these targetable types, and you know it's just to see what's available to you and it has at the bottom examples that you can take a look at a lot of code. Examples uh for these, because it's a very large topic and it's easier to understand what they do when once you see the examples um for that, um are there any questions?

D

I want that pretty quick, because I know we're running out of time.

A

Yeah, no, that this is great. I personally will uh find value in this. I've been trying to dig into the targetable api a little bit more but, like you said it's a little bit terse unless you get into it yeah.

D

Yeah yeah. I try to provide as much example as I can for each of these types so that people can get an idea of what they do. Yeah.

A

All right, I think we even had a question about this stuff in chat this morning, so uh yeah chris chris broadwater says I want to see the vs code, plugin updated with the targetables type ahead or whatever it's called auto, auto prop for insert after dot, replace, etc yeah. That would be nice who's vs code plugin. Is there a vs code, plugin.

D

Yeah last created one, I'm pretty sure.

A

Oh lars, okay, yeah lara's feature request.

E

Yeah, let's see.

A

Well, now you have documentation, you can use to build it so.

E

I know this feature, it was creating it so.

A

Well, does anyone have any other questions for the team or any of the demos that we saw today? Otherwise we can wrap up.

A

It doesn't seem like it so again, thanks everyone for tuning in this week. uh It was really great to see everybody or lars, at least, um as they say, smash the like, or honk, and subscribe or smash the like button. I don't know how to be andrew, so I'm gonna go bye.

A

E