A SNEAK PEEK

INTO ANGULAR

@kokkisajee

www.sajeetharan.com

 Challenge for today!

"Life is an education. It is learned

mostly through what you discover on your own and not through what others tell you"

-                                                       - Terry Brooks, The Skaar Invasion

Choosing your Front end Framework

👍We will dive into some core concepts

 

👍It won’t teach you everything,  But it will help you learn what you need to know when deciding on framework ( 3 'W's)

DISCLAIMER:

"HEROES DON'T ALWAYS WEAR CAPES

SOMETIMES THEY CODE ANGULAR"

  • A framework for web front-end app 

  • A platform for integrated development

  • An ecosystem for developers

Angular (v2)

2016

Future ready

$scope

ng-if

ng-app

ng-model

mobile

oriented

better

performance

x12

Angular 1.x vs Angular

Stable and performant

2017

2021

Language service && Tooling

Smaller, faster, easier

Angular (v4)

Angular (v5)

Angular (v10)

Typescript 4.4,100%Ivy support

Angular (v13)

Angular as a Framework

 

  •       Batteries Included
  •       Easy to learn
  •       Qualified
  •       Full stack for modern web app

Angular As an Ecosystem

Go here - > madewithangular.com

600+ Google projects!

120+ GDES , 700+ Communities , 69k Contributors

Building Blocks of Angular

  • Module
  • Services
  • Component
  • Pipes
  • Directives

Mahela & Sanga are Certified Professional Developers

Angular App Structure

Application Source

Our application is divided in two parts. -Application itself & Application bootstrap

Angular App

Our modules, routes, components & services live here.

Angular Boostrap

We bootstrap our app depending on what platform were developing for, and add any required polyfills & vendors.

Configuration

Typescript config, npm packages, scripts, webpack config, express server, and so on...

  • ngOnChanges - called when an input binding value changes
  • ngOnInit - after the first ngOnChanges
  • ngDoCheck - after every run of change detection
  • ngAfterContentInit - after component content initialized
  • ngAfterContentChecked - after every check of component content
  • ngAfterViewInit - after component's view(s) are initialized
  • ngAfterViewChecked - after every check of a component's view(s)
  • ngOnDestroy - just before the component is destroyed

ngular

Life Cycle

Router

ngular

<router-outlet></router-outlet>

<a [routerLink]="/world1"></a>

Set the Route

This is the container where the component or module indicated by the router will be loaded

Why is this relevant to you?

Why  Angular

1. Why is this relevant to you?

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Why Angular

1. Why is this relevant to you?

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Choosing the right tool for the problem

Why Angular

1. Why is this relevant to you?

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

If all you have is a screwdriver, all the problems will look like screws

Why Angular

1. Why is this relevant to you?

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

But if all you have is a toolbox...

Why Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Some context please!

Why  Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Why  Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Why Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

When is Angular suitable?

Why Angular

1. Why is this relevant to you? 

2. Some context please!

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

👇🏻

3. When is Angular suitable?

Why  Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

“I don’t want to refactor this app again in 6 months”

A real client

Why  Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

"I need the thing to work seamlessly in IE"

A real client

Why Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

"The features of the web app and the mobile app are similar, do not write it twice"

A real client

Why  Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Technical Examples!

Why  Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

1. OPINION

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

2. CLI

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

3. VSCode

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

4. Material

 

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

5. Observable-based

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

6. Developer Ergonomics

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

6. i18n

 

Internationalization

 

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

7. Performance

 

Lazy loading

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

8. LTS

 

Long-term Support

 

“Google has more than 600 apps written in Angular”

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

When is Angular NOT ideal?

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Overwhelming

Why I chose Angular

1. Why is this relevant to you? 

2. Some context please!

3. When is Angular suitable?

4. Technical Examples!

5. When is Angular not ideal?

🍺🍺🍺

Learning Curve

Ready?

Download

Install

Run!

https://nodejs.org/en/download/
npm install -g @angular/cli@latest
ng new ngStoreApp
cd ngStoreApp
npm start

How to solve

architectural problems

“In Angular, you must start from the ground up with your architecture in mind.”

Architecture

 

  • Should have Single Responsibility

  • Should be Simple

  • Should be Small

  • Should be Encapsulated

  • Should use Composition

5 Simple Rules for Components

Build the app using prod

$ ng build --prod
  • Using Ahead of Time compilation

  • Using Build Optimizer

  • Executes enableProdMode() via setting prod environment

Tip #1

$ ng build --prod  --build-optimizer=true

How to do?

$ ng build --prod --source-map
$ >npm i -g source-map-explorer
$> source-map-explorer dist/angular-workshop/main.bundle.js

"The ability of the system to undergo changes with a degree of ease"

LIFT

Tip #2

Where to go from here

- Tweet @kokkisajee

-  Volunteer Ng-SriLanka

-  Slides : https://slides.com/sajeetharan/sneak-peak-angular

- Demo :  ngStoreApp

 

 

Sneak peak Angular

By Sajeetharan Sinnathurai

Sneak peak Angular

Gapstars talk

  • 535