Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Our Track to Modern Angular

843 views

Published on

ng-japan meetup 2019 Spring の発表資料です。

Published in: Engineering
  • Be the first to comment

Our Track to Modern Angular

  1. 1. Our track to Modern Angular ng-japan meetup 2019 Spring LT Yuta Shimizu @pachirel
  2. 2. Angular 8.0 Release 🎉 🎉 🎉
  3. 3. Angular に関わっているみなさま おめでとうございます! & ありがとうございます!
  4. 4. 私自身は 何も貢献できていませんが Angular が前に進み続けてい ることに勇気づけられていま す
  5. 5. なぜなら・・・ Angular ユーザーだからです!
  6. 6. 自己紹介 Yuta Shimizu @pachirel Software Engineer @ • AngularJS / Angular / Node.js / TypeScript • Ruby on Rails / AWS etc. • Hobby: Splatoon, Board games • Challenge: Triathlon • Community: Kawasaki.rb
  7. 7. SORACOMは サービスローンチ時から Angular を使っています kintone も使っています!!! https://weekly.ascii.jp/elem/000/000/411/411367/
  8. 8. ごめんなさい嘘です
  9. 9. SORACOMは サービスローンチ時から AngularJS を使っています
  10. 10. ということで・・ これからする話は Angular で開発している皆様に は 役にたちません
  11. 11. 当時の構成 • Angular 1.2 • pure JS • bootstrap • Bower でパッケージ管理 • Grunt でビルド&デプロイスクリプトを作成 • CircleCI
  12. 12. AngularJS を採用した経緯 • 一通りの機能が揃っていて、ある程度規模の大 きいアプリケーションに向いていると感じた。 • 社長が作った最初のプロトタイプが AngularJS だったから
  13. 13. Q: React を使おうとは思わなかったの? • 正直迷った • SPA をゴリゴリ開発したことのあるメンバーが 居ない&他のコンポーネントと掛け持ちした状 態で、ローンチまでの短期間に仕上げる必要が あった。一通りの機能が揃っていたのは偉大。 • 当時 React の勢いを感じていたが、実績のある AngularJS を採用したのは適切だった。
  14. 14. 2015年 9月 無事、ローンチに間に合った 🎉 🎉 🎉
  15. 15. 2016年9月 Angular 2 がリリースされる • AngularJS 使いやすいし、Angular 2 にもゆくゆ く移行したいな〜 • Angular CLI 使いやすそうだな〜 • 移行したい!!!! • とはいえ機能追加は活発
  16. 16. AngularJS と Angular を並行運用し て段階的に移行したら良いよ
  17. 17. Follow the guide!!!
  18. 18. Follow the AngularJS Style Guide • みんな大好き John Papa さんの Angular style guideは開発当初から参考にしていた。 • Ruby on Rails をやっていた頃から、 レール(規約)に乗る大事さは知っていた。
  19. 19. Using a Module Loader • ビルドスクリプトを grunt → gulp → gulp + webpack へと段階的に移行(時間かかった) • webpack を使うために、 bower を npm に移行 • angular-templatecache のコンパイルや ng- config, translation file のマージ作業などは webpack extension を書くのが億劫で gulp のま ま。 • gulp で上記の処理をしてから webpack-dev- server を起動する構成
  20. 20. Migrate to TypeScript & Using Component Directives • 2017年 7月に導入 • Webpack 導入の目的は TypeScript の導入 • AngularJS 1.5 未満のときに書いていた element directive を TypeScript で component に順次書 き換えている(現在進行形)。 • 古いコードの追加開発が必要になったタイミン グで工数を余分に確保して移行作業している。
  21. 21. 移行は 7割終わった Files AngularJS javascript AngularJS TypeScript Angular Typescript • 残りは大物(大変なの)と小物(変更がない)
  22. 22. SORACOM ユーザーコンソールのコード規模 • *.js / *.ts ファイル数: 約 600 • Component / Directive の数: 約 200 • Service の数: 約 60 • 規模としては小さくないと思うけど、大きくもな いかな・・・中くらい?どうなんだろう??
  23. 23. ng-upgrade module を使って Angular と同居さ せる • 2018年5月に Angular 6.x と同居させてみた • 同居させること自体は、サクッとできた。
  24. 24. Angularを同居させただけでなぜかテストがこけ る • Protractor との相性問題が発生していた • 当時 PR を漁ったけれど、簡単に解決しそうな 見込みがない・・・ 「ざんねん わたしの ぼうけんは これで おわってしまった」
  25. 25. Q: React や Vue に移行することは考えたの? • 正直迷った • フロントエンドチーム(2人)で何度か議論 • 既存の資産をこの人数で 他のコンポーネントの開発をしながらコード フリーズもせずに移行するのは正直厳しい • Angular 自体に不便を感じているわけではない • なんとか Angular に移行する道を探ろう
  26. 26. テストフレームワークを Cypress に置き換え • Angular に依存しないテストフレームワークに 移行すればよいのでは・・・!?
  27. 27. Cypress に移行して得られたもの • Electron ベースのテストスイートが便利 • テスト失敗時のスクリーンショットが自動的に 保存されるのでデバッグが便利 • E2E テストが安価に並列実行できるようになっ て、テストの実行時間が 1/4 に。
  28. 28. テストも移行したし いよいよ並行稼動だ!!!
  29. 29. なぜかハチャメチャに遅い
  30. 30. フォームに文字を打ち込もうとするとフリーズ • いや、むしろページ開いているだけで(略 • 多分、Angular / AngularJS のせいじゃなく、自 分たちのコード or ライブラリの相性のせい • 深く追いきれていないが、イベントループ周り になにかありそうな予感 「ざんねん わたしの ぼうけんは これで おわってしまった」
  31. 31. downgradeComponent を使ってみた • 数日調査して、ためしに upgradeComponent を やめて downgradeComponent にしたら解消! • 2019年 4月 ついにハイブリッド構成に!
  32. 32. 現在の構成 • AngularJS 1.x / Angular 7.x のハイブリッド • Typescript 3.x • Bootstrap / Angular Material のハイブリッド • Gulp / webpack / npm • Cypress + AWS CodeBuild + Jenkins
  33. 33. まとめ
  34. 34. AngularJS → Angular に移行するときのおすすめ • とにかく TypeScript 環境にする • 開発速度/コードの質が上がった実感 • チーム全員が型付言語経験者だったのもある • テストのカバレッジをあげる • 単体テストでカバレッジを高めていく vs E2Eテストで 大まかにユースケースをカバー • 段階的ではあるが、ほぼ書き直しになる • ロジックをPlain TypeScript Class に切り出して、 Angularとの依存関係を疎にしておくと良さそう • ng-japan に参加して情報交換する!
  35. 35. 今後の予定 • 2020 年中に Angular への完全移行が目標です!
  36. 36. 最後に宣伝させてください
  37. 37. SORACOM がお届けする IoT 最新事例 / 技術 / ソリューション 1 Day カンファレンス https://discovery2019.soracom.jp 7/2(火) 9:00 ~ 19:00 グランドプリンスホテル新高輪・国際館パミール 参加登録 受付中!
  38. 38. ご清聴ありがとうございました

×