SlideShare a Scribd company logo
1 of 24
Download to read offline
Andrew & Aaron present:




          The Future
         of JavaScript
JavaScript 1.6


    Based on ECMA-262, edition 3
●




    Implemented in Firefox 1.5
●




    Added
●




        ECMAScript for XML (aka E4X; ECMA-357)
    –

        Array extras
    –

        Array and String generics
    –
Array extras


    Location methods:
●



        indexOf()
    –

        lastIndexOf()
    –


    Iterative methods:
●



        every()
    –

        filter()
    –

        forEach()
    –

        map()
    –

        some()
    –
Iteration examples


 var ids = [ 1, 2, 3 ];
 var els = ids.map( function( i ){
      return document.getElementById( 'item_' + i ); } );
 for( var i = 0; i < els.length; i++ ){
   els[i].style.border = '1px solid';
 }

 and
 var lis = document.getElementsByTagName( 'li' );
 var evenLis = Array.filter( lis,
               function( li, i ){ return i % 2 == 1; } );
 for( var i = 0; i < evenLis.length; i++ ){
   evenLis[i].style.background = '#ccc';
 }
JavaScript 1.7


    Based on ECMA-262, edition 3
●




    Includes JS1.6 enhancements
●




    Introduced
●




        Generators & Iterators
    –

        Array comprehensions
    –

        Block scope variables
    –

        Destructuring assignment
    –
Using JS 1.7


    Implemented in Firefox 2 only
●




    Enable via MIME type:
●




    <script type="application/javascript;version=1.7">
      // code goes here
    </script>

    or
    <script type="application/javascript;version=1.7" »
            src="/path/to/my.js"></script>
Traditional iterative generation


 for( var i = 1; i < 4; i++ ){
   var ul = document.createElement( 'ul' );
   for( var j = 1; j <= i; j++ ){
     var li = document.createElement( 'li' );
     li.appendChild( document.createTextNode( j ) );
     ul.appendChild( li );
   }
   document.getElementsByTagName( 'body' »
                                  )[0].appendChild( ul );
 }
Which gives us


    1
●




    1
●




    2
●




    1
●




    2
●




    3
●
Optimized iterative generation


 var $ul = document.createElement( 'ul' );
 var $li = document.createElement( 'li' );
 for( var i = 1; i < 4; i++ ){
   var ul = $ul.cloneNode( true );
   for( var j = 1; j <= i; j++ ){
     var li = $li.cloneNode( true );
     li.appendChild( document.createTextNode( j ) );
     ul.appendChild( li );
   }
   document.getElementsByTagName( 'body' »
                                   )[0].appendChild( ul );
 }
Generator-Iterators


 function $el( tag ){
   var el = document.createElement( tag );
   while( true ){
     yield el.cloneNode( true );
   }
 }
 var $ul = $el( 'ul' ), $li = $el( 'li' );
 for( var i = 1; i < 4; i++ ){
   var ul = $ul.next();
   for( var j = 1; j <= i; j++ ){
     var li = $li.next();
     li.appendChild( document.createTextNode( j ) );
     ul.appendChild( li );
   }
   document.getElementsByTagName( 'body' »
                                  )[0].appendChild( ul );
 }
Straight Iteration


 var me = { name: 'Aaron Gustafson', age: 29,
             'eye color': 'blue', height: '5ft 11in' };
 var it = Iterator( me );
 var ul = $ul.next(), li;
 try{
   while( true ){
      li = $li.next();
      li.appendChild( document.createTextNode( »
                                            it.next() ) );
      ul.appendChild( li );
   }
 }catch( err if err instanceof StopIteration ){
   document.getElementsByTagName( 'body' »
                                   )[0].appendChild( ul );
 }catch( err ){
   alert( 'error: '+err.description );
 }
Which gives us


    name,Aaron Gustafson
●




    age,29
●




    eye color,blue
●




    height,5ft 11in
●
Alternation


 var li = document.getElementsByTagName( 'li' );
 for( var i = 0; i < li.length; i++ ){
   if( i % 2 == 0 ){
     li[i].className = 'even';
   }
 }
Generators and array creation


 function range( start, end ){
   for( var i = start; i < end; i++ ){
     yield i;
   }
 }

 var li = document.getElementsByTagName( 'li' );

 var evens = [i for ( i in range( 0, li.length ) ) »
                if ( i % 2 ==0 ) ];

 for( num in evens ) li[evens[num]].className = 'even';
let is the new black


     Only way we currently get block scope:
●




    function foo(){
      var x = 5;
      ( function(){
          var x = 10;
          alert( x );   //-> 10
        } )();
      alert( x );       //-> 5
    }
let blocks


function foo(){
  var x = 5;
  let( x = 10 ){
    alert( x );        //-> 10
  }
  alert( x );          //-> 5
}

    or if you wanna get really crazy
●



function foo(){
  var x = 5;
  let( x = x + 5 ){
    alert( x );        //-> 10
  }
  alert( x );          //-> 5
}
let expressions


function foo() {
  var x = 5;
  alert( let( x = 10 ) x ); //-> 10
  alert( x );               //-> 5
}
let in loops


for( let i = 0; i < array.length; i++ )
  doSomethingWith( array[i] );

alert( i ); //-> undefined

or
for( let i   = 0, subArray; i<array.length; i++ ){
  subArray   = array[i];
  for( let   i = 0; i < subArray.length; i++ )
    alert(   subArray[i] );
}
Like a key party in your code


    Destructuring assignment:
●




    var a = 1;
    var b = 2;
    [a, b]= [b, a];

    or
    var [c, d] = [a, b];
Return with greater flexibility


    We’ve always been able to return arrays
●




    var result = returnsArray();
    var a = result[0];
    var b = result[1];


    But now
●




    var [a,b] = returnsArray();

    or even
    var [,b] = returnsArray();
That’s not all, let’s play with JSON


 var me = { name:          'Aaron Gustafson',
            age:           29,
            'eye color':   'blue',
            height:        '5ft 11in' };

 var ul = $ul.next();

 for( let [ key, value ] in me ){
   let li = $li.next();
   li.appendChild( document.createTextNode( 'Key: ' +
                     key + ', Value: ' + value ) );
   ul.appendChild( li );
 }

 document.getElementsByTagName( 'body' »
                                )[0].appendChild( ul );
Resulting in


    Key: name, Value: Aaron Gustafson
●




    Key: age, Value: 29
●




    Key: eye color, Value: blue
●




    Key: height, Value: 5ft 11in
●
Or iterate safely over an Object


 Object.prototype.HAHAHA = "I AM THE HASH DESTRUCTOR";

 for( let [ key, value ] in me )
   alert( key ); /* 'name', 'age', 'eye color',
                    'height', 'HAHAHA' */

 function SafeHashIterator( hash, keysOnly ){
   for( let [key, value] in hash ){
     if( !hash.hasOwnProperty( key ) ) continue;
     yield keysOnly ? key : [key, value];
   }
   throw StopIteration;
 }

 for( let [key, value] in SafeHashIterator( me ) )
   alert( key ); // 'name', 'age', 'eye color', 'height'
So why should I care?

More Related Content

What's hot

Snake report ROHIT MALAV
Snake report ROHIT MALAVSnake report ROHIT MALAV
Snake report ROHIT MALAVRohit malav
 
MongoDB全機能解説2
MongoDB全機能解説2MongoDB全機能解説2
MongoDB全機能解説2Takahiro Inoue
 
PHP 7 – What changed internally? (Forum PHP 2015)
PHP 7 – What changed internally? (Forum PHP 2015)PHP 7 – What changed internally? (Forum PHP 2015)
PHP 7 – What changed internally? (Forum PHP 2015)Nikita Popov
 
MongoDBで作るソーシャルデータ新解析基盤
MongoDBで作るソーシャルデータ新解析基盤MongoDBで作るソーシャルデータ新解析基盤
MongoDBで作るソーシャルデータ新解析基盤Takahiro Inoue
 
Template Haskell とか
Template Haskell とかTemplate Haskell とか
Template Haskell とかHiromi Ishii
 
여자개발자모임터 6주년 개발 세미나 - Scala Language
여자개발자모임터 6주년 개발 세미나 - Scala Language여자개발자모임터 6주년 개발 세미나 - Scala Language
여자개발자모임터 6주년 개발 세미나 - Scala LanguageAshal aka JOKER
 
Webmontag Berlin "coffee script"
Webmontag Berlin "coffee script"Webmontag Berlin "coffee script"
Webmontag Berlin "coffee script"Webmontag Berlin
 
PHP 7 – What changed internally?
PHP 7 – What changed internally?PHP 7 – What changed internally?
PHP 7 – What changed internally?Nikita Popov
 
New text document
New text documentNew text document
New text documentPavel111212
 
Error Management: Future vs ZIO
Error Management: Future vs ZIOError Management: Future vs ZIO
Error Management: Future vs ZIOJohn De Goes
 
ios,objective tutorial
ios,objective tutorial ios,objective tutorial
ios,objective tutorial Bhavik Patel
 
LINQ Internals - STLDODN
LINQ Internals - STLDODNLINQ Internals - STLDODN
LINQ Internals - STLDODNKeith Dahlby
 

What's hot (18)

Snake report ROHIT MALAV
Snake report ROHIT MALAVSnake report ROHIT MALAV
Snake report ROHIT MALAV
 
MongoDB全機能解説2
MongoDB全機能解説2MongoDB全機能解説2
MongoDB全機能解説2
 
PHP 7 – What changed internally? (Forum PHP 2015)
PHP 7 – What changed internally? (Forum PHP 2015)PHP 7 – What changed internally? (Forum PHP 2015)
PHP 7 – What changed internally? (Forum PHP 2015)
 
MongoDBで作るソーシャルデータ新解析基盤
MongoDBで作るソーシャルデータ新解析基盤MongoDBで作るソーシャルデータ新解析基盤
MongoDBで作るソーシャルデータ新解析基盤
 
PHP and MySQL
PHP and MySQLPHP and MySQL
PHP and MySQL
 
MongoDB Oplog入門
MongoDB Oplog入門MongoDB Oplog入門
MongoDB Oplog入門
 
Rust ⇋ JavaScript
Rust ⇋ JavaScriptRust ⇋ JavaScript
Rust ⇋ JavaScript
 
Template Haskell とか
Template Haskell とかTemplate Haskell とか
Template Haskell とか
 
여자개발자모임터 6주년 개발 세미나 - Scala Language
여자개발자모임터 6주년 개발 세미나 - Scala Language여자개발자모임터 6주년 개발 세미나 - Scala Language
여자개발자모임터 6주년 개발 세미나 - Scala Language
 
Webmontag Berlin "coffee script"
Webmontag Berlin "coffee script"Webmontag Berlin "coffee script"
Webmontag Berlin "coffee script"
 
Functional programming with php7
Functional programming with php7Functional programming with php7
Functional programming with php7
 
Unfiltered Unveiled
Unfiltered UnveiledUnfiltered Unveiled
Unfiltered Unveiled
 
Living with garbage
Living with garbageLiving with garbage
Living with garbage
 
PHP 7 – What changed internally?
PHP 7 – What changed internally?PHP 7 – What changed internally?
PHP 7 – What changed internally?
 
New text document
New text documentNew text document
New text document
 
Error Management: Future vs ZIO
Error Management: Future vs ZIOError Management: Future vs ZIO
Error Management: Future vs ZIO
 
ios,objective tutorial
ios,objective tutorial ios,objective tutorial
ios,objective tutorial
 
LINQ Internals - STLDODN
LINQ Internals - STLDODNLINQ Internals - STLDODN
LINQ Internals - STLDODN
 

Viewers also liked

The Present and Future of JavaScript: ES2015 and Beyond
The Present and Future of JavaScript: ES2015 and BeyondThe Present and Future of JavaScript: ES2015 and Beyond
The Present and Future of JavaScript: ES2015 and BeyondNizar Khalife
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascriptShah Jalal
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptMichael Girouard
 
Sencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScriptSencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScriptRohan Chandane
 
TechCBT: JavaScript Arrays in Depth
TechCBT: JavaScript Arrays in DepthTechCBT: JavaScript Arrays in Depth
TechCBT: JavaScript Arrays in DepthTech CBT
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptDonald Sipe
 
Advanced Object-Oriented JavaScript
Advanced Object-Oriented JavaScriptAdvanced Object-Oriented JavaScript
Advanced Object-Oriented JavaScriptecker
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptStoyan Stefanov
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJungryul Choi
 

Viewers also liked (10)

The Present and Future of JavaScript: ES2015 and Beyond
The Present and Future of JavaScript: ES2015 and BeyondThe Present and Future of JavaScript: ES2015 and Beyond
The Present and Future of JavaScript: ES2015 and Beyond
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Sencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScriptSencha / ExtJS : Object Oriented JavaScript
Sencha / ExtJS : Object Oriented JavaScript
 
TechCBT: JavaScript Arrays in Depth
TechCBT: JavaScript Arrays in DepthTechCBT: JavaScript Arrays in Depth
TechCBT: JavaScript Arrays in Depth
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 
Advanced Object-Oriented JavaScript
Advanced Object-Oriented JavaScriptAdvanced Object-Oriented JavaScript
Advanced Object-Oriented JavaScript
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
 

Similar to The Future of JavaScript (SXSW '07)

Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Seri Moth
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxJeff Strauss
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
ECMAScript 6 new features
ECMAScript 6 new featuresECMAScript 6 new features
ECMAScript 6 new featuresGephenSG
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Lukas Ruebbelke
 
CoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love AffairCoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love AffairMark
 
How to write code you won't hate tomorrow
How to write code you won't hate tomorrowHow to write code you won't hate tomorrow
How to write code you won't hate tomorrowPete McFarlane
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScriptEyal Vardi
 
Damn Fine CoffeeScript
Damn Fine CoffeeScriptDamn Fine CoffeeScript
Damn Fine CoffeeScriptniklal
 

Similar to The Future of JavaScript (SXSW '07) (20)

ES2015 New Features
ES2015 New FeaturesES2015 New Features
ES2015 New Features
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
ES6(ES2015) is beautiful
ES6(ES2015) is beautifulES6(ES2015) is beautiful
ES6(ES2015) is beautiful
 
Elm: give it a try
Elm: give it a tryElm: give it a try
Elm: give it a try
 
Introduction to Groovy
Introduction to GroovyIntroduction to Groovy
Introduction to Groovy
 
Javascript
JavascriptJavascript
Javascript
 
Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6
 
ECMAScript 6 new features
ECMAScript 6 new featuresECMAScript 6 new features
ECMAScript 6 new features
 
JavaScript @ CTK
JavaScript @ CTKJavaScript @ CTK
JavaScript @ CTK
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015
 
Einführung in TypeScript
Einführung in TypeScriptEinführung in TypeScript
Einführung in TypeScript
 
CoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love AffairCoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love Affair
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
How to write code you won't hate tomorrow
How to write code you won't hate tomorrowHow to write code you won't hate tomorrow
How to write code you won't hate tomorrow
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScript
 
Damn Fine CoffeeScript
Damn Fine CoffeeScriptDamn Fine CoffeeScript
Damn Fine CoffeeScript
 

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekCzechDreamin
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxEasyPrinterHelp
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 

Recently uploaded (20)

WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 

The Future of JavaScript (SXSW '07)

  • 1. Andrew & Aaron present: The Future of JavaScript
  • 2. JavaScript 1.6 Based on ECMA-262, edition 3 ● Implemented in Firefox 1.5 ● Added ● ECMAScript for XML (aka E4X; ECMA-357) – Array extras – Array and String generics –
  • 3. Array extras Location methods: ● indexOf() – lastIndexOf() – Iterative methods: ● every() – filter() – forEach() – map() – some() –
  • 4. Iteration examples var ids = [ 1, 2, 3 ]; var els = ids.map( function( i ){ return document.getElementById( 'item_' + i ); } ); for( var i = 0; i < els.length; i++ ){ els[i].style.border = '1px solid'; } and var lis = document.getElementsByTagName( 'li' ); var evenLis = Array.filter( lis, function( li, i ){ return i % 2 == 1; } ); for( var i = 0; i < evenLis.length; i++ ){ evenLis[i].style.background = '#ccc'; }
  • 5. JavaScript 1.7 Based on ECMA-262, edition 3 ● Includes JS1.6 enhancements ● Introduced ● Generators & Iterators – Array comprehensions – Block scope variables – Destructuring assignment –
  • 6. Using JS 1.7 Implemented in Firefox 2 only ● Enable via MIME type: ● <script type="application/javascript;version=1.7"> // code goes here </script> or <script type="application/javascript;version=1.7" » src="/path/to/my.js"></script>
  • 7. Traditional iterative generation for( var i = 1; i < 4; i++ ){ var ul = document.createElement( 'ul' ); for( var j = 1; j <= i; j++ ){ var li = document.createElement( 'li' ); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
  • 8. Which gives us 1 ● 1 ● 2 ● 1 ● 2 ● 3 ●
  • 9. Optimized iterative generation var $ul = document.createElement( 'ul' ); var $li = document.createElement( 'li' ); for( var i = 1; i < 4; i++ ){ var ul = $ul.cloneNode( true ); for( var j = 1; j <= i; j++ ){ var li = $li.cloneNode( true ); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
  • 10. Generator-Iterators function $el( tag ){ var el = document.createElement( tag ); while( true ){ yield el.cloneNode( true ); } } var $ul = $el( 'ul' ), $li = $el( 'li' ); for( var i = 1; i < 4; i++ ){ var ul = $ul.next(); for( var j = 1; j <= i; j++ ){ var li = $li.next(); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
  • 11. Straight Iteration var me = { name: 'Aaron Gustafson', age: 29, 'eye color': 'blue', height: '5ft 11in' }; var it = Iterator( me ); var ul = $ul.next(), li; try{ while( true ){ li = $li.next(); li.appendChild( document.createTextNode( » it.next() ) ); ul.appendChild( li ); } }catch( err if err instanceof StopIteration ){ document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }catch( err ){ alert( 'error: '+err.description ); }
  • 12. Which gives us name,Aaron Gustafson ● age,29 ● eye color,blue ● height,5ft 11in ●
  • 13. Alternation var li = document.getElementsByTagName( 'li' ); for( var i = 0; i < li.length; i++ ){ if( i % 2 == 0 ){ li[i].className = 'even'; } }
  • 14. Generators and array creation function range( start, end ){ for( var i = start; i < end; i++ ){ yield i; } } var li = document.getElementsByTagName( 'li' ); var evens = [i for ( i in range( 0, li.length ) ) » if ( i % 2 ==0 ) ]; for( num in evens ) li[evens[num]].className = 'even';
  • 15. let is the new black Only way we currently get block scope: ● function foo(){ var x = 5; ( function(){ var x = 10; alert( x ); //-> 10 } )(); alert( x ); //-> 5 }
  • 16. let blocks function foo(){ var x = 5; let( x = 10 ){ alert( x ); //-> 10 } alert( x ); //-> 5 } or if you wanna get really crazy ● function foo(){ var x = 5; let( x = x + 5 ){ alert( x ); //-> 10 } alert( x ); //-> 5 }
  • 17. let expressions function foo() { var x = 5; alert( let( x = 10 ) x ); //-> 10 alert( x ); //-> 5 }
  • 18. let in loops for( let i = 0; i < array.length; i++ ) doSomethingWith( array[i] ); alert( i ); //-> undefined or for( let i = 0, subArray; i<array.length; i++ ){ subArray = array[i]; for( let i = 0; i < subArray.length; i++ ) alert( subArray[i] ); }
  • 19. Like a key party in your code Destructuring assignment: ● var a = 1; var b = 2; [a, b]= [b, a]; or var [c, d] = [a, b];
  • 20. Return with greater flexibility We’ve always been able to return arrays ● var result = returnsArray(); var a = result[0]; var b = result[1]; But now ● var [a,b] = returnsArray(); or even var [,b] = returnsArray();
  • 21. That’s not all, let’s play with JSON var me = { name: 'Aaron Gustafson', age: 29, 'eye color': 'blue', height: '5ft 11in' }; var ul = $ul.next(); for( let [ key, value ] in me ){ let li = $li.next(); li.appendChild( document.createTextNode( 'Key: ' + key + ', Value: ' + value ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul );
  • 22. Resulting in Key: name, Value: Aaron Gustafson ● Key: age, Value: 29 ● Key: eye color, Value: blue ● Key: height, Value: 5ft 11in ●
  • 23. Or iterate safely over an Object Object.prototype.HAHAHA = "I AM THE HASH DESTRUCTOR"; for( let [ key, value ] in me ) alert( key ); /* 'name', 'age', 'eye color', 'height', 'HAHAHA' */ function SafeHashIterator( hash, keysOnly ){ for( let [key, value] in hash ){ if( !hash.hasOwnProperty( key ) ) continue; yield keysOnly ? key : [key, value]; } throw StopIteration; } for( let [key, value] in SafeHashIterator( me ) ) alert( key ); // 'name', 'age', 'eye color', 'height'
  • 24. So why should I care?