Building Micro Frontends | Archibald Bartleman | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Building Micro Frontends

teacher avatar Archibald Bartleman

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (52m)
    • 1. Introduction of myself

      3:17
    • 2. Introduction of Micro Frontends

      2:32
    • 3. How to build Micro Frontends

      8:09
    • 4. The Service Contract for Micro Frontends

      5:37
    • 5. Integration of the Micro Frontends

      6:08
    • 6. Prerequisites for the Micro Frontends project

      3:14
    • 7. Micro Frontend Project Time

      6:36
    • 8. Micro Frontend More Project Time

      12:51
    • 9. Micro Frontend Conclusion

      3:59
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

73

Students

--

Projects

About This Class

The micro service space has grown a lot over the last view years.  Services are packaged in bounded contexts and every bounded context is considered to:-

  • Have its own database
  • Is developed in a technology the team is comfortable with
  • Have its own source repository

The UI is traditionally developed by a team with the UI skill set BUT very little knowledge of the micro services, resulting in lengthy development.

The purpose of the micro frontend is to develop the UI as part of the bounded context.  It gets packaged and deployed with the micro service.

This class will describe how one would go by building micro frontends.  It would point out how a "service contract" can be developed using Cascading Style Sheets.  It will cover integration, authentication and authorization.

Meet Your Teacher

I completed my B.Sc degree (Cum Laude) in 1994.

I started my first job as a junior developer in 1995.  I worked with CA Clipper, C and C++, and some Visual Basic.

I changed jobs at the end of 1999 and worked on some warehousing applications in C++ before being introduced to this new language called Java in 2000.  I was hooked and taught myself and very soon landed my first Java web application project.  At the end of 2001 I changed jobs again and have been working at the same company in various departments from 2001 to date.

My exposure includes:

Linux, Windows, Mac

Java

WebLogic, JBoss, WildFly application servers

Apache STRUTS

And then came the Spring Framework family:

Spring Framework

Spring BatchSee full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction of myself: Hello, everyone. My name is Archie Bartman. I've been in software development for 20 plus years. Now you can find my profile on skill. She follow the link below. We're my I've been in software development since 1995. I moved into application architecture in 2000 and two. My skill is mostly in the job, a space. I've been a Java developer since 1999 self told. And that's what I find most rewarding is to pick up the skill and use that mark area I've been doing front and back in development. This thought of my career was more focused on a friend in, then gradually moved into back in development. But a stool very passionate about front in development as well, just to continue in who I am. The spring framework is blood. Quite a big part of my career. Started with it back in 2000 and six. Refused quite a number of the families in family members in the spring framework. The likes of spring batch, spring integration, the security framework, some off the social media stuff, the locks of Facebook integration and lengthen. And I find that very rewarding. Working with the spring framework is it complements job development nicely on the persistence side. Off worked with hibernate, then J. P. A. Hibernate has been around for a number of years, and the integration with J. P. A is very nice, and I find that that is the way to go. If you want to map out your relational mapping dude that the storage, also quite passionate about, continues delivery and integration off completed a number of projects using Jenkins as the tool of integration and automated a number of the steps using Jenkins pipelines. More recently, I've been working on some big data stuff in my time. I enjoy the way Duke and CAF co integrate and the locks of Soup Keeper bringing in the high availability management number of frameworks in a big family. It's just one big happy family in that special enjoy working with it. Micro Services is obviously work with muscular use, and the likes of Springwood provides nice integration in the micro services space. Also, with micro services come the container, spacing that we dock in communities a nice role. I enjoy working with both of them and off recently completed some material kubernetes. Do you also think that skill up Massa. It's quite a nice environment to host one Micro Services in my free Dollinger has been done with my wife and son having a nice meal with him in the restaurant war. Just having a cappuccino at a coffee us. That's what we enjoy doing. And then for more. If you want to take up Arlington performing Most Welcome Linkous available. 2. Introduction of Micro Frontends: straight into the introduction off. What micro friend teens are to go through some slides and then turn the loss will have a look. For example, for this well, first question most likely is what is a microphone intent My girlfriend didn't exposed. Use the interface for micro services in the natural. This is not a brand new concept, not something I came up with. It disappeared and thought work stick right out back in 2016 any subsequent applications. First, the concept will down. Is it? It's things micro services concepts into the front. Second question that you gonna cover is what you need. Micro fronted yet another framework, one other solutions price. We need to go there. My Aunt Teresa website. It's a collection of features. Features are owned by individuals, teams developing micro services with the knowledge in today remains. The team should not own all the features into end, meaning they developed the micro services, and the micro front is building knowledge they have. This could result in teams crying into specialized teams with 20 developers and backend developers or some developers just cross giving. Second becomes, it is you no longer think about fronting analyst, but rather microphone. They gonna cover some features in this close 1st 1 will be how we both marker frontings were covered in some detail. You define the service contract years. This is nothing but a service service contract with people. We hardly find standard styles. You talk about integrating micro frontings into a hope for four full. We'll cover example Project lost just for some food reading. You can have a look at marker friend. 3. How to build Micro Frontends: So in this loss, we can recover how to boat Marker Friend ends 30 tops off friend Things will be covered here The light brake using interface, which is typically scripting language based. I can be very lightweight but more heavyweight. It's the model view controller of the NBC using forces, and on top of that, we have the complex flood control using phrases. We will have a look it each of these in subsequent sections. So first, let's look at the light. But user interface lightweight user interface is typically a job scripting user interface, interfacing with the services and making me very responsive design. A number of libraries are available to facilitate this angular Jay's note. James, don't you took it. Guess getting stole shoots will be used to stall the pages. The second user interface we will look at is the model view controller using the face. I'm going to explain this user interface by hands of a diagram. So we did what we start with a controller. A controller would drain the review. The view display something that's generated in a model. The controller would also manipulate the model in order to have data for the view to display and review consent requests back to control. It's new view. So the NBC framework it's used in a number of implementations. A number of friend looks exist. The spring model view controller Framework, patch struts or, if you look at the Java Enterprise edition job or sacrifices, is also available. Java scripting is typically used in parallel with most of these frameworks to do validations or to edit in response. It is on of these frameworks and tears issues wanting to start pages. The third framework we category you were looking at is the flow controlled using interface . So this type of using interface required nice navigation or controlled flow. Do facilitate the transitions between pages. Examples of this is a loan application. One has to complete form in a specific sequence. Advice on answers one section go to another section or complete an additional section. So how does flood bookings? Is also an example? Uh, it requires a strict flow and based on certain on, says one might need to complete additional or skipper to end shopping. Check out. This is typically the example we comments websites, a shopping cart shopping basket mechanism. One item your boss could and ship it. Spring Web flows One such a framework. It's also part of the spring. Sweet Joe was scripting this once again used better law to facilitate validations and responsiveness, and tears is used to stall the pages. So, as you can see, the lightweight user interface is the bare minimum on top off that, we've discussed the Model View controller, which uses concepts from the light with user interface and then the flow control using the place, which uses contacts from both the model view controller framework and the light was using to face. So what State will be using for the using? The first, Let's discuss that next as we have seen before, micro services are typically developed in a stateless fashion mean time. State service schools one you to give context to subsequent service schools, and it's not maintained on the server side. But it's the climb to responsibility to maintain that state. So this statement to be making year is micro friend. Ins should follow in the micro services footsteps and also be stateless in the required information for Michael, Front ends should be update from server schools. Why do we got the stateless fruit. You work with steak. Stateless Micro services Micro services are hosting a containerized environment that means but can quite easily die. He restarted without any notice. That's the reason why we science stations should be avoided. Your costs rather control estate from fly inside, said the big concept. We drilling home yet years because micro services are stayed this we should build stateless micro friend things as well. Let's put it all together now consider the top off you are. You want to vote carefully, but I mean by this is if you're building a small sum board using the face continued lightweight frame creaked. It doesn't help the people big heavyweight framework for something that doesn't require flow control or a very strong NBC prisons. Jews. A friend with the work for you, Consider your skill, said considered the skill set within the team. Make sure you've got appropriate skill. If you're building something like a model, you've got terminal using into fight or even a week playing defense. Make sure you managed state between page transitions. By this, I mean one should have proper control over what gets passed between pages so that a subsequent court can bring the successfully I tried to avoid using decision off stick decision Gone six. As we have seen traditional Web based applications, it no longer applies to the micro friend reality. Moving to both models to compose state from one of you to another. Hold your user interface and minimalistic way. By this, I mean, you know, time use Avery frameworks for lightweight left and shifting in Children remains a micro fronting dinner. Time crossed, bounded contexts are calling micro services in other contexts. This is a micro fronting, then should follow the same pattern as the micro service. 4. The Service Contract for Micro Frontends: the section of Los. We're gonna talk about how to define the service contract for the user interface. We will cover the following items in this section. First, we'll cover some cascading style sheets, concepts and how to customers and externalized look and feel for your user interface. Firstly, let's talk about CS is concept cascading style sheets. The user interface contract will make use off a cascading style sheets. CS is s are highlighted the approach that we will follow Here's defined as B. M. The acronym stands for block, element and modifier. What is being it is a component based with development approach. By this, we mean we follow certain conventions and name items appropriately and that we publish a service contract for the user interface in terms off look and feel and starling So micro front in development teams can follow that and make use of that standard. Next, we'll discuss each of the building blocks. The first item as we mentioned that be in B. M s. For Brock, it is a page component. It can function independently. It doesn't require in the higher level, um, in other elements or blocks Teoh de function by itself. can be reused. We can really use the same block element in various micro front ends. For example, in your item a block, a baton of form that E B M is the element. This is a compass, it part of a block. Items will be child elements off the block. It cannot exist independently from the block, so the black will always be a parent. For example, a form batting form input noticed a double underscore convention. Yeah, the M in the is for modified. It defines the following for block or element the state. They're off the appearance with behavior appearance color behavior could be flashing. For example, Button dash, dash button. Mattis. The double hyphens not under schools in many convention for the other side. Next, let's talk about the look and feel aspect and how to manage that. This year's is shipment developed in my 10 by team specializing in field companions. These people should typically be killed in the war. Graphic did development and design, and they can develop these style sheets according to a corporate standard, using appropriate colors for company purposes. Starting images in which sizes the steam should publish the styling contract if we cost back to the B M, that should be the ones to specify that we will be using for under schools under school input or Baton Dash Dash range, for example. And this is what the micro friend in tenge will knows when they developed the micro friend ends. Each of the micro friending teams should follow this contract. As I mentioned, this should be well documented, published on internal, Internet or proper document or Ricky and each of the Micro Front and teams should make use of that documented contract. The sea is a She should be a hosted on a Web server. So whenever the micro front is it called the Baron Stall, she should be imported from a Web server. In summary, my girlfriend ins can be developed without having to worry about. To see is his development, as there should be done by central team, the developers should simply follow the published Be Remaining, and everything should be a come from there on him. The big concept in this section off the clothes is Macias is as Michael, front in service contract 5. Integration of the Micro Frontends: in this section off the close, we're gonna talk about how to integrate the marker friend ins and tie everything nicely together. It's diving. What we gonna covering this section? How to wire the micro friending into a corporate portal or company website will tie everything together. We're gonna talk about authentication or authorization and also a bit of navigation. Firstly, we're gonna talk about wiring. The micro front ends together. This is typically done in a corporate portal. Firstly, this will be a friend into combined. All the friend Dean's one can almost refer to this. And remember the German term micro friend end, we everything comes together. One will reference or more micro frontings and various paths within the micro front ends. This integrated front in can also be a micro front end in itself. There's gonna be developed using any technology could even be something different in your micro front change. We have developed that now by any of the teams should not have any functionality meaning we do not want to call any micro services here. But we draw the focus on calling Micro Frampton's. So what we put in this friend would be the navigation the authentication to authenticate users log in password functionality. The authorization we based on the rolls. The access will be granted T specific areas off warp, sad or calling specific marker from until and one. Could you include some breadcrumb functionality of? This is typically the depths of We are the Web side, almost like your dubious Gordon. It's next. We're gonna talk about authentication. The integration in front in this could be my confronting him. The records should bode authentication functions only the authentication could use in top framework custom mode. The springs of getting the friend work is Hollywood community, and this is based on my experience. They provide a number off authentication mechanisms. Drunken, bold worth one condoled a standard log in password stored database of that time in north Indication for look other than this or across the vote. If you want to talk to me, you have control of the user password encrypted parcel school, that summary a lot to you. This is really a recommendation section. Next, we're gonna talk about the authorization aspect. So or authorisation basically determined. You can see what they said, and it's best on roads, so something music and have a role on the website. For example, you standing with users can have the whole user scientific. They can perform functions like view a shopping cart at items to a shopping cart. Before we check up, we can have a more restrictive fall. We misuse is typically ones maintaining the catalogue, and they can also override specific items. For example, if items gone out of stock, they can manually update the users basket or the order that that's been full, full bore. Really, it predicts areas of facade from unauthorized access. Er, in the example just explained to you done want users to see the update catalogue function so they would not seem that link or they have access to good. Once you get in the spring to get different comes hard area community MySpace or you can vote your own, you can build it in contraction or something. I could Elber last time gonna talk about navigation so most of the modern websites make use off that navigation structure. We these drop down menus from the D dive into specific areas of the website, and these areas are typically Teoh Micro friend ends that we have discussed up to now it links to appropriate marker funding These friend in second how various debts and one can bring to that one can also have a break from German top just below the navigation. This keeps track of your art kind of like your GPS coordinates on the website. And it allows users to use that as an navigation future as well so they can click back based on the break come trail. No, The big concept that we've come in in your section is bold and integration Front end Could be a microphone in this world to start over micro frontings together or wire them in. 6. Prerequisites for the Micro Frontends project: during this section of the close, we're gonna talk about the project. Prerequisites. We're getting very close to the actual source code now. So peace be with me. You're going to have a look at what software is needed to run this project and also on how to get the source code it. So, first of all, you with job. This is a job vice project, and it requires job. I used java. Eight you down better from article website, please. Configuring thinks that you can actually run drug in order to hold the project are used patching. So this is a movement based project. Condone that Apache maybe from the batches of website go to my Valentine Metal lightest version Day ID's that your development environment. Any good buddy, you work for this project? Some good ideas out There's Intel J Idea, the Spring tune Sweet, which is clubs based. And then also night Different clips on the idea he saw just one note for intelligent idea would require the maven runner Blufgan and also the maven integration plugging They do not come Stand it and I usually come with get busy muscles, got stairs, get repositories. So you wouldn't get set up on your machine. So the base place to start is get Dash is c m dot com. There are various ways installed it depending on what operating system you're running. So please have a look at the documentation stolen so that you can get the source card now for the actual source code is on scotus available and get up and you can done from day you are. L for this project is detective come ford slash Archie Quarterman ford slash Damon Dash Just leave this for a little while so you can get it done on this. Get that Reaper off into the debrief. All wear off, given some more details on the various installations for Java, the ID's maven and also forget. So please time plan with repository as off Leicester Belt and get this little skirt on your machine. 7. Micro Frontend Project Time: I know you've been dying to get in this section off the closets eventually project time. So let's dive in just a quick context on what we're gonna cover in this section. You quickly talk about sitting up the project inside your I D. Who told the project and we'll start trying it and then we'll just lost Measure takes the race based Web service from a browser. Its continue. So I have already imported the project there's have been working on. It should be fairly straightforward. Fut imported. You can simply go on the file new project from existing sources, Browse to you Project and open it. It will take a little while to import or maybe dependencies talking about. Maybe it's just covered that as well. So under intelli J idea preferences and the bold execution deployment every week, the bold tools subject maven you can either on it with the bundled version or you can choose to run it with your version that's in school your applications for okay. So in order to build the project, I've mentioned in the previous section of the clause slides that you need to store various plug ins to make it run with intelligent they So if you have included them, you should now be able to take on the project. Right click and you got to run. Maybe it's the requirement for the maiden project. You will not see this one yet. You can just choose to go. And then in the spring bash Colon run. Choose that it will now start holding the project using version of Java that have been stalled. People go through various phases in Mobile, you see the first policy boozing. Then it's thoughts. Containment from their project in, I noticed takes a while. But it's not too long, you know, to see this one started a click ocean in a long took Jaggi and miss running. What we do now is that your browser and we will taste that vacation. So once we're inside the browser, it's this. This are simply gonna diar el din. Yeah, we're gonna use local host Karlan double treatable ts the port number forward slash employees four slash your taste. You should be able to see the following chase on output and if you see that, it means you have configured your I d and maven and job correctly and you are able to move on to the next place. I am going to jump back Teoh Heidi, as there are some things that I would just like to highlight to you, and then we'll continue into the micro front in portion of it. So back in the I D e, there are protection at the bottom. You will see something like employee service finding all employees. That is just some standing up off printed. So the project structure just like to cover that with you quickly. So obviously, we have some die tear on our first touch on the data. You don't need a database, as I've just used the HD in memory database that is available on the Resource Is and you will see and the liquid best off configured scripts. This example, Dytrt that are used is just a subset off the standard dosage that comes to us. My sequel and our stories after stripped it down. That's just way too much for this example. Creds. A few tables just opened by script is that they were called. Employees are guarded Here There is a table called departments, a table called tipped manager for department managers there's a typical dipped him that is the department employees link, and there's a title stable and the salaries table and then to the left. Again, there's just indicted to blurted. Orton's like the department in brilliance to department managers. The employees salaries and cycles perfect structure, very straight forward. The race service that we've done just now is available year. That is the improve your controller. And it's a Finnish forward controllable that just calls service and servicing from school to the J. P, a repository that loads into memory. In the next loss, we have a look at the micro front in portions without further delay. Let's move on to that. 8. Micro Frontend More Project Time: in this section, we are getting to the actual actual actual micro frontings hints that the more projects So we're gonna spend quite a bit of time in the I d where I'll take you through all the fouls and hell things have been wired and live together. So what we're covering this section will cover the code the harlot html integration points . You taste the market fronting from about browser, and then we'll create a piece of functional HTML and do not blind installed it. And well, then get to the point way Your company can actually style the pages that you pulled up. We'll move on to the next. Okay, so what, I'm going to be in the idea just take you through the garden level and also the HTML structures. Yes. I mean, should be full the Senate job packaging and the conflict. I've just added some configurations and that's we Spring configuration is happening. We spend too much time on that. If you're interested, you can go and have a look at what? After today, the controllers have split up into raced controllers, and this is where we have a department controller and an employee controller on the Web. We've got a home control. I'm just gonna happen that quickly. This is your starting point. Whenever you website this hit at the root level slash it's gonna return Index, we'll show. You know what the index page looks like. So the HTM l a structured under with templates. In there, we have the index html page and it uses time leave. We've got the header. We've got the body with some text and then this is way off. Just hard cut Did this so that we don't have to worry about finding an employee, including code that I've configured in the databases One double 017 So the a trip will go to employees when double 017 And what we have then is because most to that age and will be able to see the results. What we do on the employee controller this is where we'll have the first for improper. He's and it will take inter variable as employee number off. Terrible. In here, it would say, Hey, does that weaken by? Jason talked to the priest controllers get the gator and said the response back so that we can view that on the page, We're going out to the employees html page. This is the actual displays happening. We will show the emperor number first name, last name, date of birth, gender and some say, little details the salary details to contain a list off cemeteries and from T. Dedge active to I just want to jump back to the index page index pages. Got the habit, the header you cost him on back to the slides. This is where I mention your company structure. Bigly have the navigation and include the stall shoots off just package that year so you can have a better looking website for for demonstration purposes. It would include the style sheet, and as you can see, it's using the bootstrap functions as well, and in some styles and off. Just added, some demo styles will go through that now, As I mentioned before, that's with service. Contract lowers, so if we go to demo stalls, we have the block as a baton. We have button text as element and remember the doubles on the school depicting the elements eyes and thought a modifier on the battery double dash. So we've got a big button you got a death in and orange back, I'll show you what that looks like. Short. Also just back to the index page again is the food that part of this well toe you just introduce have copyright for Jumbo and whatever else you would like to put at the bottom of the page. These functions with typically enough as part of the Marcos, Avis and the Micro Front company. Yet the micro friend and should simply be the employees department, for example. You should not have foot included here, as that should be done by Central team pulled up there for your company or for the party. I'm gonna go back to browsing. Also, we can start seeing what we've been discussing in action and you get a better fuel for for tribunal. And then we'll come back to the idea for the lost part. We gonna change it. It's just a vanilla look and feel so back in the browser. Firstly, I just want to point out that you must make sure that your application is running else. You just gonna get one angry era in your browser. So let's go. Local host on port double to double to slash and we entered. And you can see what I've been talking about all along. This is a marker, a friend. Yes, it's integrated, and we've cheated slightly by including the hidden foot area and applying stalls. But I just want Teoh. Did you have a feel for what we're talking about alone? So he recalled from the index HTM our mentioned that begin a hard cut, the teaching of an employee with a number one double theater. Once human. If you click on the link, it's gonna bring back the employee details for one double 07 is first name the last name date of birth. Generous If, and the salary details, you concede the salary details, and that's an order list. But it's just to show you the details and in the buttons at the bottom, right? Remember, we had the overlay off a big orange button, So there it iss church old departments, and they just a standard button. So this gives you a few for what can be achieved by applying styles in your micro friended . Without having the stars available, we'll play around with it. Just off to this. Just immunity include the styles here so you can get a feel for what a micro fronting does . And because of my knowledge for this employee department, if we just pretend for a little while, sits within the team. So the team there's exactly what should be displayed way and the starting coming Just be a plot by the central. You're gonna go back to the are you for a short while? Also, we can just change the look and feel, and then we'll get back to the browser. So back in the i d e, it's quickly change some things and creative another look and feel under the Web templates . I'm just gonna create a new HD How far I'm going to call it. Just something like employees cash old, full term. It thought h 20 and we cried too far. I am not going to add that assumes control right now. Just delete it afterwards. So I'm just gonna choose No. Yeah. Simplest way to make this work is got to you Improve your age. Them so far just picked everything. Copy that computer Your HTML foe on just about everything in here and the simplest way, Yes. We just got to him removes the hidden. This won't be needed anymore. So just have attack with body. Were gonna display the edge to details and right in the end What? I got a good save this fall. Then I am just going to go to my include controller. And instead of returning to the employee view, I'm going to return to the temporary boat and it's safe. This you need to stop your vacation on which this parliament started again. Again. Tiran live in spring training. It's just wait for this to start up and then we'll go back to browse and have a look around you now. Okay, application is family once again see you at the bottom. So let's go back to gay folks back in the browser, which is go back to local host. Import the double team slash. Okay, I know this toe contains the hither and footer religious Gertie our employees age and see what it looks like. Now, There you go. We've got a black and white page. It's just that when the law micro front end and the Stalin will come in with this micro friend in kids embedded in the bigger company website, he would see if you recall the old departments. Battle was the big Orange won. The style is delay, but they isn't a style sheet. And once the stall she gets included, it will go back to the big orange button. He specified it to be all the details. Exactly the same. The numbers, the same first name, last name that gender and the salary details. So that's all from the side of things. I'm gonna jump back to the body because I think there's some homework I would like to give in. Then you can play around with the Project E to try out some things. OK, so like, you know, I e what I would like you to go never getting your done. Open the department's html page and you will see there is pretty close to nothing in there . It's got the header and foot there, and it just displays a header. The important details come back this year, and you can play around with it and add the details in year. Also, have a look at the department controller. It just contains the departments will have a look. If you can maybe add one. Will you search for a specific department and just display that one department and you're welcome to submit it back to me for the skill shape where page find me and maybe submitted back to me. If you feel that you've done something that I can never look at for you and provide you with feed back and that's all from Micro Front inside, let's go. 9. Micro Frontend Conclusion: Okay, folks, I would just like to start. They're off the project. So conclusion done from my side, it's just recap what we've learned up to now. So what key concepts? A friend introduced the concept of micro front end, and we discussed why it's needed in today's micro services world and the benefits there are from being a micro front end. We'll also they talked about some user interface use coasters and specific frameworks. The lightweight wanted scripting language, just the ones where you require some back end integration and using M v C like frameworks and then also the heavyweight ones were using flow technologies. And this example that that we've discussed uses the MVC framework so you can have a look at that. You can also discussed the service contract mechanism for the user interface and have demonstrated that with the use off the vanilla using interface which just a vanilla age being displayed with no styles blood, the stars have been added to the extent out page. We discussed by hands off the example project and I should you with the key concepts have been introduced and then the integration points with the navigation bar and the way we've removed the header and footer from the vanilla page. You can just three fresh from the previous for the if you look at that again. And yes, we created the Bay Burns functional piece that was just import details where there was no style applied. Thanks for Marsa. If you have any questions, reach out to me on skew shape. I'll just leave this momentarily skill. Shea slash profile slash Archie People Dashboard Erman 70 16 Triple five if you want to get home with me and then just some credits because I've used a number of technologies and open source frameworks and slides and music for this presentation. So the presentation template You can go and have a look at slides Carnival. They've got some very lovely inference you can use. The music was from Open Planet Music Group to them. Very good music for under the voice, then some off the technologies you can carried upon spring spring I o micro front ins have been introduced. Micro dish front in the war micro services crispy, gelatinous water up a very good book as well. You can go over look a micro services I the block element modifier. The style sheet concepts have been introduced on these websites. There's also methodology being discussed. You can go have a look. So serious is the streaks dot com be in Dash one on one or in the B in that info. Have a look at the methodology that discuss a lot of useful stuff and then lost it. Just a sample data comes from my sequel. It's been ported to a post Greece structure and just use that to create HD deliveries in memory structure. So that's his form. Or so folks, thank you very much like to hear from you soon.