Magento PWA Studio, 20 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Meeting 20 March, 2020

Description

CI Build Updates, PWA Studio Tutorials, and early demo for i18n solution

A

Alright, alright, so thanks everyone for joining again, it's Friday, so happy Friday to everyone. Today's 100% remote edition of community think.

B

A

We have a few kind of light topics, I think from the team on our side at before. We turn it over to community corner with Jordan who's, gonna, intro Chris and the team from absolute net / doing some great work around internationalization, which I and there was a hot topic for the community. So let's just get things started today, then, if you want to kick us off with your demo for some of the work you've done for CI, yeah sure.

C

Okay, so good morning, everyone I am sitting my screen.

C

Okay, so I have quick update on CI builds, which we run as part of or like a build process. So for there are some like security reasons and because of which we need to implement some extra checks. So the current flow is like as soon as a community member creates a PR. All our CI builds I each to run, but as part of change. So, if you create a PR, the builds will currently like fail at first and one up like internal team members, or they leave some time like once.

C

We review the PR and like a I, approved label after this. After this, so on your next push or as part of our nightly build, the pH will run the CI beds.

C

Now, that's a quick update on the c-axis change, any quest.

C

Okay, piggy didn't know, that's it down there well.

D

No first time I want to say thank you for working on. That's not a question. Oh.

C

Yeah, okay, so you and like we want to help me writing up it. No just good fun! Good! This! That's a tennis! What I want to do.

A

Thanks, Deb, okay, so yeah, it's definitely great so obviously for community members who have been contributing PRS. We are very thankful for those will go through the process to make sure that they are reviewed, that that label gets add by added by a core team member community maintainer right and for you know, the build process that used to kick off will kick off now. So I think it's a pretty good addition to the project, especially given our new focus on driving some community community additional community engagement contribution right all.

B

A

So next we have mr. Caliban who has a update on tutorials again another great community contribution. That's helped with this. This work right.

E

Bill thanks Andrew. You share my screen.

E

You guys see my screen alright,.

E

F

E

So for docs we have some new tutorials. You can find them here in the PWA studio fundamentals section this one has contributed by community members, Ross MC. He actually approached me and asked if he could contribute all these topics to Peter really studio. Docs and I said yes, and so we submitted a bunch of drafts for me to look at and I've been working through them and getting them published.

E

The these are the first couple of tutorials available right now, projects set up, which is a topic on how you set up a brand-new project using the scaffolding tool, and the next topic is a project structure which goes over all the different files of that newly scaffolded project, and you know their significance and the third one is a tutorial for adding a static route such as you know, Hart page or a login page, or something like that.

E

That's not a Magento specific or not a page that you can find in Magento, and so this goes over the steps for creating that page in your storefront.

E

Are there any questions.

E

Now well, once again, I like to thank Roz MC for contributing and submitting these these drafts and yeah making our Doc's side better.

A

Yeah- and this is thanks thanks James, so it's definitely something that we see come up pretty often and in the community slack, which is that I think that both I receive mr. Sandow. You get a lot of questions around it, so these tutorials are pretty huge and will continue to iterate on and prove them right, but just giving people a better starting place and kind of better handhold on getting started with the project. Using scaffolding, which is obviously newer, I think these tutorials are gonna, be pretty huge as we continue to build on so yeah.

E

A

To James yep yeah.

E

There's still a bunch of drafts I still need to work through. So I'll keep an eye out in this section and lots more awesome.

A

Okay, so I think unless anyone else on the team has something that they wanted to demo I think we'll kick it over to Jordan for community corner in the meat of the meeting.

G

For today, awesome thank you.

H

I

Yeah, we need a graphic for this. I'm gonna make any yeah um yes. So, as you guys all know, translations is something that's popping up every now and then on the tear abort or they get reports, but also on slack, and it turns out that a community member called Chris from absolute net has actually been working on, something which is going to demo and if Chris is actually here, I don't see.

H

Yeah hi, hey so over.

J

To you awesome all right, let me try and share the road screen.

J

It's perfectly saying vs code and then yeah all right, so localizations, obviously a bit of a tricky one. The white magenta works in the way we want it to work the PWA, so some things we needed to think about was like how do we handle graphic? Well, how do we handle setting the store in the headers and things like caching of that in the local as well? How do we handle switching stores? How do we handle routing entry points for different languages automatically setting the liquor store view that kind of stuff?

J

How do we handle all of our strings and phrases translating all of that? You know how do we make it extensible as well? How do we leverage translations we've built already in Magento?

J

If we want to reuse that stuff, rather than rebuilding everything, and how we would want to leverage that in PWA without having to rebuild it, and maybe installing language packs in Magento, for example, so how I've tackled it at the minute is by using a new series, there's something called a 18 next loader from alien fella, so I had to look around and found currently the most popular one, which hasn't been a ton of support. But it is there and supported on how to handle aging in language definition.

J

But then we'd have wafer within react projects, so I started playing around with that one. So that met a few requirements where we could generate multiple locales in multiple areas and merge them together, so how we can handle that is. Maybe we have a local file set up in our venue, a UI, for example, we have a set of locales invent new UI that we want to bring forward into our project, but then invent your concept. We also have our local translations.

J

We can install and manage in the new concept which add on top of the parent ones, and it also allows us to generate multiple files. So we could have a core say, a local file that we've developed within our PWA, but also additional files, which we could potentially build dynamically from a remote right. So we could pull in translations from Magento during build and create them into a local file.

J

So, for example, we have some translations in in US and then we have a French translation for additional lines, but then we could also have remote translations, but we'll pulled in so it did require quite a few changes to how its set up but I tried to make it in a way, that's as less intrusive as possible, so we're starting off in our index file.

J

We've added a 18 in initiator, initiator, I, guess where we're loading in our resource files from multiple areas, save any UI and our local resources and we're in needing an ITN object, which is then used everywhere.

J

We defining a current store view just in browser persistence at the minute, or so we can share it everywhere, because we're doing this pretty early in the process, we're not using books or anything like that. Maybe we move that to a context or something I'm still trying to work out the best way of handling that so that gets a knitted and then first up we're adding the store view into our graphical headers.

J

So you'll see here, our store is included automatically for every graphic I'll call that we're then making so we're getting the right data back, which means content, blogs, product information. All that kind of stuff is localized as we would expect, and then, on top of that, I've created a new cyclization hook which handles storing of the locale in store view. It handles switching of the language and it exposes a translate function which leverages a stand-in for translate but I'm putting it here so that we can replace it with something else.

J

If we need to and then see, if we have an example of us here, we go so we just use a look like any other hook which I've made available in Peregrine.

J

Actually, so you can just employed use less loads of Equalization from Peregrine, and we have our translates function here, which we can wrap all of our different strings that we may have in that, and this just picks up what we have said. You know I ain't in an object and translate stuff, so it's very easy in theory to just go through all of our component files and wrap them like this.

J

What else would definitely switched off? We have a very, very simple imitation of this tool: switcher, where I have two options here, where I can choose English or French at the minimum power code it is, but I would want to pull this in from a get available, store views, craftwell, endpoint in Magento. Potentially that doesn't exist right now. So that's why it's not done, but we would like to link that up to magenta and it just we have a handle, switch language use our localization hook.

J

So, as we can see, this should translate. Menu connects young chrome gone so now, I'm in French I have magazine pocket. We can change back to English here. You can't see it in the URL, but it is actually changing my localization in the URL using the locale code.

J

So that's you know routing as well, where we have entry points, defines sort of multiple locales at the minute again they're hard-coded, but I would like to change. This James had a suggestion where we use regex to validate, if something max it matching that is in the URL, and then we would just pass it automatically, but at the minute I can change it to if ca, for example- and it's gonna set my language by default, let's switch to French I'm in friend my main use in French, and then I can go back to English whoops.

J

If I choose the correct.

J

Book in English and then I'm back in English, so it handles switching relatively simple. So it also makes things like a hot available.

J

In each locale.

J

But also without a locale to find.

J

And what else is the yeah? The second part would be during build fetching translations from a remote service. So how that is currently looking at is we have a I've created a new pass translation CLI in the petabyte build pack area where it.

J

Looks through every file in your local directory and also maybe than your UA, and looks for anything wraps in a translation string.

J

So what this is going to do is they're going to look through all of my package file, all of my files and it's going to extract anything I have as a string defined and then the next step would be go to a graphical endpoint which I created where you pass in phrases a locale and it returns you the translated strings as required, and then we would build that out to our say, remote JSON file, which would be our local one, which would be generated automatically by the transpose translations function in the CLI, build process.

J

Okay, there's a lot of information I'm! Sorry, that's what I can probably rush through a lot of it, but that's sort of an overview of the concept I had and I would love feedback. It is still working progress. Obviously,.

K

That's really cool, oh yeah. Can we? Where can we see some of this code? Is this in, like a private repo, you've got at.

J

The minute I haven't pushed it to the repo. It's a public. Repo I can push it by end of day to see. So you can see what state I mean. I really wanted to clean some stuff up before I push. Did anyone but I had a good effort with one of the other guys from absolutely that last night Dan where we went through and we cleaned up a lot of this and we pretty much implemented the entire hook properly. Last night, I've lured into a.

K

Better State well looks neat I'd love to look at the code ping. This is Steven Steven drew ping me on the public slack. If you, whenever you do that, okay.

A

Boom yeah, actually we can so there is a. There is a issue: that's open on the community project forward. It's issue 669, where there's been a lot of dialogue, obviously ID internationalization. So if we can get an update pointing to you know whatever resource or the code, asou means we want to make it publicly available. That'd be a great place to post.

J

Pollutant I just have tags like absolutely net, so I can search for where I've modified stuff and core so I'll. Just like clean up some of that stuff and I'll get a branch off by anything.

F

Hey really quick um that graph QL endpoint was that intended to be like interfacing with Magento to like existing translations in like Magento core system, you could retrieve those remotely with that. The attention.

J

Yeah, yes, so just the post translation grabs any string that you've defined, so it could be inventor UI of Enya concept, but if you're using a string that is in Magento like a common string like at the card or my account or something like that, if it exists in Magento and it exists for the locale that you send it, it's gonna return you the translated strings and automatically build for each locale, those remote JSON files.

J

Do you don't need to necessarily define all of your translations in PWA and in Magento you could leverage a Magento language pack yeah with like little to.

F

No work that is awesome I picked that little piece by itself yeah. We should. We should loop that into the graph QL team, if that is like a kind of a slick, little endpoint to get translations out of Magento yeah.

J

It was really repo endpoint to put in have to submit appear. They are requests to the graphical team, but that was the plan cool.

D

Yeah, it is really cool and that that's what I was gonna ask Tommy. We talked about this a little bit, but I wanted to know a little bit more of your vision or how this will work for your customers and your clients and what you would explain to them as a kind of a business process. Here. Are your translations? Here's what we've done for you!

D

Here's how you would update them day to day- and you don't have to be- you know very detailed about that, but I think it would help folks on this call understand the extra value that we've given to merchants. By doing this, this way that you've done where you can fetch the translations from the back end, mm-hmm.

J

The other goal would be to leverage any existing language packs available, or things like that, but also everything made in the native functionality of Magento to do custom translations and things like them destroyed everything you have defined, whether it's in a language pack CSV file or if it's in the database is a defined translation.

D

So is the idea that this would be fairly seamless and the merchants would be able to do translating and managing of localizations the exact same way in the PWA as they do currently in magenta yeah.

J

Pretty much we tried to make it as simple as possible. The great thing about the brussels door view is that all the product, IDs just fetch them the correct overview with the translations. Obviously, so there's no work there and content does the same. Oh that's a little one. Other thing I wanted to show my bad stories. So the.

J

Url resolver cache did not support multiple stories, so I'm just doing a eurozone pop curse, told you so that's one thing you got to keep in mind because /home, for example, or the base route resolves to a different CMS page in the backend, depending on the header. So just adding that cache in there to call the correct, like CMS, page ID, for different routes in different stories that was yummy, understood.

A

Great any of the questions on the line for Chris.

A

B

Thanks Chris, we'll.

A

Definitely have some follow up here. Like I said earlier, we have an issue, that's on the board that we've been tracking in there. There has been conversation back and forth about internationalization. We obviously had work with Chris to get the two things linked up the code and the issue and then see how we move things forward alongside the core team here. But obviously this is, you know huge value for us for the entire project.

A

It obviously accelerates our roadmap because we didn't have a International internationalization epic, on the on the board until later in q3. So we love to see you know this type of involvement from our members of the community and Indian huge for us. So thank you again.

J

A

Right well, Jordan Ellis. You have anything else for community corner nope.

A

That was it okay, so remember that we have the community project in github for issues that you can take a look at if you want to contribute. We know right now that obviously there's a lot going on in the world asking people to not only focus on project focus and contribution is there's probably a lot given everyone's focus on their day job in their lives. But we definitely appreciate all of you guys for being involved.

A

You know if you happen, to have a thing that you picked up or or planning to pick up an issue, and you can't get back around to it. Make sure you let us know we're happy to pick up where anybody's left off we're helpful to getting help get anything across the finish line and in terms of code review or further development.

A

So I think it's important to say that and if you have questions on on anything on the board or wanting to pick something up, make sure you reach out to Jordan Tommy, who you can see there on the call or myself anything else from any outfit look. We've got Tommy.

B

Boy we've got Tommy with one more demo. I was about.

A

Alright, no I.

B

I don't want to end on a low note.

F

B

Project use a higher register, you'll be good. Alright,.

F

You see, I didn't fall in chrome, I'll, just change, yeah!

F

F

What's that Oh nice shirt.

B

F

Didn't realize how crazy it was gonna be on those blue jeans, it's kind of like just floating here in the air, or maybe that's just my terrible, monitor so I'm kind of going to end on a technical note, everybody see my screen, so we added another new section in the wiki here and kind of started doing some some code, hygiene refactoring things to kind of some new standards that were trying to live by one of those things is kind of the the number one problem in programming is like naming things where to co-locate them.

F

So we've made a decision in the scope of graph QL, where we will split up operations in like a component that graph QL that J's file so.

C

F

Is going to be graph, QL tags inside of a Jas file and those will be compiled by lemon pack at build time, and then we also decided to separate fragments from those operations.

F

This ended up being an odd and odd reason, with cyclical dependencies that I won't get into here, but for for your enjoyment, fragments and operation separate files, co-located with the components themselves, and then this is going to tie into some just kind of some some neat stuff. Oh, not that one I'm gonna do develop like some caches, so.

E

F

Of the reef actors, we did to kind of demonstrate this.

F

Hardly prepared chair here recently.

F

Just related to cleaning up how the Apollo cache is updated during certain mutations throughout the system, so mutation would be like adding something to a cart, removing something editing, something checking out logging and all those fun things. So one of the things or one of like the low-hanging fruit, proof-of-concept things we could do is mess with kirt triggers the cart trigger.

F

Cart trigger is one of those things that has been on the page forever. I was using some old Redux actions to get its data and it actually turned out to be very important that it ends up being what initializes the cart on your first page. Look it's a very important component there and we thought it would be a first easy thing to change. So you'll see here in the scope of this refactor we're going to start following this new pattern here.

F

So it's very clear when you're handing off mutations and queries to talons that they all kind of have this same signature that you can expect so you'll start seeing us kind of break mutations and query operations into their own little set and then easily know how to like, override them and extend those when you are making use of these talents in your own custom code.

F

Outside of that, I think that actually pretty much covers it so to kind of loop this all in to the community as well. We do have a new shew that we added to the board where, if you are interested in kind of getting comfortable with graph QL and want to get familiar with how PWA leverages graph QL, we have an issue in our community backlog which, as a quick reminder, you get a projects, community backlog and look at our issues. Here.

L

F

Have this issue that I'll be updating shortly, where we'll be asking for some help going from our old pattern, where we co-located everything.this queries directory to this new and beautiful pattern, which we've demonstrated here in this PR kind of how that should behave in function and then kind of to tie in to the? Why? So? This does some nice things before we were doing some we're always checking the network on the cart page.

F

So cart page is just kind of a new experience that we're doing on the desktop and whenever you went there, you'd always get like a flash of like I need to go fetch my data, but now you'll see that there's no flash kind of any anything that you do anywhere in the app will automatically update the cache that cart page can just automatically render it doesn't need to check the network because it knows it has in the cache is like up-to-date and it can be trusted.

F

So if we go back to cart, page you'll, see it just automatically renders I don't have to do anything I think we be playing on like removing this, but like anywhere in the application, our you mess with, like cart data. It also automatically updates so you'll see there, even as interacting with the mini cart.

F

You'll see that that page, that wasn't even an active view behind it, detectives out of cache, changed and automatically rendered so kind of just continuing on that theme of leveraging Apollo as best we can and then looping this into you like community contributions where, if you.

B

F

To learn best practices on how we are using Apollo and graph QL come on over we'd love to to walk you through it and to help us improve our our code base at the center, so I think. That's it any questions, I kind of ran through a bunch of different things. There.

A

All right, thanks, Donnie.

H

D

Pepper. Thank you very much. Man.

A

All right so yeah we'll take another quick pause for questions, comments, general commentary for anybody. That's on the line.

A

All right! Well, that is it for today's meeting, so we will catch you guys again next week and in the meantime onwards and upwards, the reporting has ended, enjoy your weekend, don't forget to smash like and subscribe honk, if you like it and please wash your hands.

L

A

L

D

Washer, wash your phone alcohol wipe alright.

L

See you guys thanks everybody.