Magento PWA Studio, 13 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Sync 13 Nov, 2020

Description

Topics this week include: Visual Studio Code extensions demo, scaffolding (create-pwa) with Magento 2 updates, and the latest product/adoption for PWA Studio.

A

Hey good morning, good afternoon and good evening, so welcome to our weekly pwa community call. So thanks again for everybody who's attending and those for those of us who uh who watch the recording uh uh offline, which is great so uh we've got a got an agenda uh action-packed as usual.

A

uh Lars is going to kick things off here in just a minute uh and share some of the work he's been doing on uh extensions in vs code and so he's also looking at some options, also with other ides and so really looking for ways to improve the developer experience and so really looking for some feedback on that one and really want to see him show off what he's been working on uh in this in this past time here in the past week or two. So we're gonna spend a little bit of time on that.

A

One make that a discussion to the degree that we can then we'll switch gears and uh show some of the work uh from rovanth uh on some of the uh some of the sample. uh Simple back ends.

A

uh So we have the ability to kind of swap those out uh using the uh some scaffolding techniques, and so we got a video we're gonna, we're gonna walk through there and then uh time permitting at the end, we'll do a traditional round table kind of ask me anything if there any questions uh et cetera and we'll go through a couple.

A

A couple data points on on pdw studio, we're going to bring again more and more of that into these weeklies, just just for us to understand the pulse of the project and where we're going and if there's any questions and and so that that is uh that's what we've got for today. So again hope everybody is uh healthy and well, but uh with that, I'm gonna turn it over to lars he's. Gonna walk us through uh some of his recent work.

A

Yeah. Thank you. So.

B

Much uh so, let's share my screen, so you should see my screen with uh uh a chrome browser and a.

A

Files code, not we see just the edge of it coming over, I just we see. We just see that you are sharing your screen from blue jeans at the moment.

B

Oh okay, then I have the the same bug again. I need to share the different screen to get the right. One: hey there. We are so um there we go okay, yeah.

B

um So what I built is a a pwa studio extension for files code and currently it supports uh a set of live templates or snippets.

B

And um if you go down in the repository uh you see, okay, which which snippets I already uh um allowing or what I already implementing and in this demo I will shortly showing you how it works or how you can add your own files code templates really easily and also I'm looking forward to get feedback on snippets. uh What you need, which ides we we should support for first code, because we as developer usually a little bit lazy and don't want to write boilerplate code every time.

B

So um if you, if you check out uh the repository uh from uh from github, you see, uh there is a snippets folder and a javascript dot json and in the body section you see uh what uh it will generate or what uh the files code will generate. If you, if I go now to my components and um create a new directory or something like that, um yeah so um like uh contact me so and then I add a new file, I don't know, oh, I don't create a folder. I create a file.

B

B

Let's do it something like that, and now I can use pva.

B

uh I prefix everything with pva and you can also use a pvac, and this is uh I use minus there and then you can using shortcuts like this and then you're already getting uh something like uh like this, and then we only need to create uh the js css file there, and uh maybe one idea. What I have is something like here and create your own pwa studio component, and then you only need to give it a name, and then it generates uh the contact file, the main file and the css file for you.

B

um But this is a little bit more work and I don't know how how many people will use it or how many people use currently pwas do you, and so I think we can open for for discussion. There.

A

Yeah, so that's a great question. I know a lot of the folks on our team use code uh primarily, um and so you know what again make it: let's make this kind of a discussion. What areas does this hit? What are some areas that you're hoping to see how? How might you use this? How could how could we make this? You know basically make developing with pwa studio easier. So what are your? What are your thoughts.

C

uh I think it looks good, I mean the the live templates or the snippets stuff is something I've done. The magento php in php storm a long time ago as well. So I find that workflow works well for me on the back end side, so I think the same flow on the front end should be really good.

C

um I think what would be really nice to see as well is say, I'm in a venue, ui component or something, and I want to override that shortcuts there to automatically create like a webpack alias for that component and replace it within and then sort of duplicate it over maybe to my local source directory, just to kind of simplify that workflow, maybe even something around like css modules. Maybe I want to change the you know.

C

Css going into a particular component easily like creating some of those workflow shortcuts, rather than just snippets, could be um kind of beneficial as well. Maybe even um you know, I think you have in local interceptors.

C

You have like create a like tap a route or something you have that in there. I think maybe, um but also then looking forward into the next release, v9, where we get um targetables being in the component and then creating a targetable for that component or like scripting, that, like at this point in this component, I want to inject something where I could just have: okay create targetable for this. You know something like that as well: just to simplify workflows, maybe.

B

Yeah something some tuckables are already supporting um yeah for the local intercept. I'm currently not sure how how I should support them. uh Maybe we um yeah.

B

Maybe I should take a look on it, how uh how a snippet can looks like or what is a a common pattern also, if, if you have a common pattern, uh there is a website where you can very easily to generate this house code snippets, I I can share it in the pwh chat later, because I need to search it in my history, but there you can put some some javascript in it and then it converts to false code snippets uh very easily. Also, you can define their uh uh replacing things.

B

What what files code will be uh the replace uh by uh by this? uh If, if you use like a pwa route and my my component here, no I'm not in a javascript file.

B

uh So because you need to save which, which templates uh or which uh for shortcuts, work this this shortcut and uh now you you get different input parameters and you can go with top uh if you, if you, if you use it like like this. Also you get something like that. I use uh app something like that and then I can go with my tab and then let's say I want to have uh last retic slash test or something like that, and uh maybe we can also do it.

B

This for for um for local intercept and yeah overwriting makes totally sense, but only one one thing there. um Maybe then we need to uh write it down which uh which override approach we we support from or maybe want to support from pwa studio or recommending to using, and then we I can do it in my extension as well, because my goal is some time in the future.

B

Maybe uh somebody from the core team can take over like the phpstorm extension and we can use it in the magento name space to to have a wider spread, something.

A

Like that yep, that makes a lot of sense, lars and yeah. Let's, I would say, let's: uh let's have a probably a deeper discussion with the uh the core team, so you know dave jimmy uh usual folks uh to you know to really include that recommendation on overwriting right, and so I think we've done a lot of documentation but like let's, let's get really specific there because yeah. I think that's, ultimately how this will help um people navigate that so for sure, so I'll take that down.

A

Perfect any other feedback for lars before we move.

A

On all right, thank you so much again lars again that both your content and your contribution is uh greatly appreciated. We love what you're doing and although our setup is quite not quite like kayla and jordan's, uh we we we certainly do our best on on our weeklies here. So uh so, let's switch gears. I'm gonna, I'm gonna share uh some of the work that revonta did recently on scaffolding here, and so uh so.

A

Apologies he's uh he's he's in that he's in training today, and so I'm sharing this on his behalf, and so, if there's any questions, obviously uh we can reach out to him on what and what that is and and uh and make sure that that that part is covered here. So give me just a.

A

Second, all right, so the background on this one is: is we want to show the ability to pick from multiple sample back-ends which, if you've done a create pwa recently, uh if you've done a create pwa recently, um you've seen that ability and quite honest, is one of the best best ways to get started without having to worry so much about your magento 2 back end right and so, but versioning of course, is very important.

A

So what the revival is going to walk through here is how that works and and kind of what that switch looks like based on some work that is in uh in progress here. So I will I'm gonna hit play here and uh and then, uh if you have any questions, we can certainly pause and kind of walk through this and again we'll bring in vermont. If there's any anything specific, let's get started.

A

We don't get voice. Do oh you're not getting voice there. All right, let's see if I can fix that. So give me a.

A

Second, allegiance can be kind of picky.

D

A

All right, let me try one thing.

B

B

B

A

Is that better lars.

B

No, we hear nothing, but it's okay. We, let's, let's see if if we can guess what what he want to share.

A

All right I'll try to provide color commentary, then, and we'll send this out to everybody afterwards.

A

So here we're picking the.

B

B

But if I understand correctly, we can now using also older magento versions with pwa studio.

A

It and why that's important is, of course, is because of the graphql coverage with each of the releases right. So this is really useful for for debugging, uh but also using the latest and greatest.

A

And that's what uh ravan's walking through basically is is our you know our sandboxes that we provide for the team with the with these versions that he's talking through here so for those are less familiar. You know this. This is how this is done and again this really allows folks, especially especially if you're more react based and maybe not even have touched, magento how to get started here with just a simple configuration change, yep.

A

Yep and then no major changes here. This is where you would make the changes.

A

This also creates a new target after creating new.

A

A

This is checking the validators and it's uh it has has an effect on the build. So that's what the logic here.

A

A

This is just showing you the sample back ends here.

A

He's going to walk through if you, if you don't need the sample back ends here in just a minute.

A

Right, if you don't need the simple back ends, you can just remove it here.

B

But with this pr is something like possible with with multiple store codes and multiple backends like I have a de-store and en store and having two instances of magento or it's only for like. I have one back-end, but I can now easily change this back end.

A

I think it's just the back end, but we can. We can double check with ravan's on that one. So.

B

A

Hasn't covered yet in the audio.

B

A

Yeah interesting there you'd see messages if it didn't go through so.

A

There it is successful, build.

A

All right there you go so that's just again just to show some of the changes we've made to to be able to switch out those sample backends, including the ones that we've provided. So you can see the urls for that and, of course you can, you can use your own. uh Ideally that's what we'll be using as you start to adopt.

A

But again this is just a great way to get started, uh especially if you don't have to uh and don't want to necessarily worry about, setting up the latest version of magento, um which is great so any any questions for this one anything we need to uh to check in with uh with vermont. uh Aside from that the question from lars on on the different uh kind of country, language types there.

A

All right, so, let's take a look look at uh as promised latest look at the numbers here, um so this is something we'll start to show a little bit. More often, um I apologize it's a little bit a little bit high level, but we we're starting to see more numbers here. uh We we talk a lot about the launches and we talk a lot about the adoption of p2b studio, and this is something we often share at conferences, but probably don't talk enough about them um as a team.

A

Here this is the closest team, probably working to the product, and so we see a handful of new launchers every week, using built with uh we've got again, we've got a search query in there. That gives us an idea of at this point. At this point, we've got uh 58 known, magento stores built and that's using you know some some basic uh validation on our end and it starts to sift through roughly 70 additional um stores that we're seeing in development demos and then some duplication right. Some of them we have multi.

A

Some of them exist as kind of multiple countries etc, and so we're not double counting uh that one. So we're seeing a lot of great adoption and we're seeing a handful of these almost every week uh and then so again, thank you.

A

Thank you to everybody here and then really to to the community that continues to kind of take with us and then run with um run with what we've got, which has been a really um really great story this year that we can't talk enough about adoption, really is what we, what we're really striving for this year and next year. You know um you know onward and upward, as we would say so, um a couple other things here. So uh third-party extensions.

A

uh So um as we uh continue to uh to look towards a world where marketplace in magento marketplace will support this. We're aware of about 20 known third-party extensions, we've seen a couple good ones there's. Actually we talked to a uh a partner earlier this week that used the mega menu extension that seemed to work pretty well for a recent launch, which is great and so there's a handful out there. But you know. Ultimately, we want to see some consistency here and start to support uh additional uh feature functionality beyond just uh some.

A

Some of the content improvements eventually we're gonna, come around to payments and, of course, bundled extensions uh internally, and so right now these are third party, but we'll continue to consolidate these and in that extensibility work that we've done was a big part of that.

A

In addition, that so we've got a couple of the key metrics, so uh stars and github. Some people follow those closely, and so we continue to make good progress there. uh The community members um in our channel actually to me is a really really big one, so we're well over 2000 there. That's that's right up there with some of the biggest, if not biggest, projects across magento and even adobe, and then, of course, the contributors and the maintainers lars, of course, being here at jordan, uh had a conflict today and so we've.

A

You know, none of this would happen without the community here, and so I can't I mean I can't thank you enough. I spend uh you know time every day, really just uh thankful for what for what we've done to date. uh We've got a lot of work ahead of us, but I think it's some time. It's important to take pause and see and think about what what we've done around uh this next generation storefront for magento, so anyways we'll use this as a basis and kind of track.

A

Some progress here talk about maybe some recent launches. I know that jordan shared that the uh uh eleganza just did a refresh and upgraded with uh with pw studio eights, which is great uh and we're seeing some other signs and some some other launches that we're expecting in the next couple weeks.

A

Interesting fact, uh if anybody's tracking again, this is just built with data, uh there's a there's a bit of a competition going, so we've got some known stores using pwa studio by country. uh You see this tail off uh fairly quickly, though, as you see I kind of get through uh and beyond uh canada there. So us right now has 14, netherlands, with uh nine tied with the uk uh and then we're seeing yeah some interesting uh concepts uh across the board.

A

So again, as we see this and again with built with, we can, we can start to understand. uh You know the types of extensions and the type of work that's happening uh in addition to what we provide out of the box with venya so more to come on that one. But again, let's spend a little bit of time of this.

A

I know we do a lot of demos, but I want to kind of talk, talk a little bit about the the progress and the work here, but then also uh come back to uh to grooming, uh which is kind of where we started uh about two years ago so before. But before this call started, we were just talking to chris a little bit about some of the multi-store work.

A

uh That's getting ready to be kicked off, and so I think, as we shape some of these more, I would say complex um features of magento bringing them into uh the pwa, um uh the pwa world that we've created. We we want to make sure we get your feedback as part of that. So look for more more of that as part of the agenda in the in the weeks to come.

A

So without any any questions about uh about the data or or just the adoption in general. So I just want to take a pause for that.

C

Of the 58 stores bill, do you have a list of them? Is that something accessible.

D

uh That's it's all built with. I can I can send you a link to it to.

A

Take a look at it for sure awesome, yeah. We have we're careful not to broadcast too many of them only because we don't have permission on that one, but if it's built with, I think I think again. Anybody can take a look at it, um so we so that's that's the kind of the the thinking there but happy to happy to send the link. It's pretty it. It's uh it's basically coined under pw studio, so um as a tag for for magento sites good um and then uh so, switching gears, uh so community backlog.

A

uh Just a quick review here um had a good session uh with uh with lars and jordan earlier this week uh you know some of the things that will be happening here, so one looks like uh it looks like uh martin had picked up mega menu so looking to accelerate that, which is great, um if you haven't seen this yet we've got some some great ux work uh that that scott uh finished out recently, and so as we've talked about extensions here.

A

This is really something we want to carry over until uh into just general desktop support here, and so uh this has been picked up, and so hopefully this will. This will make some progress here that that we'll be able to accelerate, as we work on uh key functionality right now, one of which is just to finish out my accounts, as everybody probably has seen and known as tracked uh multi-store uh and then product types.

A

These are kind of the big ones and then, in addition to that, we're doing uh quite a bit of optimization on some of the v6 google lighthouse uh work, that's being done today, and so that's that's kind of where our current focus is kind of between now and the end of the year and then we've got you know, we've got a lot a lot of work ahead of us. I know I've seen some interest on things like product recommendations and so uh misha kotov the product manager um on that one is is said.

A

Basically that's coming up. First, half of next year, we've seen some really interesting kind of early development on that one and so we're starting to see all this come together and- and so much of this will be coming from other teams as well, which is great, that's that's what we're hoping for.

A

So those are really the big topics for this week uh again we covered the uh covered, the code, uh the vs code, uh demo from from laura. So thank you so much for that. We've got riven's demo I'll, send the audio version of that afterwards, so happy to share that, but that'll be landing very soon and then again we're just. We want to bring a little bit more kind of the focus on on the mission of what we're doing and kind of the next turn into 2021.

A

Thinking more about you know, grooming, some of these key pieces of functionality um and then making sure we understand kind of the mission, adoption, etc so kind of beyond the events and just making this almost a working group, uh if anything else, and so so with that any um any other, any other questions or any other comments before we wrap it.

C

Up, I threw a question in the chat I have to jump. Maybe I'll follow up in slack, uh I've got to jump to another meeting. Sorry, but just uh regarding the current status of storybook is that still supported? Is it going to be rolled out for all components.

A

Yeah, and so the short answer is where that is that's in progress. um I wish we could work. You know work faster on it. We've done some initial concepting on that and that helped solve a few issues, but it's right now. It's in development is in our backlog, but we're going to be working on product types multi-story, those others a bit first, and so it is coming, maybe an opportunity to also for a contribution. So let's talk a little bit offline about that, but that's something we'd like to like to do for sure.

D

Awesome. Thank you great all right. Anything else.

A

All right, then: well, that's uh that wraps up for this week, uh just a quick administrative notes, uh we're going to be away for the next two weeks, and so next friday is our uh adobe day off.

A

uh So we've got every third friday off for those who uh those who are following and the following week in the us is thanksgiving, and so um that that said, uh we you know we will be around if there's any questions, uh we'll probably post bits and pieces, because it'll be a bit of a bit of a break uh between now and then, of course, if you have any questions, we're always there to help, and so please let us know where we can, where we can help where we can do more and as always, um you know.

A

Thank you again for all of your all of your hard work. All of your support in in continuing to drive this forward so.

A

That have a great uh great rest of your day your evening, your afternoon, uh happy friday, the 13th uh and, as uh I think andrew once said, uh make sure you uh uh hit the hit subscribe and maybe even tell a friend on this one so have a great weekend. Everybody thanks again we'll talk soon.

A

Thank you, bye. All right. Thanks.

A

A