ng-japan OnAir vol.14 "ng-conf 2020レポート" (4/8 20:00〜) #ng_jp_onair

:thinking: ng-japan OnAirって何?

Angular日本ユーザー会によるYouTube Liveです!

:triangular_flag_on_post: 目的

• 最新情報やプラクティスをキャッチアップする機会は多い方がいい
• 勉強会やミートアップは東京に集中してるし、予定が合わないと参加できない…
• オンライン開催なら誰でもどこでも参加できるしアーカイブが残る! :tada:

:clapper: アジェンダ

  • ng-conf 2020 参加レポート



:bell: YouTubeチャンネルを購読しておくと、配信開始のお知らせを受け取ることができます。

:dancer: 出演者紹介

Google Developers Expert / Angular日本ユーザー会 代表

Angular日本ユーザー会、ng-kyoto オーガナイザ

エンジニア at / Angular日本ユーザー会のスタッフしてます



  • ng-conf 2020 参加レポート

ng-conf 2020 参加レポート


  • 4/1〜4/3の3日間
  • 完全オンライン開催
  • $250(ワークショップチケットは別売り)


Day 1

Day 3

  • Balancing UX and DX slide

    • Web Platform
      • UX vs DX
      • Who likes waiting?
    • Balancing UX and DX
    • Great UIs are FAST
    • Great UIs require iteration
    • Angular’s Goal
    • Tips for building great Web Apps
        1. Performance Analyze
        • Use source-map-explorer
        1. Use 3rd party Responsibly
        • Avoid to use CJS/AMD libraries
        • Use ESM (Tree-shakable)
        1. Lazy Load “everything”
        • Use import()
        • Use <img loading="lazy">
        1. Stay up-to-date
        • ng update Auto migration
    • Angular Team’s next focus
  • The state of Angular Deployment / SSR / Prerendering

    • Angular Universal in
      • Production case-study
      • For Loading time and SEO
    • Challanges with Universal
      • Change-refresh time
      • Deployment
    • v9 Improvements
      • serve-ssr: Live Reloading
      • Automatic Universal deployment
        • @angular/fire@canary: Firebase Hosting + Functions
    • Prerendering
      • Parallel prerendering
      • Generate 800 pages < 2s
        • 10,000 pages in 75s
      • JAMStack

The State of XXX

State of RxJS by Ben Lesh slide

The State of NgRx by Mike Ryan

  • NgRx is growing
    • 350k+ Developers (2019)
    • 12M+ Downloads (2019, ngrx/store)
      • 30% Growth (2018 -> 2019)
    • 300+ Google Apps (2019)
    • 100+ Contributors
  • NgRx Categories
    • State / View / Data
  • Data
    • @ngrx/data
    • Abstracting Data Retrieving
  • View
    • @ngrx/component / @ngrx/router
    • @ngrx/component
      • For Zone-less Reactive Angular
        • Observable as a CD Scheduler
    • @ngrx/router
      • Simpler Router
      • No NgModule

From Google Analytics to Universal deploy schematics! by James Daniels slide

Bazel + Angular Today by Jorge Cano slide

  • Bazel v1.0 Release
    • Remote Build Execution
  • Bazel can be a builder for Angular CLI
  • Bazel/rules_nodejs: v1.5.0 release
    • Working branch: v2.0

Angular Language Service: What’s New by Keen Yee Liau slide

Angular Universal & Our New Prerenderer by Wagner Maciel

  • Angular Universal Live Demo


Http Interceptors: The Room Where It Happens by Ward Bell

  • HTTP Interceptors

A Philosophy for Designing Components with Composition by Jeremy Elbourn

  • How to design useful UI components

Why Should You Care About RxJS Higher-order Mapping Operators? by Deborah Kurata

  • About xxxxMap operators

The Phantom of the Template Error by Brian Love

  • Template Type Checking

Common Challenges facing Angular Enterprises by Stephen Fluin

Preload Strategies: Step in Time, Step in Time! by John Papa

  • Router Preloading strategy`

Farewell Entry Components by Yvonne Allen

  • entryComponents Farewell

Domain-Driven Design and Angular by Manfred Steyer

  • Architecture workshop

Facing the music when millions of daily users hit after every release by Vishal Kumar

Getting through the awkwardness of networking by Wesley Faulkner

  • People Networking

A Journey into the World Of Machine Learning with TensorFlow.js by Aaron Ma

  • Introduction of Tensorflow.js

Debugging Like a Boss with Angular 9 by Anthony Humes

  • API

The Control Container and I by Jennifer Wadella

  • How to build ReactiveForms over routes

The Role of Effects in NgRx Authentication by Sam Julien

  • NgRx Effects Practice in Auth

Stepping Up: Observable Services to Observable Store by Dan Wahlin

  • Simple Observable state management

The best 20 minute Angular & Firebase video you’ll ever see by David East

  • Firebase + Angular

Resilient Angular Testing – Jaw dropping magic tricks by the magnificent Shairezniko by Shai Rezlik

  • How to write tests for codes using 3rd party library

Non-Server Side Story: When JAMstack met Angular by Divya Tagtachian, Tara Z. Manicsic

  • From Netlify
  • Introduce JAMstack
  • ng add netlify-schematics
    • ng deploy for Netlify

The Makings of Scully by Sander Elias

  • Why SSG
  • ng add @scully/init

Deep Diving

How Ivy will improve your application architecture by Manfred Steyer

  • Experiment new Application pattern with Ivy

Deep dive into CLI Builders by Mike Hartington

  • Creating custom CLI Builder

Stronger Type-Checking in Templates with Ivy by Alex Rickabaugh

  • How Template Type-Checking works

Revisiting a Reactive Router with Ivy by Brandon Robert

  • How @ngrx/router works

INTO THE UNKNOWN by Craig Spence

  • TypeScript complex typing

A Whole New Way to Build Ivy Apps by Eric Simons

  • StackBlitz Update