Getting Productive with Angular || Angular Virtual Conference 2021

Hey everyone, thanks a lot for joining us and hope you are having a great time

That was an amazing session from Ankit and I saw the server side rendering from Shresti

and unit testing amazing talks and more talks coming after this. So please hang on and watch all the talks and we would love to actually hear about your

experience after the conference is over. So let's go ahead and get started

Let me just introduce myself. My name is Santosh Yadav and I'm one of the Google developer expert for Angular

And I'm one of the GitHub star. I'm an auto ambassador. Actually, I also write for in-depth.dev

This is learning and this is Angular. So, and apart from that, you can actually find me on all social media using this name

Santosh Yadav Dev. So, I also run the tech talks with Santosh, which Simon just mentioned

And apart from that, I'm doing a live stream on Twitch. So if you're interested, you can just find me on Twitch with the same user, same handle

Santosh Adav Dev. And I'm doing an Angular Getting Started live stream every Saturday, 6 to 8 p.m

Indian Standard Time. So anyone wants to learn Angular in more depth or it's not only for starters, it's even for

the experts. So feel free to join and come and chat, have a chat

So that's about me. Let's go ahead and get started and let's see how actually you can become productive using Angular

There will be a lot of content which is maybe expert developers already know, but yes, it's like how to get started and then how Angular can make you productive

So that's what we are going to cover. So first thing, Angular is actually built keeping productivity in mind

So it's not like, I mean, we are going to use some extra tools apart from one tool which I have as an what can surprise

So for you, but apart from that, whatever tool I'm going to mention is Angular

So I'm not going to give you any tool which is outside of Angular

So let's go ahead and get started. Generally, so as a developer, right

So when you start, when you start Angular, so what do you see? So this is the Angular, like when you think, okay, this is just Angular

But let me tell you what actually Angular is. Angular is this apart from one logo, which I'm sure a lot of developers can identify

which is not supported anymore in Angular 12. But apart from that, every logo which you can see is actually part of Angular

So let's see each one of them and let's get started with what we are going to see

and what Angular already has. So it has built-in module for forms

So if you go to any other technology, you have to actually go ahead and search for different libraries, which form to use, which form not to use

Angular already has taken care of it from the day when. So we are, of course, going to see that built-in module for routing

You don't have to search for routing. Pre-configured unit testing. It comes with Jasmine and Karma

Great session from Jitendra was already there. Ability to build tools. So a lot of frameworks and libraries

are actually building the tools based on Angular. So if you see, Ionec is one

Mike is also one of the team members of Ionec and they are using Angular tools

which I'm going to mention a lot. And then you have built-in support for PWA

You don't have to actually go ahead and be an expert to actually create a PWA in Angular

So we'll also see that. SSR and pre-rendering, you already learned more about SSR from the session by SRUSTY

Built-in support for localization and internationalization, if I'm not wrong. And built-in support for dependency injection

This is one of the great feature which actually puts Angular in a separate bucket apart from

all the frameworks which we have. And then it also has its own Angular material component library

So and many more. So let's go ahead and get started. So whenever you have a new project, the of course, the best

the first criteria is we should be able to release faster. I mean, we should be able to develop faster

So let's see how you can actually get started with Angular. So there are four commands by using which you can start a new project

and then you can start you can deploy your app. How cool is that? Right

And what if I tell you that you have an Angular CLI and you just still have to use Angular CLI

all four commands inside Angular CLI and you are done. You created your application, you added some code and then you deployed it

So NBMI, Angular CLI, so this is the first step. So by using which you can install NBMI, sorry, you can install Angular CLI

Then you can create a new app by using NG New and then you can give an app name and your app is created

Then to serve the application, of course, you have to test it locally, right? So what you can do is ng-serve and then your application will be started on localhost and then you can test it

And then finally, you can build the application using ng-build-fn-prod. So you get a bundle which can be deployed on production

And finally, just do ng-deploy. So Angular CLI has the built-in support for ng-deploy where you have multiple providers

In case anything is missing, feel free to add. I mean, it's a community-driven project

So you have right now support for Azure, AWS, Firebase, Netlify, GitHub pages and many more

So that's about CLI. And the next thing, when you start with some front end projects or front end library

the another learning curve is templates. React has JSX, who has who.js

What about Angular? So Angular is just HTML. It's not that you have to learn a new language

So it's like you have three ways to actually work with templates

First is string interpolation. So let's say you have any variable which you want to display in your template, which is still HTML

I'm not asking you to write a separate JSX or VueJS extension

I mean, of course, they are great as well, but still HTML, right? I mean, I'm not learning a new template engine

So you can create a variable, just render them using string interpolation into your HTML and that's done

You can also use property binding, which is my favorite feature, of course, because you can do a lot of stuff with property binding

And that's how you can actually give a box any valid property name

Remember this this is really important for the new learners that any valid property name can be used for property binding So you have any variables you want to bind it to any valid property of any HTML tag

That's done. So just put a box and that's it. And then you have button

Sorry, you have events, right? So of course, if you create an enterprise word application, you

are going to work with a lot of events, maybe your click events or drop down different events

Right. So what do you in that case? So of course, you can just use this is bananas in tax, which we

call it as so you can see click equals to function so you can just still HTML

you're writing just HTML right so this is just a deco ration which you are

doing for example for to work with property binding you are putting a box and to work with events you are just doing a banana syntax dependency

injection as I said one of my favorite feature and one of the most useful

feature in angular which actually keeps it in another league of frameworks so

So what dependency injection is? Most of the .NET developer and Java developers are actually aware of what dependency injection is because we use it a lot, right

We, because I used to be a .NET developer. I have written .NET code for like eight to nine, eight years

Yeah, eight years. And then I love dependency injection. That was amazing feature

But what in Angular? What's in Angular, right? So in Angular, you don't have to configure anything

That's really cool, right? I mean, in Angular or Java, you have to go and use some other libraries, configure it, and then you can use it

Di is out of box in Angular. So what you can do is you can create classes

I'm sure everyone knows classes. And then it comes with an injectable decorator

So here, so let's say this product component, right? So this is a class

And then you can inject a class using constructor injection. In case you are a .NET or Java developer, you know two ways

I'm sure property injection and then you have constructor injection. So here we are using constructor injection and then you can start using all the methods

which are actually available in that particular class. It also comes with the concept of injection token

So by using which you can actually go ahead and do a lot of stuff. Here I have given an example how you can actually use local storage

which is a native API of your browser, but inject it as a service inside your code

That's possible because of dependency injection. So let's move on and then forms. As I said, Angular comes with forms. You don't have to worry about

which form to choose. Of course, there is one problem that those forms are not type safe and

it's been a long pending feature, but still forms are really useful and there are some

libraries which are available to actually make your forms strictly type. But Angular team is

working on that. So you have two types of forms in Angular, which is one is template driven forms and

Another is we'll see that. Right. So to use template driven forms, you have forms module

You can just import forms module and you get all the functionality, which

template driven form offers. And then you can use it. What about reactive forms

So reactive forms has a separate module, which is known as reactive forms module

You can just import it and then start using the features of it. If you if you are wondering which one is best, just go ahead and try both

So probably maybe reactive forms is best for you or maybe template driven is best for you

My personal choice has been reactive forms for a long time, but never know

So this is how you can actually create a form. So this is a reactive form approach where you have a form

Of course, this is how you create a form in HTML, right

You go anywhere and this is the way you will be creating a form

So you have form and then this form group is actually you're saying, okay, this is my

form name and we are still doing submit. else. I mean, I just told you, right? So it's HTML, that's it. Template is nothing fancy

So, and then you have form control names, some form control names, which we have created

and then you just submit the form and that's it. And let's move on. And routing. What about routing

I mean, what in case my application is very large, I have a lot of navigation around

So what we can do, of course, Angular comes with routing. So you can just quickly set up your routes

by using this syntax so you have routes array and then inside that you have two properties path and

component and good thing about routing which i have seen is this syntax is almost similar in react

and wo as well i mean this is even if you're transitioning from react or wo you will not find

any difference right so you have still path and component syntax which is already available here

you have to actually uh provide your all paths all routes using uh router module dot for root and

for child so in case you have child modules and then you can you just use router link

and then provide the route on which you want to navigate based on which link you click and then

don't forget router outlet this is the biggest mistake when i still make it so whenever i'm

doing live coding i still miss router outlet and then just bang my head around that what's wrong

Okay, but what in case we have a large application, right? So what's there

I mean, of course I cannot serve and do MB application and I can tell my clients that, okay, this is

this will work perfectly fine. Probably, yes, in case it is an internal application

and no one cares about the internet bandwidth, right? Because in large organization, you have a good infra

but what in case one day everyone starts working from home and they don't have good infra to work with

So let's lazy load. Right. So you can actually split your code into multiple chunks and that

holds that possible. Yes, that's possible using routing. So what you can do is you can have separate modules and then you can use this

syntax load children and then start lazy loading the modules. Angular team is working on a new API where you will be able to actually lazy

load your components, but it's it will be in future. It's in roadmap

So definitely it will happen one day. but meanwhile you can actually lose a load based on your modules

API calls, of course, every large enterprise application may need an API call, right

So how to do that? That possible right I mean of course you can just go ahead and use Axios or you can just use Fletch API which is native Or if you are old school you can just go ahead and use XML Just joking Don use it

Angular has solution for this. So it's known as known as HTTP client module

So you can just use HTTP client module and then it gives you all the services to work with your API calls

So what you can do is inject the HTTP client module, then inject the HTTP client service

And then it gives you access to all the methods of REST APIs. I mean, most of you already know REST APIs in case you are not

So it is a server-side code which will be hosted at a certain endpoint

And then you have several methods like get post, put delete. So HTTP client is something which will give you access to all those methods

And then you can just give HTTP.get and just pass your API

Great introduction. I mean, so there was a great session from Ankit previously

So you might have learned something about HTTP there as well. But yeah, this is how it is possible

You can just include HTTP client module and that's it. Now, let's move on to another use case

So you have a large enterprise, right? And you have many teams, many teams

and they are using different technologies. Someone is using React, someone is using VOO

someone is using just vanilla JS, or someone is using, let's say, Stansil, right

So how about creating an Angular component which can be used across any platform or any framework

So yes, Angular does support creating web components. What you have to do is you have to just do ng-add Angular elements and then give the project name, whatever project name you have

And then this is the code. It gives you an API called create custom element, which you can find here

find here so you have create custom element API which can convert your component to a custom

element which you can go ahead and use anywhere in any framework go to react go to go to stencil

go to anywhere right so even in your vanilla js and that's how you can actually use it the only

problem right now is you have to use angular module which is a little bit painful but let's see

let's see so create pws so now your manager comes one day or your client comes one day and says

hey look what we uh i can see a lot of people are talking about pws let's do that i mean uh how can

we do it like uh next day and you will be like oh my god that that should be pain right i mean i have

to learn pwa first and then i have to implement it you don't have to inside your angular app so

So you can just do ng add angular PWA. Most of the configuration is already done for you

Doesn't it make you productive, right? So yes, it does. So now let's move on to another feature, another amazing feature

Localization. So over the years, everyone has their business growing up and there are no boundaries now

So same business actually having same website is actually selling in across the world

what in case they have to maintain 20 different websites for different 20 different languages

that would be pain right so how angler can help you here so it has something called localization

so which is available you can just do ng add angler localize and these are the things so you

have to extract all the files you have to actually convert all the files manually that's but there

are three formats which are supported and which is a industry standard as well so you have xcliff

which is default and xcliff2 and xmb. So these are three support, three file formats, which are supported natively by Angular itself

Angular localization, but you can, you already have many libraries available for localization

international, internationalization. So go ahead and feel free to explore what you need. Yeah

And then unit testing. Of course, there was a great introduction for unit testing by Jitendra

So it comes with zero configuration effort. You don't have to do any configuration to actually set up your unit testing

It comes with Karman, Jasmine, and then you can just do ng test to run test cases

Of course, you have to write it. So don't forget about that. So now let's say your client comes again and says, Hey, what about SSR

Right? So the project which we have built or the product which we have built

it doesn't look like it's an SEO compliant because I am missing a lot of things

My application is not coming on top whenever I search. So how we can do that or how we can actually reduce the initial load time

And then he says, I have heard something about SSR because Rusty said this in the C-Shop Corner conference

So you say, okay, now I have to go ahead and learn SSR

You don't have to. I mean, sure, Rusty already informed you about this. So you can just do NG ADD, NG Universal Express Engine

and then you get everything which is required to actually convert your applications to SSR and

What it does so it does configures SSR with Express server provides dev server with live reload for SSR

So you can actually run it manually and check if it works fine or not Provides pre-rendering functionality as well in case you want to pre-render some pages. Yes, that's possible

Now let's go above that right. So you have let's say five different apps and

And now the problem is you have to actually go ahead and copy paste a lot of code in different five apps

And your manager says, look, we need a solution for this. We cannot just keep copy pasting our entire code

So he says, let's build libraries. And then you are like, okay, now how to build Angular libraries

So you don't have to worry about it. Angular has taken care of you. So what you can do is you can just do ng generate a new library and give a library name

So what you can do, so you can create and publish libraries, It provides the ng-packager configuration which is needed to actually compile your libraries and publish it and you can also use it inside the app

which you probably never have to actually publish it in case you are just using it inside monorepo

You can share the code across multiple applications or libraries. Both are possible. This is how you do it

So you could say any generate library name and then you can build a library by giving a library name and

and if and prod flag in case you want to publish it in case you are just using it in mono repo i think it absolutely fine if you skip plot flag And then you can just go inside the distributable folder which will be created after build

And then you can just publish it and then publish. Of course, you have to log in and create your own account

In case your organization is using JFrog and any internal IT factory, you have to actually give the path where you want to publish it

But what about the errors, right? I mean, you will be getting a lot of errors in, in

while writing code or while building code. What if I have to see all those code at runtime? That's a waste of time

So let's see how Angular makes you productive here. So Angular has Angular compiler, which is really awesome. So let's see

So what you can do, so you can debug your template, you can debug and test your component. You can come

you can actually get all the errors while actually doing ng-serve or ng-build

I mean 90% of errors you will actually get it here 10% probably

maybe it is related to dependency injection because that's something which is resolved at runtime and

This is how it helps you right? So here you can see I am trying to use a property called in a text, which is not a valid property

So what if I see this error at runtime? You best of my time

Angular gives you this error inside the VS code as well as once you do ng-serve

So you can actually quickly resolve it and then move on. Right. You can also debug your code, debug your components

So here there is an example where I'm trying to actually get hold of one of the

component and then I'm trying to assign a new value or any property to this

particular object. So here you can see I have $0 which is of course created by

Chrome team. So you can use this in any framework or library

So here I'm taking the access to list components by using API called ng

So I'm passing ng.getComponent$0. So whatever component is selected, I'm getting the access

And then you can see I'm getting all the properties of to-do list component. And then you can just change the value

So I'm updating here to blank just to see if it was fine or not

And then you can just call ng.applyChanges. And that's it. You can actually test your components in browser

I mean, you should be doing end-to-end testing and unit testing, but this is even cooler, right

So you can actually do it here. So let's move on. There are a few more APIs which we have

But what about IntelliSign support? I mean, one of the biggest problems when I moved from .NET to Angular was actually

okay, how to get the IntelliSign support in VS Code because .NET spoiled us, right

I mean, we always look for IntelliSign support. And that's also possible using Angular language service

So whenever you start with Angular, I would suggest go ahead and install Angular language service

So the advantage is all the errors, even without compiling, you will get it inside the VS code

So if you have any types issue or any variables which does not exist, get the error inside the VS code and just resolve it without actually compiling your application or even doing the production build

and it actually prompts you with all the APIs which exist. So you don't have to search for those

Angular material and CDK. So what in case you want to build your own component library

or you need an UI library and let's say you decided to use material design

Yes, Angular comes with that, but it's a separate project, but still maintained by Angular

So what you can do is you can just use Angular material. It's a UI library managed by Angular team

you can actually create your own components using CDK and it is optimized and well tested for protection use

So go ahead and feel free to use it. And this is how you can do it. So you can just do NGA add and the material and that is done

Now, so you did everything. Now, there is a new tool, let's say Playwright

So it's an E2E tool, which is available for writing end-to-end test cases. and your manager says, let's use Playwright because it looks like a cool project to me

And you have to actually go ahead and configure everything by your own

And it will be a pain every time, right? So whenever you hand it over to other developers

what in case you just build a tool on top of Playwright and make it part of Angular CLI

Yes, that's possible. So you have two things which is available. One is one API is known as

schematics where you can automate creation modification or adding any extra files to your

workspace and you can also automate setup for your library in Angular so that's two things

I mean of course there are more things which you can do with schematics but I just wanted to keep

it short here and then you have builders so you can just overwrite the angular build process and

let's say if you want to use playwright right as an end-to-end test cases yes you can do that using

builders and you can bring your own tool that's any framework is doing it and

even a next dev tools is doing it a lot of builders are available even there are

builders for Cypress want to be super productive this is this is this is the

surprise which I have so yes if you want to be super productive just go ahead and

do ng add normal slash workspace which will migrate your angular CLI workspace

to Narwal workspace and thank me later. So that's it. But there are two websites which I want to

show you probably if it gets loaded. Let's see. Yeah. So one is ngx.tools where you can actually

find a lot of schematics like release and packages. And another is angularbuilders.dev

where you can actually go ahead and find a lot of custom builders which is already created by

community so you don't have to create your own of course we try to avoid it as much as possible

right so just go ahead and search it on custom builders.dev and yeah and these are the some

references in case you want to get started with angular you have angular.io you have dev.2 this

is angular then dev.2 angular and intep.dev these are my go-to resources in case you want to learn

learn more about Angular and that's it for the day. Thanks a lot