Arman Murzabulatov: Renaissance of Angular

This talk discusses the resurgence of Angular, particularly with the advancements introduced in Angular 17 and the upcoming Angular 18. The speaker, Arman Muradov, highlights significant improvements in syntax and performance that make the framework more efficient and user-friendly. Key topics include new control flow directives, enhanced lazy loading through defer views, and improvements in server-side rendering (SSR) and static site generation (SSG). The session addresses how these changes can lead to a better developer experience and enhance application performance. Code demonstrations illustrate the new features and their implications for developers, especially in enterprise environments.

[Music] hello hello everyone welcome back uh for this session I am here with Arman mov hopefully I spelled your name and name correctly uh welcome how are you oh thanks I'm great and you pronounced it uh perfectly per glad know Haron is a season developer engineer with over 50 years of expertise and he has been recognized as top software development voice on Linkin so he's a great

expert he has been working on the front end and today uh you will be talking guys about uh renissance of angular so how angular is getting back on the stage I suppose is that correct yes that's uh that describes it perfectly so yeah today I'll be yeah go ahead okay okay so I will leave you the stage and I will be back for a few questions by

the end of your presentation so yeah let's go perfect uh hello everyone and welcome for my session thank you so much for uh taking your time and joining my session so this today I'll be talking about Renaissance of anger the modern webd so this is basically starting from the anger 1516 it was modernized and from the 17 and I think in few weeks there'll be angular 18

it's where it's it has some groundbreaking changes that modernizes the framework a lot and uh makes it more lean better quicker and so on but first of all about myself my name is Arman muradov as uh as mentioned earlier I have 15 years of experience uh I've gone the entire Journey uh from Pascal Delia old ancient language to Modern T script and I'm a X CTO of

a successful uh software startup where I had a a good exit and uh yeah I currently I have in the last five years I was mostly working on fintech I was helping uh big financial institutions and bank modernizing and yeah incorporate mostly the U use angular and uh back in time I'm ACM semi finalist uh the context were programming it's sometimes called World programming Championship so why

uh Ang 17 is significant Milestone well as I mentioned earlier um Ang um since version 156 started um doing lots of changes and lots of changes were in developer review there were there was no clear picture there were different uh random changes random improvements but since the angular 17 all these things came together and changed uh the framework a lot that's why so the key uh basically

in uh the key so all those changes combined together brings some very nice uh features that I'll be talking about so uh it is the building control flows defer views Advanced SSR in hydration and uh V and Es build integration and uh yeah so basically it's it's it's a win-win uh situation for everyone so for developers it is um the syntax is nicer the improvements is better

the code is more maintainable for business there some performance uh and uh uh I'll be also talking about some business improvements and for the ecosystem it also makes uh more uh things possible to achieve and a diverse way some complexity making it easier to um to develop so what to expect today I'll be going through these uh key features and I'll be having like deep dive talking

about those features I'll have some uh Cod demos and in the end of the session you'll have uh Q&A to ask questions um yeah and I'll be happy to answer those so first of all let's jump into the controls and uh the build the building controls is basically those NG Aster NG something directives that we all use in our template uh yeah and basically those have been

there since like angular 2 since the since angular migrate from angular to angular 2 and it hasn't been changed but it has Yeah so basically but those were you know even though I have multiple years working uh in Ang I still have to sometimes Google uh for like ng4 so it's it's because basically it's not JavaScript it's also not HTML but it's some kind of a mix

kind of weave syntaxes like ng4 then uh then four and then then L something and then there are multiple options so those are not intuitive and uh for some of the uh JS Developers for example switching from other framework or from from Van JavaScript those are not uh um not uh usable of course you get used to it but it's not um seamless so the new build

um Buon controls are simple and mtuitive to handle and uh yeah you'll see how it works so to so the benefits of it are the syntax is readable and then also uh the code is more readable more maintainable when you look at the template you only have this U some additional blocks and it's easier to read the code so let's start with the NG if so we

all use NG if so basically um yeah this is normal uh syntaxes EX example from some code so basically NG if we have this DEF where we have NG if if a user exist then um yeah show some template hello username you loed in as user R for example or else sometimes we use and then we have else syntaxes and then we have Anonymous user that is

another template that we declare in the bottom template Anonymous user uh yeah as as I I mentioned ear this is a little bit like mixed it's not JavaScript it's not a shimo it's a little bit weird and the worst thing is that when you have for example if scenario and then you have another if and then maybe you have few ifs some of ifs are nested then

you have this in the end you have multiple NG templates like for else cases which is not quite uh readable so instead uh if according to the new new syntaxes you have this uh at if so if user then uh yeah hello username you loged in as user else hello stranger look around and feel free to sign up so as as you can see this is JavaScript

the only thing we have to the different from JavaScript is that add symbol so it's if else but do we just add at symbol uh of course this is uh can be inside div so we don't have to uh write the div again and again so we just this is basically like if else for the for the text of the um and also uh the else also

quite intrusive so imagine you have this logic and then you you have multiple eles and multiple um nested e so this is uh quite readable the next case uh is is NG switch so this is the old school NG switch this is madeup example uh so we do NG switch in square brackets user roll for this user so if the user is admin then we show admin

dashboard if it's a tenant we show tenant dashboard for example and if it's just normal user then we show uh the uh the standard user uh and the according to the new building controls that would be a switch user R case admin admin dashboard case moderator moderator and case default so this is I think getting uh closer to U reacting view where you have this kind of

uh J JS syntaxes inside HTML and uh lastly we can move to to ng4 so this is the standard ng4 for example we have some observable of items that we uh load as synchronously we do ng4 we have uh yeah some uh list and then we list the name of items and then uh yeah and then we have sometimes we have a case where uh the items

uh there are no items so which means it's empty so we just uh says items do length if if it's if it's zero then we show no items to show this is the standard syntaxes that we show um yeah we all get used to not the most optimal and compare it with four uh so we have the the typescript um JavaScript uh four Loop four items of

items asnc and then uh the main difference here is this basically uh adds Track by by default so most of the time uh from the code uh that I see the most of the um how you say uh the slowest part is that we tend to write ng4 uh like in the first example item of items and we very rarely add Track by and this is uh

this is basically we all know about truck buy but most of time we don't add it but when we use this syntaxes track we have to add Track by um it's mandatory so the four would not work so basically all the developers are forced to use Track by so here you can see items of items Track by I just put item. ID it can be just item

or item. name can be anything then we have this uh item name and another thing is uh it has this uh empty like else scenario empty and then you add the condition for empty so uh in addition to that syntax being more JavaScript friendly like you have four lse kind of thing empty another thing is that you can see that the uh angular logic like for we

previously we had switch and then previously we had if those are now separate and for example as you can see uh class equal to text here now um basically all the HTML related things like class ID or anything is separate from the NG logic which I think awesome but in from the first example in line two and five you can see that we have class we have

ng4 logic Everything is Everything Is there it's kind of messed up now it's all clear and basically um because of mostly and using this building controls uh makes a compiler more optimal and uh basically the Comm there was uh Community framework Benchmark and uh because by utilizing building controls uh and forced things like Tri by empty and so on uh The Benchmark showed that it can be

up to 90% faster runtime and uh yeah and then it's awesome right you can just improve by 90% up to 90% by just switching uh build controls but you may say like okay yeah I want to do it but you have I have a huge code base and then why would I you know it would take time to rewrite all this ng4 uh to uh to four

and ifs and all these building controls but uh gladly the uh angular chin has developed a u automated um uh to say command so we can go to our um project or folder we can type NG generate angular code control flows and by using this command it to and then you can basically Set uh the for entire project or you can set for specific folder and then

this command will automatically rewrite the template so we don't have to do anything we just write this comment and then all the templates will be Rewritten in according to the U um according to the new uh buildin controls and here you have uh up to 90% improvements and uh moving forward uh I'll talk about uh defer views so uh basically what is yeah and now with the

defer use we will talk about the future of lazy loading but uh what is uh defer U uses so it's deferring the loading of use until they actually need it so defer views bring performance uh developer experience to the next level because they um enable a declarative and more powerful uh defer deferred loading uh with unprecedented ergonomics and U you will see it in a bit in

action so for example let's suppose uh I have a a block and then I have a a section with user comments and I want to load these user comments uh lazily uh currently like I I would have to use uh view container rep while also managing all the complexity of cleanups managing uh loading error loading errors uh showing placeholder and and exception um so basically uh yeah

and I mean this is doable but it's a lot of hustle uh yeah and and also you know taking care of various various uh cases like um like a uh loading State uh errors uh placeholder while it's being rendered all these thing may result in non-trivial code and which is even hard to test in debug so uh with defer views we have this uh single line of

declarative code we say defer and the commment list commment list is the Comm component that loads user comments so with the so this basically allows uh to Lazy load uh component and all their um transitive dependencies in a single line of code so um the most Comm part is that uh this is all happened uh while um while transpile transpile time transformation so basically angular abstract away

the complexity by uh finding components directives so basically by finding components directives pipes everything that is used inside com component list the angular under the hoods identifies uh all these uh for example um all these things for example in common commments uh list component for example we use certain uh other components we use certain directives certain pipes or even services and this um angular scans all these

dependencies and then when this is loaded it automatically Imports and manage the process of loading uh between states so basically uh we don't have to worry what is inside the comment when the comment uh section is uh uh loaded all the dependencies will be unloaded automatically and then cleaned up automatically so this is basic to implement this uh now manually it's a work but with this defer

uh single line code uh all this is uh managed by Ang and it's happening under the hood but this is not all this is uh the basic example then we can have um the example well we of course the first thing that we have we might want to show the placeholder so in this example first the uh angle renders the the content um of the placeholder block

so for example commments there's can be some image or some text in in this example it's a commment placeholder image so when it's loaded first the image is loaded when uh when it be when it becomes visible on viewport uh the loading of the command list will be start so basically from the previous example the difference you can see there is on viewport uh this is like

a trigger so we are saying when to load this command list so here first of all the placehold r be loaded then uh when uh this section of the screen is on viewport the commment list will start loading and then once uh loading is complete Ango will remove the placeholder and show the uh command section and uh I think from the angular 0 which will be available

in a few weeks uh the server site will render a specific Place holder so this place Holder will be uh added to the server side uh and uh yeah and but this is not it so we can get away or like eliminate a ton of complexity under the hood and managed by angular so for example this is a more complex example so we have def on viewport

so we say like when this part of the code of U is on viewport then command uh then a load commment lazy load commment list this is a user commment list and then we have like a loading uh loading um uh control then inside the loading we say loading so basically the loading uh triple dot is shown when it's loading um yeah we can have a loader

anything there then there is a error when uh loading is not possible we say like loading failed and then we have Place holder so as you can see for one lazily loaded component we can have four states before it was load during loading error when error happens and when it happens and we just write in this way and everything is uh and all this complexity between states

uh between switching and managing is under the hood by so this is basically uh the syntax so in this examples we will using on viewport but there is also a customization uh on that so besides on viewport uh which um we can also pass a reference so viewport we also specify reference uh when this anchor is visible Ang angular will L load the component and will render

it uh we can have like on idle instead of on uh viewer so on idol laser load block when browser is not doing heavy lifting we can have on immediate uh this Las load automatically without blocking the browser on interaction we can say like when a user interacts with something uh with the reference uh with the element that we pass the reference then or we can have

on Hover for example um when um user hovers on a specific element uh the loading starts so this and this there is also more you completely completely a custom trigger uh which you can check in the documentation these are like uh the ones um that's uh available but we can basically Define custom triggers there is uh millions of possibilities of there and also show um defer views

also provide the ability to prefetch the dependencies ahead of rendering them edging prefetching uh is a simple as adding prefetch statement to the defer block and supports uh the same trigger so basically we can say uh it's the same as the first uh example uh load commment list when it is on viewport but uh here yeah sorry so we have like here on idle trigger and we

say like but prefetch on idle so basically when browser is not doing any heavy dting um when browser is not very busy on on idle status it can prefetch those views and load them on comment list on sorry on viewport uh yeah so basically these are different views as uh the um we mostly use it for performance and resources optimization and basically uh the next big topal

that I'll cover is SSR SSG and hydration uh the Ang 17 uh before the 17 version there were multiple things there were SSR SSG there was hydration there were lots of uh experimental uh possibilities there were in develop review but since Ango 17 all this is uh is shipped and it's uh available to everyone so uh this gives improvements on load time besides it's yeah server s

side rening SSR and the static side generation or pre-rendering uh are closer to our developer with just um when we do engineer uh we have this uh like a conversation with a angular commment line where it asks do you want this do you want this now we also have like a question saying like do you want SSR and SSG and um yeah we can say yes and

uh yeah and hydration uh graduating from developer view now uh hydration is available uh by default on all applications uh yeah so I think for the past for the six month there were thousands of um developers were adopting uh hydration it was quite popular that's why uh Ang team has decided to uh roll basically what is uh what is that uh is we we basically render the

content on the server and then seamlessly transition to client side uh interactivity this is basically the goal of it and how we can do that so previously there was angle Universal U repository now it's all in angular CLI and to add uh this hybrid rendering uh to existing project for example we just run NG app angular SSR so angular SSR is where uh SSR SSG and hydration

is all angular inverse everything is moved there so it's angular so with one we can have this and oops oops sorry and um so this command will generate the server uh entry point the SSR SSG uh build capabilities and enable hydration by default and be with that we have a new life cycle hooks um after render remember we had like life cycle hooks NG on NG on

change and so on and now we have two more life cycle hooks uh after render and uh after next render yeah you can read the description uh here on the screen and by utilizing hydration after moving to the latest hydration uh Virgin Media O2 observed 112 uh% of increasing cells after they move moved so and also in combination with uh Vite and Es Guild integration uh with

SSR SSG we can observe that uh observe up to 87% speed improvements in NG build and 80% faster edit refresh Loop for NG serve uh basically that's everything I wanted to cover for further reading uh I would suggest look at uh signal based re reactivity and also standing components uh that's in short hope you learned something new and you will uh jump into angular 17 and try

these new things uh on action thank you so much okay here we are and uh uh great presentation uh super interesting and uh I'm not an experienced Ang developer uh but uh there you showed a few things that I completely didn't know and uh and it was it was mindblowing uh just uh uh just a question since I I came from the react World so I've seen

that there are a number of uh application of solution such as nextjs that provides uh a bit of modern technology such as silid rering and so on and so forth so what do you think about having uh all of the technology packaged in the core of Ang is that a winning key point which kind of uh Evolution could open up to uh to users or to developers

having a strong commitment behind that what do you think yeah yeah I think U well like since the like the beginning uh the difference between uh react and angular was that uh react was initially uh UI Library so you use react then uh you have to use then the remaining uh you use uh web pack you can use any other uh Packer or you can react router

or anything else so basically use react as a library and then all other things Builder and um everything else you you build it yourself so which uh is great gives lots of um lots of uh how you say flexibility while angular from the beginning was a framework so you just have Ang and then you have pre-selected everything you have SSR pre-selected uh router pre-selected uh the build

selected now is and then so basically opinionated it is opinionated so the main point is that with Ang uh it being opinionated it is easier to to adopt to use best practices okay yeah I think I think also like the use cases when you need lots of uh imization and you have very very de very uh experienced team with react it's it's nice to have react but

for example for the uh like banking where you have Enterprises and uh where you have where you don't have you don't need much of much of the customization but you need more like a stability so you have this allinone package that like everything works together well and then you have to don't have to worry about it so it's like a little bit less risk of having some

issues yeah it's it's two different words okay that's good very interesting uh in your experience uh uh how is uh difficult if it is difficult to on board the new people on Angola which prerequisite which knowledge uh do they need to have in order to be on boarded language Yeah so basically uh the main con of angle compared to react and view was that the learning curve

was long but with like you know you as you noticed from the there was like weird syntax Aster ng4 something and blah blah blah with this new like uh latest um updates from Ango 17 it's getting more lean and it's getting more uh JavaScript standard so basically in other words I think the general trend is angular is becoming more like react and react is becoming more angular

so they were like moving there were two extremes now they're moving towards each other they are converging they are yeah they are coping each other's uh advantage and I think in in few in few uh years we'll have all of them are like a similar syntax and just the engine behind it working differently but I think with 17 sorry we could call that angula yeah yeah yeah

and then angle should be yeah yeah but from the new new version 7 from 17 from 18 it's easier and easier to uh on board okay okay so thank you very much for your time thank you for the presentation uh it was super cool even for me that I'm not so skilled with with Ang so uh really great to to discover advanced stuff and very clear presenting

them so thank you very much and thank you all for joining us thank you thank you it pleasure for