Successfully reported this slideshow.
Your SlideShare is downloading. ×

2016 03 05_yokohama_north

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Logcatの話
Logcatの話
Loading in …3
×

Check these out next

1 of 25 Ad

More Related Content

Similar to 2016 03 05_yokohama_north (20)

Advertisement

Recently uploaded (20)

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 目指せ三つ星バックエンドエンジニア!

×