SlideShare a Scribd company logo
State of Ajax
El futuro de las Apps Web


Dion Almaer
September 25th, 2008
Dion Almaer




twitter.com/dalmaer
almaer.com
Dion Almaer




twitter.com/dalmaer
almaer.com
Dion Almaer




twitter.com/dalmaer
almaer.com
“Google Suggest
           and Google Maps are two
         examples of a new approach
        to web applications that we at
       Adaptive Path have been calling
       Ajax. The name is shorthand for
       Asynchronous JavaScript + XML,
       and it represents a fundamental
            shift in what’s possible
                  on the Web.”



Jesse James Garrett
Co-founder, Adaptive Path
“Google Suggest
                         and Google Maps are two
                       examples of a new approach
                      to web applications that we at
                     Adaptive Path have been calling
                     Ajax. The name is shorthand for
    igne
         r!          Asynchronous JavaScript + XML,
Des
                     and it represents a fundamental
                          shift in what’s possible
                                on the Web.”



              Jesse James Garrett
              Co-founder, Adaptive Path
Compelling User Experience
Jared Leto   Jared Leto
Jef Raskin
Noted Usability Expert   “ e quality of any [so ware] is
                         ultimately determined by the
                         quality of the interaction between
The Humane Interface     one human and one system.”
Jef Raskin
Noted Usability Expert



                         “If a system’s one-on-one
                         interaction with its human user is
The Humane Interface     not pleasant and facile, the
                         resulting de ciency will poison
                         the performance of the entire
                         system, however ne that system
                         might be in its other aspects.
Jef Raskin
Noted Usability Expert



                         “If a system’s one-on-one
                         interaction with its human user is
The Humane Interface     not pleasant and facile, the
                         resulting de ciency will poison
                         the performance of the entire
                         system, however ne that system
                         might be in its other aspects.
User Interface




                   Visual Design




                 Interaction Design
User Interface




                   Visual Design




                 Interaction Design

                                                 e
                                r interfaces” ar
                  “ eductive use tractions!
                  S
                      vacuous dis
User Interface



   HCI researchers are nerds!

                   Visual Design




                 Interaction Design

                                                 e
                                r interfaces” ar
                  “ eductive use tractions!
                  S
                      vacuous dis
User Interface



   HCI researchers are nerds!

                   Visual Design




                        Emacs!

                 Interaction Design

                                                 e
                                r interfaces” ar
                  “ eductive use tractions!
                  S
                      vacuous dis
User Interface



   HCI researchers are nerds!

                   Visual Design

                                       vi!

                        Emacs!

                 Interaction Design

                                                 e
                                r interfaces” ar
                  “ eductive use tractions!
                  S
                      vacuous dis
User Interface



   HCI researchers are nerds!

                     Visual Design

                         !
        M icrosoft Rulez                  vi!

                          Emacs!

                   Interaction Design

                                                    e
                                   r interfaces” ar
                     “ eductive use tractions!
                     S
                         vacuous dis
User Interface



           HCI researchers are nerds!

                             Visual Design

                                 !
                M icrosoft Rulez                  vi!


Rea l programmers                 Emacs!
     use C++
                           Interaction Design

                                                            e
                                           r interfaces” ar
                             “ eductive use tractions!
                             S
                                 vacuous dis
The Web didn’t used to be a beautiful place...
Top Grossing Film of 1957   Top Grossing Film of 2007
Top Grossing Film of 1957   Top Grossing Film of 2007
First Wave of Ajax
   Making JavaScript Better
        Simple Effects
Responsiveness is the killer app
CSS and Animations



dojo.query(quot;#nav > .focusablequot;).
    attr(quot;tabIndexquot;, 0).
    style(quot;borderquot;, quot;1px solid transparentquot;).
    anim({
        quot;borderColorquot;: { start: quot;yellowquot;,
                           end: quot;whitequot; }
    });
Jakob Nielsen
Noted Usability Expert
Jakob Nielsen
Noted Usability Expert

                         “ e basic advice regarding
                         response times has been about the
                         same for thirty years:
“0.1 second is about the limit for
    Jakob Nielsen
Noted Usability Expert   having the user feel that the
                         system is reacting instantaneously,
                         meaning that no special feedback
                         is necessary except to display the
                         result.
Jakob Nielsen
Noted Usability Expert   “1.0 second is about the limit for
                         the user's ow of thought to stay
                         uninterrupted, even though the
                         user will notice the delay.
<script type=quot;text/javascriptquot;>
    function getCityByZip(zip) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            processResults(xhr);
        }
        xhr.open(quot;GETquot;, quot;/fun.endpoint?zip=quot; + zip);
        xhr.send(null);
    }


    function processResults(xhr) {
        if (xhr.readyState == 4) {
            var parent = document.getElementById(quot;cityParentquot;);
            parent.innerHTML = xhr.responseText;
        }
    }
</script>
Easy Remoting



<script type=quot;text/javascriptquot;>
    function getCityByZip(zip) {
       new Ajax.Request(quot;/fun.endpoint?zip=quot; + zip, {
            method: quot;getquot;,
            onSuccess: function(xhr) {
                $(quot;cityquot;).value = xhr.responseText;
            }
       });
   }
</script>
XHR
XHR
The Old Taxonomy
The Old Taxonomy




             Prototype
             Lightweight Ajax/JavaScript helpers
The Old Taxonomy




             Prototype
             Lightweight Ajax/JavaScript helpers




             GWT
             Hate JavaScript? No problem, use Java.
The Old Taxonomy




             Prototype
             Lightweight Ajax/JavaScript helpers




             GWT
             Hate JavaScript? No problem, use Java.




             jQuery
             New, DOM-centric JavaScript helper
The Old Taxonomy




                                                 Prototype




dojo
                                                 Lightweight Ajax/JavaScript helpers




                                                 GWT
                                                 Hate JavaScript? No problem, use Java.



Your Soup-to-Nuts Ajax/Javascript
            Platform


                                                 jQuery
                                                 New, DOM-centric JavaScript helper
The New Taxonomy
The New Taxonomy




Prototype        jQuery        Dojo Core
The New Taxonomy




Plug-in Community      Plug-in Community    Plug-in Community
   scripteka.com       plugins.jquery.com          dojox




  Prototype                jQuery             Dojo Core
The New Taxonomy




Script.aculo.us           jQuery UI               dijit




Plug-in Community      Plug-in Community    Plug-in Community
   scripteka.com       plugins.jquery.com          dojox




  Prototype                jQuery             Dojo Core
DOM Goodness


$(document).bind(quot;readyquot;, function() {


  $(quot;divquot;).bind(quot;mousewheelquot;, function(event, delta) {
    if (delta < 0) {
      $(this).append(quot;upquot;);
    } else {
      $(this).append(quot;downquot;);
       }
  );


});
Mobile Me / SproutCore
Mobile Me / SproutCore   280 Slides / Objective-J
Dojo Charting
Dojo Charting

                Dojo Grid
Dojo Charting

                                Dojo Grid




                Processing.js
JavaScript Interpreter                      Native Canvas Implementation




                                                                  Retains rendering
                                                                     commands
                         Issues rendering
                            commands




                                               Refreshes screen
                                                via native APIs
?
?
?
“0.1 second is about the limit for
    Jakob Nielsen
Noted Usability Expert   having the user feel that the
                         system is reacting instantaneously,
                         meaning that no special feedback
                         is necessary except to display the
                         result.
Browser
Operating System

                   Event Queue




                    Browser
Operating System

                   Event Queue




                    Browser
Mouse Moved

                   Mouse Pressed

                   Mouse Released

                    Key Pressed

Operating System    Key Released


                   Event Queue




                     Browser
Mouse Moved

                   Mouse Pressed

                   Mouse Released

                    Key Pressed

Operating System    Key Released


                   Event Queue




                     Browser
Mouse Moved

                   Mouse Pressed

                   Mouse Released

                    Key Pressed

Operating System    Key Released


                   Event Queue




                     Browser
Mouse Moved

                   Mouse Pressed

                   Mouse Released

                    Key Pressed

Operating System    Key Released


                   Event Queue




    JavaScript



                     Browser
Mouse Moved

                   Mouse Pressed

                   Mouse Released

                    Key Pressed

Operating System    Key Released


                   Event Queue




    JavaScript



                     Browser
Mouse Moved

                   Mouse Pressed

                   Mouse Released

                    Key Pressed

Operating System    Key Released


                   Event Queue




    JavaScript                      Web Browsing



                     Browser
Mouse Moved

                                  Mouse Pressed

                                  Mouse Released

                                   Key Pressed

Operating System                   Key Released


                                  Event Queue




                             l
                       e ntia k
                   Pot lenec
                   B ott



    JavaScript                                     Web Browsing



                                    Browser
1




                     Browser




User Interface




                 2




                 Background
                   Thread
1




                     Browser




User Interface




                 X
                 2




                 Background
                   Thread
Brendan Eich
Inventor of JavaScript
    CTO, Mozilla




   Brendan’s Blog
Brendan Eich
Inventor of JavaScript
    CTO, Mozilla




                         “   reads suck.”


   Brendan’s Blog
1




                     Browser




User Interface




                 X
                 2




                 Background
                   Thread
1




                     Browser




User Interface




                 2




                 Background
                   Thread
1




                                    Browser




User Interface                    Message Passing




                 2                             3




                     WorkerPool                     WorkerPool
Jef Raskin          “If [a] feature is well–designed,
Noted Usability Expert

                         and if we use it repeatedly, we
                         eventually... use the feature
The Humane Interface
                         habitually, without thought or
                         conscious e ort.
“In operating an interface we
                         combine or ‘chunk’ sequences of
                         actions into gestures, which, once
     Jef Raskin
Noted Usability Expert   started, proceed automatically.
                         Because we form gestures,
                         techniques such as having a user
The Humane Interface     respond Y or N to an ‘Are you
                         sure?’ veri cation do not provide
                         safety: e typed ‘Y’ becomes
                         part of the gesture.”
Prefer Undo to Warning Dialogs
h at on the Web?
 Err, h ow do you do t

Prefer Undo to Warning Dialogs
h at on the Web?
 Err, h ow do you do t

Prefer Undo to Warning Dialogs
                                                           e
                             ...and, uh, ho w do you handl
                                      transactions?
Form History
Some Business Form

First Name:       Some Value                Foo:              Some Value


Last Name:        Some Value                Gawuzzit:         Some Value


Address Line 1:   Some Value                Lugnutzwit:       Some Value


Address Line 2:   Some Value                Cookie Monster:   Some Value


City:             Some Value


State:            Some Value


Zip:              Some Value




                           ent
                       res                                                    st
                   P                                                       Pa

Form History:
Some Business Form

First Name:       Some Value                               Foo:              Some Value
                  History Value Here                                         History Value Here


Last Name:        Some Value                               Gawuzzit:         Some Value
                  History Value Here                                         History Value Here


Address Line 1:   Some Value                               Lugnutzwit:       Some Value
                  History Value Here                                         History Value Here


Address Line 2:   Some Value                               Cookie Monster:   Some Value
                  History Value Here                                         History Value Here


City:             Some Value
                  History Value Here


State:            Some Value
                  History Value Here


Zip:              Some Value
                  History Value Here



                                                      go
                           ent                 k   sa
                                              e                                                       t
                   P   res             2   we                                                     Pa
                                                                                                     s

Form History:
Don't forget, RIA's have rich
    internet back-ends (RIBs?)




Jonathan Schwartz
CEO, Sun Microsystems
Your Application




                   Web Services
Your Application




                   Web Services
Your Application




                   Web Services
Your Application




                   Web Services
Your Application




                   Web Services
Macintosh HD
“You just got another
email from your wife!”
           Macintosh HD
“You just got another
     email from your wife!”
                Macintosh HD




32
“You just got another
     email from your wife!”
                Macintosh HD




32
“You just got another
     email from your wife!”
                Macintosh HD




32
Fluid




Gears               Mozilla
                    Prism




        Adobe AIR
XHR
JNI




wiiuse library
Java Plug-in




                JNI




wiiuse library
Java Plug-in




        wiiusej




                  JNI




wiiuse library
Java Plug-in




      WiiTracker



        wiiusej




                  JNI




wiiuse library
Java Plug-in


       WiiApplet



      WiiTracker



        wiiusej




                  JNI




wiiuse library
Browser             Java Plug-in


                          WiiApplet

 JavaScript Dart
     Game
                         WiiTracker



                           wiiusej




                                     JNI




                   wiiuse library
The New Java Plug-in
      Beta Shipping Today with Java 1.6 “Update 10”



1   Java plug-in now out-of-process
        No more locking up the browser UI on launch
        Applets can persist across browser sessions
        More control over the Applet’s JVM

2   Improved Applet deployment
        JavaScript-based “Deployment Toolkit”
        Mature JNLP-based Applet metadata


3   A smaller JDK
        Micro-kernel gives streamlined download option
The Future?
The Breakdown of Modern Web Development
CSS Animations
CSS Reflections and Masks
?
Google Chrome’s V8   Safari’s SquirrelFish   Firefox’s TraceMonkey   IE?
Mozilla’s Monkeys?
Gears




Updating the Web...
Future


                 Present
                                           Ab
                                               leed
                                              edg ing
                                            vers e
                                         of H ion
                  Past                        TML
                                                  5!

HTML 5                        Gears


• Standards                • Implementation
• Long term                • Battle hardened
                           • A place for innovation
• All browsers             • Cross browser
• No plugin                • Plugin
HTML 5


    <video>
    <audio>
    <canvas>
    <time>
    <progress>
    <meter>
    <menu>
    <input type=quot;email | date
    | min | max | requiredquot;...
    >
    postMessage
    Drag and drop
HTML 5


                                        <video>
                                        <audio>
                                        <canvas>
                                        <time>
                                        <progress>
                                        <meter>
                                        <menu>
                                        <input type=quot;email | date
                                        | min | max | requiredquot;...
                                        >
                                        postMessage
                                        Drag and drop
Ian (Hixie) Hickson
Standards Editor, Google Employee
Ajax
Ajax




    Easy
Programming
   Model
Ajax

  Easy
Remoting




               Easy
           Programming
              Model
Extensive
Customization
   Vectors

                            Ajax

     Easy
   Remoting




                  Easy
              Programming
                 Model
Easy
        Deployment




  Extensive
Customization
   Vectors

                            Ajax

     Easy
   Remoting




                  Easy
              Programming
                 Model
Great
                            Widgets



           Easy
        Deployment




  Extensive
Customization
   Vectors

                            Ajax

     Easy
   Remoting




                  Easy
              Programming
                 Model
Great
                            Widgets



           Easy                       Great
        Deployment                     FX




  Extensive
Customization
   Vectors

                            Ajax

     Easy
   Remoting




                  Easy
              Programming
                 Model
Great
                            Widgets



           Easy                       Great
        Deployment                     FX




  Extensive
                                              Great Mobile
Customization
                                                 Story
   Vectors

                            Ajax

     Easy
   Remoting




                  Easy
              Programming
                 Model
Great
                            Widgets



           Easy                       Great
        Deployment                     FX




  Extensive
                                              Great Mobile
Customization
                                                 Story
   Vectors

                            Ajax

     Easy                                       Desktop
   Remoting                                   Integration




                  Easy
              Programming
                 Model
Great
                            Widgets



           Easy                                Great
        Deployment                              FX




  Extensive
                                                         Great Mobile
Customization
                                                            Story
   Vectors

                            Ajax

     Easy                                                  Desktop
   Remoting                                              Integration




                  Easy
                                      State-of-the-Art
              Programming
                                          Plug-ins
                 Model
Great
                            Widgets



           Easy                                Great
        Deployment                              FX




  Extensive
                                                         Great Mobile
Customization
                                                            Story
   Vectors

                            Ajax

     Easy                                                  Desktop
   Remoting                                              Integration




                  Easy
                                      State-of-the-Art
              Programming
                                          Plug-ins
                 Model
Learn more
http://code.google.com/
Google Developer Day: State of Ajax

More Related Content

What's hot

Devconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developedDevconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developedAlexander Makarov
 
State Of Ajax Zend Con 08
State Of Ajax   Zend Con 08State Of Ajax   Zend Con 08
State Of Ajax Zend Con 08bgalbs
 
The Developer Experience
The Developer Experience The Developer Experience
The Developer Experience Pamela Fox
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Shane Morris
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScriptAndrew Fisher
 
Google Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, PlatformGoogle Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, PlatformPamela Fox
 
How to add your own OpenSocial Gadgets to IBM Connections
How to add your own OpenSocial Gadgets to IBM ConnectionsHow to add your own OpenSocial Gadgets to IBM Connections
How to add your own OpenSocial Gadgets to IBM ConnectionsIBM Connections Developers
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Androidralcocer
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Andrew Ronksley
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)Zoe Gillenwater
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksGautam Krishnan
 
Web Test Automation Framework - IndicThreads Conference
Web Test Automation Framework  - IndicThreads ConferenceWeb Test Automation Framework  - IndicThreads Conference
Web Test Automation Framework - IndicThreads ConferenceIndicThreads
 
Core Java Slides
Core Java SlidesCore Java Slides
Core Java SlidesVinit Vyas
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Bootstrap cheat-sheet-websitesetup.org
Bootstrap cheat-sheet-websitesetup.org Bootstrap cheat-sheet-websitesetup.org
Bootstrap cheat-sheet-websitesetup.org Ali Bakhtiari
 
Designing Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite ApplicationsDesigning Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite Applicationsdominion
 

What's hot (20)

Devconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developedDevconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developed
 
State Of Ajax Zend Con 08
State Of Ajax   Zend Con 08State Of Ajax   Zend Con 08
State Of Ajax Zend Con 08
 
The Developer Experience
The Developer Experience The Developer Experience
The Developer Experience
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
 
Google Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, PlatformGoogle Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, Platform
 
How to add your own OpenSocial Gadgets to IBM Connections
How to add your own OpenSocial Gadgets to IBM ConnectionsHow to add your own OpenSocial Gadgets to IBM Connections
How to add your own OpenSocial Gadgets to IBM Connections
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
 
Web Test Automation Framework - IndicThreads Conference
Web Test Automation Framework  - IndicThreads ConferenceWeb Test Automation Framework  - IndicThreads Conference
Web Test Automation Framework - IndicThreads Conference
 
Core Java Slides
Core Java SlidesCore Java Slides
Core Java Slides
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Bootstrap cheat-sheet-websitesetup.org
Bootstrap cheat-sheet-websitesetup.org Bootstrap cheat-sheet-websitesetup.org
Bootstrap cheat-sheet-websitesetup.org
 
Designing Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite ApplicationsDesigning Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite Applications
 

Viewers also liked

Viewers also liked (14)

Creating a simple quiz
Creating a simple quizCreating a simple quiz
Creating a simple quiz
 
Manoramica 2015 Prelims and Finals
Manoramica 2015 Prelims and FinalsManoramica 2015 Prelims and Finals
Manoramica 2015 Prelims and Finals
 
India Quiz Prelims
India Quiz PrelimsIndia Quiz Prelims
India Quiz Prelims
 
G.K. Club Quiz - Finals
G.K. Club Quiz - FinalsG.K. Club Quiz - Finals
G.K. Club Quiz - Finals
 
Quiz Quest - Finals
Quiz Quest - FinalsQuiz Quest - Finals
Quiz Quest - Finals
 
G.K. Club Quiz - Finals
G.K. Club Quiz - FinalsG.K. Club Quiz - Finals
G.K. Club Quiz - Finals
 
Quiz new
Quiz newQuiz new
Quiz new
 
GK Club Quiz Finals (February 2015)
GK Club Quiz Finals (February 2015)GK Club Quiz Finals (February 2015)
GK Club Quiz Finals (February 2015)
 
YUKTI 2010 Finals Quiz
YUKTI 2010 Finals QuizYUKTI 2010 Finals Quiz
YUKTI 2010 Finals Quiz
 
IT Quest Quiz
IT Quest Quiz IT Quest Quiz
IT Quest Quiz
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
General Quiz Grand Finale
General Quiz Grand FinaleGeneral Quiz Grand Finale
General Quiz Grand Finale
 
Tech Quiz Finals
Tech Quiz FinalsTech Quiz Finals
Tech Quiz Finals
 
IIT - Bombay - Open General Quiz 2.0 - Finals (with Written Round and Long Vi...
IIT - Bombay - Open General Quiz 2.0 - Finals (with Written Round and Long Vi...IIT - Bombay - Open General Quiz 2.0 - Finals (with Written Round and Long Vi...
IIT - Bombay - Open General Quiz 2.0 - Finals (with Written Round and Long Vi...
 

Similar to Google Developer Day: State of Ajax

Universal Applications with Universal JavaScript
Universal Applications with Universal JavaScriptUniversal Applications with Universal JavaScript
Universal Applications with Universal JavaScriptThomas Joseph
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?martinlippert
 
Simplicity - develop modern web apps with tiny frameworks and tools
Simplicity - develop modern web apps with tiny frameworks and toolsSimplicity - develop modern web apps with tiny frameworks and tools
Simplicity - develop modern web apps with tiny frameworks and toolsRui Carvalho
 
Why Care About UX
Why Care About UXWhy Care About UX
Why Care About UXDavid Chou
 
Thesis proposal: Skye Sant
Thesis proposal: Skye SantThesis proposal: Skye Sant
Thesis proposal: Skye SantSkye Sant
 
remash! - Blueprints for RESTfulSituational Applications
remash! - Blueprints for RESTfulSituational Applicationsremash! - Blueprints for RESTfulSituational Applications
remash! - Blueprints for RESTfulSituational Applicationsdflejter
 
Úvod do programování 7
Úvod do programování 7Úvod do programování 7
Úvod do programování 7Karel Minarik
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)Ergosign GmbH
 
Who feeds an experience?
Who feeds an experience?Who feeds an experience?
Who feeds an experience?Jeremy Johnson
 
Openness In The Era Of Social Web
Openness In The Era Of Social WebOpenness In The Era Of Social Web
Openness In The Era Of Social WebChris Messina
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architecturessgleadow
 
PHX Session #5 : Architecture Without Big Design Up Front (Garibay)
PHX Session #5 : Architecture Without Big Design Up Front (Garibay)PHX Session #5 : Architecture Without Big Design Up Front (Garibay)
PHX Session #5 : Architecture Without Big Design Up Front (Garibay)Steve Lange
 
Egl Rui Ajax World
Egl Rui Ajax WorldEgl Rui Ajax World
Egl Rui Ajax Worldrajivmordani
 

Similar to Google Developer Day: State of Ajax (20)

Xtext, diagrams and ux
Xtext, diagrams and uxXtext, diagrams and ux
Xtext, diagrams and ux
 
Universal Applications with Universal JavaScript
Universal Applications with Universal JavaScriptUniversal Applications with Universal JavaScript
Universal Applications with Universal JavaScript
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
 
Service worker API
Service worker APIService worker API
Service worker API
 
Simplicity - develop modern web apps with tiny frameworks and tools
Simplicity - develop modern web apps with tiny frameworks and toolsSimplicity - develop modern web apps with tiny frameworks and tools
Simplicity - develop modern web apps with tiny frameworks and tools
 
Grensesnitt i bevegelse
Grensesnitt i bevegelseGrensesnitt i bevegelse
Grensesnitt i bevegelse
 
Why Care About UX
Why Care About UXWhy Care About UX
Why Care About UX
 
Thesis proposal: Skye Sant
Thesis proposal: Skye SantThesis proposal: Skye Sant
Thesis proposal: Skye Sant
 
codecraft
codecraftcodecraft
codecraft
 
remash! - Blueprints for RESTfulSituational Applications
remash! - Blueprints for RESTfulSituational Applicationsremash! - Blueprints for RESTfulSituational Applications
remash! - Blueprints for RESTfulSituational Applications
 
Foolangjs
FoolangjsFoolangjs
Foolangjs
 
Úvod do programování 7
Úvod do programování 7Úvod do programování 7
Úvod do programování 7
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
 
Who feeds an experience?
Who feeds an experience?Who feeds an experience?
Who feeds an experience?
 
Openness In The Era Of Social Web
Openness In The Era Of Social WebOpenness In The Era Of Social Web
Openness In The Era Of Social Web
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architectures
 
Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online Training
 
PHX Session #5 : Architecture Without Big Design Up Front (Garibay)
PHX Session #5 : Architecture Without Big Design Up Front (Garibay)PHX Session #5 : Architecture Without Big Design Up Front (Garibay)
PHX Session #5 : Architecture Without Big Design Up Front (Garibay)
 
Egl Rui Ajax World
Egl Rui Ajax WorldEgl Rui Ajax World
Egl Rui Ajax World
 

More from dion

Palm Developer Day: Opening Keynote
Palm Developer Day: Opening KeynotePalm Developer Day: Opening Keynote
Palm Developer Day: Opening Keynotedion
 
The Mobile Web @ 2010 JSConf
The Mobile Web @ 2010 JSConfThe Mobile Web @ 2010 JSConf
The Mobile Web @ 2010 JSConfdion
 
Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008dion
 
Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyonddion
 
App Engine On Air: Munich
App Engine On Air: MunichApp Engine On Air: Munich
App Engine On Air: Munichdion
 
Google I/O State Of Ajax
Google I/O State Of AjaxGoogle I/O State Of Ajax
Google I/O State Of Ajaxdion
 
Javaone 2008: What’s New In Ajax
Javaone 2008: What’s New In AjaxJavaone 2008: What’s New In Ajax
Javaone 2008: What’s New In Ajaxdion
 
Web 2.0 Expo Ria Offline Desktop
Web 2.0 Expo Ria Offline DesktopWeb 2.0 Expo Ria Offline Desktop
Web 2.0 Expo Ria Offline Desktopdion
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 

More from dion (9)

Palm Developer Day: Opening Keynote
Palm Developer Day: Opening KeynotePalm Developer Day: Opening Keynote
Palm Developer Day: Opening Keynote
 
The Mobile Web @ 2010 JSConf
The Mobile Web @ 2010 JSConfThe Mobile Web @ 2010 JSConf
The Mobile Web @ 2010 JSConf
 
Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008
 
Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyond
 
App Engine On Air: Munich
App Engine On Air: MunichApp Engine On Air: Munich
App Engine On Air: Munich
 
Google I/O State Of Ajax
Google I/O State Of AjaxGoogle I/O State Of Ajax
Google I/O State Of Ajax
 
Javaone 2008: What’s New In Ajax
Javaone 2008: What’s New In AjaxJavaone 2008: What’s New In Ajax
Javaone 2008: What’s New In Ajax
 
Web 2.0 Expo Ria Offline Desktop
Web 2.0 Expo Ria Offline DesktopWeb 2.0 Expo Ria Offline Desktop
Web 2.0 Expo Ria Offline Desktop
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 

Recently uploaded

SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
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
 
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
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxAbida Shariff
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
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
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 

Recently uploaded (20)

SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
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
 
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á
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
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...
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 

Google Developer Day: State of Ajax

  • 1.
  • 2. State of Ajax El futuro de las Apps Web Dion Almaer September 25th, 2008
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. “Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.” Jesse James Garrett Co-founder, Adaptive Path
  • 20. “Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for igne r! Asynchronous JavaScript + XML, Des and it represents a fundamental shift in what’s possible on the Web.” Jesse James Garrett Co-founder, Adaptive Path
  • 21.
  • 22.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. Jared Leto Jared Leto
  • 32.
  • 33.
  • 34. Jef Raskin Noted Usability Expert “ e quality of any [so ware] is ultimately determined by the quality of the interaction between The Humane Interface one human and one system.”
  • 35. Jef Raskin Noted Usability Expert “If a system’s one-on-one interaction with its human user is The Humane Interface not pleasant and facile, the resulting de ciency will poison the performance of the entire system, however ne that system might be in its other aspects.
  • 36. Jef Raskin Noted Usability Expert “If a system’s one-on-one interaction with its human user is The Humane Interface not pleasant and facile, the resulting de ciency will poison the performance of the entire system, however ne that system might be in its other aspects.
  • 37. User Interface Visual Design Interaction Design
  • 38. User Interface Visual Design Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  • 39. User Interface HCI researchers are nerds! Visual Design Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  • 40. User Interface HCI researchers are nerds! Visual Design Emacs! Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  • 41. User Interface HCI researchers are nerds! Visual Design vi! Emacs! Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  • 42. User Interface HCI researchers are nerds! Visual Design ! M icrosoft Rulez vi! Emacs! Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  • 43. User Interface HCI researchers are nerds! Visual Design ! M icrosoft Rulez vi! Rea l programmers Emacs! use C++ Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  • 44.
  • 45. The Web didn’t used to be a beautiful place...
  • 46.
  • 47.
  • 48.
  • 49. Top Grossing Film of 1957 Top Grossing Film of 2007
  • 50. Top Grossing Film of 1957 Top Grossing Film of 2007
  • 51.
  • 52.
  • 53. First Wave of Ajax Making JavaScript Better Simple Effects Responsiveness is the killer app
  • 54.
  • 55.
  • 56.
  • 57. CSS and Animations dojo.query(quot;#nav > .focusablequot;).     attr(quot;tabIndexquot;, 0).     style(quot;borderquot;, quot;1px solid transparentquot;).     anim({         quot;borderColorquot;: { start: quot;yellowquot;, end: quot;whitequot; }     });
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 64. Jakob Nielsen Noted Usability Expert “ e basic advice regarding response times has been about the same for thirty years:
  • 65. “0.1 second is about the limit for Jakob Nielsen Noted Usability Expert having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 66. Jakob Nielsen Noted Usability Expert “1.0 second is about the limit for the user's ow of thought to stay uninterrupted, even though the user will notice the delay.
  • 67. <script type=quot;text/javascriptquot;> function getCityByZip(zip) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { processResults(xhr); } xhr.open(quot;GETquot;, quot;/fun.endpoint?zip=quot; + zip); xhr.send(null); } function processResults(xhr) { if (xhr.readyState == 4) { var parent = document.getElementById(quot;cityParentquot;); parent.innerHTML = xhr.responseText; } } </script>
  • 68. Easy Remoting <script type=quot;text/javascriptquot;> function getCityByZip(zip) { new Ajax.Request(quot;/fun.endpoint?zip=quot; + zip, { method: quot;getquot;, onSuccess: function(xhr) { $(quot;cityquot;).value = xhr.responseText; } }); } </script>
  • 69.
  • 70. XHR
  • 71. XHR
  • 72.
  • 74. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers
  • 75. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java.
  • 76. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jQuery New, DOM-centric JavaScript helper
  • 77. The Old Taxonomy Prototype dojo Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. Your Soup-to-Nuts Ajax/Javascript Platform jQuery New, DOM-centric JavaScript helper
  • 79. The New Taxonomy Prototype jQuery Dojo Core
  • 80. The New Taxonomy Plug-in Community Plug-in Community Plug-in Community scripteka.com plugins.jquery.com dojox Prototype jQuery Dojo Core
  • 81. The New Taxonomy Script.aculo.us jQuery UI dijit Plug-in Community Plug-in Community Plug-in Community scripteka.com plugins.jquery.com dojox Prototype jQuery Dojo Core
  • 82. DOM Goodness $(document).bind(quot;readyquot;, function() {   $(quot;divquot;).bind(quot;mousewheelquot;, function(event, delta) {     if (delta < 0) {       $(this).append(quot;upquot;);     } else {       $(this).append(quot;downquot;);    } ); });
  • 83.
  • 84. Mobile Me / SproutCore
  • 85. Mobile Me / SproutCore 280 Slides / Objective-J
  • 86.
  • 88. Dojo Charting Dojo Grid
  • 89. Dojo Charting Dojo Grid Processing.js
  • 90.
  • 91. JavaScript Interpreter Native Canvas Implementation Retains rendering commands Issues rendering commands Refreshes screen via native APIs
  • 92. ?
  • 93. ?
  • 94. ?
  • 95.
  • 96. “0.1 second is about the limit for Jakob Nielsen Noted Usability Expert having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 98. Operating System Event Queue Browser
  • 99. Operating System Event Queue Browser
  • 100. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser
  • 101. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser
  • 102. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser
  • 103. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Browser
  • 104. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Browser
  • 105. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Web Browsing Browser
  • 106. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue l e ntia k Pot lenec B ott JavaScript Web Browsing Browser
  • 107. 1 Browser User Interface 2 Background Thread
  • 108. 1 Browser User Interface X 2 Background Thread
  • 109.
  • 110. Brendan Eich Inventor of JavaScript CTO, Mozilla Brendan’s Blog
  • 111. Brendan Eich Inventor of JavaScript CTO, Mozilla “ reads suck.” Brendan’s Blog
  • 112. 1 Browser User Interface X 2 Background Thread
  • 113. 1 Browser User Interface 2 Background Thread
  • 114. 1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool
  • 115. Jef Raskin “If [a] feature is well–designed, Noted Usability Expert and if we use it repeatedly, we eventually... use the feature The Humane Interface habitually, without thought or conscious e ort.
  • 116. “In operating an interface we combine or ‘chunk’ sequences of actions into gestures, which, once Jef Raskin Noted Usability Expert started, proceed automatically. Because we form gestures, techniques such as having a user The Humane Interface respond Y or N to an ‘Are you sure?’ veri cation do not provide safety: e typed ‘Y’ becomes part of the gesture.”
  • 117. Prefer Undo to Warning Dialogs
  • 118. h at on the Web? Err, h ow do you do t Prefer Undo to Warning Dialogs
  • 119. h at on the Web? Err, h ow do you do t Prefer Undo to Warning Dialogs e ...and, uh, ho w do you handl transactions?
  • 121. Some Business Form First Name: Some Value Foo: Some Value Last Name: Some Value Gawuzzit: Some Value Address Line 1: Some Value Lugnutzwit: Some Value Address Line 2: Some Value Cookie Monster: Some Value City: Some Value State: Some Value Zip: Some Value ent res st P Pa Form History:
  • 122. Some Business Form First Name: Some Value Foo: Some Value History Value Here History Value Here Last Name: Some Value Gawuzzit: Some Value History Value Here History Value Here Address Line 1: Some Value Lugnutzwit: Some Value History Value Here History Value Here Address Line 2: Some Value Cookie Monster: Some Value History Value Here History Value Here City: Some Value History Value Here State: Some Value History Value Here Zip: Some Value History Value Here go ent k sa e t P res 2 we Pa s Form History:
  • 123.
  • 124. Don't forget, RIA's have rich internet back-ends (RIBs?) Jonathan Schwartz CEO, Sun Microsystems
  • 125. Your Application Web Services
  • 126. Your Application Web Services
  • 127. Your Application Web Services
  • 128. Your Application Web Services
  • 129. Your Application Web Services
  • 131. “You just got another email from your wife!” Macintosh HD
  • 132. “You just got another email from your wife!” Macintosh HD 32
  • 133. “You just got another email from your wife!” Macintosh HD 32
  • 134. “You just got another email from your wife!” Macintosh HD 32
  • 135. Fluid Gears Mozilla Prism Adobe AIR
  • 136. XHR
  • 137.
  • 138.
  • 139.
  • 140.
  • 142. Java Plug-in JNI wiiuse library
  • 143. Java Plug-in wiiusej JNI wiiuse library
  • 144. Java Plug-in WiiTracker wiiusej JNI wiiuse library
  • 145. Java Plug-in WiiApplet WiiTracker wiiusej JNI wiiuse library
  • 146. Browser Java Plug-in WiiApplet JavaScript Dart Game WiiTracker wiiusej JNI wiiuse library
  • 147. The New Java Plug-in Beta Shipping Today with Java 1.6 “Update 10” 1 Java plug-in now out-of-process No more locking up the browser UI on launch Applets can persist across browser sessions More control over the Applet’s JVM 2 Improved Applet deployment JavaScript-based “Deployment Toolkit” Mature JNLP-based Applet metadata 3 A smaller JDK Micro-kernel gives streamlined download option
  • 149. The Breakdown of Modern Web Development
  • 152. ? Google Chrome’s V8 Safari’s SquirrelFish Firefox’s TraceMonkey IE?
  • 154.
  • 155.
  • 156.
  • 158. Future Present Ab leed edg ing vers e of H ion Past TML 5! HTML 5 Gears • Standards • Implementation • Long term • Battle hardened • A place for innovation • All browsers • Cross browser • No plugin • Plugin
  • 159. HTML 5 <video> <audio> <canvas> <time> <progress> <meter> <menu> <input type=quot;email | date | min | max | requiredquot;... > postMessage Drag and drop
  • 160. HTML 5 <video> <audio> <canvas> <time> <progress> <meter> <menu> <input type=quot;email | date | min | max | requiredquot;... > postMessage Drag and drop Ian (Hixie) Hickson Standards Editor, Google Employee
  • 161.
  • 162. Ajax
  • 163. Ajax Easy Programming Model
  • 164. Ajax Easy Remoting Easy Programming Model
  • 165. Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  • 166. Easy Deployment Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  • 167. Great Widgets Easy Deployment Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  • 168. Great Widgets Easy Great Deployment FX Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  • 169. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Ajax Easy Remoting Easy Programming Model
  • 170. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Ajax Easy Desktop Remoting Integration Easy Programming Model
  • 171. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Ajax Easy Desktop Remoting Integration Easy State-of-the-Art Programming Plug-ins Model
  • 172. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Ajax Easy Desktop Remoting Integration Easy State-of-the-Art Programming Plug-ins Model
  • 173.
  • 174.
  • 175.