フロントエンドエンジニアとして生きていくための戦略
@cssradar
コラボレーション
メンテナンスは欠かせない要素。
HTML CSS JavaScriptは言語の仕様的にもメンテしやすい言語ではない。
Learnablity(専門的な知識がなくても書けてしまう手軽さ)
シンプルさと寛容さが重要。
メンテナンス性ではなくどのようにコラボレーションをするかが重要。
問題は人と人の間にある。
code style guideline
最終的に一人の人間がコードを書いたように見えるべき。 Rick Waldron
(あまり新しいものではない)
rwaldron/idiomatic.js · GitHub
CSS Guidelines (2.2.2) – High-level advice and guidelines for writing sane, manageable, scalable CSS
JavaScript Style Guide | Contribute to jQuery
いろいろなガイドラインを参考に自分のガイドラインを作るべき。
でも、ガイドラインを順守するにはツールが必要。
ツール
CSScomb: Makes your code beautiful
自動チェックって重要ですよね。大事なのはどういうコードを書いたかではなくなぜそのコードを書いたのか議論できるようにすること。
スタイルガイド
- GitHub
- スタバ
- MAILCHIMP
ドキュメンテーションはウソをつく
(一度でもドキュメントを書いた人なら共感できる)
で、それを回避するためにはやっぱりツールが必要。マークダウンとかスニペットとか。
スタイルガイドの中でも特にホットなツールたち。
ゴール
プロトタイプの作成を加速させる。
プロトタイプ
Build a prototype as soon as possible. (実際に動くもの、見えるものに対しての意見は言いやすい)
ツール
BrowserSync - Time-saving synchronised browser testing
JS Bin - Collaborative JavaScript Debugging
- ツールやワークフローの重要性を再認識できる。
- コラボレーションにフォーカスする
progressive enhancement
変化と対応力 エレベーターは壊れたらタダの箱だが、エスカレーターは壊れても階段になる。
プラットフォーム ON/OFF
ウェブは変化をし続けて、柔軟性が高い。
あやふやな連続性
- ブラウザ
- デバイス
- ネットワーク
たよりなく感じることは多いが、時代の変化に対応してきた。WebそのものがProgressive Enhancement。そしてフロントエンドが一番変化に対応しやすい。
戦略
- cut the mustard
(エンハンスメントを受けられる最低限のテクニック)
cut the mustard の意味は？: ぼけ防止英単語・イディオム記録
コンポーネント単体における体験を定義する(インテグレーションテスト)
世界はどんどん変わっていく
優秀なエンジニアには共通してある特徴
- プログラミングの哲学を持っている
- 哲学を具体的なものに落としこむ
- ディテールにこだわりを持つ
- 前提条件が変わったら潔くそれを捨て去る
Webは常に変化し続ける
Web利用者の多くは単純にWebを消費するだけ。
Instead of trying to point yourself in the right direction, admit you have no idea what the right direction is, and try instead to be super sensitive to the winds of change.
Paul Graham
アプリケーションは1つの技術だけでは作れない。 どのフレームワークか、どの言語か、などを選ぶ必要がある。
→開発者の利便性に重きがおかれがち
ツールはツールごとに解決しなければならない問題が存在している。
Document & Education
- プロダクトを継続し続ける能力も重要。
- Webのなかでもフロントエンドは一番変化が激しいところ。
- 可能な限り多くの環境に対応する
- Progressive Enhancement(必要に応じた機能追加だけではなく、機能堅牢なプロダクトを作り、その堅牢さにしつこいくらい疑問を持つこと)
- 多くの環境を持つ本当の意味(エンジニアにとっては作る力だけではなく、思いやりも重要。)
パフォーマンス
- パフォーマンスを向上させることは義務 サーバサイド クライアントサイド
Researching the Performance costs of JavaScript MVC Frameworks | Filament Group, Inc., Boston, MA
3Gではファーストレンダータイムが1000MSの壁を超えられない。
Ember.js - Inside FastBoot: The Road to Server-Side Rendering
Isomorphic JavaScript - The future of web app development
読み込みのパフォーマンス レンダリングのパフォーマンス
(パフォーマンスを優先しすぎて文字の描画が出来ない)
アクセシビリティ
重要なこと
- できないと言わず、オプションを提示する
- 壊れ窓の中で仕事をしない(割れ窓理論)
- 「十分」がいつなのかを知る(終わりはあるのでタイミングを知る)
- 知識を増やすための時間を定常的に設ける
- コミュニケーション
最後に
- フロントエンドはこれからもWebに必要とされるのか→Yes
- 今と同じことをしつづける必要はない(フルスタックエンジニアではないが)
チーム
コラボレーション
- 変化対応
- 責任
- エキスパート
- 思いやり(優れたアプリは技術を惜しみなく注ぎ込んだ結果)
You can't connect the dots looking forward you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something: your gut, destiny, life, karma, whatever. Because believing that the dots will connect down the road will give you the confidence to follow your heart, even when it leads you off the well worn path.
