Magento PWA Studio, 31 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Meeting January 31, 2020

Description

PWA Studio 5.0.0 release, Coupons, Gift Cards, Shipping Methods, CE/EE feature configuration, and Community Corner

A

Happy Friday everybody thanks again for another Mooney sink for PWA studio. We have a pretty full agenda today on demos and community corner topics. So definitely, let's get started, I think the first up in the chute we have Levon, who is here and what's the demo, a recent spike that has turned into some production code? That's a pretty cool feature for us, so Ravana. If you want to start us off and then we'll move to mr. Koppel Van Dyck's.

B

Sure hit me Shelton on second.

B

Pin here's he me oh yeah,.

C

Yeah everybody in the office.

D

B

I know how you sound even.

B

C

Talk to you every day, wrong, not.

B

In losing stuff, so.

C

B

Okay, so this pike was about how to differentiate between C and E chord, because when it comes to certain aspects, there might be something an Enterprise Edition which probably wouldn't be available and C, or something that might that might look different in communicating, but with the Enterprise Edition. Previously we were using boolean variables. You would simply do easy and then, if it is true, then you return a different code, if not you'd written it on something else.

B

But the problem with that is first, you will actually be having some dead code in your bundle, which is going to increase the bundle size, even though it has now no use to it, and also when it comes to graph kill, for instance, certain I. Guess it is it's the geotag. It was doing some kind of a static analysis. So you, if you are returning two different fragments, but since they have the same name, it keeps complaining about it.

B

So we we found a way to get away from that, for instance, if you look at the gift card, something in this case and price summary file, we are simply getting it from the gift card summary file, but then we actually don't have that file in the first place. Okay, if you look at my Explorer, we don't have a gift card. Somebody all we have is gift our summary Dorsey Rogers and a a dot J's file. You actually look at them, see you wouldn't pick on anything and like will react component.

B

So if you look at the env file.

B

Yes, this is where you would mention what Edition you are running in case of C. You would give see, if not, you would give e. If you don't give anything by mistake. If you forget something defaults to see from here, a web pack would realize that this path is, it has to resolve to sing in case of C, if not to e, and then it results that file to the respective component, and that component is inserted into this file where it, wherever it is being used.

B

The same can be used for queries as well like if you have a different query for Community Edition and a different query for enterprise direction, because these are J's files at the end of the day, you can actually namespace them like this, and if tomorrow we come up with a new edition may be a very. This is an example. You could simply add another file here and the way we are using this.

B

See that's where we have lighted this in case of easy. You would just put this guy if not, you would put this guy. So what happens right now is you're telling when someone doesn't give you an ex-con, ssin first cry for the file name: dot wasn't if not file a dot MJS, if not this guy or this guy, depending on the environment and then keep dialing down, if at all, it doesn't find any of these guys. It just throws an error, saying I couldn't find a file for this particular path they actually telling backpack.

B

At this point, if you look at this example, this the client conflict, that's where you're defining this easy turn the project configure. Looking for this variable, the one I mentioned in the env file, if it's not present, it will be defaulted to see, in which case this is not a Enterprise Edition. With this, the assumption being with one particular bundle, you can only serve either c e or e that you can't have two but like the same bundle serving both the clients. As an example. That's the only downside of this thing.

B

E

I have a question: you showed us the Magento resolver, but there's no resolving for craft. Well, it's only for JavaScript, if I'm not totally wrong so for graph. Here.

B

I'm, actually returning it as a js5 itself, it's a normal.

E

B

E

B

Know it's actually a J's file. If we wanted, we could have simply named this dot, C e dot graph here like like we have here because it's it's part of a thing. It's just that. As of now, we are still treating drug queries like graphical queries as jest exports.

B

That's the reason why you see eee dot J's on the top, even though you are actually returning a graphical query.

F

On what about CSS.

B

Css, since this was a spike and we never actually had a reason to have different CSS for C and E at this point, we didn't come up with that. What kind of future we want? All we have to do is just easy.

B

You would just give dot e e dot CSS, or s CSS or whatever is your CSS extension. You would simply give it here and just you would go through with it. This is like telling craft you're telling web pack how to how to resolve something same actually plays with just configures. Well, because when just was doing it, it has to know how to resolve something because just doesn't go through web pack. So even in jest, you have a variable that you could give in module file extensions.

B

You would simply say this: the only difference being in web pack. You have the dot e dot, J's ingest, you would give just eat or just, for instance,.

F

Any other questions can it be used for extending existing components or adding whole extensions or module modules based on, for example, the eversion.

B

Okay, so that totally depends on how you're actually using it, for instance, let's see where are we using these guys.

B

This is the place where we are using the gift card so marry for instance, but at this point you can either go to see either Jess or eat or Jess. It can't go to both of them, but if you have some part of your code, that's common for both and then some part of your code, that's different for both you would define another file. I would presume having the code which will be used somewhere like here oops.

B

B

Maybe some file or chairs something that you have and then you would use that component along with your custom component, custom, styling or possible component here. The same actually goes.

B

But never mind the same. You would do here.

B

You would do the same. You would actually used same component in both C and E and then on top of it, you would give your own wiring like if you want to have different tile to both of them. At this point, that's the only way to do it. We might come up with a different way, presumably like probably here he used J s also as part of like we have to tell the pact not to let's just stop here if you find like a dot, J's use that, along with it, also use a J's file.

B

Something like that. It's just that at this point, where pack doesn't allow us to have multiple resolutions together, so that we might have to write our own plugin.

B

Let me try to show you.

B

There's give me one second: can you actually see my screen right now? Let's.

F

B

The chrome Chrome browser that I'm using no.

D

B

No yes, okay, okay,.

B

B

Yeah so first we actually had a plug-in like this, like we were using the normal module replacement plugin. You can see the font.

D

B

For module replacement and inside which we were like looking for eg file and C file manually, if, let's say we want to have like custom code as part of different files, but also common code as part of a generic file, we could use a plugin like this. This is like, instead of using the extensions we are actually building our own plugin on top of it. So here, instead of using and elsif, we can simply do in the AF.

B

If you find the EEE file also try to find the common file and combine those two when you are returning to web back, we could totally do something like that, but I only reason we didn't go with it at this point, you don't have a reason to to do it. Like all the use cases we had were like completely different, like for Enterprise Edition and forint Community Edition. We never actually came with the case where both might have some common core.

F

Okay, one more question so now these two files are in the same directory, so is.

G

It possible to.

F

Use files from different directories or completely different trees, for example, I.

B

Don't think so at this point, no, you can't, but if you build your own plugin like using the web pack, normal module replacement, you can definitely do if you already have an idea of where II II leave miles or and where C files are stored. If you know the at least from the root directory to the Enterprise Edition directory and the root directory to the communitisation negative, we know that path. Yes, you can. You would simply like here.

B

If you see in the line 177, you are defining the C file path as the context, which is where webpack is running right now, along with it, you are trying to find the file name, dot, seed or chest. If you already know the path where you're, storing these these all Enterprise the Community Edition files, you'd simply use path or join and just change the path so yeah, you can still do it, but that might have to be through a plugin not through liquid back variables directly.

B

B

Anything else guys.

H

Think so ask important.

B

Awesome, ok! That's it from it myself and.

A

B

A

A lot of questions here or in in conversation. So if you have questions for voluntour questions about the pr it's 2121 right, so you can go in comma there's some additional questions that have been posed in there, some good conversation. So taking a step back, we obviously repeating Studio 5.0 this past Tuesday, a pretty big major release, a lot of great content in there. So we have mr. man here, along with Bruce to kind of walk us through the new release.

A

Notes talked about some of the new docks topics that were created and talked through some of the kind of contents of that belief. Gimmick they all all year. Thanks.

F

Can you guys hear me.

I

Okay, so, as Andrew mentioned, we have, we had new release this week, all the changes and features release and you can find them under this release, link from the repository I'm.

I

This is where you actually, where you can actually find all the different past releases, but the top one is 5.0 and I provide a very high-level overview of what's in the release and provided links to specifically scaffolding, there's documentation on the crate, PWA command that was introduced in this release and their topic on talents that came in pretty early in this release. You work with developed, you're, probably already familiar with towns, but just in case people are wondering what talons are.

I

This topic goes over what they are and how they relate to hooks the other one change that has a new topic associated with it as a state management.

I

We've kind of abstracted away state management and use creative hooks that you can use to work with the Redux backend to do that, and this topic goes over what state management is and how it's done. Pwc do and provide some code examples.

I

That I know I presented this release. I'm not gonna, go over the same. You know it's got descriptions here and all the release, the PRS that were associated with this release, which is a lot it's about. 200 I think as well, as you know, upgrade instructions and known issues when this released and with that I'm going to hand it over to Bruce to talk about his page above their documentation for this release,.

G

Alright, so my name is.

G

Alright, so the page builder integration starts out with this new menu topic here, except that's there, and so the first page here is really all about the concept. The overview gives you a high-level big picture, starting out with starts getting a little more detailed here about what it is and how custom types fit into all this.

G

Then it gets into the details about the parts of the integration framework you can read about there and then we go into kind of how it works and the flow of how it works out. Basically, the master format. Html page builder content gets converted to the react components for output on PW Studio apps. Oh, that goes through that. So the really you know to get a real good deal of what this all is. This is a great page to start with it's the first page of the integration Docs, so there's some good stuff.

G

Then we get into the known limitations. You know what it can't do, where it doesn't: support like widgets within tiny MCE, editor dynamic box. Not supporting viewers. Do you know yet I know other things here: staging a preview, passion, validation. Doesn't work not supported yet CMS pages only, which means that you can't yeah with page builder content, you can play create blocks and dynamic blocks, and you know catalog entries for the descriptions, product, attributes and stuff like that, but only the page builder page content actually works right now, other than um limitations.

G

Here we get into this, is you know if you use page builder content with the native controls and content types, this works automatically, there's nothing that the developer has to go in and create. You know their own react components or any of that. But if you do, if you know a lot of developers create their own content types and page builder, this is basically how to you know, review how to create the comparable react. Components reach your aggregators to take the properties out of the master format, HTML and page builder, to hydrate those components.

G

So this is a tutorial that goes through. You know all that you need to do for setting up a component starting out with some skeleton files explaining what those you know skeleton files do we go through basically adding two things: three things. If you stylesheets you're, adding the aggregator property aggravator, it's called config, aggregator you're, adding your own style sheets. That might you know, might need to mimic the styles from the page builder content, then you're, adding components, the actual react components and how to populate those.

G

You have a one debugging tip at the moment we have utility functions which are used in the aggregator to help you extract the properties from the HTML and hydrate the react components, and then we have the source code comments which describe the properties for each component and their their types, and that is it for all page building operations. Again it's accessed in the new integrations tab up top there. Anything Oh, along with this probably next week, I'll actually have on the example site. I'll have in the first part of this overview.

G

We go through the converting a page builder content type called a quote that we also use in the page builder, Docs and I'll have the example code, for that quote, on the page builder side and in the few, the aggregators and the components and config changes on the TV studio side, so that people can go through this tutorial tutorial and you know, follow it. They can install the examples kind of see how it works. We do there's also three videos that really talk about the big picture from an overview how it works.

G

The parts describing all that does will also be I'm. Working with Mike and remember. Caleb may be to get youtube. We have a Magento youtube channel right now, so we're working to get those you know get that process started again, so I can post those videos up there and then actually embed them in Docs or or in various other places in the works. Any questions on any of that.

A

Thanks Bruce thanks James, okay, so next up we have another great demo, I think we have Andy on the line who has been working on gift cards and it's ready to demo that yep.

J

J

What's that all right, what's up yo, let me share my screen, I'm so loud, adding today at home. So if you hear some screams in the background.

J

Okay, so I did gift cards so we're here we're on the new cart page, which I think we demoed the framework of before before. Some of these components were in here so we'll see some of the other contents of this page from my esteemed colleagues but I'm here to show off gift cards. So we have this like price adjustments, accordion that we're calling it.

J

So if you open up the gift card here, section oh I've, added about seven hundred dollars worth of stuff in the cart just just so, you can see that prices going up and down, but pretty straightforward, come in here and enter a gift card number. You.

A

Can apply it? You.

J

See shows up here and a list of gift cards. You can apply multiple gift cards. I've actually only got one test code right now, so I can't show you multiple, but they would show up in a list here, it's pretty simple and then the price over here in summary, automatically updates. This was a $500 gift card, and then you can remove it and it goes back to what it was before the other part about gift cards. That's kind of cool is in addition to just applying and removing them from the cart.

J

You can check the balance of one of these guys, so it's pretty straightforward. Just kind of that information shows up right underneath the text input and shows you how much is left on the card.

J

That's really that's really fatty free gift card short and sweet today, I guess I could go into some of the technical details.

J

A couple mutations here for applying and removing the gift card Graciela expose some pretty direct or that's what the mutation explicitly does pretty simple straightforward. So that was fun and then a couple queries for getting the cart details and then getting the balance itself as actually a quick little query. So a lot going on, but pretty straightforward for the end user and that's giftcards.

J

A

K

Yeah, what happens if you apply the same gift card twice?

K

J

A good question we'll share this back again, so yeah. There actually is an error that happens. Oh by the way. This is a erm progress. So if you see some maltiness like this check, bounced stuffs hanging around position will fix that. But yeah you can't actually apply the same one it'll I'm not taking the actual message. This is just like a hard-coded like invalid card message. So yeah there's improvements to be there, but to answer the question: yeah I can't apply the city I, don't know.

J

If that's a setting on the second honestly, maybe some merchants would let you do that or not, but I think it actually is a setting. But this looks fine huh awesome. Okay, so yeah I mean I'm just taking the response from the backend, so I'm, assuming that they're taking the settings into account.

A

Is a question here in chat from Keith about for UX, specifically asking shouldn't a gift card number be partially obscured so Scotto. If you want to weigh in that and on that, I think something maybe we haven't considered, but we could take back to the drawing board right.

A

Interesting, maybe maybe yeah it's a great great question. Keith, we don't I, don't think, have an answer for you right now on it we'll go back and do that. Do an assessment there on the US side.

A

The question was the gift card number be partially obscured, like you would obscure.

H

A credit card number.

F

A

Good good feedback for UX we can go back and take a look, definitely want to make sure we still have time at the end of the call for our community quarter content. So we have a couple more demos here that we want to push through before we get to that content. I think we have even up next, who has cubans cubans.

C

This won't be any different than what you just saw really with andis.

C

Andis demo and also I, couldn't get my instance working properly. So good thing is: I took a little gift capture back when I do this work, so cart cage.

C

Well, nobody can see anything alright, so yeah. So I can get this room just now having some computer issues, but the gift works. So, as you can see coupons, it's pretty much exactly like what gift cards, what you saw with gift cards, except that you can only enter one and you see once you apply the price summary total is updated with the be applied coupon discount, the graph QL tells us is now applied.

C

There's an error state there, which you can't see in the gift where, if you like, enter an invalid one is invalid, coupon but yeah. This is just a gif on repeat really just over and over. Okay. So.

A

That's why there's two.

C

Point yes, I, don't.

D

G

C

My computer and for some reason my browser Navigator that online was false for some reason.

C

Next thing, I did I wanted to show off real quick was breadcrumbs, but since my looks not really working, I can't show that either, but breadcrumbs were I. Guess I could just talk about them, real quick.

C

So it was a really small change in two three four category URL path is now turned which lets us do intermediate breadcrumbs so before the intermediate categories were not linkable, so that I might not make sense but like when you go into a product, and then you see at the top of the sailing, foam tops sweaters and then the name of the product, but sweaters breadcrumb wasn't actually clickable.

C

It was underlined and looked like it was clever, but if you clicked on it, nothing happened so now, just by adding this to the the graticule response it works, the path is now linkable and, and then the last thing I wanted to show was we have a utility called validate queries that that that was implemented a while back before we've done the split from many a UI and veniat concept, and so when we did that we split up components between the two directories, this utility stuff working.

C

Now that we're doing a lot more work with graph QL lately, especially with the cart I kind of wanted to get it running again, to see, make sure that we were, you know, linting our graphic Oakridge make sure we were just writing everything correctly.

C

So this is a sample output. I ran it against something a while back, but you can see now if you run the command- and we don't we're not running this- on push. There's a little debate about that internally, whether we wanted to make you know make this a prerequisite for pushing but I think we're gonna hook it up to our CI. So you guys are writing graph QL and you and you have a pull request. You might see an error. That's like your graphic Hills invalid.

C

So just if you're writing, graphical I would say, try to run this run this to this utility. It's just yarn run validating queries, you don't miss your invalidate queries and it'll. Tell you the stuff is, if you're, if you're, using the fields that are deprecated, which is just a warning since they're not actually removed. It'll tell you if you have some other invalid things. You know if there's something that's completely, not an invalid schema, it'll, he'll, it'll error out for you, so yeah.

C

It's just cool that this is running down then merge to develop some any questions.

G

F

A

And so, with our last demo today we have Tommy who's going to go through his shipping methods. Pr.

H

H

Alright, so lightning round, I did shipping methods yet another new item here in this accordion. This was mostly done, but then we got some UX feedback.

H

Because of UX feedback that we wanted to go ahead and apply so I already have an item in my cart. The shipping flow is kind of it's gonna, be gated by making sure that this is collapsed. We don't want to show any kind of urge people to do this unless it's something they are interested in. So once you get through that gate, I will see kind of fields. You would normally need to estimate shipping a little different from luma and that we only collect the fields that we actually need.

H

So it's a lot less a lot less to the user. They just want to like estimate before they proceed to checkout.

H

This is all we we just brought over some like simple logic where, like some countries, don't have States I think we might need to adjust these labels to stay. Let's say like state province or state region. I, don't think. We've decided on that. Also zip is pretty local to the United States, as if postal code will probably get a label change. This is all dependent and driven from data from Magento. So when you switch the United States you get a new list, I go to France I should get a new list.

H

H

And then from there it's pretty straightforward: you enter your data, they get shipping methods. I need to do some loading state, because this is actually hidden. Some public carrier API, so we're in SPS, Ben X. That's gonna take a little bit of time. So we want to make sure that the loading indicators correctly tell the user that we are do expect kind of some network latency here and then very straightforward. Once you select a method, it's also hitting the API. So it does take like a second or two, but you'll see once the once.

H

You have successfully like set that method on your heart. You'll see that it updates. You select anything else. It'll update the totals as soon as that's done and then kind of all the additional stuff related to like.

H

A zip code, all the additional stuff related to like selecting other shipping methods in another state. So if there's like additional acts, all of that is just kind of automatically done with this new kind of like graph QL cat automatic cache update work that we've done, that, like each of these mutations, just trigger that query to refire and then react kind of works out what it needs to re-render.

H

So it's been a lot easier kind of interacting with these other components, just barely like updating that cache, they automatically rerender, it's really cool, but this should be landing here in the next couple days. I have just some loading state stuff to do. I think we're gonna do like once you dirty the form, we're gonna, hide these shipping methods and just show the button.

H

If there's any feedback or any questions, please let us know, or this lands.

A

Great thanks Tommy, so that's it for our demos. Here, in the last few minutes we talked about last week, we have a new port of the caller called community corner, insert rainbow community quarter graphic so Jordan. This last five minutes of the call is all yours, that's kind of top of mind for community sure. Give me a second all.

K

Right, can you guys see my screen.

D

K

So a large opened a proposal for I guess respecting the configuration and I just noted notice that the result has already commented on it. So I'm not sure if this is still a valid question from Lars or is it still open? So maybe large you can. Let us know if you have enough information.

E

From from my point of view, I from my point of view is, there are already some commands, but what I li like to see here is hey. We we need this feature from from the PVA studio, core team and speak about a concrete implementation, or something like that and yeah. This is. This is, from my point of view.

K

Okay, so we still need to elaborate on this a bit more I guess yeah.

E

K

H

I mean we've talked about like config like pulling stuff from the magento config, there's kind of like a chicken or the egg thing we're like we generate our bundle based on some of these config values so like doing stuff, even with the Service Worker could mean that your bundle is way larger than it needs to be I mean we could limit the types of config things to make sure that it's not something that dependently renders certain components, but I think this is still something that yeah we do need to like discuss internally figure out like the best suggestion, whether or not it's.

H

This is like an intermediate solution, but we do suggest like regenerating your bundles based on config value changes, but that definitely I mean has some like development caveats. You don't want to like redeploy your front end every time, there's just a config change, but having to run through this I. Think there's enough information for us to like kind of make a decision put in something for the intermediate. So these that you can do more config based render you know we can have that to the board. You know the track discussion ourselves, yeah.

A

I think this is definitely definitely something the team have been discussing internally.

A

So Lara's, thanks for the PR and I think it gives us some more great information, some great detail here, so not something that we have properly groomed, but something that we should pull into grooming and come up, but, as Tommy indicated with either a temporary kind of solution- or you know intermediate solution and so we'll we'll kind of formulate a better response there, a better kind of idea on what the solution will be in and update the uptake the issue here and obviously update. There's the Committee on the kana upcoming call.

H

Yeah I agree: we should groom and get an answer.

K

Yeah, it could be a good thing you like this or that you want to say anything large and.

E

Cool. Thank you. Okay,.

K

So another thing you guys have probably all seen is we opened the you may TSE, oh snap, publicly available, so please check it out, install it and let us know what you think: any feedback is more than welcome and we'd love to see bully crest. So is there anybody that has like questions about SEO snap? That's on the line.

K

Morphic question and somebody asked about a multi-language and I know. This has been a topic a few times in the inside, and so maybe someone from the team can elaborate a bit more on where we're standing for Internet vegetation.

A

Yeah I'll jump in here so internationalization and localization right is definitely a roadmap item for us coming up in the next couple quarters, of course, we've heard from the the community. You know there are ways that we can accelerate the the delivery of those features and we are open to that. And so there are there existing conversations, I think with members of community who are looking to contribute here on a solution for multi locale. So something that's definitely coming up.

A

Something that's planned if you want, if you want to contribute in that area, definitely reach out to us and let us know, but as of today, it's it's just an upcoming item. That's following some of the venue feature work that we're doing right now, so I'd say stay tuned and if you want to contribute there, let us know and and we're absolutely open to PRS that help us accelerate the delivery there. So.

H

Yeah I mean on internationalization itself. Right is, you know, gonna be one of those things. It goes through a you know: I'm, an architecture, phase right, yep.

A

H

A solve problems been solved by a lot of different. You know CMS's and websites, including Magento, so that's gonna be all those things where we'll evaluate a lot of the approaches out there, including Magento's, and see how it fits with the react and npw a you know like core principles that we're looking at.

H

So that's that's, gonna, be the trick is which, which one fits into our ideal in a solution of loading, things on the fly and having like, with with what we've all looked at earlier, the the C versus EE question same kind of principle. A lot is there.

K

All right awesome, thank you! um So I guess that's it for the community corner, so I just ready like a subscribe part I give it back to Andrew.

A

Yep so I think that's it thanks. Everybody for joining, don't forget to smash like and subscribe honk. If you, like it onwards,.

A

What's up with the hunk, if you like it man, the internal team name, isn't is untitled geese so.

G

A

Thanks everybody have a great Friday, have a great rest of your weekend and we'll catch you guys next week.

K

E