Magento PWA Studio, 16 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Sync 16 June, 2021

Description

Meeting agenda:
- Checkout payment extensibility - Braintree as an extension
- New theming concept for PWA - proposal overview (https://github.com/magento/pwa-studio/discussions/3241)

A

B

B

I don't know what.

C

B

So hello, everybody uh welcome to the community thing uh we have uh week 13., we have oh no, not week 13 but um yeah um anyway. So um uh in my late latest pull request, I introduce a new target for edit module and summary so, and now we have everything is, should be now extendable in the checkout. So this means uh in this uh request we have a lot of tests because it was like I did some some movements of components and did some refactoring also some performance improvements.

B

So let me search the target here. Oh this is sacrifice. Oh, this is the target, so I introduce a new or summary collection. This allows uh developers to to hook in on the summary page. So this means, if your payment needs a summary or would like to have a custom summary. We we have a default summary, but if you want to doing some different style of summary page, you can now hook in and place your component.

B

It works really similar to uh to the edit model and to the um to the other things we was thinking about or tommy was proposing here. Maybe we we merge uh all uh four collections together to having a api like uh we have an object and having sub components, but um I did some some um spike on it or take a look on it, but it was like not a quick win that we we can introduce one api for all four things to not uh blow up the pull request. So much um so.

B

For that reason, I think for the next release uh there will be four apis and maybe and the release after the next release. We we changed the api a little bit, but uh also have some some documents about um upgrade if it's possible um so um yeah. If you are interested on how you can extend um the checkout, I will also update my blog post on on my on my blog. So um this uh this the mystery file uh blog post on my on my blog also.

B

I think we will have a small thing in in the docs or a small thing in uh in the dev talks about a new new type. So we we get editable payment types, so this means you now allowed to hook in in the edit model. So if a customer clicks on the other, it opens up and it allows you to to edit your payment- um also a further thing here uh now, with this new apis, it's possible to move braintree out of core and move it in a separate extension.

B

um So, but this is a future thing, but maybe happens in some future time but yeah. This is all about this. So if you have any question you can ping me in in the community slack or go over the request. I also refactored the braintree, so it's already using the new apis to to hook in the checkout.

B

C

Thanks lars, that's awesome, I mean making child even more extensible. It's a great thing.

C

um Meanwhile, jimmy just joined, so we can use the rest of 15 minutes of this call to the um to the to discuss the theming.

A

Okay, um let me get set up here to share screen.

D

A

um So I have, uh I have posted the theming proposal based on uh based on an earlier demo that we did a while back. I think here on this same community call where I suggested that we were. We were looking at introducing tailwind to pwa studio to finally give us a true theming solution.

A

So uh theming means a lot of different things to a lot of people. I know it has a very specific meaning in magento, and so we don't want to be ambiguous about what it is we're shooting for.

A

um So a lot of this is is explanation right and uh it's in you know it's in kind of uh you know detail, so we're not gonna we're gonna walk through it here uh on this call, but ultimately what we are trying to do is we are trying to combine our existing approach of css modules, which is good for for optimization's sake and tailwind, uh which is also good for optimization, but has its own opinions uh to give us a system where you can write a package that will define the entire palette of values that your css will use.

A

And then you can, you can add, you can either add as much css as you want. You know through a javascript api or you can just write it through uh through css and um and it will take a look at all of your css and give it true dead code. Elimination right, which is anything you don't use, will be excluded.

A

So, ideally, we want as much as possible of our styles to live in a in a separate location from our code in a place where you can define it in your own package in a place where we can define it in our own package um and then you can uh and then you can override it. So this is ultimately what your config file could look like. If you wanted to use exactly uh the venue theme right, you would, when you scaffolded an app, you would get your own config.

A

You get your own tailwind config file and you would just say I'm pulling in the venue theme listing it as a preset and then any any changes you wanted to make would happen here in the in the config and you would override on a granular level, uh the presentation.

A

um Our our theme would also export components for each of our. You know plug-ins for each of our components, and that would give you the ability to uh to sort of override our component styles on a per component basis as well.

A

um So you could keep our buttons and get and change how our accordions work uh keep that you know, keep the header change, how the footer works, etc, um and then we would have a config section inside of uh inside of our preset. That would allow you to sort of enable disable or override each of those each of those plugins. So the full details are in this document we're not going to walk through it too much.

A

We did evaluate a couple of others.

A

You know we looked into bootstrap, which is kind of the the main one adobe spectrum which, which is a really great css library offered by adobe and in the future. Spectrum, could be really interesting for us as well. You know we might have like a spectrum theme- uh it's just not quite there for our purposes yet, um but keep your eyes on that one and uh and then tailwind had the things we needed most right, the configurability uh and the optimization to to exclude those rule sets that are not being used.

A

So uh this this is going to generate a single, uh a single style sheet.

A

You know, that'll be served up front, but uh but that style sheet will be uh as minimal as possible and uh and in the future. I do think that there should be a way for us to even code split that style sheet, so nothing just yet, but I do expect that should be possible down more so.

A

Anyway, I highly suggest that you take a look at our wiki uh read through the document, see if this aligns with your sort of expectations, if it's missing something or if you think, there's a flaw here, I would love to hear about it so post a comment or talk about it in the in the community slack and uh keep your eyes peeled for a uh for an initial pr coming soon that will they'll kind of introduce the config and then the team will start working on it.

A

You know later this quarter.

C

Thanks jimmy yeah and just like a reminder that this is something that, like it's just one step of multi-step, journey of updating and streamlining the designer developer, workflow with the bwa storefront.

C

So with the magenta two for three, we are introducing the veiner ui kit. uh So basically it's a file, uh the xd file it is available and uh that defines the vena style. Stylesheet was the next step of introducing the theme in that genie just walked through.

C

It's like introducing the second pillar on a developer side of the workflow and like ultimate goal for us, is to combine these two and introduce the integration between their xd files and theme for the pwa storefront.

C

So there as genie was saying, the immediate next steps in a female workstream would be introducing just like a framework and uh limiting the scope to a certain area of the storefront, um and then we will move forward, defining the variables for the clean theme and for the venue theme, and that would be a developer focus for the rest of the year for us so just be sure to provide feedback and share your opinion.

C

This is something that we believe is very important to raise the awareness across all the community and make sure that we are doing the right thing that will improve the develop the star front, developer life in general.

C

Any comments, questions.

C

There's a question.

C

And and slag or sorry in in the chat, less files can also be targeted in the tailwind config uh adolfo's asking jimmy.

A

Oh, I see it can be, uh can be targeted in the config file. Oh um yeah, that's a good point. um So the way yeah, the way that uh we are intending to use tailwind, uh is that you, you point tailwind at where your content is, and your content is the thing that says here are the css classes, I'm using and so by default, we're going to point it at our css files right at our css modules, select within veneer ui.

A

But if you wanted to apply class names from less files, you can include less files in the regex for for what you consider to be your content, so you say these less files are my content and then the the content parser will look at your less files instead of our css files right or as well as whatever, and then, if you really wanted, if you don't, if you don't like using the css module step, you can you feel like putting them directly in the components you can point them at your jsx files or whatever instead.

A

So that was one of the big advantages of that for.

A

C

So we have four minutes left um some time to ask questions and have a conversation. Don't waste that opportunity.

E

I have a question elena, so, with taiwan being a utility first css framework, uh I've seen that create issues with uh the class name property being pretty pretty polluted, with an abundance of utility classes.

E

Do you guys have any plan for how you expect to see those utility classes used, or are you mostly just using tailwind for its configurations.

A

Sure, um mostly using it for the configurations, it.

E

A

It does add a bunch of stuff to the class name property, but because we're going to keep css modules and we're not actually going to change how class names are applied to the component you're still going to have that unique class name per element of the component, and you can still write css in there. If that's you know, if that's something that you need.

E

So would you anticipate the utility classes being used heavily moderately or very little.

A

uh I would, I would expect us to use them as much as possible for their optimization's sake. uh If that makes sense right the goal the goal is to have as.

D

A

Of the css in venia use the same, you know, reuse, those same utility classes so that we have to serve less css over the time right.

B

And the main idea here is to to have composers, so you inherit css from tablet and you you, you get in the end, a smaller file.

A

Right, it's all done through the through css modules, composers, keyboard,.

A

So the you know, you're not you're, not juggling all those classes, all those different utility classes in your components. You're still saying this is the root element. This is the title element right.

A

This is the price element and those get classes.price, but then in your in your css module, you say: okay, the the root class, the title class, the price class, rather than putting a bunch of arbitrary css in these places, you have it composed from the tailwind class names and now, whenever you change your tailwind config, those those properties will change and those properties will reuse the same declarations that you already served.

E

So you end up with kind of a global route, a global price defined within tailwind configuration.

A

No, not quite you can, it depends on whether you do it as a plug-in or whether you do it, whether you do it. Let me let me try and share real quick one more time.

A

Let's see here, we go.

A

So in this example.

A

Here's the here's, the component right like a panel component. It applies classes, root, header body which are imported from the css module.

A

Here's, the header, here's the body. These are going to get applied.

A

And then the header is also going to compose an animated.

A

So this is, this is kind of how our current css works.

A

And then this is what it would look like afterwards.

A

A

So you would just you'd compose.

A

From either something defined by a plug-in or from those granular things themselves right, so you know composers created from global composes. uh You know transition uh duration, whatever from global right, and so you, you have a bunch of these, and so these these classes are still hash and unique to the component.

A

But these classes are global.

F

F

So um what would be the difference between tailwind and just like importing it from a global css file like without tailwind.

A

So the the big difference is that the bundler, uh the the the webpack process, is going to look, is going to statically analyze, uh all of your content and and look at which one of the generated tail tell when class names are used and which aren't um so like. If you didn't have that the total theme would be several megabytes in size right right.

A

So the key is that uh by having this bundler process, you're only going to be using some of the css that your theme uh creates. Okay- and it's really just gonna, be you know several kilobytes right.

F

Right so from tillwind we will be probably like using stuff um like flex blocks uh grids and and that kind of stuff, and then we only take from two and what we need right and the rest. We could just uh customize to our needs.

A

F

A

So most of you know so tail one will have we'll have a utility class name, for uh you know for pretty much every css property that you might use like display grid display flex stuff like that. But then most of the most of the real css you're writing is is like sizing, colors uh spacing stuff like that.

A

um So that's the stuff where it'll really help to palette so that you have a consistent theme that can be changed, uh but also to have this dead code elimination so that you generate combinations for all for all the items in your palette and then only ship to the shopper, the ones that you end up using.

A

Gotcha makes sense thanks.

A

Yeah, so there is, there is a poc and I I will. I will try to uh I'll try to share that repo uh in this proposal so that you can run up. You can run it and try it out, uh but then, like I said, we'll also have a branch coming soon. um Where you'll you know, you'll be able to get a feel for it.

E

Jimmy would you be adding a utility classes via composes as well, in the css module, or would you be adding that in the markup.

A

uh We have either option we'll be adding it in the css module, but uh on your own site, you'll have either option.

E

And, as you said, the benefit of doing that is it. It could has the potential to cut down on the the final file size if uh classes go unused. Is that right? It.

A

Yeah, it actually won't matter whether you apply it in the component or in the css module you'll, get the benefits from bundling either way as long as you can figure to when to know where to look right, it's like, if you, if you're putting it in your component, then you need to tell tillwin that that it needs to look in your components for class name usage, but uh the the reason where you working we're, keeping this css module and the composes thing is that having one local class name per element preserves your ability to ignore all this tailwind stuff.

A

If you don't want so you just you, can just write css in here like you do today and and forget that we even use tailwind, if you don't like it, but also this. This establishes a good api uh for our components that is likely to be part of any. Like future extension work, we do around components, so the these local single class names almost act as identifiers within the component. Does that make sense.

E

Yeah, absolutely and you're, anticipating this being about two major version releases out, is that right.

A

I think so there's because the next one we're getting ready to to wrap up here, so it'll be an 11 um and then this work hasn't really started. Yet uh you know in earnest, so so it'll probably aim for the next version.

A

F

And would this um deprecate classify as a whole or does it work together, should work.

A

Together, that's a good question. Actually uh so classify in general, um you know is, is really just a thin wrapper around merging classes right and that that api still works for for taking classes that come in via props and overwriting. The problem for us is that that that api requires you to do. You know some level of component override right, like you have to be rendering our components from somewhere right and the goal with this is to give is to give people an alternative that doesn't involve overriding components. You know as much as possible.

F

Right but there's still like, let's say you have like um a panel, for example, um and you have it always still the same way and then at one specific location, you need to restyle it yeah right now. That would be done via the classify by order component right.

A

Yep yeah, that's still.

F

Going to be still.

A

Going to be that way, so, um as you know, as part of all of this right and as part of recent changes we are, we are also considering whether uh whether the the classified call uh should move into the talons or not. um So that's not part of this that you know that's not part of this proposal.

A

That's not something we're like set on doing we're just thinking about it, uh so I'd be interested if you're, using that that api, if you know if any of you are using that classify api, I'd, be interested in hearing whether you think it would be easier. uh You know better or worse uh if we were to put that in the town so that you could get at it from from wrapping a talon or whether you you know prefer to have that in the component right right.

E

Thanks jimmy for the utility classes, that tailwind exposes those would be usable in the context of a page builder content type in the class field right for clients if they wanted to have more granular control over.

A

That is a good call out, so we would have to update page builder to know about them. If that makes sense, but yeah they will be available right. So awesome you, you can see right that, like I said because tailwind has to know where to look for class name usage in order for those class names to be served.

A

um That does mean that we would have to either help tailwind look at page builder content, which sounds difficult, maybe impossible, or we would have to have some sort of layer where you specified, which which class names you were offering to page builder and then load it does that make sense.

E

Yeah- and I wasn't even thinking about those those styles being reflected on the back end most so that they just would be editable in the back end, but reflected in the front end.

A

Right right, right, yeah, that's a distinction! So either.

D

Way, I think it's likely.

A

That we will have you know like a page builder css module that imports some class names that we expose to page builder for usage.

C

A

Good call out because aem is going to want the same thing so.

E

I I just knew dave was probably thinking about it, so I'm just covering for him.

D

I want some pitch, but whenever he in nathan another team working on it now, so it's definitely something we'll probably need to loop them in on to make sure there are exchanges yep. I just know: that's that's your baby right.

D

um I actually handed it off to another engineer over a year ago, so my new baby is pwa studio along with these great folk, so very cool, very.

E

C

Has has multiple babies now.

D

Child support payments are getting pretty crazy.

C

Okay, guys um that's great to have like that many questions. um At least that shows that there is an interest to what we're doing and the hope that we're doing it all right. um So, thank you for joining and um you always can come back, come back with questions and comments. That's like channel the proposal from jimmy is out on the github and keep your eyes uh on the updates that are gonna come soon with the pwa thingy.

C

Thank you have a good rest of your day.

A

Thanks everyone.

C

B

Have a nice day.

C

C