Submit Search
Upload
Our Track to Modern Angular
•
1 like
•
2,154 views
Yuta Shimizu
Follow
ng-japan meetup 2019 Spring の発表資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 41
Recommended
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
kazuki matsumura
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
Recommended
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
kazuki matsumura
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
PHP Application E2E with Capybara
PHP Application E2E with Capybara
Yoshiaki Yoshida
Angular1&2
Angular1&2
Kenichi Kanai
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
Keisuke Imai
Node.js version16の新機能
Node.js version16の新機能
Masaki Suzuki
Angular2
Angular2
Kenichi Kanai
STORES.jp x AngularJS
STORES.jp x AngularJS
Keisuke Makino
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
Ng mtg#3
Ng mtg#3
Kenichi Kanai
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
Rails devs bb lt
Rails devs bb lt
masayukinakamura6
PWAをWebサービスに導入した話
PWAをWebサービスに導入した話
dobby618
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについて
kazuki matsumura
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経った
kazuki matsumura
Alt01-LT
Alt01-LT
Yuta Hiroto
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
More Related Content
What's hot
PHP Application E2E with Capybara
PHP Application E2E with Capybara
Yoshiaki Yoshida
Angular1&2
Angular1&2
Kenichi Kanai
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
Keisuke Imai
Node.js version16の新機能
Node.js version16の新機能
Masaki Suzuki
Angular2
Angular2
Kenichi Kanai
STORES.jp x AngularJS
STORES.jp x AngularJS
Keisuke Makino
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
Ng mtg#3
Ng mtg#3
Kenichi Kanai
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
Rails devs bb lt
Rails devs bb lt
masayukinakamura6
PWAをWebサービスに導入した話
PWAをWebサービスに導入した話
dobby618
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについて
kazuki matsumura
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経った
kazuki matsumura
Alt01-LT
Alt01-LT
Yuta Hiroto
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
What's hot
(20)
PHP Application E2E with Capybara
PHP Application E2E with Capybara
Angular1&2
Angular1&2
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
Node.js version16の新機能
Node.js version16の新機能
Angular2
Angular2
STORES.jp x AngularJS
STORES.jp x AngularJS
React meetup 3_eight
React meetup 3_eight
Ng mtg#3
Ng mtg#3
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
angular1脳で見るangular2
angular1脳で見るangular2
Rails devs bb lt
Rails devs bb lt
PWAをWebサービスに導入した話
PWAをWebサービスに導入した話
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
Enterprise x AngularJS
Enterprise x AngularJS
【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについて
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経った
Alt01-LT
Alt01-LT
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Angular#Kanazawa
Angular#Kanazawa
One-time Binding & $digest
One-time Binding & $digest
Similar to Our Track to Modern Angular
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Masahiro Wakame
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
学 松崎
HerokuでRails3.2 we love herokuの事例
HerokuでRails3.2 we love herokuの事例
Naoto Koshikawa
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
grpc-gateway を試してみた fukuoka.go#11
grpc-gateway を試してみた fukuoka.go#11
Yutaka Tachibana
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
第7回鹿児島Node.jsの会勉強会資料
第7回鹿児島Node.jsの会勉強会資料
Koichi Uchimura
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
Tomohiro Noguchi
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
Similar to Our Track to Modern Angular
(20)
noteをAngularJSで構築した話
noteをAngularJSで構築した話
ngJapan報告会
ngJapan報告会
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
俺とAngular JS 2
俺とAngular JS 2
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
HerokuでRails3.2 we love herokuの事例
HerokuでRails3.2 we love herokuの事例
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Nodeにしましょう
Nodeにしましょう
grpc-gateway を試してみた fukuoka.go#11
grpc-gateway を試してみた fukuoka.go#11
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
第7回鹿児島Node.jsの会勉強会資料
第7回鹿児島Node.jsの会勉強会資料
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
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 🎉
🎉 🎉
3.
Angular に関わっているみなさま おめでとうございます! & ありがとうございます!
4.
私自身は 何も貢献できていませんが Angular が前に進み続けてい ることに勇気づけられていま す
5.
なぜなら・・・ Angular ユーザーだからです!
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.
SORACOMは サービスローンチ時から Angular を使っています kintone も使っています!!! https://weekly.ascii.jp/elem/000/000/411/411367/
8.
ごめんなさい嘘です
9.
SORACOMは サービスローンチ時から AngularJS を使っています
10.
ということで・・ これからする話は Angular で開発している皆様に は 役にたちません
11.
12.
当時の構成 • Angular 1.2 •
pure JS • bootstrap • Bower でパッケージ管理 • Grunt でビルド&デプロイスクリプトを作成 • CircleCI
13.
AngularJS を採用した経緯 • 一通りの機能が揃っていて、ある程度規模の大 きいアプリケーションに向いていると感じた。 •
社長が作った最初のプロトタイプが AngularJS だったから
14.
Q: React を使おうとは思わなかったの? •
正直迷った • SPA をゴリゴリ開発したことのあるメンバーが 居ない&他のコンポーネントと掛け持ちした状 態で、ローンチまでの短期間に仕上げる必要が あった。一通りの機能が揃っていたのは偉大。 • 当時 React の勢いを感じていたが、実績のある AngularJS を採用したのは適切だった。
15.
2015年 9月 無事、ローンチに間に合った 🎉 🎉
🎉
16.
2016年9月 Angular 2
がリリースされる • AngularJS 使いやすいし、Angular 2 にもゆくゆ く移行したいな〜 • Angular CLI 使いやすそうだな〜 • 移行したい!!!! • とはいえ機能追加は活発
17.
18.
AngularJS と Angular
を並行運用し て段階的に移行したら良いよ
19.
Follow the guide!!!
20.
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 に移行することは考えたの? • 正直迷った • フロントエンドチーム(2人)で何度か議論 • 既存の資産をこの人数で 他のコンポーネントの開発をしながらコード フリーズもせずに移行するのは正直厳しい • Angular 自体に不便を感じているわけではない • なんとか Angular に移行する道を探ろう
29.
テストフレームワークを Cypress に置き換え •
Angular に依存しないテストフレームワークに 移行すればよいのでは・・・!?
30.
Cypress に移行して得られたもの • Electron
ベースのテストスイートが便利 • テスト失敗時のスクリーンショットが自動的に 保存されるのでデバッグが便利 • E2E テストが安価に並列実行できるようになっ て、テストの実行時間が 1/4 に。
31.
テストも移行したし いよいよ並行稼動だ!!!
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
今日・明日は 大阪の 日経デジタルイノベーション にも出展しています!