The Angular World

Suguru Inatomi

@laco2net

2018-03-24

https://goo.gl/G3phq1

Agenda

1. Angular Introduction

2. Angular Roadmap

3. Angular & real world

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

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

2. Angular Roadmap

  • Experimental new ideas

    • Component Dev Kit

    • Schematics

    • Angular Elements

    • ngIvy

    • ABC

Angular Labs

Angular Elements

Angular for www

ngIvy

The 4th-generation

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

6/16 ng-japan 2018

https://ngjapan.org

Thanks!

Suguru Inatomi

@laco2net

The Angular World

By Suguru Inatomi

The Angular World

MANABIYA 2018

  • 1,497

More from Suguru Inatomi