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


ブラウザの互換性が保障されない

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


モバイルブラウザ対応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


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


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


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

関数の特定のキーを共有するリソースのアーカイブに使用


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 （実行コンテキスト）


Scope4EC 生成をコンパイラが処理するための設計図 ― 関数の Scope


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;



Scope4Parent ― 環境関数の EC



function global(){function test( a, b ){

var c, d;}}

global();

function environmentalFunction(){function concreateFunction(){}concreateFunction.scope.parent = environmentalFunction_EC1;}

environmentalFunction();environmentalFunction_EC1 = {...};


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!

tech talk about js #0

Technology