Magento PWA Studio, 2 Mar 2018

Previous Meeting

⏯

youtube image

►

From YouTube: Community Engineering Hangouts - PWA edition

Description

Community Engineering Hangouts. The aim of these hangouts is to update the community on all our progress, demo some new tools and features and then

1. News and updates from the Community Engineering team,
2. Presentation of Magento's PWA studio,
3. Live Q&A section

During this hangout we will update you on our progress over the month on January, have a demo of the Magento's PWA Studio and end with a live Q&A session.

Feel free to join in, comment and ask questions. The aim of these hangouts is to provide a platform for Magento to give the community regular updates but also for the community to give feedback to Magento.

For any more information feel free to reach us at engcom@magento.com

A

Beyond it, oh no, it's now so hello, everyone we are live, and this is the second community engineering hangout live stream, whatever we want to call it. Last week's we are last month we had some knowledge on the testing framework, and today we I've got some guys in from the PWA studio to talk about that yeah. Firstly, thank you very much for tuning in today and also tuning in last time. We really appreciate it without having the community. This.

B

A

Is useless so thank you very much for joining in whether it's comments, whether it's questions in the chat, whether it's requesting what comes next with the videos you know so we're going to kick it off a little bit differently, a little bit differently from last week, we've got two great community members in the chat we've got Federico and Mohammed, and and we're just gonna quiz them a little bit and talk about contribution yeah.

A

So, let's start with Federico. When we start with you man, could you please introduce yourself to the live stream.

C

Okay, Federico from Argentina I work for a Magento partner with a hammer, so we are seeing much into issues today. Basically,.

A

C

So yeah we support claims with much into one instances and we also implement much into sites. We have a few now implemented, so that's very cool for us. That's what we do. Nice.

A

Cool the first question I have for you other than introduction is: how did you first hear about contribution to magenta.

C

Yeah, so it was in our first machine to Chu implementation. When we started seeing some issues, we started dignity in the github repo, so we found that some some of the issues we were facing. It already happened to some or machine to users. They were reported for some of them work. There were fixes, so we got like more involved in the in the github repo.

C

We started interacting a little bit with with it, so I think that that's how we hear about it. Yeah, okay,.

A

Can you tell us the story of your first port questions, the first one you got a merged yeah.

C

Actually, it was fixed on the SFTP class of the machine to a framework and the story is we had this party extension installed in in magenta Chu for a client that stopped working once we upgraded magenta to 2.11, I guess so, I started digging into the issue. I realized the the relying library of the SSH library PHP is clip was upgraded to a new version.

C

There were some constant being used in the SFTP class of much in the framework which were outdated. So whenever we're trying to connect via SFTP, which was the purpose of this extension, it pushes some order exports through SFTP to an external server.

C

Well, it spelled, and it was because of you know some updates constants being used iFixit. Those I made the pull request and in a few months that got merged, so it fix it. Now.

A

And what was the hardest part of our contribution to you?.

C

Well, right now, it's fine in time. I think you know is legally. We talk every week, but yeah fine intimacy between the day my day, job, my personal life staff I think that's that's the most difficult part for me. I, don't think I can think of any difficult part on interacting with you guys or you know, work. You know on the I'm currently working on the import/export community project and I. Think that's great. We have I think the support we need in order to move that forward.

C

So I think the biggest issue right now for me is the time. Okay,.

A

I appreciate I appreciate that there isn't there's only so much time in the day and we really appreciate people giving up their free time or part of the working day or whatever to to help us out. So with that in mind, if you're so busy and you you just can't get the time or as much time as you'd like to do it and why I like what would you recommend if someone wants to start but isn't really sure how to you or isn't really sure, what's the best in terms of timing or projects or whatever?

A

What would you what's your top tip for people looking to start with contribution? Well,.

C

I think I would say get involved in the slack channel top with some a few guys so far. I've with you I also interacted with Eugene talika from a enter the the when I had to interact with you guys. You have been very helpful and I guess I.

C

Think any any issue that we could have I think you you guys would help us solve. If there is a will to contribute or to participate. So I would say my team will be just interact with with the community get involved and things we will move forward, cool.

A

Thanks I I appreciate I, appreciate time. I appreciate honesty, it's nice, so thank you very much for she. I stole someone's quest, that's cuz, I practiced and I've got great questions. Then you know so the other person is from the community.

A

So yeah same question over to you: Muhammad. What let's introduce yourself, tell us a bit about you where you're from what you do, that sort of thing to start with everybody.

D

So actually I'm back in economics based in Austria, but the back in the developer department HP's any certified engineer, mainly working on api's yeah, okay,.

A

Cool and how? How did you first hear about contribution? What's your what's the driving force behind starting contribution for you, this actually, because a working man.

D

Of mine, who is I'm not enough worker, who is actually deeply involved in the community and I, have started with her with within I, came to meet up in Vienna and tell you meet people you hear about some mission like you get to community more deeply, and you picked a better contribution day's contribution way. Oh.

A

D

A

Ever remembers the first time so tell us about your first time. What's your first pull request, it's.

D

Actually, a four pack for the position attribute for the product links and rest api. So, as I said, they're mainly work on api's, we are worth developing. A cementing project was was using under products with product links. Related related costs a lot upsell.

D

We have a problem that only two products we're at it by each request on time. We noticed that all of them are already s already existed in the database, but the position wasn't Freight will circulate.

A

I think I remember that core request exactly I was I, the one that merged it exactly that's what I remember: okay, cool, okay and a little bit different from federalist questions like why? Why do you think the contribution is important for Magento as a company and also for the Magento community as a whole?.

D

So if I specifically talked about magnet the as a performant as a as a solution which we are providing to the market, is that it's now a young solution platform which now building it's coming, it's character, hunt it's personality, so the way the more we get it fix the mail. We get more issues solved the way it's make it the way we make it better, but for sure we can make it better for our self or our market for for magneto itself, there's actually about the community.

D

As Whittaker say, the community is really easy to get involved in and you can only only use the slack join the community channel you can talk easily to each but to each one start to chat. There's more often, some community like feature PHP, seven to which you can join on the run. You can communicate the people who are working on it, unlike is the manager of time, because it's always with the problem of time after to work on the private stuff as well. You can easily work to the manager, also reversible Pearson's, get things managed.

A

And last question: for you weeks from now, we will be taking questions later on from the live chat. So if anyone has a question for you, the federico or mohamed, get it in the chat and we'll ask them after the PWA general, it's probably Q&A section, but the last question for you is: if there is someone out there watching this, who would like to get into contribution? What is your biggest tip your highest recommendation for them, apart from joining the slack or something like that? Maybe maybe something specific with the coding or it's.

D

Actually about the first, so don't get upset. If you get it, you would always learn something more for the verticals, so don't get upset. If you get your first four requests rejected. These are I. Think it's really important and I have a plug from the other team members. In my team it's really been a pretty important point.

A

Okay, do you feel that it could be maybe one of the one of the reasons why people don't start contributing? Is they kind of a little bit I, don't know reluctant to kind of publicly show code or want that kind of public feedback.

A

D

Is or some person is actually I heard.

A

Okay, cool all right. Well, thank you both very much. If sticking around with your bands back come into this hey bad yeah, it's so professional. If you would mind sticking around, if there are any questions that come up, we will get them to you during the Q&A section. I appreciate your time, especially Mohammed cause. It is this evening, so I appreciate it Friday evening and you come join us. So that's I appreciate that all right, so the next part is once I've, muted Ben.

A

The next part is we're going to go on and have PW a demo. We have Eric, we have James, we have Jimmy and we have Anthony and they're here to share the what's up with PW aap WH studio and with you guys so I hope you enjoy. It start start thinking through questions and we will get those questions to them after the demo and any any question, I would say is: is open for them right.

A

Cool all right over to you guys, yeah, okay,.

E

Great, oh good, so David. Thank you so much for having us in the community again. This is this is very much a big part of what what we do- and this is uh this is a particularly big week for the team and so as you're starting to see a lot of buzz in slack and using a lot of buzz in social media. We've got some got some things to share this week, and so the timing couldn't be better and what I'm going to do is I.

E

Give you guys a little bit of an overview from a product perspective and and not be the the one thing holding you back from a couple of the demos that they're gonna, see from from Jimmy from James and Andrew. Not yes, promise to make some time at the end for for Q&A. So so that further deal me yeah. Let me give you a little bit of a backdrop of things. I know it's been a while since, since we've talked and and again we'll keep this more focused on on the the.

E

Why the what and the when and then we'll show, show what this looks like here.

E

So this is not the Maclaurin magento and Maclaurin by the way, but we found a good mortgage. What we thought represented the the essence of what we're doing hope. You guys can appreciate this, so so in terms of progressive web apps. There's a lot of information, that's out there, but we do want to spend. Probably you know a minute or so kind of talking through. Why we're doing this, and so in terms of why we're doing this a lot of the information out there from Google and others? Is we just seeing a black screen.

A

For you, okay, let me you might not be able to be in presentation mode, I! Think real, quick.

E

How's that yeah all right so I'll, be out of presentation mode and keep that keep it like. This just has no problem so once a yeah talking about talk about progressive, Web Apps, why we're doing it? So we get this question from Simon's I'm again, but the reality is, you know what we're doing is really going to be about all the other things that Google in our collaboration and others have started to see.

E

There's been some great examples in the community with Devante DT and many others, but ultimately it comes down to performance and those key user experiences around PWA that we that we know will make for that next generation of shopping experience and so having just joined, joined the team, but not necessarily Magento.

E

In the past couple weeks, it's really clear that we're onto something it's in many ways its delivering we're responsive, left off in many ways it's a it's really building upon a lot of the great research that we've known to date, whether it be the survey. So, thank you so much for your participation there, as well as the research from you know, from UX Daniele and others that have highlighted the opportunity to how did the need for us to know they just address the benefits of Peter Wade.

E

Those are those are certain, but more so the the the the opportunity which is around the work flow, so James, James, Jimmy, Andrew and team have known this and been working towards us for for for quite some time and we're really anxious to share with you this and then also get your feedback on that.

E

Now that we were out in pre-alpha so a little bit about the kind of the the what this is and again some of you may have already seen this, but we we really want to kind of set the stage with regard to the three major aspects of PWA with regard to our offering around this on. The left here is that is the shopper experience, and so, as you would expect, we want to look at the shopping experience in every aspect of that and use that as a basis for developing those tools.

E

Now we made a conscious decision a couple months ago to really double down that development experience you see on the middle, you know, James has done great job, evangelizing and doing doing updates and in such at mage Titans events and others, and but we wanted to build that around what we feel is very tangible asset, a very tangible resource that has often been valuable in front-end development, Magento, and so we've we've seen research where the lumo reference theme, the blend themes are useful, but ultimately, Peoria is not not just not just about performance is about those experiences, we're looking at them all around.

E

You know, essentially within the same same timeframe, and so ultimately, when we look at this that sets the stage for for that development Styria. What are we spending the most time about today, and and not just necessarily that theme? The theme itself has to happen that, but is then essentially is going to be an basically an output or a byproduct of the the shopper experience. So, as many of you are already seen, you know, we really know major changes in here, just more more depth than breadth.

E

We're really focused on react, Redux, webpack and things that you'll see very very very soon here, but it's about that and in developer experience and I'm glad actually Ben's on the call here.

E

He had a chance to see a very, very early preview a couple weeks ago and I think he actually summed it up really well, which was for the for the first time that a first time a long time, you know being able to see that that heads up experience and so being able to when you do front-end developments for Magento, seeing everything at once in a very, very easy to use very friendly, very guided way, but also that benefit of the real-time updates. And that's what you're going to see in that consummate of real-time updates.

E

Get to that workflow that work for an opportunity that we highlighted earlier, which is it's going to take less time to create, create these based on the standards based on people, learning, more standard frameworks and, ultimately, when changes need to be made. They've done a lot more lot more quickly than you have before. So we're pretty excited about that more.

E

We really think we can not only look at these examples, but also look in those and it with an eye towards the standards and also learned from the ones out there again from you know, from Devante didi mean being others and then last but not least, you know we are tied to the to the 2003 release. That's coming out later this year. A fuel is a big part of our story that helps us achieve even more of the performance that you will see out there. But it's technically not a requirement.

E

There's they're examples that don't use that, but we believe, especially as you look and compare these examples, can prepare other sites really anything using tools from Google like lighthouse and others. There's you know, there's there's an opportunity to make performance really key in this and graph QL is the way to do that, and so that's coming. You know that's coming in 2.3 and then Misha and the team have done a nice job. I think it demos like this and others kind of walking through.

E

What's what's to come there, so in terms of what it is just to kind of what to expect here in the demo, we're really looking at that kind of swivel-chair developer experience with petoria and what you see on the left is very typical developer experience the tools, what you'll see what you'll interact will be very familiar with what you'll, what you'll experience inside of a traditional ide, it's about what what kind of men FS inside of that it says it's part of several things that eventually will help you make those real-time updates, give you kind of that heads-up display relative to to your theme in this case.

E

This is a. This is a concept that we're working on for the next generation version of venya. So, let's say: what's a product without a timeline, so we're gonna go through this and gotta show you what this looks like I, surely, but just to kind of frame the rest of the conversation. The team has been working extremely hard on bringing these tools to market and again for those of you who are participating in the in the slack channels, you're starting to see some some great.

E

You know some great feedback and some some great conversations between you know James, Andrew and Jimmy, with folks there on kind of what's happening. Why why you know? Why is this? Why is that- and you know this week- marks the week of our pre-alpha and so we've got so. We've got a lot of great great code for teams like the ones here to take a look at give us feedback, maybe even contribute as part of our early access program, because you know what we're doing is a little bit different.

E

We're running this very transparent, we're running this very open, but we're also, you know. We were also looking for for a couple case, studies along the way, but you know ultimately without seeing it it's hard for teams to make that assessment, and so this makes a big part of that assessment. And what we're doing between now and q3 is actually pretty exciting. So in March brings us to react to con. We've got both both Andrew and James. Going to that and there's gonna be a QA with you see and many others in the Netherlands.

E

So we're we're excited about that. There'll be more details, more demos, more more more baya kind of a detailed conversation there.

E

So that's coming up around the corner and of course imagine so as you're going to pre-alpha we're moving very fast or looking for contributions, we're going to a beta at imagine, it's going to include a lot more of what you expect more documentation, some learning materials everything they would be to eat to, even you know, be more prepared for for consider considering these tools for your next for your next door and then the end you know towards the end of the year. We are looking at a you know, a full.

E

You know graph QL set of these tools even more documentation, and, of course, you know, without without code, we need documentation and training as well, so we're working with Magento you and mending the folks here in the community on what that looks like, but more to come there and more what you would expect and kind of traditional Magento support and again for those who are tracking us in in slack.

E

This is this is what it looks like so and in so we you know, we've got the the repositories that we're gonna walk through here very shortly. For those who have you had some questions recently, we have, you know, stood up they as a separate organization, much like you'll, see in other companies, and so the concept of Magento research is is very much that it's about this playground.

E

That's that this means for us to develop very quickly track issues, bring in feedback and really use the the approach that the community engineering team, obviously in close concert with them to to pull this all together for that, and so in that you'll see again much of what you'll see here and- and we put the name of that side here in this particular slide. So that's kind of it for their repo again, I always hate to be the person between here in a demo but but without further ado.

E

What I'm going to do is I turn it over here to Jimmy and he's going to get it started talking through theming and then and then go through James and eventually end with extensibility in in what Andrew will show cool cool.

F

To introduce myself, I'm Jimmy Sanford I'm, a senior developer working on the front end here at magenta, specifically on this PW effort, and so what I'm going to be showing is what we've got in terms of a theme. It's sort of a proving ground for a lot of the concepts that we've been talking about with with PWA.

F

So I will try and get the share going.

F

Okay, can you guys see my screen now guys.

G

F

G

F

So, like we said, there's actually a number of different pieces to our effort. You know with PWI. Ultimately, what we're trying to do is help. You stand up a theme right all the other tools that we're building, including peregrine, including PWA, build pack and anything else. We do we're trunk. What we're trying to get you to is building a theme, that's a JavaScript application that has a serviceworker, etc that meets all the PWA criteria, and so what we have that's still internal at this point, unlike the other tools, is kind of a reference implementation.

F

So it's private, but we're going to dive into that today. Just to give you an idea of what it looks like and that's gonna consist of two pieces right: it's gonna, it's gonna have a module, or this is a Magento module. That's gonna set up our routing and, and things like that, and so this is all stuff you'd be familiar with, and then it's gonna have a theme and if any of you have done any sort of work, integrating a framework like react with Magento, then this is going to be pretty familiar.

F

It's basically taking standard, react, standard, modern, JavaScript, workflow and putting it inside of a theme, and so we'll get to take a look at what that. What that looks like here so switch over to Visual Studio. We can look at this. So basically the theme is going to be a standard NPM package right. It's gonna have a name. It's gonna have an entry point. It's gonna have scripts for building for starting a dev server running tests, linting the rest will pull in our dependencies that we were show earlier, like Peregrine's we're just gonna help.

F

You stand up the react. Application will have all the normal reactor, pendants EES, including react itself, the router read, ups, etc, and then a bunch of developer dependencies for Babel and webpack on the build side and everything else that you need. You know for your development process, but it's very standard.

F

It's just living inside of a Magento theme and then, if we go over and look at the entry point right, which is where the JavaScript app kicks off right when you send the JavaScript in one bundle to the client, this is where everything's gonna start right. We pull in Peregrine's, which is going to be our our react. Starting point helps us create an app we're.

F

Gonna pull in you, know, utility or to people in our our bare minimum of CSS, and then we're gonna create a Peregrine instance grab our root element out of the standard Magento view set up a serviceworker, and then we can dynamically import pages, that is asynchronously load, different pieces of our bundle and and then mount them into the dom. And what that's going to get? You is this.

F

So this is our venía theme. Kind of our like I, said our reference implementation and to give you an idea of what that looks like right. This is just this is a react from the top-down application. So Magento gave us basically a minumum app shell right with a root element and then into that we mount a react. Application which is going to be a tree of components from top to bottom, so this is going to have a few components we'll dive into in a second its interactive. It has navigation that kind of stuff.

F

And then, if we look at the network tab to see what's going on right, we can see we had a request to the development server got back a document right. We pull it down a client bundle. We pull down extra bundles being generated for the different pieces like different routes of the application, and then, of course, although all the rest of the images and then we're also doing some pre caching, because we have a serviceworker, we can pre cache the next route.

F

So we can say: ok, we're on the category page, we're gonna, pre catch the product route and so on. If I refresh the page.

F

You can watch as the requests come in here, yeah ignoring the favicons. You can see that, because we have a serviceworker which is acting is like a cache layer right. This is what really makes a PWA a PWA since our client j s and our other bundles have not changed since the last time we hit the page, there aren't even requests for those those are served from our local application.

F

Cache thanks to the serviceworker, and so this is gonna mean that you're gonna have an incredible experience for people who visit your site, not only when they first hit the page, but especially after they've already visited your site once so. I had mentioned before that that all of these that every part of this app is components from the top down. That's how react works and so I figured. We could go look real quickly at what that looks like to write a component, because you might be familiar with UI components in a Magento or stuff.

F

This is really just idiomatic react components, and so we'll take a look at what that is here here we have the gallery component, which we saw on that category page there basically you're pulling in the fundamentals of react component and in create element we're pulling in some of our utilities for CSS modules, which I'll dive into in a second we're pulling in some child components and then our actual styles from the CSS file.

F

So on a per component basis, you actually have CSS files, rather than having one overall CSS file that you import at the top level of your app or rather than organizing, all of your files with less and then doing the organization of that inside of less itself. Here you actually will write CSS files per component and import them in the component, and that's gonna actually give you a lot of isolation and and clear relationships between components and their styles. We'll get into that.

F

In a little bit up front, you can define what the interface for what your component accepts in terms of data looks like so you know we'll. We expect an array of data in this case products and also some class names which we'll be applying. For our our view.

F

We have a render method, which is basically like the view you would be familiar with from other from other things, and what we're doing is we're taking in data into this component and inside of a function, call returning the shape of this component in the DOM and applying the props or data that it receives in line, and so here we're basically decorating every level of this component.

F

Every piece of this component structure with the class names that will map to the styles of that those things need and then at the end, we're just exporting this, so that so that other components can import this component and render it themselves, and so every piece at every level is either a built in component like div or button or a custom component, like the one we've defined here, the gallery to take a look at what's going on with CSS. This is how CSS modules works.

F

We define class names like route or actions, action items etc and also write standard CSS too. Just to show how those things are going to look and then CSS modules right. The build system that is is going to translate these into basically keys on an object and when we import that we can then apply it, and so this takes not only the class name, it picks up the styles.

F

So if we look at our gallery element here in the DOM, we can see that it's pulled in the class name and it's pulled in the styles.

F

More importantly, though, these class names are translated by the build system into something that's unique, which is called scoping, and that means that any component you write or any component you pull in from a third party extension, is going to have its own scope styles, and so these names will never conflict with each other. So you don't have to write long selectors. You don't have to write complex, odd names. You can keep everything short and simple and not worry about collisions.

F

At the same time, though, we know, we've also taken some extra precautions to preserve the idea of of being able to pass in new classes so that you can actually change. You can actually change the styles of individual components or compose components from other components, and so it's not only the gallery that defines it styles. The gallery really has a set of default styles, which are defined here in this file.

F

But if you have your own custom gallery, or you wanted to create a component that is composed of a gallery, you can specify your own classes with their own styles and pass those in.

F

So we think that this is actually going to make development of Magento themes, much more component oriented much easier to maintain and have you wearing a lot less about compatibility between different pieces. So that's that's really all the preview that we have time to go through, but once this once this thing goes live once we're able to share this. You know we'll be looking for feedback and, of course, we'll be adding a lot more to the theme as we go so then pass it on to the next person.

E

All right, I think James is next cool.

H

The next person- that's sort of an oddly impersonal way to refer to me, Jimmy hi, guys james zetlen I am of course familiar to almost all of you, so I won't go through introductions, but thank you.

H

Jimmy and Jimmy has been incredible at just sort of creating a structure that is sustainable and is understandable by developers of every level just straight up, sometimes on the first try like like Mozart, but without that weird hi, laughs from Amadeus and I have been doing a little bit of code myself, because there is an aspect of this that I think is maybe best approached by somebody who is not constantly immersed in the day-to-day and that's the the setup for a development environment.

H

Now those of you who can recall in the distant past when you set up your Magento environment for the first time it wasn't pretty difficult, even with containerization and with the various guides and the meticulously maintained, and extremely helpful documents about this posted by many people. There are just too many variables.

H

Pw a studio is all about learning some some new and sometimes challenging new techniques and doing so quickly and naturally, which means that it's a paramount importance that you not be distracted by configuration problems. Let me show you a little bit of something that uses this beautiful thing that Jimmy has shut off. Here we have a copy of Jimmy's theme I'm in a CSS file I'm in a WebP.

H

A config file see this this config he's pretty long, but if you've seen a web packin face off or not sharing anything James, oh yeah yeah yeah I was hoping to get away with that I.

H

Mean can you guys all see this yeah great great, great, so I'm in the theme that that Jimmy was working with and I happen to be in a CSS file at the moment? Well, your pair program with me, you just kind of caught me in the middle of some adjustments. Here we are in the WebP a config file that we've created for this theme.

H

It has a couple of customizations, but you might observe that it is using some tools that it got out of the Magento PWA build back module that it's now public on the NPM package registry. Today we can figure a couple of environment variable. It's really not very many, just an indication of where we're getting our our CDN stuff from what our local back and domain happens to be and what the actual physical path of our Magento implementation is, and there is a little bit of customization.

H

But the rest of this starts to look like a pretty standard web pack. Config again, I'll go through it quickly because, if you're familiar with it, you kind of know what this looks like and if you're not, then there is excellent web pack documentation, so I won't waste your time going through it. But here we go we proceed through and we noticed that we're instantiating a couple of special web pack modules from Magento in order to resolve root components in order to resolve configuration for the build session and in order to create service workers.

H

Some of this stuff is something you'll get us any preview of very soon and then here's where things get interesting, we might notice we're creating an environment and creating a front-end and we're calling it a peregrine app and then we connecting it to them back-end and passing in our Magento path, and then we start a build session, and then we return the web pack and Figg like usual. Well, let's see what this looks like when I actually tried to start.

H

My development cycle observe again that here at this moment that you're going through something as a front-end developer, you may have done before we're not asking you to type a complex in Magento. Do some stuff you must remember.

H

Can you see this terminal by the way? It might be a little bit of contrast, II, but I can zoom in we all get on there. I.

F

Think it looks good good.

H

I think it looks good too so you're gonna run NPM start the exact same command that you might be used to from other parts of the ecosystem. My notice that Magento PWA studio has taken things over a little bit because it is making sure that your build session is correctly configured. That includes the back end and the front end. It's got to make sure that the directories are soon linked together.

H

If that's, what your system supports, it's got to make sure that your Magento store is configured so that it's going to allow development modes to work in the way that you expect that dissipate that's set up goes pretty quickly, and then you might notice that it's also produced this URL for us magento vineyard, local PWA, dev. Let's check it out.

H

See, oh, we might notice that it's proxying through to localhost maybe recognize this yeah. It's Jimmy's gorgeous theme and we are now in a development session that was provisioned almost entirely without your intervention or your complex config. This may look long, but that's because it's explicit and careful to be clear what it's doing all of the complicated determination of what these paths are is done by the build session.

H

So now we got some things that we can show off about this experience that you know, Jimmy has already went through to some extent I mean here we are in this button. Css and I've decided that those things look kind of ugly and too round so and I save that in a place, and that was quick in fact, it'll be quicker when we get the hot module reloading going for CSS modules, but that's something we're still working on on the other hands. This also looks pretty terrible.

H

It's a bad experiment, so I'm going to go ahead and reverse it out and we're good to go. So this is the experience and the the console logs almost continuously what the underlying PWA studio is doing. In the same way, you get the same logging in your terminal and ultimately you're going to have a set of scenarios you can select or where your terminal from where all this logging stuff gets sort of, aggregated and compiled, and that way you can start to learn things.

H

An interesting thing that you might notice too, is that there are some things that you experience when you are a magenta developer that has to work on secure stuff like provisioning Apache, to have SSL Certificates running these complicated, weird, open, SSL commands and when you're done, you still see this and then, when you see this, you go all click through I've done this before and then you get to localhost.

H

You go time to learn about service workers and then the service worker says this, because these tools have become more stringent than ever before about your SSL set up the entire PWA universe lives in time inside an HTTPS only place, and yet, in order to configure our development environments to support HTTPS, we still usually have to paste a whole bunch of deep magic commands to our command line that might as well be giving that guy root on our computer.

H

Whoever that blogger is so instead of that we have the PWA studio, build pack do all that stuff manually and you can see an example of that. I may be creating a brand new build session. Here we have Magento of any local PW, a dev 8002. Now I'm going to go to the Hangout and I'm gonna pick a random person. Let's see eeny meeny miny federico letter e go.

H

Are you muted cool appear Federico Federico? Do you have any pets.

C

H

Okay, do you have any children not yet do you do you have any favorite footballers, oh yeah? Okay, can you give me the last name of one I'm, messy, of course messy? It is so now.

H

Okay, now that seems like it's a ringer, because everyone was going to pick messy, but I will say that in our package file, where we configure how Magento understands the name of the theme we're going to change the name of this theme to messy and then mental doubt of this and I'm gonna go ahead and act as though developing a totally new theme called messy and doing the exact same thing again.

H

Okay, so again it's trying to resolve and make sure that everything is configured properly on your local machine to support proper PWA development might be taking a little extra time. This time. I wonder why ooh.

H

G

H

Okay, it wants to make changes which you know, that's usually pretty trustworthy right. It's got a little lock. It's got some manner of logo, I have a long password. So that's right fight me and it's gonna ask us this a couple of times. We want to be able to make this as simple as possible, but oh.

H

Is this because it forget it failed to courts? The demo goes wrong. That's all right! We can figure this out. What we we wanted to show you I guess see was it has provisioned everything that it means to and see get a dressing for that with a DNS. So that is something that is above, that magically appeared during this demo. But nowhere is it's a demo.

H

You guys all understand if you're familiar a little bit with the underlying sort of immunity parts of this, you might see that there is no such thing as a gentle messy yet because apparently had forgot to and both of them, let's go ahead and try this again, because it's now gonna notice that it only needs to ask me one time. Hopefully, I will enter my password in time, but what it was doing was when you initially set up a store and you've never had it. Nate you've never worked on that theme before it's gonna.

H

Ask you for a couple of administrator, passwords murder introducing very particular things. One of them is it's going to generate an ssl certificate authority if it hasn't already, if it has, it doesn't need to do that. It's going to trust that authority in your preferred system, which, usually that preferred system is, uh let's see, I'm gonna have to go into etsy hosts, I think I'll be not gonna. Work will try. It.

H

Yeah, that's not really, okay, so I'm gonna have to do a manual edit, so you can see at least the trust settings and then just swallow. My tried on the other stuff.

H

hmm They're ready for primetime players- oh well, there. It is to work that time.

H

Connection refused, because we have not actually changed the name, oh because it's 8003 yeah, because it gave you a new port because, of course it did that actually worked. The new port is provisioned because a lot of the times you might find as a developer.

H

You you're multitasking you're working a lot of things simultaneously, so observe that not only does this immediately resolve to my local host, even though it's a brand new domain name, because I had no way of knowing that somebody would pick messy as their favorite footballer, but also that it's already trusted that this is the service worker had I, had it actually and with time which I don't because I'm doing some local development, which requires no cash.

H

The service worker is able to register because it's fully trusted and that allows a whole lot of cool stuff to happen. Also.

H

There is a whole set of configuration values which need to be set and maintained by Magento, and that's something that Dobek understands and if you feel like watching a whole lot of characters fly by on the screen. I can run this in debug mode, but we're already kind of running short on time. So, ultimately, what we want buildpack to be is to be a build session provider that can handle a whole lot of different configurations and different scenarios. Some people do development mode on a locally hosted Magento instance.

H

Sometimes they do it in vagrant, sometimes you're running a production test or a CI test in one of those two environments. You often are using docker these days and there may be others, so the the code for the the build pack is designed so that it's going to support as much as possible in a fluent way, a build session has a set of supported, front-end, provisioners and supported back-end provisioners, which iterates through to see. If the things that were passed to it are something you can put together a reasonable scenario from right now.

H

It's got local web pack, tab and local web pack production. There may be, there may be more in the future for the build session, the backend provisioner as a base implementation. That does the things every back-end needs and then you have say a OSX local hosted back-end provision, and this knows that this is probably where your httpd configuration is your HTTP at pass. So that can auto provision all of the important stuff it connects directly to your local host to a shell adapter, and then it prepares all the other stuff.

H

There's a similar vagrant VM hosted version of this. That also does very much the same stuff, although it knows that the paths may change for your vagrant configuration, the restart command may change, but it tunnels through the vagrant SSH system, so that, instead of running the exact same commands and local, it runs it through baby and it works.

H

The same thing, of course, would would happen with docker, so news stream have to go and that's because I scrolled out my tea mugs, you can see if you wanna, get a kind of a crazy notion of all that goes on here. But it would look like if I changed its name again until Eureka.

H

H

Am I oh I'm, sorry that should be an equal sign, yikes, okay, so that's an environment, variable that'd be bugs, and now you're gonna get a whole lot more information about what it's trying to calculate.

H

You can see that it's going through the settings and it's making sure that they're configured appropriately, which they generally are that's fine. It's making sure that development mode is set. It's making sure that everything's set and sure enough.

H

It's loading up, so there you go. This is going to provision and allow for you to run maybe multiple systems on the same computer, multiple PWA, studios in the same environment and work on multiple clients, simultaneously, all those things being fairly important to working in an agency context and, most importantly, to learning this tool without having to constantly interrupt your learning process. In order to reconfigure it.

H

That's what I got and now I think the probably the biggest single set of questions you guys still have is how this system is going to support the extensibility and the modularity that we've come to expect from the Gento that so far our PWA is that the community is produced, though fast and incredible and beautiful can't really be said to support, and so with that I am going to cede control to Andrew Irvine, and thank you guys very much for your attention.

I

Everyone can someone on the call give me a thumbs up that they can hear me all right, beautiful, multiple thumbs, David before I start I know that we're already over arts time for the demos we still have time to go quick or, if not, we can push and I'm happy to record. So I can set it out to people later. I don't want to take people's time hostage. We.

J

A

Shared up no no yeah, we we have, we have time. We do have quite a lot of questions coming in as I want to make sure we do have time for that. So if you could go I don't know, maybe the key thing you want to get across and then.

I

Yeah, um you know what I I want to make sure we have time for questions hello, just because we've used up too much time. I'll just tell everyone go ahead and join the Magento community engineering channel. We have a channel called PWA and you go in there. Well, I'll be more than happy to give you all demos. Oh.

A

Okay, I appreciate it I'm. Sorry if we had to cut it short and I'm sorry, but we do have a ton of questions and being someone who doesn't really do much front end stuff I need some help with these um cool. So let's start with the first one: I have, which was from maze, dev or as he's better known, and he was basically a do. You lose the advantages of less and sass, as it was only pure of good, old-fashioned CSS shown during the demo over.

F

Yeah I can I had answered that in the in the chat, but I can go into it here. So the answer is no. You can use less or sass or stylus or anything anything that can be layered on top. You know, as part of the web pack process can still be used.

F

So you can author, your styles, how you want and then CSS modules is ultimately going to do the same transformation of class names, and so the only thing that I that we don't recommend you to do is use these systems within preprocessors like that to bundle your CSS all into one file by like doing a bunch of imports and stuff. That's what that's!

F

What we don't need anymore, because we're not we're not trying to build one CSS file and send it with the first request work, we're specifically trying to say: hey, associate CSS with components, and so it layers on top yeah.

G

And webpack does support both.

H

Css modules, post CSS lest stylist and sass- it's just that whatever you use to do your authoring downstream from that as it goes into the actual package, our configuration system is going to be very careful about the size of the remaining asset. So sometimes you can do some stuff in sass. These extends in the wrong way that really explodes the size of your compiled. Css and you're gonna find out about it. So I think it'll be trial and error.

H

Some people will find that they'll build, learn new tools as they find what the PWA constraints are, but for now it's the the sky is open for you to try what you're already accustomed to that's webpack supports no.

A

Cool all right, the next one again from security, because that's his jam, do you or do you have browser specific certificates when it comes to SSL we're.

H

Using a root certificate upon the initial creation of the first session, you have and then we store it in the user directory and then trust it in the in the keychain or whatever. The provisions. Sort of trust system is for the local OS. That's actually well tested code, that's integrated into other systems, it's a it's. A library called dead cert and the way that we keep it secure is that you create the routes or authority, but then immediately upon creating it and provisioning the site. That is trust that is trusted by it.

H

You delete the private key, so you can no longer sign any new sites with that root. Ca Authority, the only downside there is that you might get a couple of redundant authorities, but since nothing can be trusted by them, it's it's about as secure as you can make this kind of thing. Also. The certs expire in 30 days.

A

Okay, I'm sure, if he doesn't like that idea, yeah I bet he will okay cool the next one comes from Michael with the unpronounceable surname and very sorry, I presume. That's polish. In fact, I think I know the Michael. Okay, I'm, sorry Michael! If it's you and what is the target reload time? Oh.

H

The target reload time what you saw, what you saw was the result of hot reloading being disabled because of CSS modules, having currently a small issue with it, we're always going to err on the side of accuracy in the state presentation over speed in development mode. The hot reloading time is, of course, an only development time concern so right now, because the CSS module hot reload is a little touchy. Then you have to do a full page wheel.

H

So basically we're saying it's 300 milliseconds, instead of 30 milliseconds, until we fix this bug or until upstream they fix this bug in the web pack level. Our target for the development mode is that you don't have a consistent reload time, because you don't have to refresh the page for every change a lot of the time, especially if it's a view related change, especially if it's to relatively stateless piece of code, the Refresh will be almost instantaneous because it only has to refresh that piece of code.

A

Rendering for SEO, yes,.

H

But not completely most of the existing PWA implementations on Magento and otherwise are built so that the front-end is running on a different server stack, usually nodejs, almost always no js' for the server-side render portion, because the technologies that they use like react or you or whatever, usually have an adapter that, instead of dealing directly with Dom nodes, will spit out HTML. Of course, this isn't the most high-performance thing fully.

H

Server-Side rendering and react has historically been a tough thing to get right in production, even for the very highest end users and creators of node software. So, rather than try to go down that road, especially because our back-end is PHP, you don't want to make you stand up to servers just to run on our PW way.

H

We're choosing this approach, we're going to do as much server-side, rendering inside the app shell initial generation, as is necessary to do the metadata that SCO requires, and it's more important, even than SEO, is the metadata that will create a good media object when someone links to this thing in social media or slack or some other context. So we are going to do that minimal render and the app shell is still going to be familiar old PHP, but the actual content and presentation will be loaded in dynamically.

H

That's it I mean most of the major search engines are also loading pwace fully in their spider crawls. These days anyway,.

A

Ok, cool just a reminder for anyone watching we also have anton krill and we have Mohammed and Federico. So if you have any questions to the community members about contribution, put them in the chat as well or if you have anything tricky for Anton Olga, we will get on actually perfect time for a little PWA break and Olga is here because PHP, 7/2 and or the compatibility would be to be simple as you just wanted to share a little something while I sort through a few more questions.

A

I think this is a perfect break for moment. That's all right so I'll hand over to her for a moment.

B

So I probably won't show the screen, because just maybe a minute or so so I just wanted to share that right. Now we are I'm reading a community project 2007 due to which obviously just enables magenta being compatible with PHP 72 and why we do. It is now because support for 7.0 and 7.1, which are current sizable, but by magenta the two will be dropped so for sounded zero.

B

It will be totally dropped in the end of this year and for which peace on the planet will be supported till the end of this year and then one more year for security support. So it's really important to have support for sound in magenta.

B

So basically that's the important part, and there is a project it's already in progress, and we found how much here who is joining us and thanks for that and we have Patrick who's, contributing and a few other people. So if you have any question or questions or you are interested in in the project, you sting me, there should be an information on the video later or just talk to the community engineering team and thank you cool.

A

No pressure Mohammed, but it's now being said on a live stream, so you have to get involved with PHP 7. Sorry, ok, that's cool yeah!

A

If you want to know anything more about any of the projects, whether it's the PHP 7 MSI PWA, whatever you want to get involved, the best place to start is probably the slack channel you're, not in the slack Channel, send a email to Ange calm at magenta calm and there will be the email in the video description and yeah we'll get you involved into that slack and just join the channels that fit you best and where you want to get involved and yeah and start with the contribution.

A

I'm gonna go with a controversial question: yeah I came from Michael again and it's why not promote using external Magento back-end, so the front end, probably new running on their local machine.

A

H

Not indeed, I received a similar question of mage Titans. The short answer is that we decided that that would be too exclusionary.

H

Part of the reason that a googol approached us to talk about making PWA is native to Magento is the Magento is a tool that somewhat uniquely, is both extremely powerful and commonly used by developers and merchants that don't have, who don't have the financial resources to do very long, very complex senior debt debt projects or to do complex, IT, nothing is stopping you from using our tools to produce a node.js, backed PWA, Peregrine generated react components are fully compatible with server-side rendering, which is not something we had to work at.

H

That's just the way it is, and there's going to be a public repository. That's increasingly well maintained for you to do that yourself. It's just that for the default implementation, putting it on top of the same web server that runs Magento is a super easy setup. It's a lower barrier to entry for those people who want to learn PWA without having a lot of money or time.

A

Okay, I keep losing the mute button, so it sounds great. So far, I'm gonna go with one more question. Lesson comes for Anton trill, because I really want to get.

K

Good section on the buoy from Anders, so if I can do here, sometimes I think it would be useful to present one more part right. Yeah.

H

I think a lot of questions might occur right now that Andrews demo would answer if he's still around and still available and willing. So.

A

I'm, okay, for going through that, you are needing to leave the call if in the chat, sorry watching it and you need to leave their mind that this video will be live afterwards. After we've finished, it will be life to watch at your leisure, and so let's yeah, oh yeah,.

I

Just let's just go ahead and keep taking care of the questions. I'll just go ahead and record a demo of this after and put it up on YouTube, and now we can share with people and I'll be available in the community engineering chat. If there's and questions on it.

A

Okay, okay, well, we'll go at that way, then. So.

A

Someone's asked if we are going to create the PWA theme with the whole Magento functionality, ready and out-of-the-box to go.

H

Bring on Lavine yeah, we are going to do as much as we can I think the the Magento PWA studio approach. Clearly as we keep saying to everyone, is tacking towards making the developer tools extremely robust, and that consumes time. We also know that the the UX, the proper concepts and the the sort of ways that common ecommerce workflows need to adjust to accommodate a PWA world. That's something we're still exhaustively researching, so long story short! No, not it imagine. Will we have a full theme that does everything that the luma theme does.

H

There may be some use cases that are not the most common that are not supported, and there may not be as high performance code and behavior. You know towards the end of your conversion process when you're much less likely to bounce a customer, they've already built a cart things like that. So no we're not going to do it before imagine, and we are certainly looking into and thinking about ways that we can. We can leverage and compensate folks in the community for it for helping out with that.

H

I've said this a bunch of times before, but if we just made another PWA theme and cost rate all in that, then we would just be competing with folks who have built their own, and the various agencies have done such a good doing that. Instead, what we will have will be some core components you can use to put together common pages very quickly and we are going to have a subset of functionality implemented in the standard.

H

Pwa studio way go choose that subset based on what's most likely to be a landing page and therefore, what's not letting what's most likely to add value to your store. Today,.

A

A

That's a good question just to come in right now. What are the biggest unanswered questions still in the PWA project? That's.

H

One of them, but.

A

They complete everything or the question.

H

Itself, hi Brendan, um the the biggest unanswered question. I think for me, is how we're going to manage and help our community with can hear me: okay, how we're gonna manage and help our community with migrating those valuable things that we've that they've made into PWA compatible UI. We largely think that that's gonna happen by itself and you and I actually talked about this before, and we don't want to just lean on the fact that people are compelled by the market to upgrade their device.

H

We want to find ways to help people bring the code that they've made, even if it's just block implementations into a PWA world. What we don't want to do is try and fail to come up with some automated method or some enclosed method of bringing in people's existing UI, which would come at the cost of performance. To me, that's the big question and I mean there's other smaller ones.

H

I think we, you know we're always going to be wondering how we reconcile the virtual Dom approach with with high high high performance, where you know we're wondering whether we're gonna stick with the single stack approach. There's a million questions since we publicized repositories, those questions are going to be much more viewable to you and our actual conversations about them.

A

Ok, so I think what I kind of I'm understanding is. There is a lot to go and you're looking for kind of the community response to see where the priorities are for people. Sorry you're cutting out am I.

H

Cutting out a little bit, yeah I think it's because I'm switching between the tabs to look at the chat but I'll turn on think I'll trust you.

A

Basically, as far as I can see, you're looking for a lot of shape and direction from from the community and people out there in.

F

The magento.

A

World I guess so what is you've mentioned it before we've mentioned a few times, is the best channel for such communication or for people to reach out to you, through this slack.

H

For me, I have been completely off the line for quite some time, mostly so that I could help kind of get like a final push going for some demo, but I'm I'm, shifting gears so you'll be able to reach me a lot more consistently everywhere that I am present, which is currently, though dormant Twitter, the community engineering slack the mage chat slack and then the the forums even direct access to to me via email is fine.

H

My turn around maybe a little a little weird sometimes, but you can talk to me in all those places, but I don't scale very well and there are increasingly great repositories of knowledge and strategy here on our team. That ain't me Andrew will answer any question that I could answer in like a quarter of the number of words Eric is, is gonna? Have the the business approach to this absolutely down anytime? You ask for aught to me, certainly about the big.

H

You know the big architectural ideas, but I want to clarify to David that you said we're looking for guidance from the community and we are but we're not just punting to community to make big decisions. What we need to do is make the decisions that we are in the position to make and and leave the stuff that would be pointless for us to enforce. Out of it, we're going to say, here's how you do extensibility here is the type of technology that we should use so that you can merge other components in.

H

As for how you achieve the performance. As for how you organize your actual component hierarchy beyond that, as for even what you use in the view, layer, if you want to write your own integration, we don't want to impose that, and so we're still looking around for the things that we can provide as a platform instead of as a fully end-to-end solution, so that when we ask community for stuff it's in that area of feature where community would like to be the least encumbered.

A

Wonderful clarification. Thank you very much.

A

So I guess this is is where we're gonna leave it for today, I appreciate everyone that came on and got involved, I'm very sorry that we couldn't get the full thing done, but andrew has promised that he will give a demo out there, and so please just keep pestering him till he does it I guess it's the best way, and maybe that means there's time for PW a hangout part 2 coming up at some point and we can see that other party yeah and we can see how it's progressing in time.

A

Yeah so I just want to say a big thank you. Dev room for joining in I want to thank the whole PWA team. That's come in I want to thank Federico and Mohammed for coming in and sharing a contribution from the community side, and although for coming in and talking about hb7 to anton for coming in and waiting for questions that never come so next time, I will give a stick in to the best question that comes in ok, I will post this.

A

And I want to leave with one final thing, which is from the community engineering, not only a big THANK YOU for the last the first two months of the year. They have been amazing for us and I want to continue with that, and we want to continue guys. This is all about opening up two-way communication and getting it as as open as possible, and with that we are having distributed to the contribution day of the 24th of March, and it will be across many many locations.

A

If you would like any more information, it will be in a blog coming up soon, but the 24th of March is the date which is a Saturday. There will be a location in Ukraine in Poland, Slovakia or Slovenia, not sure it's a Twix efflux will be hosting. There will be one in the Netherlands and there will be one in the UK. So look out for some more information with regards to that yeah and feel free to join that remotely as well. If there's not a location near you, that is shouldn't, be stopping you from joining.

A

If you want it, we will be there as a team will be open and communicating on slack and so feel free to reach out to us, just as if you would in a physical event and yeah. That's it. Thank you. Thank you very much. Thank you. Everyone, the video will be uploaded pretty much straight after them. I'm, not sure how long YouTube will take to process it, but you can watch it at your leisure afterwards, so if you've missed something feel free to come in later on and watch it again so guys and girls.

A

Thank you very much for joining and we will see you at the next hand. Thank you very much. Thank.

F

You thanks: let's see you, it's look.