tech talk about JS #0

497 views

Published on

マルチデバイス対応を踏まえたフロントエンド開発事情 本日のアウトライン 実務面でのオープンソースライブラリの課題 コーディング戦略 JavaScript の特徴を活かそう

Published in: Technology
  • Be the first to comment

  • Be the first to like this

tech talk about JS #0

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

×