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
73
フロントエンド全身ちぎれ節/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
93
週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4
tkdn
2
1.4k
mediba におけるフロントエンド, JavaScript / mediba & JavaScript development
tkdn
0
780
未学習領域におけるチーム{学習,プレイ}とは /au Web portal frontend, BIT VALLEY -INSIDE- Vol.8
tkdn
2
3.5k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Thoughts on Productivity
jonyablonski
69
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
BBQ
matthewcrist
89
9.7k
Facilitating Awesome Meetings
lara
54
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Raft: Consensus for Rubyists
vanstee
137
7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Faster Mobile Websites
deanohume
307
31k
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
固有のバグは知見でしかない、ぶつからないと分からない 全身ちぎれて血まみれになりながらまとめた
考えていくべきこと 紹介したことはいずれ価値のなくなるハック ユーザがセキュアな環境で通信出来ない事自体をきちんと考える レガシー対応に引きずられてサービスグロースの足を引っ張らないと良 い
支えなくて良い技術を支える 少なくともユーザがいる限りは フロントエンドの技術で支えきる