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!

Building Blocks of Angular

• Module
• Services
• Component
• Pipes
• Directives

Mahela & Sanga are Certified Professional Developers

Angular App Structure

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>

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?

1. Why is this relevant to you?

1. Why is this relevant to you?

Choosing the right tool for the problem

1. Why is this relevant to you?

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

1. Why is this relevant to you?

But if all you have is a toolbox...

2. Some context please!

Some context please!

2. Some context please!

2. Some context please!

3. When is Angular suitable?

When is Angular suitable?

3. When is Angular suitable?

3. When is Angular suitable?

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

A real client

3. When is Angular suitable?

"I need the thing to work seamlessly in IE"

A real client

3. When is Angular suitable?

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

A real client

4. Technical Examples!

Technical Examples!

4. Technical Examples!

1. OPINION

4. Technical Examples!

2. CLI

4. Technical Examples!

3. VSCode

4. Technical Examples!

4. Material

4. Technical Examples!

5. Observable-based

4. Technical Examples!

6. Developer Ergonomics

4. Technical Examples!

6. i18n

Internationalization

4. Technical Examples!

7. Performance

Lazy loading

4. Technical Examples!

8. LTS

Long-term Support

“Google has more than 600 apps written in Angular”

5. When is Angular not ideal?

When is Angular NOT ideal?

5. When is Angular not ideal?

Overwhelming

5. When is Angular not ideal?

Learning Curve

Ready?

Download

Install

Run!

https://nodejs.org/en/download/

npm install -g @angular/cli@latest

How to solve

architectural problems

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

Architecture

https://angular.io/docs/ts/latest/guide/architecture.html

• 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

• Using Ahead of Time compilation

• Using Build Optimizer

• Executes enableProdMode() via setting prod environment

How to do?

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

LIFT

Where to go from here

- Tweet @kokkisajee

-  Volunteer Ng-SriLanka

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

- Demo :  ngStoreApp