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.

2016 03 05_yokohama_north

490 views

Published on

フロントエンドに愛される三つ星バックエンドエンジニアへの道

Published in: Engineering
  • Be the first to comment

2016 03 05_yokohama_north

  1. 1. 三つ星 Backend Engineer 2016/3/5 Yokohama North Meetup #2 Ryo Tomidokoro
  2. 2. About me Ryo Tomidokoro (@hanhan1978) エンジニアパソコン好きのオジサン
  3. 3. フロントエンド始めました。 バックエンドエンジニアですが・・・ 色々あって
  4. 4. 年寄りに押し寄せるフロントエンド技術 http://jade-lang.com/ https://www.npmjs.com/ http://sass-lang.com/ http://stylus-lang.com/ https://babeljs.io/https://www.browsersync.io/https://en.bem.info/ http://gulpjs.com/http://bower.io/
  5. 5. • 意外とついていける。 • フロントエンドの常識を理解する必要あり • 流れは早くない。←大事 バックエンドの人はついて行ける ?
  6. 6. • フロントエンドとは? • フロントエンドの常識 • 現状の問題点 • 三つ星バックエンドエンジニアへ Agenda
  7. 7. フロントエンドとは? Javascript CSS Webページを記述・作成 HTML • 昔でいうところのコーダーとかマークアップ エンジニアを大きく包含する職域
  8. 8. 2013年頃から呼ばれ始めた名称らしい
  9. 9. • HTML5やResponsible Design、SPA等でクライアントサイドのプ ログラムが複雑化 • Ajax等の非同期通信を使ったJavascriptも普通に使われるようにな って、複雑化がさらに増す。 • 複雑化したクライアントサイドに光を灯す存在として、近年登場 した救世主なのでは・・・。 多分・・・
  10. 10. フロントエンドの常識 • npmは必須。空気並の存在。 • 生のHTMLは、書かない。 • 生のCSSは、書かない。 • Webページはビルドして生成。 • ローカルサーバを使った効率的な開発。
  11. 11. https://www.npmjs.com/ • サーバーサイドだけではない。 • node製のモジュールでフロントエンド開発全般の効率化を 行っている。 • npm抜きでのフロントエンド開発はもはやありえないので は・・・。
  12. 12. 生のHTMLは書かない • タグは閉じない! • include • mixin • block http://jade-lang.com/ Jadeで一度書いたら、もうHTML書く気にならない
  13. 13. 生のCSSは書かない http://sass-lang.com/ • タグをネスト出来る • 変数使える • mixin • 継承 CSS拡張言語が提供する機能は大体同じ。 異なるのは記法。
  14. 14. Stylusの場合 • インデント記法 • コロン要らない • 行末セミコロン要らない SASS(SCSS)に比べて非常にマイナー 記述量は大分減っているので悪い方向性ではなさそうだが・・・
  15. 15. その他にも・・・ • ブラウザ毎に微妙に異なる書き方などは、ビルド時に生成 • mixinで他の人が作った部品を簡単に導入できる。 • SASS(SCSS)は生のCSSを突っ込めるので、イザという時 助かるらしい。
  16. 16. さらに・・・CSSの構造化 • グローバルで殴り合いしないために、CSSの構造化はいろ んなやり方が提唱されている。 • BEM, SMACSS, OOCSS, FLOCSS • 命名規則や、ディレクトリ分割で複雑さや保守性をキープ
  17. 17. Webページはビルドして作成 従来 最近 JS CSS HTML JS CSS HTML 開発 成果物 Babel SASS Jade 開発 JS CSS HTML 成果物 ビルド
  18. 18. ローカルサーバを使った開発 • ブラウザにファイルパス入れて開いたりしてない。 • browserSyncは神 • もはやリロードさえしない。 https://www.browsersync.io/ DEMO bodyの閉じタグを見つけて、リロード用のJSを埋め 込んでくれる。
  19. 19. • さすがに顧客はnpm使えない • バックエンドもSASS、Jadeをそのまま受 け取れない。 • 組み込み後は、生HTML 生CSSをメンテ 現状の問題点 優秀であるばあるほど、ヘイトが溜まって いく可能性。
  20. 20. 顧客はnpm使えない • ビルド後のHTMLをzipで送ったりして確認してもらう • 確認を取るのが面倒くさい。スマホで見れないし。 • 毎回ビルド、zipで固めて・・・ モチベーション以前の問題として 非常に効率が悪い・・・
  21. 21. うちの会社では・・・ • Dockerコンテナでビルド済みのHTMLをグローバルから確 認できるように構成 • masterにpushすると、CIで自動的にビルドして更新 好評だが、若干設置が面倒くさいので 対応策を考え中
  22. 22. バックエンドもJade、Sassを受け取れない • せっかくの構造化された情報を生のHTMLや生のCSSにダ ウングレードした上で組み込み • フレームワークによっては、そのまま受け取れるものも あるが、バックエンドエンジニアのスキルレベルに依存 Babel SASS Jade 生HTML 生CSS フレームワーク 固有のテンプレート with 生CSS HTMLの組込で情報が劣化していく
  23. 23. 三つ星バックエンドエンジニアへ • フロントエンド技術を、足を引っ張らない程度に把握する • フロントエンドの流れは早くない。大体の定番構成は決まっ てきている印象。 • フロントエンドの作業を助けるための手伝いが出来るように 。CIとかセキュリティ関連とか、テストとか・・・ • フレームワークにはSASSやJadeをそのまま組み込むべし これには深い理由が・・・
  24. 24. フロントエンドとバックエンドの融合 • SassやJadeをフレームワークにそのまま組み込む • バックエンドの環境構築はVagrantで自動化 バックエンドの改修作業を、フロントエンド エンジニアが直接的に手伝える。 効率化とスキルトランスファーの両面が狙える
  25. 25. END 目指せ三つ星バックエンドエンジニア!

×