ng-japan2018の備忘録

6月16日に開催されたng-japanの備忘録です．
完全にメモですので，こちらも公式サイトを参照ください．

ngjapan.org

2018/06/16

angular基調講演

• stability + innovation

$ng update my-cool-library

creating ng-update schematics new generate update add

$ng new my-app

material installs dependencies in packege.json inmport Appmodule

$ng generate

ng add is suppert ng-bootstrap clarity and more...

$ng generate library my-library

Tree shakeble providers

@NgModule({
    my-camp
    something
    ...
});

Angular Element

• nasted tree DOM
  • <mat-tree>
• Form Field
  • standard from field
  • fill form field
  • outline form feild
• Table
• Badge Bottom Sheet
• Angular Matrial
  • 130 bug fixes!

Future

• Project Ivy
  • ng teamが取り組む新しいprojet
• CDK https://material.angular.io/cdk
  • listbox&combobox
  • Datepicker
  • Slider
• keeping up to date with Material Design ←awesome
• Virtural Scrolling
  • <csk-virtural-scroll-viewpoint autosize>

AngularでPWAを進める

翻訳コミッタの人 @studioteatwo mobileよりの機能実装紹介

PWAとは

Progressive Web Apps PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの @angular/pwa

webブラウザとモバイルの一覧性の違い

• add to homescreen
  • hedder futterなくなる(mobile)
  • 一発でページ表示
• push Notification
• キャッシュリソースはjsonで指定
  • ng build で更新
• CacheFirst
• NetworkFirst
  • strategy

    Feature

• まずは"better web app"
  • serviceworkerをひっそりbackgroudで動かすだけで恩恵あるらしい
  • "Extensibe"
• fullcriant appからmashup
• オフラインアプリの可能性
• PWAでボリュームをカバーできるのでは
  • webはネイティブより一段高い中小層

Angular活用実績から、ハマり事例のご紹介

NRIでの大規模プロジェクト開発おいての事例 - 1pxずれてクライアント不具合報告 - AngularJS中心

役割分担の失敗

主力はjava フロントエンドの不足 PL/BLの疎結合

PL重要度に沿ったフロント人員

迷子の開発者

データの受け渡しどうしよう クライント要件に対する方法が決まっていないせいで設計が進まない

標準化ルール * 処理方式 * 画面遷移パターン * チェックタイミング

→ 誰が作っても同じ構成などのメリット

こんなに？くらいの標準化がみんなのためになる

オフショア開発

• 中国なら100人単位で動員できる
• オフショアの教育
  • 対面で伝えられる人数10人
  • 声の届く範囲
• 雪だるま式教育法
  • Angular研修を作り
  • リーダーに持っていってもらう
  • 独自チュートリアルに開発の注意点を織り交ぜるなど

メモリリークとの戦い

ex. 車の故障をコールセンタ介してレッカー調達

コールセンタは常にページを立ち上げている 2.5hで1gbの消費メモリ(動作に影響)←ヤバそう

• SPA分割
  • 一連の業務完了で再読込
  • リークしそうな箇所は局所化
  • 共通部品(開発者に使わせない) cf. DOMリーク

標準化と地道なつぶしこみが重要

How we are using Angular + Firebase at NHK leading to the Olympics

Action INDEX shibuya 360° streaming AR(sportをrealtimeで表現) patent power

archtecture peek @NHK

• using Firebase + NHK
• using Cloud Fire Store + NHK
• セキュリティに厳しいNHK →インフラを別のところに持った
• cloud functionを使うことでリモートに操作できる
• リアクティブな構成を保ったままdata bining,jsonをupload <sFTP>
• why Cloud Firebase?
  • So many Query

Realtime Data in XR

• VR,AR,MRの違い
• XR
  • VR,AR,MRを一つにまとめた言葉
  • Latency.
    • 20ms over 5G(2ms)標準化されたの？！at 6/15
  • webVR
• Everything is Component
• 突然の終了

plantUML componentCSS