Links mentioned: Details automatically generated.
summary

Speaker explains to the user how to decide whether or not to split an application into smaller parts. They are wondering if a Slider is the best way to organize the front-end of an application. They agree that modern front-end Frameworks allow them to choose the most effective rendering mechanisms for their content.

Speaker doesn't know what single Tech or / framework means. They will copy and paste stuff and try to get it out there. Speaker is watching a video about monoliths and open API specification. They are learning about how to architect a project. They like module Federation, hydration island architecture, module Federation and write and talk about using webpack.

Speaker is going to play around with it. There are dozens of Frameworks, nux felt this kit and next JS. They talk about web components.

Speaker is coding during a break session. They want to get some work done. Speaker is a big fan of web components and has done a lot of workshops and talks on them. Their very first talk was in January 2018 at the front end Orlando conference. They used a library called hyper HTML to make web components. Speaker came across web components when they were researching weapons and stuff.

Speaker explains how they got into the microphone and how they found out about custom elements. They explain the use case for web components.

Speaker will take a look at the micro front end Dev website to learn more about it. They have created a living document with a recording and a logo. It is about breaking down large user interfaces into smaller more manageable and independently Deployable pieces with benefits at an organizational level.

Web components are a set of three different standards that allow developers to create resumable components in an object-oriented way. Speaker talks about some of the tools they use to make their web components declarative.

Speaker met the Creator at a conference and they recommend them a website with a lot of information on microphone ends. Natalia bendito is going to add their Twitter handle to the list of links. Speaker is interested in microfinance and development. They have a website that allows people to check out more stuff on microfinance. Speaker wants to get back to work.

Speaker is tired and wants to get back to work. They send everyone off with some traveling music and asks them to take a look at an artist's website.

Speaker thanks Bee for hanging out and wishes their productivity.

topics
  • web components
  • micro front
  • mention custom elements
  • outer application code
  • deployable pieces
  • individual pieces
  • spot
transcript

Welcome back your dreams or your ticket, welcome back.

Same old place that you like but those dreams everything, and they have turned around Welcome back.

All right.

Oh give me a stretch.

So this is the second break session of three.

Hope you are being Productive and getting what you're working on and making some progress.

All right, so I am going to make this quick because there's some stuff I want to get done laundry's, done post promo radio, show stuff is done.

Getting some coding in place this order for this thing and it's doing.

Alright, not too bad, not too bad.

Alright, so share my screen here real quick.

Now, for anyone, that knows me knows, I am a big fan of web components and a matter of fact, just this past year I have done a lot of workshops and talks all over the world on web components and why?

I think they're awesome.

All right, even on my website like one of my very first talks ever, right was let me okay.

All this stuff about web components once about web components.

My very first talk, which was well, my official talk, I will do like lightning talks of stuff before, but yeah, January 2018 at the front end Orlando.

Codepen me do.

Oh, I remember like it was yesterday.

So I gave a talk and it was on a library called hyper HTML, and I was using it to make like web components, right?

And so it was so cool that the creative hyper HTML actually left a comment on There and said that this presentation was absolutely awesome.

Thank you for spreading the word about hyper HTML.

And don't forget Viper HTML, which is SSR stuff, which I am very into even now.

And so, super cool, right?

So, now, one of the first places where I kind of came across web components, like when I was doing, I was researching weapons and stuff, I would hear it with like micro front ends, right?

And, so I like, Oh, my girlfriend is a pretty cool.

Because what it does?

So like with my well, they have a by the way.

Let me my post a link to this so you can check it out in the next to the recorded video.

And so kind of goes to the whole history stuff, some different ideas, the core ideas behind it, right?

But they mention custom elements, right?

And so that is custom elements is like, one of the Technologies used Build web components, right?

So it's interoperability aspect from the web components spec, right?

And so, that's how I kind of got into all of the microphone and it's because, so, for example, do they have okay?

So yeah.

So, for example, right?

You have the full application, right?

And so, the product team kinda is in charge of that then.

So, as far as showing, like the toy models and stuff, then the related products section here, A whole another team can use that.

And so, would like, Michael front-ends, it could be like, well, if in this, this is where it kind of got kind of hairy was that, let us say, 44 color sake, right?

Let us say they built the red part in angular, right?

Then the green part, A whole separate team.

If they're more like comfortable, The View.

Well, then, they can build that whole section there with View.

And if you want to do like the check out stuff that's in blue.

Hold other team could just focus and handle that and write and react if they want.

Right?

And so but with that then you have to load all the different libraries and Frameworks and things.

Whereas if you're doing like a web component will then each team which is been focused on the web component itself and as far as like what comes in and what comes out that's all you need to worry about like your thing, react to what's coming in and then if you need to send stuff out, cool since it out in the outer application code, Work on it and so you can do that with any pretty much any like Library framework or no framework at all.

And so that's when I was like, okay I can see the use case for web components in it.

So I was a big fan and so how do you create a custom element, a whole bunch of stuff?

So this is like my go-to as far as like, my understanding of micro front ends, right?

And so, I always thought this is a really cool place to kind of check it out, and they broke it down for me at least.

Makes sense.

All right?

And so now recently came across a new one on my Twitter feed and so this is a new site called micro front end Dev, and so I haven't gone through it too much as a lot of stuff there.

It's very thorough I guess you could say.

And, so I figured I will just take this time.

There's break their kind of take a quick look at it, right?

And maybe you will like it as well.

So I added a link to the recording so that would be next.

To the recorded video.

Alright, so now it's like I think this just released like within a day or two or something.

And so this is a living document come often back to get updates.

Cool.

And so you go here, this is like the logo.

Yes and so.

Hello world.

Cool micro hyphen, front-end Dev, and so micro front ends.

And they cross it out and say, composable, the couple the front ends.

So my girlfriends are the result of breaking down large user interfaces into smaller more manageable and independently Deployable pieces with benefits at an organizational level.

So kind of like how they're talking about here with this toy model example.

Where you go like right here, so taking the whole application and breaking it down into independent pieces that can work together, right?

All right.

So, but what exactly is 1 micro front end?

If you have arrived here, confused about what a micro front end is and probably to confuse.

I am about to confuse.

You more is a button that hits an HTTP trigger a micro front end.

Yes, is a shopping cart and checkout feature a macro.

Front end.

Yes.

So that's when he saw the shopping cart.

My cart checkout.

Bam.

That's what.

That is there, right?

All right, cool.

All right.

Yes, it can be, is a whole blogging microsite in the context of a much larger platform with dozens, or hundreds of capabilities, a micro front end, it can very well be.

And so, this is why, although I will be using the term micro front-ends throughout this site.

I prefer the to think of them as composable the coupled, front-ends not all applications, that may be considered a microphone and are actively micro There's like I guess with the blogging one could be like a whole application not just like an individual UI element, right?

So kind of like how here is, so I guess like the whole application here could be its own micro front end and have the individual pieces also kind of thing.

All right, cool.

So yeah.

So this is why Yeah.

Not all applications that may be considered a microphone in are effectively micro.

Please go to the microphone and patterns section to understand why all right, cool?

So then you can scroll down to get to another section.

Now, this one I was I didn't understand it really so.

All right, so do you actually need to decouple your application into smaller parts, right?

So there's like application size, but does that mean like As far as like likes KB size or maybe like Pages or like data that has to show, I am not sure.

Because like when you scroll, like when you it doesn't show you like any values or anything.

It just kind of like and then application type and then you can like click here for more info.

So it shows like when evaluating whether or not you're should be splitting your application into multiple.

Girlfriends.

You should consider how big your application is large monolithic applications.

Even if there are modular.

And when they are tightly coupled, especially if they have large teams, working on them are candidates for micro architectures.

I guess that goes for kind of similar to what they have here kind of, right?

So like there's the monolith the whole shop team, does everything right?

Front-end back-end database.

But if you have front and back teams, there's the front end and then The back is the devops or back in team and then microservices, same front-end team, but then use kind of split up all the different services, and they kind of talk to each other and it's one place and then it shows on the front end.

And so then with the microphone and everybody's kind of like in charge of their own part of the app all the way through.

So I guess that's kind of what they're saying as far as application side.

But I don't know if a Slider is the best way.

So like for example, so application type dynamic or static.

So in valuing whether or not you should be splitting your application to multiple micro front-ends, you should consider how big your applique now.

Did you say the same thing?

Well, then I click it.

There we go, there's something wrong with this trackpad.

I don't know.

So yeah well most effective pattern so get just like I forget your size application type can be determined It or Not only to decide whether a micro is Justified but what pattern will be most effective.

So then modern front-end Frameworks have enabled.

Us to choose the most optimal rendering mechanisms for our content.

And so then, so then it goes like, well, static side, generation server-side rendering spas and all these different things.

But then, there's this, like a slider Your I mean it was like a drop-down or something that has like whether it be like a spa or server-side raining, like they had these options and I think that would be cool.

I don't know.

It's just yeah.

And then like app is in the cloud.

Like this is me like a lot of it's in the cloud.

Or like, like, or is it all just I don't I am not sure what this means.

I am not sure.

And then once you use single Tech or / framework, would that be when that be yes or no?

Right out.

Again, this is just a brand-new thing.

So bit probably just like copy and paste stuff you know I am saying just try to get it out there and yeah because some of these are like yes or no questions I think or over there like maybe I do not sure.

But yeah, no, super cool.

Digging it.

All right, and they go through.

So it's a lot of information on stuff, so but where do problems come from the monolith?

And so they kind of go through, you know, like why you'd want to use it in use cases and stuff like that.

So it's pretty cool.

A lot of information, a lot of stuff, and they have like these cards here for more now.

What I saw.

That was pretty cool and again it's micro front.

End Dev.

I have a link to it next to where we may be watching the recording of this video and so on the.

So then they talk about you know, open API specification which we do at my job as well.

So our stuff is like for open API specs, right?

Let us go back up.

API first design.

So they kind of give you like a bunch of different things to architect your project to kind of help you along with it, right?

And I mean even hearing about like module Federation which is pretty cool as well.

Write and talk about using webpack and stuff.

All right.

Let us go back up.

What where I thought was pretty cool.

So they have different Frameworks by surrendering strategies.

Hydration Island architecture.

I think an island architecture.

They mention Astro.

Let us cut again.

I will just kind of scrolling through this pretty quickly because I know, Astro talks about Ireland, architecture, stuff, and even resume ability, like I can't believe I forgot.

Forgot it.

Oh, um, the creator of angular made it.

It's like Party Town.

It's called see.

That's going to bother me now.

Have to look this up.

It is?

It seems really cool.

I can't believe forget, I can't believe we got it.

Give me a second year.

I have got to look this up.

This is going to bother me.

Doo.

I am going to play around with it too much, but it's really cool quick there.

It is Q wi K quick.

So I know they're big on resume ability.

Oh, it's right there.

I could have just scroll down and did it.

I am okay.

So yeah, so more resume ability, there you go quick.

All right.

Yeah, I am tired.

It's your probably tell but then also the eyelet architecture Astro does that.

Cool.

And then they talk about other Frameworks, nux felt this kit and next JS.

And So, yeah, so short answer.

No, there are dozens of Frameworks use the one you like best.

They don't fit all on this site.

Yeah, all right, cool.

Good stuff.

Good stuff.

Okay.

So yeah.

So they cannot Milan architecture how something's going to be Dynamics.

I am going to be static cool.

They tell us to leave.

Alright.

So a whole lot of information here, right?

And so again, under Frameworks, you can check out, they talk about web components which I think is pretty cool.

And so microphone ends and web standards web components and so it kind of goes into like whether you're talking about before, right?

So web components are actually a set of three different standards that allow developers to create resumable components in an object-oriented way, these three main Technologies are, and they go to custom elements like they spoke about here on this site.

And then there's also the shadow Dom, which kind of contains the gross and then there's HTML templates, which I think is just awesome in general, right, regardless of using web components or not.

I think they're still, pretty cool.

So you go learn more about it on this site, which goes you to the Mozilla developer Network.

Now, because web components are basically part of the web platform native apis using them, reduces the amount of code we need to write because you can reuse them compile and ship to the browser again because you can just reuse them, and they give us compile down and to, to the browser to make an application work while enabling interoperability with other apis available to the browser.

Yes, cool.

So yes, then because we're Its Implement JavaScript class.

We may need to consider a framework to help us create an instantiation them as well as reactive features and manage state.

So a lot of times, a lot of boilerplate code, like, if you just go like just straight vanilla, making your web components they may get kind of like boilerplate e, right?

So a lot of random code is 2 and so whenever that happens people create Frameworks around it and libraries so lit which is one I have been using as well, is a lightweight Library Providing an all necessary module to create an instantiated web components in a declarative way.

I personally love the Simplicity and I agree with that, too.

I appreciate that, as well.

And what's cool is.

And so another one is, like, stencil from the ionic team, that's another place and then even I think they mentioned it here.

Also, somewhere enhance.

Let me see, let me search.

Totally took me to the wrong thing here, okay?

And, and enhance.

And so they even mention it here.

Also enhance that Dev every very when they're talking about like Progressive enhancement.

I think that's again.

There's a lot.

Yeah, so Progressive enhancement.

And so another cool thing to create like components is enhanced not deaf.

I actually met like the Creator, good folks, and at a conference, a couple conferences and so, yeah, good stuff.

So you can check that out as well.

So this is a pretty good site for like a lot.

You don't mean like if you want to learn about microphone ends, it's cool to have like an all-in-one encompassing spot to where you can get everything you need and then link out to other places where you want to find out more about that specific subject.

So, yeah, it's pretty cool.

So shout out to let me go to their Twitter.

So here it is.

And it looks like I think they use Astro also to build this site.

Which I am a big fan of anyway.

So that's pretty cool too.

So let me see.

Natalia bendito going to add their Twitter handle to the list of links as well.

All right cool.

So yeah.

So if you want to find out more shots of them, so they say let us see.

Yeah.

So like five hours ago when I was something else.

So yeah, so I guess 21 hours ago less than a day it was like I was launched.

So yeah chants of them definitely going to be looking more into microfinance and things and you know especially as I am creating these other projects, and I am kind of like I want to get deeper into different ways of creating Being like larger applications and yeah, pretty dope.

So is it cool website to be able to check out more stuff on microfinance?

So micro front end death?

All right.

Get you all back to work because I want to get back to work.

And yeah.

So have you ever tried building anything?

Like as far as like architecting it like a micro front end where each individual piece kind of have like its own like It's independent basically, your I mean but it all comes together at you know at the end of the day as a team, I don't know.

I am tired I am gonna get you all back to work.

Have you ever tried it?

Are you going to check out this site?

Seems pretty cool and yeah, just like a pretty good source of information and with that, I am going to get you all back to work.

I am going to send you all off with some traveling music.

We have one more break session and will probably take a look at an artist's website with some music.

And, unless somebody want to come up here, And talk about what they found.

Interesting.

But take a listen to some artists music.

We watch the videos and have a good time, but for right now, I am going to send you all off.

Get back to work.

This is new Jabez.

Featuring a Pawnee be the track is called.

Thank you.

Because again, thanks for hanging out.

I will see you all later, until then you will be easy.

I wish you much productivity and thanks for hanging out your best features of Honey.

Bee, thank you.

See you all later.

Peace!