「ng-japan 2018」に参加してきました

勉強会メモ

Keynote

Momentum

  • Angular開発者1M超えた
  • 790+ worrldwide meetups
  • 530,000+ members

6.0.0

  • stability + innovation
  • cli
    • ng updateで関連のライブラリもアップデート
    • ng addで後からライブラリ追加
      • angular-materialとかng-bootstrapとかNativeScriptとか
    • ng generate
      • ng generate library
  • angular-elements
    • WebComponentsのcustom elements

Futuer

  • ivy
    • Smaller
    • Faster
    • Simpler
  • AngularComponents
    • 例えばReactとかVueの中にも入れられる
  • cdk
    • virtual scroll

AngularでPWAを進める

UXからみたPWA

PWA

  • Reliable Performance
  • OS-integrated experience
  • engage

モバイルとPC

  • 一覧性の欠如
  • ステップ数
  • 端末のheader/footer

キャッシュ

  • キャッシュはユーザに近いほどはやい
    • ネットワークが壁

通知

  • OSとか他のアプリとかと同じように出る

installable device

AngularのPWA

  • SPA + PWAで降るクライアントアプリ
  • @angular/service-worker
    • 実行モジュール
      • UIスレッドとやりとりする機能とかも
      • キャッシュ管理
      • swUpdate
  • @angular/pwa
    • コード生成の補助ツール
      • AppManifest生成
      • angular.jsonやAppModuleへ追加

ng buuildがキャッシュリソース

  • キャッシュの対象や期限をjsonに書く
  • strategy
    • performance
      • cache first
    • freshness
      • network first

今後

  • まずはbetter web app
    • serviceworkerを裏で動かしてるだけでも恩恵がある
  • installableはiPhoneが追いついていない

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

  • Yutaka Shimizu(NRI)
  • 生産技術本部

NRIのAngular

  • 2015からAngularJSを使い始める
  • 2017頃から大規模プロジェクトでも使われ始める

NRIのアプリの特徴

  • 大規模(数100画面)
  • 中国オフショア開発
  • 品質への期待がある
    • 24/365
    • 画面へのこだわり
    • BtoCとは違った特性
      • SPAを長時間利用し続ける
      • 途中でエラーは許されない
      • 諸会議道の遅さは許容可能

事例1(役割分担失敗)

  • 従来は主力はJava
  • フロントエンド技術者が不足
  • フロントだけ別チームで

事例2(迷子の開発者)

  • 実装方法のバリエーションが多く迷う
  • 処理方式を事前に決めておかないと困る
  • コピペできるサンプルコード集

事例3(オフショア開発)

  • 5~10人くらいなら対面で教育できる
  • 100人を超えるメンバーをどう成長させるか
  • リーダーに研修してその研修をチームにやってもらう

事例4(メモリリーク)

  • SPA一日中使ってるとメモリリークする
  • SPAを分割
    • 途中でリロードさせる
  • リリークしやすい処理は共通部品を使わせる

大規模開発に打ち勝つためのマルチパラダイム

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

NHKのアーキテクチャ

  • 技術
    • AngularをNHKで使っている
    • Firebaseも使っている
    • CloudFireStoreも
    • CloudFunctionも
    • セキュリティ的に厳しい
  • インフラを中に持てない
  • リアルタイムにやりとりするのが難しかった
  • cloud functuinにjsonをアップロードしてる

Realtime data in VR

  • VR
    • 別の場所に連れて行ってくれるようなもの
    • oculusとか
  • AR
    • 現実を拡張
    • 3Dオブジェクトをデジタルでオーバーレイすることで実現
  • MR
    • VR + AR
    • HoloLens
  • XR
    • これらをまとめ言葉

XRやる上でのチャレンジ

  • Latency
    • 4Gだと40msのレイテンシ
    • XRだと20ms下回るのが理想
    • 5G最近出た2ms

Angular + WebVR

  • Angular6だとAngularとVRを別々に実装できる
  • ActionIndex
    • 360度のストリーミング
    • スポーツでのAR体験
    • リアルタイムデータによって実現

Angularで新サービス作って学んだこととか

Screenshot test in Angular

なぜSnapshotTest

  • viewのassertionしてても要件変わったらすぐ壊れる
  • 画像の比較ならかんたん!?

どうやってsnapshottest

  • 環境作るのとても面倒
  • 1度のPRで画像1000枚とかあげんのかと

コンポーネントをキャプチャしてテスト

  • Storybook
    • AngularCLI使ってる環境でも使えるようになった(Angular6,storybook4)
    • 自分でwebpack書かないから
  • Puppeteer
    • headless Chromium
    • storybook-chrome-screenshot
    • ひたすらキャプチャとってくれるやつ
    • storybookのaddon
  • reg-suit
    • 画像のassert

その他

  • Reactでも同じようなことやってる
  • ReactEuropでやってた

Protractor under the hood

ng e2eの裏側

  • Protractor
  • ながれ
    • HTTPServer立てる
      • AngularCLIが
    • Selenium動かす
      • Protractor
    • jasmine起動してassert
      • Protractor

AngularとPlantUMLを組み合わせ表現力を更に上げる

PlantUML

  • UMLを表現するための言語

内容

  • パワポやエクセルの設計書が多い
  • それをAngularアプリで置き換えたい

AngularアプリケーションにおけるCSS設計手法

CSS設計

  • BEM
  • SMACSS
  • OOCSS

なぜCSS設計必要

Angularでは

  • 従来のCSS設計はいらない
    • Component
    • ScopedCSS

AngularでのCSS設計

ComponentCSS

  • 一つのComponent専用

SharedCSS

  • 複数のComponentで使われる

GlobalCSS

  • 全てのComponentに適用されるCSS

どう使い分けるか

  • 基本はComponentCSS
  • SharedCSS、GlobalCSSはできるだけ使わない
  • 良いCSS設計は良いComponent設計

どう値を共通化するか

  • Sassを使おう
    • 変数
      • 色や数値などの値は変数にして名前をつける
      • 上書きは禁止
    • Mixin
      • まとまった単位のstyleを共通化するときはこっち
  • 名前を使えられることがメンテナブルになる

Creating Components Using Angular CDK

AngularCDK

  • Component Behaviors
  • Common Utilities