Tech Talk 19.06.2013 @ GlobalLogic (Lviv): "Ирония автоматизации"
tech talk about JS #0
-
Upload
hika-maeng -
Category
Technology
-
view
265 -
download
1
description
Transcript of tech talk about JS #0
1
マルチデバイス対応を踏まえたフロントエンド開発事情
SCIVONE Tech Talks#0
Hika Maeng 株式会社クイン代表取締役、 Bsidesoft CEO
本日のアウトライン
SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
実務面でのオープンソースライブラリの課題
コーディング戦略
JavaScript の特徴を活かそう
実務面でのオープンソースライブラリの課題SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
継続的なブラウザの更新に対応できない
初期開発時 時間経過
2011, IE9, jQuery 1.3 2013, IE10, jQuery 1.9
jQuery を更新するAPI の不一致、変更が原因で、サイト全体を見直す必要が出てくる
jQuery を更新しない新しいブラウザの特性に対応しておらず、パフォーマンスとセキュリティの問題が発生
1
実務面でのオープンソースライブラリの課題SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
ブラウザの互換性が保障されない
IE8 IE9 IE10
HTML5 標準対応を機に、ほとんどの古いブラウザのサポートが終了たとえば、 jQuery が Internet Explorer 6 ~ 8 をサポートするのは 1.9 まで。
しかし現実には、無視できないシェア
12.44% 22.27% 15.67%
statCounter:http://gs.statcounter.com/#browser_version-JP-monthly-201301-201310-bar
2
実務面でのオープンソースライブラリの課題SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
モバイルブラウザ対応31. iPhone - 8Safari - 5.x, 6.x, 7.xOpera, mini,Chrome, FirefoxFacebook
2. iPad – 8
3. Andorid - 30NativeBrowser – 30over,Chrome
4. smartTV, Android Tablet – 10over
50over
iconfinder.com
コーディング戦略SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
$( ‘#stage’ ).css( ‘width’, 30 );
function css( $selector, $k, $v ){$( $selector ).css( $k, $v );}
css( ‘#stage’, ‘width’, 30 );
function css( $selector, $k, $v ){var dom = Sizzle( $selector );dom.style[$k] = $v + ‘px’;}
css( ‘#stage’, ‘width’, 30 );
ラッピング ライブラリを包括するレイヤーを構成して使用
実際の具現化には
オープンソースの課題ライセンス問題、技術サポート、機能の追加、制御されていない開発チーム
自前で実装する場合の課題膨大な開発コスト、深い知識、メンテナンスコスト
7
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
DOM Wrapper1 Hash Map2
Prototype3 Scope4
HTML System
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
DOM Wrapper1
Tag Element
Context Object
<canvas id=”c1”> <style id=”s1”>
c1 = document.getElementById('c1');context = c1.getContext('2d');context.draw(..);
s1 = document.getElementById('s1');sheet = s1.sheet;sheet.rules.insertRule(...);
HTML System
Tag Element
ContextObject
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
Hash Map2自由に Key 、 Value の追加削除ができる
JavaScript 内のすべてのオブジェクトは HashMap オブジェクトではないもの: Primitive参照されずにコピーされるstring, number, boolean, NaN, undefined, null
var temp = {};temp.newKey = 3;delete temp.newKey;
var temp = function(){};temp.a =3;temp = new Date;temp.b = 3;temp = [3,4,5];temp.c = 3
keys hashfunction hashes
00
01
02
03
04
00
http://en.wikipedia.org/wiki/Hash_table
John Smith
Lisa Smith
Sam Doe
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
Prototype3クラスがない共有リソース(メソッド、フィールド)を保管する場所がない
var temp = function(){};temp.prototype = {};
prototype keyChainnew でオブジェクトを作成すると、指定された関数の prototype を共有する
var func = function(){}; func.prototype = { test:function(){}}
var a = new func;
var a = {};a.__proto__ = func.prototype;var temp= func.apply( a, arguments );if( typeof temp == 'object' ) a = temp;
a.test();a['test'] == undefined a.__proto__.test == func.prototype.test
関数の特定のキーを共有するリソースのアーカイブに使用
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
Scope4関数の実行時に、Execution Context ( EC )を作成
function test( a, b ){var c, d;}
test( 3, 4, 5 );
testEC1 = {this:window,arguments:[3,4,5],a:3, b:4,c:undefined, d:undefined,parent:??}
test( 6 );
testEC2 = {this:window,arguments:[6,undefined],a:6, b:undefined,c:undefined, d:undefined,parent:??}
EC : Execution Context (実行コンテキスト)
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
Scope4EC 生成をコンパイラが処理するための設計図 ― 関数の Scope
function test( a, b ){var c, d;}
test.call( {k:3}, 3, 4, 5 );
testEC1 = {this:{k:3},arguments:[3,4,5],a:3, b:4,c:undefined, d:undefined,parent:??}
test.scope = {arguments:['a','b'],locals:['c','d'],parent:??}
arg = scope.arguments;for( i = 0 ; i < arg.length ; i++ ){key = arg[i];testEC1[key] = testEC1.arguments[i];}
locals = scope.locals;for( i = 0 ; i < locals.length ; i++ ){key = locals[i];testEC1[key] = undefined;}
testEC1.parent = scope.parent;
EC : Execution Context (実行コンテキスト)
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
Scope4Parent ― 環境関数の EC
EC : Execution Context (実行コンテキスト)
function test( a, b ){var c, d;}
function global(){function test( a, b ){
var c, d;}}
global();
function environmentalFunction(){function concreateFunction(){}concreateFunction.scope.parent = environmentalFunction_EC1;}
environmentalFunction();environmentalFunction_EC1 = {...};
JavaScript の特徴を活かそうSCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
Scope4Scope Key Chain
function ev(){var data = "hello";return function c( $data ){
console.log( 'origin:', data, 'new:', $data );
data = $data;}}
var c = ev();c( "aloha" );c( "bye" );
var c = ev();
ev_EC = {this:window,arguments:[],data:'hello'} = c.scope.parent
c( "aloha" );
c_EC1 = {this:window,arguments:["aloha"],$data:'aloha',parent:c.scope.parent}
c_EC1.data == undefinedc_EC1.parent.data = 'hello'
origin: hello, new: aloha
c_EC1.parent.data = c_EC1.$data= 'aloha'
c( "bye" );
c_EC2 = {this:window,arguments:["bye"],$data:'bye',parent:c.scope.parent}
15
ご清聴ありがとうございました。
Enjoy Your Happy Dev Life!