Frontrend Conference The Finalに参加

Frontrend Conference - A conference for front-end developer(2015年2月21日開催)に参加してきたので自分用メモ

[Keynote] Pragmatic Front-end Developer: From Artisan to Expert

斉藤さんによるエモい話。フロントエンドは無くならないどころか、これからより一層面白くなってくると思う。

資料(ドラフト)

リンク

JavaScript
CSS
  • idiomatic.css, css guidelines, sass guideline
html
  • code guide by mark otto
tools
  • editorconfig, jscs, csscomb
styleguide
style generator
Tips

[JavaScript] Reactive Programming in JavaScript

あほむさんによるRFP入門。いままで見たFRP入門の中で一番分かりやすかった。
いろいろ触ってみよう。Bacon.js押しだったけど、このタイミングだとReact.js使うかな

資料

リンク

[JavaScript] Introduction to React

外村さんのReact話。
一つ前の記事を受けて、いろいろさわる際の参考にする

資料

リンク

[CSS] Web Components/Polymer, Styling Shadow DOM

谷さんによるWeb Compornents話。おさらいから設計的な。
この辺りが普通に使えるようになるとフロントエンド本気で面白くなる。

リンク

専用セレクタ

  • :host()
  • :host-context()
  • ::shadow
  • ::contents
  • /deep combinator(>>>

設計のヒント

Tweet

ライトニングトーク

Tweet

[JavaScript] Introduction to ServiceWorker

1000chさんにによるServiceWorker話。
実際に使えるのはずいぶん先だろうけど、5〜10年後のウェブがどうなるのかって視点で見てた。
ここまで考えてウェブを作るべきなのか?という話もあると思うけど。

資料

リンク

キーワード

  • offline first

  • navigator.onLine

    • on.online, on,offline
  • FileSystem API
    • ブラウザ実装されていない
  • Web Storage API
  • indexedDB API
  • Application Cache
  • Service Worker
    • 高機能なローカルプロキシ
    • リクエスト検知
    • リクエスト改ざん
    • on.fetch
    • Fetch API
    • Cache API
    • background Sync API
      • Sync Event
      • Sync Manager
    • Web Push API
      • サービスワーカーをプッシュサーバに登録してプッシュを受け取る
      • push manager

[CSS] Inline layout

づどさんのInline Layoutの話。面白そうだったけど聞けず。
しっかり理解って意味でためになる資料。Tweetで保管しつつ

資料

[JavaScript] JavaScriptテストの疑問、お答えします。

kyo_agoさんのTestエモ話

資料

リンク

test

  • ユニットテスト
    • mocha
    • jasmine
    • QUnit
  • SinonJS
  • Promiseパターンのテストどうする?
  • faketimer系を使わなくなった
  • powerAssert
  • E2E
    • Protractor
    • testeam
  • test runnner
    • karma
    • testem
  • Isomorphicだとテスト楽
  • Phantomは結構レガシー

Tweet

[CSS] Styling Atom (Editor)

atom使ってないし、ちょっと色々話が飛んでてどう聞けば良いのだろう…って感じだった。
プレゼンにエディタ使ってるのが印象的
SUIT CSSの事を知ることができたのはよかったかな

リンク

Tweet