Magento PWA Studio, 21 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Sync 21 August 2020

Description

Demos for My Account: Forgot Password, I18n/L10n for Header/Footer, My Account: Wishlists, and team updates

A

Happy friday, everybody thanks for joining us again today uh for another uh pwa studio community sync, so we have a a pretty good agenda today with a number of demos, we'll do some kind of smaller team uh team updates uh towards the end. I think uh both jordan and lars, I think, are out for today. So it looks like the community corner will come in a little bit light.

A

But of course we'll do any community updates take any questions from anybody on the call and then we'll wrap up and get into our weekend or get into the rest of our friday. I don't know um okay, so, first up for a demo, we have uh rohan who has some of the work that he's been doing with the forgot password.

A

Or maybe we don't have the bot or you're muted, wrong.

B

Oh yeah, I was muted, sorry, hey everyone uh good morning, good afternoon good evening as well. uh Thanks for joining us, I.

C

B

Definitely not I just woke up, you know you guys, don't want to see.

B

Me, uh okay, uh so I'll be demoing. The forward password uh section of the new, my account epic, um in the desktop view, we'll have a trigger on the top for sign in and sign in was done, but we haven't worked on forward password for a while. So here's the forward password um right once we click on the forward password link.

B

It opens up a new view where someone can submit their own email address and given if the email address is valid once they click submit, uh the backend is gonna, send an email and the same is gonna be mentioned here. So I'm right now waiting for my email and I got it if you look at the whole email uh right now. The backend is based out of luma template, so the email is gonna show luma, but here it has a button to reset the password.

B

If you hover over the password button, uh if you can pay attention to the url, it's actually the admin panel url, rather than the url that we are running off, of which is the storefront url, because the email template or even the back end does not have access to the the storefront url.

B

uh Once we click it. It opens up a new page. It's a new route that we have added as part of this ticket, and if you look at here, it's actually the back end oops.

B

Let me expand this yeah, the it's actually the back end, not the storefront url that I've been working on till now, so the back in url and then the customer account and create password is the new route, and this route is usually the default route from the admin panel and it can be changed if someone wants to the email.

B

Also, the email link also provides the email to which the user is trying to change the password and also a token that the backend needs to uh needs for the mutation to be accessible, and here I can give my password.

B

And I have lastpass enabled so it's actually like showing a different button. But if I open this and in cognito mode, you can see a different view, so I don't have lastpass enabled in the incognito mode, but here's the complete view and and the toggle button is right here. It's going to toggle the view of the password, and since this is a password very it's a very simple password. Obviously the server is not going to accept it.

B

So when I click save so was gonna say it cannot set the user's password and it could have been better if the server returned. A better um error message saying that the password strength is not uh met or like so password criteria is not met, but that's a that's working progress from graphql, so if once they update their own error messages, you're going to see a different message here.

B

um Let me hide the password and change it to something that the server is going to accept.

B

B

Save and here in the bottom there's a toast and also there's an error. Sorry, this is a success message right here. Let me go back to the view I was on and enter the new.

B

Password that worked.

B

Similarly, we have the mobile view in the mobile view. The only difference would be that you don't have the trigger on the right top corner. It's actually inside um the the left drawer, like in the desktop as well and.

A

If you want to see.

B

How the oops, where is it it's right here? If you want to see how the reset password view looks on the mobile? Let's see that.

B

So the only difference would be that there won't be a you know, a border around it and if, let's say your email or token or something that is required for the mutation to be passed, it's missing from the link.

B

There will be an error message that shows up like something is wrong with the link. Please check the link or try again.

B

That's it on my end, does someone have any questions.

B

B

Awesome I'll take that as a now. In that case, thanks andrew thanks thanks vervon.

A

B

A

We have andula. uh Obviously uh we have a team, that's working on international internationalization and localization. So bill has some updates on on the progress there uh with header and twitter.

C

uh Yes, hey guys um so I'd like to share with you some stuff we have been working on. um We have delivered a couple stories and we're currently working on um us translating some areas of the of the app already uh header and footer in particular. So I'd like to show off some of that stuff that we're currently working on.

C

um So you can see. I have a couple things going on. um I have I have this set to french, so you can see that a lot of a lot of the header stuff is being translated as well as the footer and stuff like um this. Copyright is coming from the back end, so that can be set within the magento admin to be translated.

C

So it's not using uh the react, intl package that were we've implemented.

C

So in order to get a french store working like this, um you need, in your back end, to set uh your store view, create a new store view with the code. um For example, I have french that I want to translate and then a couple other things you would need here as.

C

The you need an environment variable um which is set for me. It's set to french for the store view code here um so locally. I have my environment variable set to french and with that we're passing that to the graphql endpoint, with the store view code here passed in the header to get the start, get store, config data, and that is using this graphql query and then we're just running this all that build time at the moment.

C

um So we can uh see some of the localization happening and then, within uh the main app uh we are um passing in the local um files for react, um for I 18n uh so in within a directory in your app we're looking for an i18n folder with the with the translation. So for me I have a branch of a french translation in there um at a path similar to this, and so we're loading that in dynamically um based on uh the story, locale.

C

uh And then we're just wrapping we're using react ietl, so we're wrapping their international provider around the whole, the whole app and passing in the messages and locale uh to for it to work. So.

C

Here's an example of how we're actually um translating it within components uh we're using react uh here, we're using a hook and we're just setting some of the strings with any values. For example like this, using the format message, method.

C

And you can also use it as their format message component.

C

So that is, uh that is basically it for the demo. We have some of the search working uh as well.

C

In some areas uh search some areas in the my account section and footer links as well in contact, so that is it for my demonstration. um Is there any.

A

Questions all right thanks, anthony um yeah, um silent group today, I guess- uh but this is. This- is really awesome to see the progress that you know. The team has been with internationalization and trans localized content, even in the short time that you guys have been working on it. I'm excited for you know, uh pushing forward with it and uh I'm sure, despite the silence on the call that the community will be very excited, as we continue to make progress on it right.

D

Yeah, I would say that I'm actually stoked, I would use the word stoked. Thank you. Anthony's awesome work.

A

Okay, so up next, we have tommy. Tommy's got some updates on wishlist um and progress on wishlist as well as some uh some side venting ranting. What are we gonna call? I don't know some additional.

E

Updates when you spend two hours on a weird safari bug- and it turns out your teammate has already solved it. uh You know you gotta vent a little bit um oh ouch, but here here very very first we gotta get into vineyardland all right now we're in now we're in it very nice um all right. So let me go ahead and show my screen.

E

uh This is gonna, be a very quick demo because um I don't know if I'll start with the caveat I'll start with the good and just show you what we're doing so far, um and then we can start talking about uh the the weird things, not weird just fun things fun things um so uh wish list it's in. um So this is an authenticated uh piece of functionality.

E

um It's also a piece of functionality is that's dependent on your. uh I call it flavor of magento, so that's open source, first commerce. um So if you are an open source, you get one wish list. If you're in commerce uh you get as many as the back end will allow, I think the defaults five, but you can set that to a million have as many wishlists as you want.

E

But this is the precursor to kind of the skeleton of all that functionality. It will be um uh that functionality to add additional wish list will just be easily toggable uh by your backend inversion. So I am logged in here um as philip j fry. um So now this menu has been added.

E

I think we've demoed it a few times, there's actually a redundant way to get to it, so you can either get it through the left, nav uh through favorites lists or through, uh if you're on desktop, you can get to this new dedicated nav.

E

So um so what I am doing here is I'll just say, I'm displaying, which lists we're, calling them favorites lists um and right now it's just going to be a very generic view, because this is just the skeleton, but um the only thing that's functional right now is being able to toggle the visibility click on any of these buttons. They don't work. None of these buttons work great demo right, but there is a really cool piece to this.

E

It's like something that's initially a bummer, but then the way that we solved this problem is going to be really cool. So um what we have done, so I don't know if uh everyone's on the up and up on what graphql coverage is available, but wishlist is still lagging behind so in the past.

E

Typically we'd fall back to implementing something at rest, but believe it or not, there's not even rest coverage for wishlist. So, instead of just not doing this feature at all or like mocking it to fake data, uh we have the ability with apollo to kind of simulate, um so the the spec for wishlist is done. So if we go to this architecture article, they have finalized all of the uh upcoming wishlist uh queries and mutations that are going to be released in 242.

E

um So if we design our kind of mocked back end to this schema, it should be a matter of when 242 is released. We just flip off this client-side type definition and resolvers that we have implemented so um kind of the the first step here is that I've extended the uh customer type in graph in apollo added this new wishlist field and uh just following the exact architecture um uh schema here.

E

If we use all the same exact types, this is going to be just a seamless replacement once this is released, so we kind of mocked out the type here uh and then we added a resolver to kind of fake the response data right now. So right now, uh whenever you query for wishlist, you're gonna get a single wishlist back that is private, doesn't have a sharing code, doesn't have any items in it.

E

So the next feature that we do in this kind of wish list story will kind of just continue to add things to this mocked response and then, when we get to like mutations and things like that, we can even continue extending mutations um to add those so like we're still even uh we're still using apollo to fire all these mutations. We're just mocking the response that we expect to get back from the network, so um that was really neat.

E

So this will be really cool that we get to build this feature, and it might even be that, like by the time we release this feature, 242 might be out and even though, like technically we're blocked and don't have like a real live back end to test this in um I'm I'm assuming that it's going to be a very quick just turn off these client resolvers start using the dedicated back end in 242, and this will just work.

E

It'll be a fun experiment, we'll see if it actually happens that way, but I'm pretty confident that this will be a really really cool thing to do um and kind of enables us to start getting ahead of graphql too, like graphql has done a really good job at kind of finalizing their schemas finally finalizing their mutations and how they expect them to function. So as long as they we both build to this schema, we can kind of build our feature sets at the same time rather than us waiting for them to finish a feature.

E

So uh this will be really neat um and then, before I get into my rant, any questions about that. um Congratulations! Praise. Thanks.

A

We're not worthy.

E

uh I know it's like a nerdy thing to geek out on, but that's gonna be so cool um and then no it's not it rules. It's.

D

The last piece go ahead: james, I was just gonna say that uh messing with the graphql schema as like a facade around the backing, graphql schema is like murky waters for a lot of us, but it's gonna give us so much usefulness that it's really good that you dove into it.

E

Yes, uh yeah, I think that's we we've done it before with like some minor features. I think this is gonna, be the first time where, like it's like an entire feature, but uh we'll see how it goes, and hopefully it's as cool, as I think it'll be, um and then one last piece is uh our amazing. Qa dev uh finds everything wrong with anything that we write and even in this very simple skeleton, he found a tiny issue where in safari this button here would not wrap.

E

So this is my rant today I learned some html elements cannot be grid containers. So, um if you're like me, I've entirely leaned into grid anything that I want to like place next to each other is a grid and they have a gap.

E

But if you do that with a button in safari, it may not appear as a grid, so this is just you know if you're like me and using grid for everything, this is good to know. It also applies the flexbox.

E

If I would not have been as obsessed with grid and probably would have relied on display flex, um I would run into the same problem. So, if you're using any of these modern css properties,.

E

There's this awesome uh github repo, that kind of summarizes all the issues that you might run into with grid, uh so a curated list of all the weird gotchas in different browsers.

E

So, if anything, uh if you didn't like the wishlist demo, you've at least learned today that buttons cannot be grid containers in safari um all right, that's all! I have any.

E

E

A

Awesome there you go everybody's demo. Is uh it's amazing this morning and inspires much silence? I don't know where I'm going with that, I'm just I'm just rambling at this point um all right, so I think that is it for all of the demos we had planned today. uh Just a quick update, I think before I turn it over to mr zetland, for an update on.

A

uh You know our progress and where we are again, I think you, as you can see from the demos that we showed this week and and last week and if you look at a road map or if you even look at what's going on in github, and we continue our progress on on my account working through the my account features. uh The team is continuing progress on internationalization and localization. Obviously, um and then we have some some additional things that we've been working on in terms of bugs uh that came up.

A

That kind of you know uh motivated us to fix some other feature. Areas like ravan's forgot, password uh demo that he did today. So, of course, we continue to look at uh the tickets that are coming in from the github, uh the github repo, so if you're opening bugs for us, so we continue to triage those on a week on a weekly basis. If you're opening a feature request, we continue to triage those um so I'll.

A

Just say that as a community update since jordan and lars could not be here, if you, if you have any feedback, if you have anything that any open questions that you have around uh projects or what we're doing in community backlog feel free to. You know open issues for us reach out to lars reach out to jordan, um and we can. We can obviously address those those questions, concerns or feature requests whatever they might be.

A

um So now that my little ramble is done, mr zetland, I think you have an update for the the larger group here.

D

It's brief, uh so folks, I am here to tell you that you are not quite rid of me, but you are a little bit rid of me uh and for those of you who have ongoing uh work with me and questions for me, I am going to continue to be available for you during my transition to a new role. um Fortunately, my new role does still involve pwa studio. It's just a little expanded.

D

So um essentially the big change is that I don't get to shout people down in arguments about architecture anymore, because the team is taking it over pretty thoroughly. um In case you haven't noticed, I have not uh been the sole voice, talking about designing and promulgating pwa studio for quite some time, which is wonderful and what I wanted for a long time. um So I have receded into the background and worked on things like extensibility, etc and extensibility in uh adobe.

D

Digital experience, more broadly, is uh a hot topic and there is a new team comprising uh me, but also a whole lot of names that you'll recognize from magento architecture um who are taking up the task of trying to synchronize and and assimilate the different extensibility concepts across our platforms, um and I'm going to be doing that um there are a few loose ends and some additional code and stuff that I have to contribute and I'm going to be doing that in the next couple of weeks, but maybe more importantly, the description of the role should tell you that I still very much have a stake in pwa studio um so again I'll, be around um you'll probably hear my loud voice sometimes, um but I am officially moving on to more of a stakeholder role in this project.

D

For me, this is uh huge and wonderful news because for a while, I wasn't sure this being a large project for me for, for I want to say more than a year, I wasn't sure if um it was going to reach maturity um without me to keep uh arguing about it, arguing for it and now it is a thing that stands totally apart from me, and that is a tremendous relief I'm really proud of it and of you and again I will be on slack and showing up to these meetings.

D

um You might expect a little bit more uh delay. Perhaps when I respond to you, because I have increased responsibilities, um but you're probably used to that already. That's my update I'll answer. Questions uh off the air.

A

Awesome well thanks james thanks for all that you've done for the the project. Obviously, the last couple years, uh you're still going to be around we're still going to have plenty of questions for you we'll still throw plenty of pr's your way, I'm sure or assign them to you and then let them sit there. I don't know, but I don't know if that's the thing that we do um but uh you'll be around obviously um but congrats on the on the uh the new team and we look forward to more stuff from you.

A

Thank you, bigger.

D

A

D

Yeah better for once right.

A

um Okay, so uh that is it that we had on our agenda for today uh quickly I'll just do a quick round table. If there's anybody on the line that has questions about anything, we've demoed today or anything pwa studio, specific, feel free to jump in now or jump into the chat.

A

All right: well, thanks everybody for joining today. um We uh we'll see you all next week. I hope everyone has a great rest of their friday. A great weekend stay safe out there um and we'll see you later.

B

B