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