1. Angular Introduction

• A framework for web front-end app 

• A platform for integrated development

• An ecosystem for developers

Angular is ...

Angular as a framework

Full-stack for modern web app

Official Packages

• @angular/core

• @angular/core/testing

• @angular/common

• @angular/forms

• @angular/http

• @angular/router

• @angular/platform-browser

• @angular/platform-server

• ...

• Batteries included!

  • Save time to find awesome 3rd-party packages

• Easy to learn

  • Shareable knowledge in communities

• ​Qualified

  • Always maintained, well-tested and up-to-date

Benefits

Angular as a platform

Angular Platform

• Angular Language Service

• Angular CLI (Schematics)

• Stackblitz

• codelyzer

Developer Tools

Angular Language Service

Types in the template

Angular CLI

Easy to develop Angular apps

codelyzer

tslint rules for Angular

Stackblitz

https://stackblitz.com/

Angular Platform

• Progressive Web Apps

  • Angular Service Worker

  • App Shell Pre-rendering

• Ionic

  • Angular with Native APIs

• NativeScript

  • Native app with Angular

Angular for Mobile

Progressive Web Apps

Angular CLI Integration

Ionic

Native app with Angular and WebView

NativeScript

Angular component => Native UI

Angular Platform

• Angular Material

• Component Dev Kit

• Angular Elements

Development Kit

Angular Material

Material Design for Angular

Component Dev Kit

The Angular CDK gives developers solid, well-tested tools

to add common interaction patterns with minimal effort.

Angular Elements

Angular component as a Custom Elements

• Good for team development

  • Angular CLI: Collection of best practices

  • codelyzer: Keep code clean

  • UI components

• Codebase sharing

  • Web app / Native app

  • Web Components

Benefits

Angular as an ecosystem

> 1 million developers

ngAtlanta 2018 keynote

Large community

ngAtlanta 2018 keynote

• Semantic Versioning

  • Major.Minor.Patch

• Time-based Releasing

  • Patch / week

  • Minor / month

  • Major / 6 months

• Validated at Google

  • Google uses master HEAD version

Angular release cycle

• 1 year,  critical fixes and security patches

Angular LTS

• Angular (a.k.a. Angular v2+) is majority.

• AngularJS (a.k.a. Angular v1) is (nearly) over.

  • v1.7 (June): Final version

  • 3 years LTS: 2018-07-01 =>  2021-06-30

• No reason to choose AngularJS today.

Angular vs AngularJS

Angular(JS) in Google

AngularConnect 2017 keynote

Angular in Production

ng-conf 2017 keynote

Angular in Japan

• ng-japan/who-use-angular-in-japan
• 23 companies are listed.
  • Add your company!

2. Angular Roadmap

• Experimental new ideas

  • Component Dev Kit

  • Schematics

  • Angular Elements

  • ngIvy

  • ABC

Angular Labs

Angular Elements

Angular for www

• Angular components everywhere

• PoC: Angular Material => CE

  • stackblitz.com/edit/angular-ce-poc-material-v2

• Usecase: UI library / Widgets 

  • Introducing to angular.io

• Early Adaptor: `yarn angular/elements-builds`

ngIvy

The 4th-generation

• Internal view engine renewal
• Goal
  • Faster
  • Smaller
  • Simpler
• 3kB Hello World app
  • https://ng-ivy-demo.firebaseapp.com/
• Optional in v6

Angular Buildtools Convergence

or "Angular + Bazel + Closure compiler"

• Toolchain used at Google

  • Fast / Scalable / Multi-Language / Extensible

• Used for Angular apps @ Google

• Used for Angular packages

• Early Adaptor: http://g.co/ng/abc

• Build with Bazel 
  • Will be integrated to Angular CLI
• Angular Elements
  • Will be published as first-party
• ngIvy
  • Will be stable and default

Angular in 2018

3. Angular & real world

• Component-oriented design

• Functional programming

• Browsers compatibility

• Performance

• SEO

• PWA! PWA!

• Hey! New web standard is coming!

Web frontend today

• Single Page Application everywhere

  • Application Lifetime ≠ Page Lifetime

• Mobile First => Mobile Only

  • Like more native app

    • Capability / Performance

Paradigm Shift

HTML Document => GUI Application

• Component-based

  • Reusable view fragments

• Functional / Immutable

  • View = fn(State)​
  • Event-Driven

  • Avoid side-effects

• Separation of concerns

  • Model-View-Whatever

  • DDD / Clean Architecture

Nothing new idea

Learn from  predecessors

• App-like behaviors

  • Icon on home screen

  • Splash screen

  • Device capabilities

  • Offline

  • Notification

  • Payment

• Web (more reachable) +
  Mobile (more conversion) => WIN!

More mobile-ish UX 

Web for Business

• More reliable

• More capable

• More performant

• More maintainable

• More scalable

Needs of Web

• "Web" is NOT a single environment

  • Browsers: Chrome / Safari / Edge / Firefox / ...

  • Versions: Safari 8 / 9 / 10

  • OSs: iOS Safari / Android Chrome

• Standardization vs Implementation

  • Polyfill / Downpile

• => Abstract browser-dependent code

  • React / Angular / Vue / ...

Web Platform

MUST run everywhere

Use a framework

Angular for YOU

• Blackbox of complex parts

  • DOM rendering

  • Web standards interop

  • Service Worker

  • etc

• Easy, maintainable and scalable development

Think only about your app

• Architecture

  • State management

  • Component design

• User Experience

  • For loveable and valuable product

• Not Angular's job

  • It's a Front-end engineer's job!

App concerns

What should we think about?

Conclusion

• Full-stack

  • Batteries included

  • Easy to learn

  • ​Qualified packages

  • Validated by Google

• Integrated developer tools

• Growing ecosystem 

Why is Angular popular?

• Angular Elements

  • Angular component as Custom Elements

• ngIvy

  • 3kB bundle for Hello World 

• Bazel

  • Blazing fast build tool

What are coming?

What can I do?

• Web front-end is not simple

  • SPA is a GUI Application

• ​Mobile! Mobile! Mobile!

• Think about your product more

  • Outsourcing to framework