![見出し画像](https://assets.st-note.com/production/uploads/images/11341718/rectangle_large_type_2_4a9ec21d4300a78474e08da455c64ba3.jpeg?width=1200)
第70回 HTML5とか勉強会「開発環境」
2018/09/05参加
長期運用サービス改善のために構築した開発環境の話
長期サービスありがちな
・既存のものはそのまま
・ブロック単位で改修
・vue.jsは学習コスト低くていいよ!
UIインベントリ作成→スタイルガイド→
slack、figma(パーツの共有。xdみたいなこともできる!)、storybook
アトミックコンポーネント 粒度>カテゴリ>コンポーネント
カプセル化することによってのびのびコーディング
★運用ルールは守るけど、守ることが目的にならないようにする
noteのフロントエンド刷新中の開発環境
Ruby、coffee、AngularJS→nuxt.jsに刷新
・明確なコーディング規約がない→eslint,prettier,nuxtによってもたらされた規約
・コンポーネント設計のルールがない→atomic designを使用。粒度に名前があるのべんり。
typeScript
開発環境構築に時間をかけない
ボイラープレート(Gitに環境置いといてクローンする、ツールは賢すぎないものを)/プリセット(eslint-config-xxx)/ゼロコンフィグのツール(bili.js,poi.js)
★vue.js入門
ServiceWorker Side Mock / Transpile
service worker side(合法ローカルプロキシ)
ie11だけ未対応!
マウス乗せただけでリンク先を先読みーとか、workbox
透過的pwa
積極的pwa
visual studio live share
リモートで入った人全員でさわれる。カーソルの位置もわかる。リモートでデバッグができる、ブレークポイント貼ったもの共有
共有はコードだけじゃない!
この記事が気に入ったらサポートをしてみませんか?