Magento PWA Studio, 1 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Meeting 01 May, 2020

Description

6.0.0 Release notes and new FAQs/Tutorials, Price Adjustments components, New Dialog Component, Sneak Peek at upcoming Mini-Cart Redesign, and Extensibility Framework

A

A

Right happy, finally, everybody thanks again for joining us on another community thing for pwace to do so. We have a pretty packed agenda today. We've been pretty busy over the last week, not busy before that. Obviously that's a bad joke, but let's jump into kind of the content that we have today. First up, we have mr. pocket villain who's going to walk us through some of the latest release notes and the progress he's made with the FAQ, which obviously started as a kind of community plan initiative. There.

B

Okay, let me share my screen and.

B

You see the repo.

C

We can okay.

B

Cool yeah, so this week we released the very studio version 6.0 and then shortly we released 6.0.1 hotfix.

B

As always, you can access the release notes and this release tab here in the repo takes that about one contains a hotfix for the scaffolding that they Lars identified when he was looking at the six federal release. The release of we released a fix for that in 6.1 and the main release 6.0 contains the initial framework for extensibility that james zetlen works up worked on. I think that one contain page builder only James this yeah, that's right. That's right.

B

Let's stay tuned, yep, there's also teams also improved caching and data fetching, as well as components for the shopping cart page that we demoed in previous community community meetings. That's also available in 6.0 and also during this period, I've released a series of tutorials from our community ma'am, remember, Ross and C you can. There are some links here: PDA studio fundamentals, there's additional ones that I hadn't list in the release notes because they're more recent, they are the modify site footer using component props and CSS modules, the other new thing Docs related.

B

It's the frequently asked questions page. This was an initiative that led by Jordan and Lars and I. We talked about having just a page that we can direct people to, or people can just go to to look at the most most asked question by the community members, especially in the slack channels. We keep getting the same questions over and over. So you can check out this page and you know provide answers whenever somebody asks that these are the team has reviewed these. This isn't, you know, set in stone.

B

We can we're open to suggestions on questions that you want added here, or you know, changes to any the answers we provided or updates.

B

Are there any questions.

A

Yep, if anybody has it's Justin personally, to added that make you obviously slack as a channel but I assume, there's also a mechanism in our dev Docs to allow for submit that that finds its way to you sure.

B

You can create a an issue in the repository, but slack was the most direct way to to reach us me or any of the community maintainer or any of the team I like yeah.

A

Awesome any other questions for Jim thing: around release, release notes at the key: u tutorials.

A

Awesome so up next we have Steven who cannot hear anybody I assume still in the call. So let me black him.

D

B

D

Wish that hold up a card- or there was a piece of paper around here- alright.

E

I think I'm up I got the message can't hear anybody. This is this is fun.

F

E

But David but now.

A

E

You so I feel even weirder, but that's fine on the start. The really weird feeling! Okay, sorry, if I talk over anybody, I'm just gonna just gonna go so I picked up the price adjustments features for I hope. You can hear me by the no I did you can I picked up price adjustments for check out, which was a component that was already done for the cart page, but I figured since I was gonna, be looking at it.

E

I would take some time to ask you X or any stylistic changes that they had, that that maybe didn't get addressed in the first pass, so so Mia and Scott I worked with them and Jimmy and you'll see some minor differences, but the old, the old coupon code and gift card were kind of not aligned. Here there was some style for the for the gift card. Where that's not the view where, once you applied a gift card yeah, this is the old view.

E

You had the add another gift card button at the bottom, but you wouldn't see the entry until you clicked it and there and the list of gift cards was, was sort of added from the top down. So that was changed just a slight bit and I will now show you. So this is the cart page again. These are reusing the components. So cart and checkout have the same components. They use the same graph QL.

E

So the cool thing is enter a coupon code on the cart page enter a gift card on the cart page and the only things that we're doing with the data is making a graph QL request or mutation call and then rendering that result and when we go to the checkout page it already has that information in graph, culés or Apollo's in memory and in our persistence so it'll just render correctly no extra network calls will be made, which is just kind of neat, so I'll go ahead and just apply a coupon here.

E

I hope the back end is fast. Oh it's not that's pretty! That's pretty slow, but that's okay. So you can see the discount supplied is normal. I'll enter a gift card and you can see check balance should work. It's a five million dollar gift card. You can buy an island with this gift card and then, let's see what happens when I add another gift card oops. Why there now? You can see the the gift card?

E

Entry is sort of always there and the the the list of gift cards that have been applied is now below, and so, if you have any comments about this ux feel free. The pr is open. It's actually still in the ux review stage of our process, so I did development and now I'm working with Sami to verify all the changes I've made and then after that they'll be reviewed. So let's see well yeah. If you have any feedback about this print view, then we go to check out.

E

You guys are getting a view current checkout, so this is pretty much almost done for guest shipping information method have already been selected for the user. Payment information has not been submitted. Yet if I go into the coupon code, section here or the gift card section here, you can see those entries that I applied before I'm scared to click remove right now, because the back end is being super slow and my just stall out, but yeah.

E

That's basically it so the the components were already exists are already existed, but just stylistic changes really and some reorganization on gift card and that's my demo, so I'm gonna stop sharing. But if anybody has questions, I will look in the chat for them.

A

Okay, so thanks Steven yeah. If you have questions for Steven or what he's done with price adjustments, please just post it in the chat that way he gets a chance to.

A

Answer those questions and of course, if you have any comments around the UX or kind of anything, we're doing the in the cart and checkout area feel free to go into those pr's those issues and communicate that so up next, we have mr. terra nova he's going to talk to us about the new dialog component. Oh.

G

Yeah good morning, whoops all right can y'all see the storybook.

G

Cool all right, so there is a PAPR up right now called the dialogue component. It was pointed out to me that that sounds pretty pretentious, but I originally had called it a dialogue component, but the whole point of this component was to kind of make consistent throughout the app.

G

How dialogues look so we were working on that checkout page that Steven just showed, and the three different sections, shipping information, shipping methods and payment information all had like an edit dialog that came out that you once you entered that piece of information you could go in and edit it and three of us took those tickets at the same time and implemented the dialogue slightly differently each time. So, even though we all have the same mock-ups they're just you know, minor inconsistencies and developer preferences, and things like that.

G

So the effort here was to provide a dialogue component that could be reusable throughout all of venya and obviously it has the same kind of CSS classes overrides. So you can pass in your own styles and things. So this is what it looks like. The default looks like for venía, but you know you could pass it. You can override each piece of this to make it fit with your theme. So this is a basic dialogue. This is a dialogue.

G

It has a header up here which will show a title, and this kind of clothes X button you passing or the caller will pass in a non canceled and a non confirm callback function. So this X in right now this those callback functions are just alerting back like the action that you took. So this X button will call it call the cancel one. Obviously also the cancel button will call the cancel.

G

You can click on the mask behind the modal, the dialogue that will also call cancel, and then the confirm button is the only thing that calls the on confirm callback.

G

There is actually a form inside the dialogue component internally, so this confirm button will also call the on submit will trigger that on submit of the form, let's see yeah. So you pass any kind of content that you want in here to the body of the dialogue and this kind of Chrome I'll call it the header and these buttons will be added for you. So you don't have to worry about any of that stuff.

G

Let's see, closing the dialogue, so the previous story showed.

G

Just some alerts, when you click on cancel and on confirm- and this this is kind of just trying to show off the animations kind of slight fade out for these, which went back to their own story. A little fade out for those ones. So that's closing the dialogue.

G

The caller is responsible for closing the dialogue, because, if you had some action that took you know, had a network request or something like that, and you didn't want to close the dialogue until that was successful or whatever you you can control that, so that's kind of consistent with how we do it all over the app right now anyway.

G

Here's an example of if you have a really really long form or lots of content in this dialog again when we implemented this on the checkout page individually independently. We did this differently so I. Had these cancel and confirmed buttons kind of sticky here on the bottom and the content would scroll behind it, but we decided that's not how we want to do it.

G

So you kind of have to go through the whole form or your users have to go through the whole form or whatever content you're trying to show them before they can get to the cancel and confirm buttons down here at the bottom. So that's this story sharing that you can customize pretty much any part of this, but obviously that you're, seeing the title of this thing changed with each story. You can change the text. That's on these buttons. One other cool thing about this story. Actually is these buttons?

G

The way this grid is set up will always be the same size. So if you had a really really really long text here, it won't dwarf the other one if they're not the same size. So these below kind of stays stay. The same last point on this: one is, if you do have extremely long text, it'll it'll cut off nicely.

G

It won't just overlap the button or anything like that modal mode, so we're getting a little bit and on nitpicky sounds bad, but like we're calling this the dialogue component and then a modal is kind of a subset of a dialogue. So a modal you have to interact with this content, so in modal mode you can't close the dialog by clicking on the mask behind it.

G

You have to actually like confirm or deny or make a choice here and we're kind of going over some of the edge cases right now on that on the PR you know, should we even have this cancel button in modal mode? That kind of stuff like what should this X button? Do that kind of thing? So, if you have opinions a lot of snow, the PR is two three six five.

G

So that's modal mode. You can see this form with initial values, so the dialogue actually takes form props prop and it just spreads those out on to the internal form. So whatever you can do normally within forms form, which is the form library that we use in vania you can. You can pass here any props that you can normally pass. You can pass right through dialogue into the form, so this is like an initial value. That's it here.

G

I can like change this to whatever and the cancel buttons and the cancel button, and the closing X will reset the form which just means it goes back to its initial value. So again, there was some inconsistency with how we did it on the check out page individually. So this kind of brings all that stuff consistent throughout the app and then, of course, you can cancel. You can disable buttons. So, with the previous example of hey I confirmed something can I just spilled, my water all over my desk.

G

That's awesome, I confirmed something, but you know it's gonna be a mutation or something like that. It's going to be a network call. This is simulating like hitting a back end and coming back five seconds later, so you can see these buttons greyed out.

G

Disable. This closed is disabled and you can't click the max mask behind it. That's about it for the story books. This is implemented on the checkout page currently on the shipping methods, edit modal and then there were other tickets that I spun out for shipping information and payment information. So those will be coming up soon, but this is kind of the big chunk of value that we wanted to get in. First I, don't want to blow this PR with a bunch of edits everywhere. So what kind of piece mail to those in?

G

But this once this gets in this should be usable and we'll try to make consistent throughout the app the usage of this dialog component, as opposed to you right now. I think everybody is writing their own asides and masking and CSS, and it just ended up being a ton of repetitive content that we can that we kind of consolidated here in one place. So that's the dialog component, like I, said the PR is open now and feel free to add whatever feedback you have on it. Thanks.

A

Thanks for thanks for pushing through that distraction, there of almost destroying your computer.

A

Long has had a quick question and chat around if it's possible to have the buttons of sticky buttons.

G

I'm going to talk with you X feel free to comment on the PR. We can talk about it for sure. Ok,.

A

All right so Andy's clearly focus on.

A

If you have questions for him post them on the PR posting the slack that way he has a chance to get back to them and will move on to the next topic on the agenda. So up next, we have Sandhya here who's going to give us a sneak peek at the mini cart work that they have recently designed. So obviously just a quick context.

A

We've been doing a ton of work in the car area and check-out area as those go live in the app right we're going to have to kind of reimplemented mini cart, which previously has served as like the one-stop shop for everything. You know, cart, checkout, everything within vineya, so that will be a change. That's coming down the pipeline, but we've already had they already have us who has taken some some cuts at designing. What that new experience is going to be so Sonya.

F

So just a quick context set so we've been discussing mini cars pretty thoroughly couple of weeks and the consensus that the team has reached is that on desktop mini path will exist, but on mobile we won't be doing mini car. It would be going directly to a fully fashioned car page, and the reason for this is that, as it is, real estate on mobile is limited, and we didn't want to.

F

We wanted to make a very clear distinction between mini car and focus, so we've specifically decided to limit the types of product operations or actions you can do. It is meant to just be a place for you to look at the products that you've added and possibly remove them any other more complicated common operations such as edit item or other things. You would go to the full cart to do. If you wanted to manipulate that, and then the mini car has a link to go with the cart so I'm going to share the prototype.

F

As always, I mean these decisions are made based on kind of the research that we do when the discussions are knowledge that we have collectively on the team. But if you've got use cases that we may have not considered of any feedback, you want to pass on to to kind of better inform of the work. Then please feel free to either contact me on slack or just post in the PWA channel, as a thread officer. That Dan would likely to typically do I'm going to share my screen.

F

Can everyone see my screen.

C

F

Here we are the PDP I'm, starting with the shop, has already chosen a product configuration, so they will click Add to Cart. We have some validation on the button as well as this counter will appear and we're still deciding on kind of the animations and the speed of it. There's feed-in XD has been slowed down a little because otherwise it doesn't child stayed on blue jeans.

F

If it's very quick, it's deliberately so young, and we also made the decision not to automatically open minicard every time a product is added because they have confirmation from the button. They also have confirmation, with the number counter that the item has been added. So if they wanted to view it, they could click into this, and the mini cart has the number of items the total product listing or when you remove the product, regular checkout express checkout and a width of the shopping bag.

F

Now, if there were more than one item, the decision that we've made is that we will show, in the view a minimum of three to two slightly plus items, and this footer of the mini car will be sticky. So they will never really lose sight of the go to checkout button, and this will be an overflow small area. We're also considering maybe adding some kind of mask. That's a little bit of an aesthetic engage content so that the focus is on the mini car and the items in cart when the mini car.

F

So if somebody wanted to remove an item again, this animation is an XD is probably not possible to translate this exactly, but it and was so kind of discussing.

H

F

Item would have called school waiting, the mini car and the height would then kind of adjust. So that means it items are added, but the the padding will be relative to how many items are in the cart. So that's kind of the end, the mini car demo, it's pretty simple and straightforward.

F

Does anyone have questions.

A

Yeah I look like Jordan. That puts something in the chat there, but Jordan also lets peach it. But yes, this is also a little bit of a sneak peek at you know the upcoming venue redesigned and yet redesigned right. So I saw me. Maybe if you want to speak on that a little bit, that's I think a new food for the audience here. Yeah.

F

For sure so we've been thinking through.

F

Branding work in establishing a color palette. Now it's a delicate balance because feature completion as and who will stay, and we all agree on the team is the highest priority, but because that is what enables people in the community to kind of stand up their own W ease, but at the when all is said and done, we do want to also have a nice looking demo for the PWA storefront, and this kind of rebranding is an effort in that direction.

F

Scott and I are working very closely with Jimmy and the style guide work he's doing, and the hope that we have is that this new styling is applied to this style guy and that we'll be able to kind of seamlessly cut over to the new look and feel in some time whenever Jimmy feels it's ready to do that. This is the hole. Of course. We can't promise that will happen, that this will always remain a priority.

F

If it just so happens that we have more features to deliver, then obviously we will be prioritizing that, but yes, the we're all hoping and wishing crossing our fingers and eyes and everything else that we can cross that eventually we'll be able to deliver kind of looking demo. In addition to kind of be, and the enablement for everyone in the community for their storefronts.

I

F

That looks really.

I

A

It looks like we have one less person there from Michael who's that who asked if we're moving away from the side bar style, mini cart and menu user account last resort. So.

F

To answer your question on mobile right, the cart and the menu will still be in court and called a draw for lack of you know, I guess most specific technical terminology.

F

In my understanding on desktop, we are going to trying to make more optimal use of the head of space that we have, and so the kind of cohesion and design we're working towards is that the my account menu and the mini copy, a subset of the header, would have a similar treatment in terms of the my account menu and then the mini top descending in the header, a because we have the real estate to do it and there's no reason to force that content and live in a draw.

F

The other challenge that a draw poses on desktop is that the buttons to go anywhere else from that draw would be kind of at the bottom of the viewport. You know kind of adjust to its height. So if you only had one item in the car- and you had a draw with the button at the bottom as we do today- not the best aesthetically super variety of reasons. We've decided to move away from that model desktop, but on mobile and still be doing the site design hours of a draw hope that answers the question.

A

Awesome, do we have any other questions for Sonia.

A

Right well, thanks.

E

A

A great great ux demo, great peek, at some of the upcoming design work some of the how these features are fitting together, I think as we're rolling forward with Vania and now for the last and the thing that most was most excited for I. Think on Hinton that we had mr. zetlen here to talk about all of the work that he's been doing around extensibility the things that we were released recently and the things that are upcoming currency largest super excited around extensively. So mr.

A

Zetland, we will turn it over to you about 13 minutes, left I! Think on our time. So hopefully we can. We can make it through everything hi.

H

Folks, I'll do it in five. Thank you very much. First of all, I'm not sure I agree. I appreciate the boost, but I was equally excited for everything that we saw today. I mean Steven an Andrew. Your UI improvements are amazing. The the mini cart work is semi and I had a lot of discussion about it and I really liked how it's coming along, and you know I guess James feared them.

H

I was good too James and I are gonna, be working extensively on the documentation for what I'm about to show so I think we're all doing super important work, mine for what it's worth is worthy and is available for you to look at since this demo is going to be pretty fast at the following URL. Let's figure out how easy it is to share the screen. Can you see my screen.

H

Blue jeans worked the first time this PR has been outstanding for a while, but it has only recently been edited into shape for other people to look at this PR is pretty large.

H

It initially began as an effort to extends the new targets, concepts to more different areas of the PWA studio functionality, but it became clear that, in order to do that, we needed to establish some basic guidelines how it's done so this PR evolved into both some enrichment and some documentation work, and because it's now there, if you check out this branch in order to review the PR yourself, you will be able to go through this demo with me and now I'm going to do the demo.

H

If you go down here to where we usually would write some quick and easy steps to reproduce the issue and demonstrate the functionality of the PR there, we have a link to my documents, which is a larger review of target functionality and some description of how it's supposed to scale. But the QuickStart is probably what will interest you first. So, let's just go through it together. um What we're trying to demonstrate is that the concept of targets is more generalized than just what we demonstrated in page builder earlier.

H

A target can be written for and implemented for any part of the system, and so you can use targets the same way that you might use our own components, importing them and using props, it's just a slightly different API and it allows you to do more magenta like extensibility. So first of all, this says clone the PWA studio, repository I'm gonna. Do you one better and say let's go ahead and create a new PWA? Here we are. Oh, that's a little small.

H

Can you see my terminal very well.

H

Maybe a little bigger, yeah yeah, everyone says yes, so I'm gonna run the equivalent of NPM creates Magento pw8, because this isn't published yet I'm, actually not going to do that and instead I'm going to run a local version of it. Just a small thing.

H

It's created here.

H

So what happened here- oh whoops I, can't believe I did that what on earth.

H

Okay, so let's call our new repository hello to targets. That's fine! Yes, it's me sure, that's fine!

H

That's Braintree, we'll use NPM just to demonstrate that you can use anything so I'm using the debug mode, which will be necessary for you to use and we can go into elsewhere in order to run the package creation script that you have locally I wouldn't been able to demo this with the scaffolding until quite recently when the team, together, Tommy weevil, some other folks, Deb Patil accelerated the merging of a bug-fix or scaffolding which I want to call out and I really appreciate. So here we go.

H

Let's go CD hello targets and, let's open this up in our code editor there we are I, see it okay. This is one of our generated scaffolded projects and, as you can see, it has venía in it.

H

But only a very small shell surrounding the venía application components, etc. So it's hard to make little changes like, as many people have asked before, like to add a custom page. Well, not so much now, let's go through with this and start making the changes that are suggested here. You add it package.json and, let's add a PW, a studio section.

H

The PW a studio section they expand to have more functionality and it, but here we're specifying targets, there's an intercept file and we're gonna say it's at I, don't know targets local intercepts because of this explicit connection, you can actually call this file. Anything you want, but we'll just stick to the script. Next step is to create that file and pay this stuff fans that'll, be nice and fast. Let's make it targets, folder.

H

H

H

Okay, there you go, you can see in this file that it exports a function that function receives something called targets that object called targets is able to call up the targets of magenta of any UI and use something called routes and we're pushing something into routes. We're pushing an object that describes the name of the route, a route pattern which looks a lot like a round pattern in the path of the components, and this path is resolved directly to the file on disk called greeting page J s which, unfortunately, does not yet exist.

H

Let's fix that we're going to create greeting page done, jus and copy this implementation into it and put it where it says it goes.

H

Okay, as you can see, there's a real, simple page: it's using a hook from react, router to pull things from the URL like the KU parameter. If it's not assigned will call it nobody, we got a little bit of styling and then something super super simple. So now that this is all together, these three files, the change that declares that we participate in targets, the intercept file that does something to targets and then the new route that is to be targeted, I, think that should be enough.

H

Looks like we have a new custom domain, Oh.

H

No we're up on 13 minutes there we go and let's make a new fresh window and open our store. As you can see, it is a new Vinny, a store you've seen these before, but now we have a new customer out and I can prove it at the page called greeting hello. Nobody, but of course, since it is a route and it uses those react, router hooks because it's been inserted directly into the routing table and actually use a who here and say hello world.

H

So there's a lot more demo and there's a lot more to read. I would recommend that you go to pull request to two nine eight to see more, but there you go, there's an example of scaffolding out a new project and then making changes inside the venía application from your own project directory and that's just the beginning. Eventually, we will want to.

A

So we probably lost, like the last like 30 seconds, on what you're saying no kiddin. Okay, maybe that was alright in goods in here may now be 20 seconds. We can hear you no no.

H

Kidding really.

A

Maybe we can hear you, but you can Oh lariats.

I

H

A

Anything hello. We can hear you alright.

A

C

A

What about this, a chat, I guess.

A

Good one Steven.

H

H

H

Okay, sorry about that questions and I can try to take them on there.

H

Questions I can hear you now: okay, Steven s, how important it is.

H

So that it's not extremely filesystem bound, because we want to be able to change the filesystem structures and to let you change your filesystem structures. The only reason I put targets outside of source is because the targets are written in nodejs code, and so, if you have your own prettier and linter that looks around for different code styles, it might be useful for you to keep your target implementations outside your source folder. But that's entirely up to you.

H

A

uh Look this is, this is the hot topic. This is something that everyone definitely wants to talk about. So, like you know, I'd say we're at more pretty much at time anyway. So, let's, let's pick up the conversation in the slack Channel.

A

Let's pick up the conversation on the PR, all right, which everyone is seeing right in front of you right now, 22 98 is the PR and let's, let's have the conversation there and if we need to and I'm following a community Stacy there next week or whenever the time might be, you know we'll make sure to have that conversation again live with the audience with the group here. But in the meantime, you know see you guys on the slack channel with with questions for James around extensibility, so we're at time. So I don't know.

A

If there's anything else, maybe quickly, I'll, kick it to Jordan Omar's on community corner. You guys have anything you want to plug anything. You want to quickly just bring up.

I

Yeah not from my side but I'm on James topic looks really good also makes me probably need to rewrite a lot of work, but I'm yeah really happy with them. What you're building.

A

Anything from here side lowers all good all right. Well, hey! That was a jam packed agenda today. So thanks everyone for sticking through it. You know a lot of had technical issues. Will blame blue jay blue jeans, as we always do, but thanks again, and we will catch all of you guys next week for community soon, though deal later.

I

A

A great weekend once they see they've, do you buy.