dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

Inside Frontend #1に参加したメモ

勉強会 Frontend

こちらのイベントに行ってきました。

AMA（休憩時間中の質問コーナー）という取り組みが非常に良かったです。 以下、話を聞きながら手元でメモしてた内容。


Web over ServiceWorker by @jxck__

  • Capability against
    • Native/Low API
    • Installable
    • Performance
    • Permission
    • Offline
    • etc
  • The Extensible Web Manifesto : https://extensiblewebmanifesto.org/
  • Service Worker
    • Service Worker is API for Offline Support
    • Service Worker is Platform for New Capability
  • Proxy としての Service Worker
    • データのfetchなどを一旦 ServiceWorker がフック。キャッシュにあればそちらを利用し、なければ実際にfetchしてキャッシュに突っ込んでおく
  • Pusher としての Service Worker
  • TaskManager としての Service Worker
    • オフライン時に行われたアクションを覚えておき、回線が復活したときにサーバー側に同期する
    • onsync !== on-line/offline
  • ブラウザやタブが開いてなくても使える
  • 中級者向け Service Worker Tutorial | blog.jxck.io : https://blog.jxck.io/entries/2016-04-24/service-worker-tutorial.html
Foreign Fetch
  • 3rd Party が自分たちのサービス(JS)とそれに付随するService Workerを提供できるようにする仕組み
  • サブドメインを分けることで SW の責務を分けることができるようになった
  • Navigation Preload
    • fetch 時に Service-Worker-Navigation-Preload: true でリクエストすると、SW の起動を待たずに fetch できる


AMA: Progressive Web Apps

PWA化することによって改善される問題・PWA化のタイミング · Issue #4 · insidefrontend/issue1-ama
  • PWA 化のタイミングについては難しいが、SW は「使える環境であればより便利になるが、なくても普通に動く」ように作るべき
ChromeのブラウザPush通知 / Progressive Web Apps · Issue #12 · insidefrontend/issue1-ama
  • いきなり通知送る実装にしていることにも問題あり。Slack とかはうまくやっている
  • SW はドメイン単位で ON/OFF されるので、通知うざいからって無効化されると今後通知以外の実装を行ったときも使ってもらえない
  • 「再エンゲージとかにこだわる必要ない」はあくまであなたのユースケースであることに注意。それから、今の Web はユースケースよりも Capability を重視している
    • 例：エンゲージを高めるために SW を実現する（ユースケース）、SW というものを実現すると何かできることが増えるはず（Capability）


Web フロントエンドにおけるコンポーネント化のアプローチ by @1000ch

  • CSS のスタイルガイド
    • プロジェクトUIのドキュメントとして
    • デザイナーとの協業手段として
      • 理想：プロジェクトUIの整理や再利用のため
      • 現実：メンテされない
    • -> 何を解決すればいいのか本質的に見えてなかった
  • コンポーネントとはいったいなんなのか
  • コンポーネントの価値
    • デザインにおいてはUIの一貫性・統一性
    • ソフトウェアにおいては再利用性
  • これまでの問題点
  • これまでのワークフロー:
    • (Design) デザインデータを参考にする→デザインデータを更新する→
    • (Dev)HTML+CSSで再現する→スタイルガイドを更新する
    • → 誰がメンテナンスする問題
  • 協働のためのデザイン思考の再構築 : could : http://www.yasuhisa.com/could/article/ddd-ooux-job/
  • CSS のスコープ問題
    • HTML&CSS にはスコープがない
    • スコープが欲しい
      • CSS Modules, CSS in JSといった技術的に解決する方法と、Shadow DOM という仕様で解決する方法


アメブロ2016: 実録、アメブロフロントリニューアル275日


karmaを使ったSPA向けのE2Eテスト技法 by @kyo_ago

  • はじめに：「E2E テスト」より「Integration テスト」のほうが言葉としては適切
  • 伝えたいこと：SPA のテストにWebDriverは向かない
  • WebDriver
    • Selenium から発展したツール
    • ブラウザ
    • 2004年から始まる歴史あるツール
  • なぜ向かないか
    • あくまで画面を遷移していく「Webサイト」のためのツールだから
    • Driver によっては Dev Tools と競合（Dev Tools を同時に使えない状況でテストはつらい）
    • ターミナルだと console.log(obj) しても [Object] としか表示されなくてつらい
  • SPA の Integration テストには Karma
    • 元は AngularJS 用に開発されたが、現在は汎用的なツール
    • Protractor とは違う（Protractor はWebDriver 系）
  • Karma?
    • Unit テストがブラウザ上で動く
    • ver 1.0.0 で追加された customContextFile
    • HTMl に Unit テストを
  • Karma v1.0.0から登場したcustomContextFile。Unit テストをHTMLに埋め込むことができるので、実際のサイト上でテストを走らせるかのように書ける。ただしlocalhost
  • localhost 問題をどうするか
  • WebDriverは受け入れ用のテストツール、karmaは開発者向けのテストツール
  • おまけ：E2Eテストの指すもの
    • E2Eは対象範囲の話で、目的の話はしていない
    • 検証のため？開発のため？


AMA: React.js

自分が質問した内容。Redux でつらいこと2点

どこまでが Redux state で、どこまでが React の State か悩みます
  1. ほとんど Redux state に寄せているが、チェックボックスやラジオボタンの状態ぐらいだと React state で良いかも。ただその判断基準は明確でないので、そのせいで判断に困ることが多くなるようであれば思い切って Redux に全部寄せるのはあり。
ビジネスロジックをどこに閉じ込めてますか？
  1. Redux とは関係なく扱うリソースごとに Model みたいなのを定義している。Model を Redux に乗せている、というイメージ


JSON Schema in Web Frontend by @pirosikick

終わった後に質問してみた：
react-jsonschema-form で逆にできないこと（どうしてもカスタマイズできないこと）はありますか？
A. バリデーションエラー時のメッセージがカスタマイズできない（多言語化できない？）ので、かなり無理矢理実装することになる。


参加できなかったセッションの資料

データビジュアライゼーションの作り方

shimizu’s Blocks - bl.ocks.org：D3 のサンプル集として参考になりそう