Skip to content

Instantly share code, notes, and snippets.

@2no

2no/inside-frontend-vol1.md

Last active February 27, 2017 04:42
Show Gist options
  • Save 2no/c60a29b27dbbc11cc7164146d1955487 to your computer and use it in GitHub Desktop.
Save 2no/c60a29b27dbbc11cc7164146d1955487 to your computer and use it in GitHub Desktop.
Download ZIP
Inside Frontend Vol.1
Raw
inside-frontend-vol1.md

Inside Frontend Vol.1

Web over ServiceWorker

@jxck

Web vs PC App

これまで

Web vs Mobile

主戦場

Breakdown of Time Spent on Mobile Devices

Apps: 90% Mobile: 10%

Capability against

  • Native/Low API
  • Installable
  • Performance
  • Permission
  • Offline
  • etc

演算処理は JS だけだとキツイ
意図的に出来ることを減らしている
モバイルはネットワークに左右される

Low レベルの API をブラウザから叩ける -> 2015 年くらいの話

The Extensible Web
Sandbox 化して安全に使う

  • Infra
  • Streams
  • Encoding
  • URL
  • Fetch
  • Web Bluetooth
  • WebUSB API
  • Credential Management Level 1
  • Payment App API

これらの一つに Service Worker

https://mozaic.fm/episodes/17/service-worker.html

What's for ?

Offline Support の為ではない
隙間を埋めるためのもの
もう一つのプラットフォームを提供するもの

利用例

  • Proxy (キャッシュの保存など)
  • Pusher
  • TaskManage
    ネットワークが回復してもバッテリーが切れるかもしれない。
    あくまでもネットワークの有無だけで判断してはならない。
  • Worker
    onmessage

App Shell

変更箇所以外はキャッシュ
それ以外は Service Worker

onfetch -> fetch() -> article (get() & merge -> Cache API) -> respondWith() (Browser Cache)

Life Cycle

Window や Tab とはまったく違う

https://blog.jxck.io/entries/2016-04-24/service-worker-tutorial.html

Updates

Foreign Fetch

一クライアントに一つしか動かないが、レスポンスにヘッダを付けるだけで、3rd Party の Service Worker が扱えるようになる
Push 用、Sync 用、Proxy 用など、サブドメインを用いることでサービスを分けることが出来る。

Android APK

Build APK then Install

Web アプリが Android アプリとしてインストール出来るようになる。
manifest ファイルが必要

Navigation Preload

fetch
Service-Worker-Navigation-Preload: true

リクエスト投げて、並行して Service Worker を立ち上げて、よしなに処理をする

Background Fetch

大きい音声ファイルをダンロードすると、Service Worker が寝ることがある。それを防げる

Q1/Q2

  • A2HS
  • WebAPKs
  • Background Fetch
  • Silent Push
  • QR Code Scan
  • Web Share
  • Origin Trials v2
  • 2F-Auth

「Platform as a ServiceWorker」

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

@1000ch

少し前はスタイルガイドがあったが、何を解決すれば良いのか本質的に見えてなかった

コンポーネントとは一体何なのか

Web クライアントサイドにおけるコンポーネント？

最終成果物の価値を左右し得るもの

これまでの問題点

  • コンポーネントの管理手段の問題
  • クライアントサイド実装の溝問題
  • コンポーネントを実現する上での技術問題

HTML+CSS で作成するスタイルガイドはどうなのか

コンポーネントの管理手段の問題

コンポーネントドリブンはデベロッパ向け

Sketch import Symbols

https://github.com/kmerc/sketch-import-symbols

クライアントサイド実装の溝問題

協働のためのデザイン思考の再構築

http://www.yasuhisa.com/could/article/ddd-ooux-job/

エンジニアは部品単位で作り上げていく

デザイナーは実装を理解し、エンジニアはデザインを理解せよ

HTML+CSS にはスコープがない

CSS はスコープがなく、脆く壊れやすい言語

  • 可搬性がない、これに尽きる
  • CSS 設計は最低限のスパゲティ対策にすぎない

CSS は設計を工夫してもデザイン次第で破綻する

CSS Modules と CSS in JS

CSS ファイルを import で参照する

.style {
  color: red;
}

import styles from "./style.css";
element.innerHTML = '<input class="${styles.className}">';

jss も似た様な物

Shadow DOM

  • スコープの実現
  • Custom Elements による要素の再定義

まとめると

  • コンポーネントはソフトウェアの品質に関わる
  • スタイルガイドで顕在化した問題
  • クライアントサイド実装に関わる人の協力が不可欠

協業実践に向けた方針

  • 職能同士の歩み寄り at 現場
  • 一方通行な開発にならないための説得材料の提示
  • 先人に学ぶ

職能の歩み寄り at 現場

  • 説得材料の交換
  • お互いの作業を小さく分担

トップダウンな話

  • ステークホルダーとの合意形成
  • デザインシステムを評価する精度
  • 組織やプロジェクトのブランディング

ボトムアップな話

  • 現場手動の草の根活動
  • 手法・フレームワークの導入

Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/

識者に学ぶ

Refactoring CSS: 管理されたカオスへの道のり

@hiloki @cssradar

保守しやすく
拡張しやすい

CSS におけるリファクタリングは難しい

  • UI の変更頻度と変更速度
  • 影響範囲の広さ
  • テストを書くことが難しい

ROI...?

Refactoring When? リファクタリングは何時するのか？

Always be Refactoring

常にリファクタリング

どのタイミングでリファクタリングするのか？
-> 機能実装前、バグ修正時

コメントを残す

Code Smells

不吉な匂い

https://csswizardry.com/2012/11/code-smells-in-css/

Rule of Three

1, 3, _, _, _
1, 3, 5, _, _

3つぐらい待ってリファクタリングしよう

命名規則を変えるのはリファクタリングの範疇ではない
その規則に沿って居ないならリファクタリングする必要あり

Continuous Refactoring

継続的にリファクタリング

技術的負債の返済時

Refactoring How? リファクタリングはどうやるのか？

リファクタリング中はそれだけをする

問題は小さく砕いて解決する

Atomic Design

元のソースコードは消さない

リファクタリングの対象になるセレクタに対して接頭辞を付ける
例） .RF_*

[class*="RF_"] {
  all: initial;
  /* ... */
}

ドキュメント

情報共有は重要

ドキュメンテーション≠スタイルガイド

Refactoring Tips リファクタリングのコツ

技術的負債のご利用は計画的に

技術的負債≠古いコード
技術的負債≠汚いコード

戦略的で、意識的な『ショートカット』

短期的な目標だけではなく中長期的な視点を持つ

負債を明確にする設計

2013年
schame.css
by Harry Roberts

コメントを確実に、そして詳しく記載する

  • コードベースの何処に関連しているのか？
  • 何故必要だったのか？
  • どうやって問題を解決しているのか？
  • 負債返済の条件

命名規則:
._ (アンダースコア)

(ちゃんと)
コメントを残す

karma を使った SPA 向け E2E テスト技法

@kyo-ago

今回の話は、E2E テストではなく、Integration テスト

今回伝えたいこと

SPA のテストに WebDriver は向かない

WebDriver とは

Selenium から発展したツール

2004 年から開発
歴史ある E2E の鉄板ツール

SPA を WebDriver でテストしにくい

通常の開発ツールとは違う

JSON Wire Protocol

Node context と Browser context の分断

Driver によっては Developer Tools と競合

console.log の内容が terminal でしか確認できない
Object の中身が分からない

SPA の場合、これらのツールが使えないのは非常に難しい

WebDriver はクリックや待機などの動きを持つ

SPA では通常これらの機能は使用しない

SPA の Integration テストには karma

もともとは AngularJS のテスト用だったが、汎用的に使えるツールとなった
まだまだ開発は活発

Protractor とは違う

ブラウザ上で動く Unit テストランナー

Ver 1.0.0 で追加された機能の紹介

customContextFile

テストを指定された HTML 上で行う機能

%SCRIPTS% に karma.conf.js の File が展開される

まるでサイト上で Unit test を走らせているかのように書ける

読み込み場所がローカルホスト

実際テストしたいドメインで読み込まれるわけではない

  1. 通信の書き換え

Local proxy を使う

$ npm install --save-dev karma-proxy-plugin

  1. 通信の向け先の変更

base 要素でやればよい

  • Referer を書き換えたい
  • Cookie を書き換えたい
  • リダイレクト先を変更したい

WebGL/WebVR for FrontEnd Engineer

@yomotsu

three.js

大きなコミュニティが有り盛ん
ドキュメント、サンプルが多い
簡単な書き方
Low レベルの API にアクセス出来る

リビジョンで管理されている
gc がトリッキー

Re-rendering may unnecessary

色んなレンダリングを止める

three.js のサンプルをまま動かすと、絶えずレンダリングしている
更新があるときだけレンダリングさせるのがベター

本当にレンダリングが必要かどうかをフラグ管理する

Merge geometries

不要な draw call を止める

テクスチャをまとめる

WebGL inspector

Bad: Replacing image

CPU から GPU へテクスチャデータを送リ続ける
なので、テクスチャデータをまとめる

（この辺りあまり聞いてなかった）

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment