Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド全身ちぎれ節/BIT VALLEY -INSIDE- Vol4
Search
Satoshi Takeda
November 12, 2018
0
56
フロントエンド全身ちぎれ節/BIT VALLEY -INSIDE- Vol4
支えなくて良い技術を支える技術
2018-12-12 BIT VALLEY -INSIDE- Vol.4
Satoshi Takeda
November 12, 2018
Tweet
Share
More Decks by Satoshi Takeda
See All by Satoshi Takeda
フロントエンド、私的リリース戦略史 / Connehito Marche Online Front-End release strategy
tkdn
0
67
週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4
tkdn
2
1.3k
mediba におけるフロントエンド, JavaScript / mediba & JavaScript development
tkdn
0
650
未学習領域におけるチーム{学習,プレイ}とは /au Web portal frontend, BIT VALLEY -INSIDE- Vol.8
tkdn
2
3.3k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
63
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Navigating Team Friction
lara
181
13k
Practical Orchestrator
shlominoach
185
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Automating Front-end Workflow
addyosmani
1362
200k
Designing the Hi-DPI Web
ddemaree
276
34k
BBQ
matthewcrist
82
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Documentation Writing (for coders)
carmenintech
63
4.2k
Transcript
フロントエンド 全身ちぎれ節 支えなくて良い技術を支える技術 2018-12-12 BIT VALLEY -INSIDE- Vol.4
Satoshi Takeda @tkdn 株式会社 mediba au パートナー本部 au サービス開発部 フロントエンドエンジニア
" ブラウザが主戦場 "
本日話すこと 1. 「支えなくて良い技術」とは 2. 支えなくて良い技術を支えていく技術 how 1: webpack + Babel
how 2: 不足しているネイティブ API how 3: OS 固有バグとの付き合い方 3. まとめ・言いたいこと
1. 「支えなくて良い技術」とは deprecated, obsoleted な技術 例えば
TLS 1.0/1.1 TLS 1.0/1.1 のサポート停止
これによって対応出来なくなる ブラウザ OS ・ブラウザ Android 2.x - 4.x
弊社 大人の事情でまだまだ支えている
対応は辛い 端末やOS 由来によるバグチケット かさむ工数 たまっていくカルマ ⬇ 開発体験 DX の悪化
このカルマを燃やすために エンジニアリングでなんとかする
ゴール レガシー端末をフォローしていくことに疲れない 開発者が(ある程度)意識せずコーディング・オペレーションできる 自動化できることは自動化し開発体験を良くしたい
how 1: webpack + Babel webpack => モジュール解決のためのバンドラー Babel =>
ES2015~ の構文を解釈し ES5 相当に変換 babel-preset-env => browserslist が提供する DSL に従い、サポートブラウザを記述する
{ { "browserslist" "browserslist": : [ [ // Android 2.1
以上に最適化 // Android 2.1 以上に最適化 "Android >= 2.1" "Android >= 2.1", , // iOS 8 以上に最適化 // iOS 8 以上に最適化 "iOS >= 8" "iOS >= 8", , ] ] } } ターゲットブラウザに準じた変換が可能
export export default default class class Human Human { {
constructor constructor( (name name) ) { { this this. .name name = = name name || || "Tom" "Tom"; ; } } eat eat( (food food) ) { { console console. .log log( (` `${ ${this this. .name name} } eats eats ${ ${food food} }` `) ); ; } } } } こんなのが
exports exports. .__esModule __esModule = = true true; ; var
var Human Human = = ( (function function( () ) { { function function Human Human( (name name) ) { { _classCallCheck _classCallCheck( (this this, , Human Human) ); ; this this. .name name = = name name || || "Tom" "Tom"; ; } } Human Human. .prototype prototype. .eat eat = = function function eat eat( (food food) ) { { console console. .log log( (String String( (this this. .name name) ) + + " eats " " eats " + + String String( (food food) )) ); ; } }; ; return return Human Human; ; } }) )( () ); ; exports exports. .default default = = Human Human; ;
だがしかし。 このままでは Android 2 系, 4.0 系までフォローできない ES5 相当の JavaScript
ネイティブ API が不足している
やってやろうじゃねえか
how 2: 足りないネイティブ API を足す ES5 相当のネイティブ API を埋める es5-shim
を依存として追加しファイルにバンドルさせる es-shims/es5-shim: ECMAScript 5 compatibility shims for legacy (and modern) JavaScript engines
これでもう大丈夫やろ…( ;´ ∀`) これでもう大丈夫やろ…( ;´ ∀`)
「一部の Android 2 系では ES3 相当の記述をしないと対応出来ない」
まじかよ…( ;´ ∀`) まじかよ…( ;´ ∀`)
object のプロパティが 予約語となる場合エラーとなる...etc // 下記の構文がエラーとなる // 下記の構文がエラーとなる var var obj
obj = = { { class class: : true true } }; ; var var obj obj. .class class = = true true; ; // こうしないとだめ // こうしないとだめ var var obj obj = = { { "class" "class": : true true } }; ; var var obj obj[ ["class" "class"] ] = = true true; ;
ES3 相当に書き換える必要がある Branches · sophiebits/es3ify 最終的な生成ファイルをリビルドするスクリプトを書いた
ファイルサイズ膨れ上がってきたんだが…( ;´ ∀`) ファイルサイズ膨れ上がってきたんだが…( ;´ ∀`) ここまでやったんならさすがにもう大丈夫やろ…( ;´ ∀`) ここまでやったんならさすがにもう大丈夫やろ…(
;´ ∀`)
OS 固有のバグ
OS 固有のバグ Uncaught TypeError: Cannot assign to read only property
'__esModule' of #<Object> なにこれ…( ;´ ∀`) 任意の構文からJavaScript オブジェクトへ直接的なプロパティ書き込みが 出来ないというエラー内容
1530 - De ning function's 'prototype' property with Object.de neProperty
sets different value and makes property immutable - v8 - Monorail
出処 Android 4.0.x に搭載された JavaScript エンジン V8 のバグ起因 V8 のバージョンまで特定は出来ないが、Android
4.0.3, 4.0.4 の標準ブラウ ザもしくは webview の V8 JavaScript エンジンではバグを持ったまま実装 されている。なお 2.x 系ではバグは起きない
どうしたもんか
回避パッチで何とかなりそう
// Android 4.x support // Android 4.x support var var
defineProperty defineProperty = = Object Object. .defineProperty defineProperty; ; Object Object. .defineProperty defineProperty = = function function ( (exports exports, , name name) ) { { if if ( (name name === === '__esModule' '__esModule') ) { { exports exports[ [name name] ] = = true true; ; return return; ; } } return return defineProperty defineProperty. .apply apply( (this this, , arguments arguments) ); ; } }; ; パッチを差し込むプラグインを作った 無事に動いた…
紹介しきれませんがでも他にも OS 固有のバグが多くあります… OS 固有バグは網羅すること自体が人智を越えているため、トライ& エラ ーとナレッジの共有しかない
まとめ ターゲットブラウザを明示し設定、意識せずコーディング 不足した API は適宜 poly ll, shim を足し込んでフォロー OS
固有のバグは知見でしかない、ぶつからないと分からない 全身ちぎれて血まみれになりながらまとめた
考えていくべきこと 紹介したことはいずれ価値のなくなるハック ユーザがセキュアな環境で通信出来ない事自体をきちんと考える レガシー対応に引きずられてサービスグロースの足を引っ張らないと良 い
支えなくて良い技術を支える 少なくともユーザがいる限りは フロントエンドの技術で支えきる