JavaScript Marathon: Upgrade AngularJS to Angular with Angular Elements

hello and welcome to javascript marathon training presented by this.labs i'm sarah with us.labs and i will be your host we're kicking off our day with upgrade angularjs to angular with angular elements today's trainer is column fairy software engineer at this dot welcome column to javascript marathon hi thanks for having me you can find column on twitter using the handle shown at the bottom of the screen please don't hesitate to get in touch if you have any questions or feedback javascript marathon would not be possible without our sponsors our sponsor today is this.labs your partners in modern digital transformation we specialize in mentorship consulting training and staff augmentation for enterprise organizations find out more at thestatlabs.com or send us an email at hi this dot dot co this at labs offers personalized training programs to suit your organizational needs ensuring you and your company stay on the leading edge if you find keeping up with constantly evolving technologies a struggle and want to bring your team up to speed on one of the latest technologies contact us today at hyatt this dot dot co to set up your complimentary needs assessment we have a ton of upcoming events for 2021. next week is state of view community on the 28th and we also have angular contributor days coming up on february 4th for more details visit us at this.co and javascript marathon returns wednesday march 24th follow us on this.labs on twitter for more details and with that i'm going to hand it over to column thank you so i'm going to take you through upgrading like i said angularjs code to angular using angular elements i'm going to start with a few slides just covering basic butter theory and then we're going to do some live coding tools actually see angularjs codebase being upgraded or at least parts of it so my name is colin like sarah said and i'm a software engineer at this.labs i've got two pictures here the one on the left is how i looked at these pre pre-quarantined haircut and the one on the right is what i look like on social media so you can find me on twitter using the handle mentioned at the bottom of the screen and please don't hesitate to get in touch if you've any questions or concerns feedbacks anything at all just reach out to me so why should we upgrade why should we upgrade our legacy angularjs code base i think the first reason would be that angularjs loses support from google on the 31st of december 2021 it was originally going to lose report in july but judy kovet they have added six months to that just to allow teams more time to actually get a chance to upgrade and that means that when the bangalore js does lose support vulnerabilities won't get patched bug fixes won't get merged and it's just it's going to make it more difficult to maintain your angularjs code bases and all the reason is that modern build tooling grants like lots more benefits so one major overlooked benefit of modern tooling is that it massively improves developer experience a lot of like react developers may tell you about hot module replacement that webpack offers and it's where you can save a file and you'll constantly see those changes being reloaded so hyper developers is always a good thing there there's also better debugging tools they'll track down issues uh we finally also get like better production bundles that also helps increase the performance of applications just straight out of the box we get the anger iv compiler which uses tree shaking to remove any unused code and it's just a little bit faster in terms for medium the large sized code bases and finally it's going to get a lot more difficult to actually hire angularjs developers so if we try to hire angular developers as time progresses more and more angular developers are only going to have experience with angular from angular 2 plus they're not going to know much about angularjs or anything at all and by forcing their own developers to continually work with angularjs it also prevents their career growth possibilities is they're not getting a chance to work with modern frameworks and souls unless they do it outside of working hours so we don't just have to upgrade using anger elements there are other options available this and some of these options are the big buying rewrite and that's by far the easiest way to migrate a legacy code base and it's just by starting from this certain fresno ground up but it's a major engineering effort and it shouldn't be taken lightly because for some customers you're going to tell them that there's no new features going to be added to the angularjs version of the app while you're rebuilding everything in angular another option is the ng upgrade so ng upgrade provides us with the upgrade module and that then itself also gives us two further options we can either run our current angularjs app and downgrade new angular code that we've written into it and use those angular components and services with an angularjs or we can take the angular app and run that and upgrade angularjs code so angularjs services or components and let those be available to the angular app and finally we've got dangler elements options so this is the option we're going to explore in this talk and what angular l installs is that it takes angular components and converts them to web components so these web components can then be used in any code base so as long as the manual and browser that your cool business support supports custom elements these custom elements can be run in any javascript framework without javascript phonology is it it's more uh platform agnostic this way it also forces you to follow the container presentational uh the smart dom component pattern and that also leads to better just components more less coupled code ways and just more scalability and more reusable components so now that we know how we're going to do upgrade do we need a strategy for upgrading or do we just jump right on this obviously it's better to have a strategy and one of the basic strategies just if you view your app as a tree of components and then target the lowest hanging fruits on that tree and start working your way from the bottom up so if we take for example that you've got an app it's an angularjs app which is a home page and then this home page has a navbar and the navwar has a search component we can see that the search component is our lowest hanging fruit so we first create a new angular component for that search component and we'd use angular elements then they build it and turn it on their web component so this search component is now a web component that can be used in any html file really so then we replace the search component from the language sql base with this new uh web component and then we start working on up so we start incrementally increasing that even on the navbar and accident from the now for the home page and so on until we've completely finished upgrading the full app so now we're going to jump on this some live coding and see how we could do this i've set up an angularjs app to help with this so i've created an app uh to search the star wars api they see some extra information related like the star wars universe so this is the app here if we've got we first come to it where you've seen not with no results and we can just search something that's related to star wars in any manner so we try to search for like luke skywalker we can see that we get back luke skywalker he's got a height of 172 centimeters we get back some planets so he gets lost and we get back species seoul stan some starships and some vehicles so it gives back a lot of results just based on things that happened are available within the star wars universe and star wars lore i can quickly show you the code behind this so we can see that we've got our angularjs app a search bar which probably it's the search bar here the search results which is these results and then these results are broken down on the different types we've got follows we've got people planets species starships and vehicles anything just do a different manner of rendering data and data because there's different data for each of these different types finally we've got the full search result component which uses an ngf they show which type of result which type of component we actually want to see and then finally we've got our home view which contains a search bar and then our controller to render and repeat how many search results we need for many search results we got back from our api request our api request logs in our search service and it basically just searches using our search term across all the different types from the star wars api and then it collects them on the one array so now that we've done that we're going to look at why we would actually attempt to do this how we would approach this on our in terms of creating a new a new angular app so the way i would suggest to do it would be to create a new nx workspace so nx is a set of devtools that allows us to create a monorepo and that monoreboot gives us a lot of additional tooling around creating scalable and maintainable code bases it also means that we can have our angular app and our angularjs app and from the same code base and they can share code between them if needs be and it also provides us with a folder structure that helps promote uh scalable teams scalable co development just across the full uh company if you if you're doing this at a company so the first thing we would do is we'd install the nx devtools globally we choose npm install global nx i've installed this already so i'm going to just skip this step and then next you would run mpx create that next workspace and we're going to use the latest version of the of the tool and we're going to create a star wars search live this is going to be the name of our workspace so when we do that it starts to create it it's going to ask us what type of workspace we want we're going to say we want an angular workspace because we're going to build an angular application we give it a name i'm going to call star wars search and then we're going to use sas so that is most commonly used as far as i've been aware of for angular applications we're going to use es land for the winter because ts land is deprecated and the angular team are actually moving towards es land but i think at the moment there's just some ts lint rolls that aren't as easily converted to eslant nx cloud say yes dude it does provide faster builds and it provides a lot more uh benefits on top of that so like a comp com computational cache allows for uh faster bulbs because it determines what has been built and what libraries has been affected so it only rebuilds what needs to rebuild uh for now let's just say it gives us faster builds and look a bit more i'll add a link to the resources section and it's definitely worth looking onto so this is going to take a while to create i'm going to skip that because i've already completed this setup i'll just take a quick look through what it actually creates it creates a new app called star wars search which is your basic seed for an angular app it creates an end-to-end application which uses cypress for integration and then the intestine and then some molar config files so if we take a look at how this looks looks in angular vs code we can see our folder structure has two apps on it a star wars search installer search ndn file it's got a libraries folder this is where we put any any uh like any label that your app depends on so nx promotes a pattern of creating libraries that uh relate to what two different feature modules or ui packages data access within your application so if your application is a feature module you will create a feature folder for if if you've got a ui library specific to your application you create a ui library and move on this folder and it just allows the different teams different feature teams to create and work with on a silo where they only affect their own code and if they do affect other areas of an application nx will know what's affected and determine what needs to be rebuilt or what tests need to be run they make sure nothing breaks so the first thing we're going to do is we're going to create a new folder based on our angularjs application and this is going to be our angularjs search and what we're basically going to do is we're going to drag everything all code from our angularjs app under this folder just as as it stood so we'll grab all these files and just copy them on as this is all static files we can just create an npm script they serve this locally so that we can see what's happening as we are developing so i have installed a dependency called watch http http server and that allows us to create a very simple script i'm going to turn off those keyboard shortcuts sentence so we create a new uh script called serve angularjs search and set that to watch http server apps angularjs search we should not be able to do npm run server and that will cr i'll ask the to view on localhost so that's our app now running locally and we can use it as as normal so we can get you back see your focus result so now we're going to move on to actually creating our first angler element so like we identified before we seen that the lowest hanging fruit were this was the search result so search result and the different types of search results that there are so how we're going to do this is we're going to create a library ui library because these are all presentational components and we're going to use the nx generator to do that then xcli so we're going to do nx generate a library and we're going to call it ui search result this creates a new folder on the libs folder and it contains the basic setups for an angular module and next now we're going to need to start adding our components so each component that we need so we look at a search filter again we see we need films people planet species starships vehicles and an actual search results component itself so we start with the search result component and just generate our scaffolding files that we need for that and when we set the project flag to the ui search results that will create a new component within our library and it's just a basic basic scaffolding with ng on that everything with a basic html template again it's everything that we need just to get up and running so we're going to do this my favorite type of search result that we've got twitter for phones people [Music] planets species starships and then finally vehicles we can now see on our search result folder we've got the same folder structures we had for angularjs and now the next step is to take each of these angularjs components and just move them and convert them on the angular components so we start we'll start from the stop at the top and we'll convert the columns so my usual approach is to grab html as a stance and just replace the html on the new angular component so first thing we'll notice is that this is no longer of controllers in angular as we did in angularjs so we can remove the code to for all the controllers and then it leaves us with a following property phone property doesn't yet exist on the component so first thing we're going to look at is what was the following property on the angularjs component we can see that this controller had a binding and it was called and it was a phone and the less than sign means it was a one-way input so we can easily convert a one-way input to angular simply by creating an input using the input decorator and for now we're going to give it type of any until we know exactly what type we need we'll remove that on nut and import for it as this is a purely presentational component there's no logic going on here it's just rendering data and if we look back now at the actual component we can see the different types the different properties that our form object has so if we select all columns and then select each of these types i use these properties sorry we can then create a type now send them all the strings episode 8 is actually a number so we can change that the number everything else is strings and then we can set this type from film from any to phone and that's that that's that angular js forms component converted to angular so very simple very easy to do just go through the html first and then replace it with films and then replace the component input all these search result types are the same so we just do them all very quickly again people's gonna be an input people person this person and then again we're going to create our type ram and all the properties let me place any type of person i'm going to do the same for planets we can see the population here has a number filter so we know straight away the population is going to be a num a type of number so when we create our type this time we know to change population from a string to number [Music] for the input of planet and give it the same planet and i'll move on this species there's two left not just starships and vehicles [Music] finally vehicles again we're always moving the controls we no longer have controllers [Music] okay so we've converted six angle.js components danger very simply they're very basic components in fairness they're just straight inputs that were rendering data purely presentational components but now we're going to move on to the actual search result component as we'd seen in the angularjs uh search component there was about a lot of logic here so it's got the ngf to determine what type of search result it should show so if we look at the component on the angularjs side we can see it's got an input of search data it's also got a function that runs when the component is initiated so that's this person it determines then if it's a person if it's a fallen planet species and uses this data to figure out what type of search result it should show so if we're going to convert this to angular again we'll start first by grabbing the search result html replacing the controls and finally we'll notice that the ngf syntax is incorrect so ng dash off is the angularjs form the angular form is using the asterisk ngf finally the inputs in angularjs you just use the input as if it was hdmi attribute whereas with angular we have to actually show that it's a binding so we need to surround this with square brackets they show that it is a binding to pass through the object and not just a string the next thing we'll notice is that these selectors are potentially incorrect so if we look at the selector for the people search result we can actually see that it's star wars search people so an nx an angular cli convention is to append the apps uh prefix to the components that way then you can see that it's scoped through this workspace and scroll through that app and it helps determine uh differentiate between third-party components or built-in components etc so we'll need to replace these with a star wars search and then bash people so we can see intellisense helps us films okay so now we fix losers we can see new year's so these new years are that we don't have the conditional so we don't have this person as home existing on our search result component yet and we also don't have the search data so we need these to be within our application within our component so we know that search data is an input we also know the search data can only be a type of any of the films of the search results and as we created those types already we can simply use them so we can say it's going to be a film people person planet species starship or vehicle i can import the rest of these so this should be person so we don't need the constructors we're not injecting anything we do however need to figure out okay what type of search results should i show so if we look back at the angularjs component we can see that there's an engine on a method so this is more or less synonymous with the ngo nut so if we copy everything that's within this function we can use it here to another thing if we look back at the angularjs component we can see that we set the control variable to this which is the this scope of the function within angular we use typescript so everything is scoped within the the class therefore we don't we no longer need to create a control which is the scope and instead we can just use this keyword now we've got these up these new issues where we still need the declare these properties within the club on the class so we can simply grab them all and they're all booleans and we'll set them all they falsely start with it's very simple that's our search result component completed completely converted although our components are converted from angularjs angler again very simple not too much logic but it shows you how easy it can be to convert your angularjs components to angular and then the next step now that we want to do is actually build this into a web component using angular elements so the very first thing we want to do is we want to create an entry point for our application so we need to create a new app which will bootstrap the angular the angular elements so we'll use the nx cla again and do nx generate application star wars search elements we don't need written for it and we'll see that a new app has been created which is our star wars search elements now we want to actually add the angular elements package and allow it to work with that one app so we'll use nx add add angular elements and we're going to say the project that we want to add it to use the star wars search elements app so it's going to install those packages via npm and set up some config deloi this to build using android elements okay that's completed and as you can see it's up there the package json and it's updated the polyfills deloitte for the document register element we no longer need the app component so we can delete those files and remove any associations to them we're going to want to import our search results module we'll also need to export our actual search result component we do so within our app module of our search elements we're going to import are you a search module search results module sorry and i messed up spelling some more yeah search result sorry okay and we need to add entry commode an entry component now entry components are deprecated however for angular elements they work it still relies on energy components i'm not sure what the path forward franker is regarding that but for now we do need to add this the component that we want i should export we should uh this reminds me we should export the search component from the index ts so the borrow file will be on our ui search result library ah and now we want to actually use angular elements as uh helper methods to turn this angular component into a web component that can be used anywhere so we'll start off with it with a constructor within this app module where we're going to inject the angular injector i'm going to create a search result component when you use the method called create custom element now this takes an argument of the component that you want to actually turn onto the web component to the central component and then we'll pass an injector as an object next we'll take say custom elements fine search result and pass it but so this this is this i had to this will add the search result our central component to the custom elements registry with the html tag of search stash result finally we need to tell the app module that needs to bootstrap manually so we do that by creating an empty method this there is a contact it will complain about having an empty method from because of eslant so there's a comment that we can add to tell yes not just ignore that empty function this is required for angular elements okay so that's the basic setup that we need to convert our search result component to a web component using angular elements so now we want to do is we want to actually build these files so we can import them into our angularjs application to be used so we use nx build we'll go to proxima bolt and we're going to target the project star wars search elements so this is nx is not going to build this these files first and create a cache of them so if they don't change they don't need to be bold if they do change the old variable we can see there's four files outputted three javascript and one style one css we're not using any custom css with on this application it's using uh bootstrap so we don't need to worry about the css in this case and we can see that the output from this build is here within the dust folder does the apps install our search elements now we they get this they work for angularjs we need to copy these javascript files under the angularjs application and then load them under the index.html however constantly copying three javascript files over isn't great you can create a ci pipeline with some scripts that will make this a lot easier to do but for now we're going to create a very very simple script just to help speed up the process so we're going to create a new file i want to just call it cat elements bundle it's going to be a javascript file and we're going to use uh node.js just to help us bundle these three javascript files together so we need to store the path to the files and then we're going to read the directory and we're going to filter out only the javascript files next we're going to create an empty variable which is going to contain our file data so we're going to read each of these files using a for loop and we're going to just append the data to this one variable and then finally we're going to write this file data so we can run this off the command line just by using node we can see that a new file has been created anchor elements bundle if we copy this file and place it in the scripts folder from the angularjs app it will make it available for languages application to load so now we need to edit the index html to actually allow it to load on so if we look we can see that we're including the search result component from language.js and all the different types of boost search results so we can safely get rid of all of those and simply include the bundle instead allowing us to completely delete this folder the search result folder from the angularjs application and now finally we need to clean up what's happening here within the home html so the monitor is trying to find the angularjs component realistically we should be able to just use the ng prop approach they set the search data and it will just find that this is an angularjs component or sorry web component and angularjs will bind the results from the search results to that data to that input and the web component we can try it but i'm pretty sure there's going to be so much easier i couldn't fully get that ng-prop approach to work so if we do a hard refresh and then they do a search it's not showing up the search result so the alternative is to programmatically create those uh programmatic create the web component so if we create a new function called create search results we want to grab the results container which we can see here is the id so we just document element by 80 and then we're going to look through all the search results that were that is returned from our search method we're going to create a new dove to contain the search result component we'll give it class and call 3 so it renders correctly and now we're going to create our result component so we use document dot create element search result so that matches the html tag that we defined within our app module first for this the web components you see it here and then we're going to we've got access now to its inputs its properties so we can say that the search data is going to be equal to the search result and then we're going to append that to the dove and then finally we're going to append that to the results container we're going to check first if the contr if there's any search results returned there's no point trying to create these web components if the surface are no results so check if the length is greater than zero and then we simply call the function create search results and then they're going to do another scope digest just to kick off the digest cycle we do a hard refresh and we search we can i see chewbacca shows up so this is our web component it's been completely converted from angularjs if we look at the elements we can see search result and if we do another search we can see that all the different types are still showing up we've got luke skywalker we've got the planets we've got species we've got starships and the vehicles if we try to search for a new hoop we get the phone so we all these components are all angular components and we can now see them all of them all those web components similar it's easy enough to see this because we can see here that our tag is star wars search film that matches our angular component not our angularjs component so we can see that we successfully created our we converted our angularjs components to angular we used angular elements to build them as web components and when then we simply include those web components back in their angularjs app and fully replace those components okay so i'm going to switch back to slides and i just did it and i added a wee i hope because i wasn't sure if it was going to work or not but it did so thanks hope i'm kind of happy with that and then finally any questions now awesome job column i really enjoyed that session so we have opened up the floor to questions we do have a little bit of delay so we can wait a little bit for some more questions to come in but we do have one it's actually a two-part question from ian ian thank you for your question um do you think a legacy angularjs app will eventually stop building or running i do not i think they'll still build their own because as long as you're it's still going to be available languages scripts are going to be available which are going to bootstrap the application so it'll never stop running because we're losing support but it's you're going to use like on bug fixes vulnerability patches security issues all those types of things are going to stop being merged stop being added to the angularjs codebase they prevent and basically secure your application going forward great and then what other risks do companies run by not upgrading security vulnerabilities or browser support issues perhaps so yeah security vulnerabilities is a major one uh also bug fixes and voice report issues could potentially happen i don't see that being as likely but there'll be an issue then of uh i was going to say something completely lost track of what it's like to say yeah it's mostly security of honourable days and bug fixes great and i think that for now that's all the questions that we have um if you're watching this later or you have any questions um after that feel free to get ahold of calm on twitter so his twitter handle is very column i will drop that in the comments for everyone if you want to get a hold of him and have any questions further other than that i think that's it um column anything else to add are we ready to go nope that's everything thank you everyone for attending we are back in 40 minutes with hunter miller intro to tailwind css don't miss it and we will see y'all soon

Channel: This Dot Media

Views: 1,137

Keywords: JavaScript, Angular, Vue, React, RxJS, React Native, Flutter, Lighthouse, Cypress, Bazel, NgRx, Node, Ember, HTML, CSS, Tailwind, TailwindCSS, web developer, javascript tutorial, programming, architect, This Dot Media, Tracy Lee, Google, AWS, Azure, Microsoft, software engineer, developer, Laravel, NextJS, nuxtjs, women in tech, 100 Days Of Code, VueX, react hooks, GraphQL, react js essentials, angular essentials, vue js essentials, API, modern web, podcast

Id: j1GihWagRDc

Length: 49min 0sec (2940 seconds)

Published: Wed Jan 20 2021