SlideShare a Scribd company logo
1 of 141
Download to read offline
May, 29th, 2012
   San Francisco, CA
                          Max Firtman @firt



                       BREAKING HTML5
                       LIMITS ON MOBILE
                         JAVASCRIPT




Tuesday, May 29, 12
who am I?
                                  @firt
      mobile+web developer

      mobilexweb.com




Tuesday, May 29, 12
where?




Tuesday, May 29, 12
where?
        buenos aires ~ argentina




Tuesday, May 29, 12
where?
        buenos aires ~ argentina
                      patagonia
                      soccer
                      meat & wine
                      tango
Tuesday, May 29, 12
speaker




Tuesday, May 29, 12
books




                      Image from my house
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
the answer is no




Tuesday, May 29, 12
Tuesday, May 29, 12
.com




Tuesday, May 29, 12
Tuesday, May 29, 12
About this
                      workshop



Tuesday, May 29, 12
About...

         Introduction

         Live examples & labs

         Live coding, how?




Tuesday, May 29, 12
Logistics
         9am: start

         ~11.00am: break 30 min

         ~11.30am: second part

         ~12.15pm: end, Q&A

         1pm: lunch :)




Tuesday, May 29, 12
Logistics

        Please:

        - Mobile phones in vibration mode (ironic, I know)
        - Participate and ask!




Tuesday, May 29, 12
Let’s start




Tuesday, May 29, 12
mobile...




Tuesday, May 29, 12
mobile




Tuesday, May 29, 12
mobile
                      ‣   absolutely personal




Tuesday, May 29, 12
mobile
                      ‣ absolutely personal
                      ‣ +5 billions




Tuesday, May 29, 12
mobile
                      ‣ absolutely personal
                      ‣ +5 billions

                      ‣ make us focus




Tuesday, May 29, 12
mobile
                      ‣ absolutely personal
                      ‣ +5 billions

                      ‣ make us focus

                      ‣ read our context...




Tuesday, May 29, 12
mobile
                      ‣ absolutely personal
                      ‣ +5 billions

                      ‣ make us focus

                      ‣ read our context...

                      ‣ ... always...




Tuesday, May 29, 12
mobile
                      ‣ absolutely personal
                      ‣ +5 billions

                      ‣ make us focus

                      ‣ read our context...

                      ‣ ... always...

                      ‣ ... and everywhere.




Tuesday, May 29, 12
Tuesday, May 29, 12
mobile web appears




Tuesday, May 29, 12
mobile is a
   minefield



                      Photo by World of Good (Flickr)
        Malvinas / Falklands Islands



Tuesday, May 29, 12
lots of questions

     Photo by wayneandwax (Flickr)
Tuesday, May 29, 12
we need to learn
                      lots of questions

Tuesday, May 29, 12
lots of platforms
Tuesday, May 29, 12
problems for us
                      1. It’s different
                      2. native vs. web
                      3. standards
                      4. vendors hate web developers
                      5. users hate web developers


Tuesday, May 29, 12
it’s different


                         Slower networks




Tuesday, May 29, 12
it’s different


                         Different browsing




Tuesday, May 29, 12
it’s different


                         Different behavior




Tuesday, May 29, 12
it’s different
                        Proxy-based browsers
                           aka Where is my JavaScript?




Tuesday, May 29, 12
mobile browsers




Tuesday, May 29, 12
mobile browsers
                      ‣   too many




Tuesday, May 29, 12
mobile browsers
                      ‣   too many
                      ‣   (some) too limited




Tuesday, May 29, 12
mobile browsers
                      ‣   too many
                      ‣   (some) too limited
                      ‣   (some) too innovative




Tuesday, May 29, 12
mobile browsers
                      ‣   too many
                      ‣   (some) too limited
                      ‣   (some) too innovative
                      ‣   (most) without documentation




Tuesday, May 29, 12
mobile browsers
                      ‣   too many
                      ‣   (some) too limited
                      ‣   (some) too innovative
                      ‣   (most) without documentation
                      ‣   (most) without a name



Tuesday, May 29, 12
mobile browsers
                      ‣   too many
                      ‣   (some) too limited
                      ‣   (some) too innovative
                      ‣   (most) without documentation
                      ‣   (most) without a name
                      ‣   (most) without debugging tools


Tuesday, May 29, 12
statistics




                         gs.statcounter.com - Apr 12
Tuesday, May 29, 12
some are known




Tuesday, May 29, 12
some are known
                      ‣ Safari (on iOS)
                      ‣ Opera Mobile (on Android & Symbian)

                      ‣ Firefox (on Android)

                      ‣ Chrome (on Android)

                      ‣ Internet Explorer (on Windows Phone)




Tuesday, May 29, 12
some are unknown




Tuesday, May 29, 12
some are unknown
                      ‣ Nokia Browser (on Symbian, S40 & Meego 1.2)
                      ‣ BlackBerry Browser

                      ‣ Android Browser

                      ‣ webOS Browser

                      ‣ UCWeb

                      ‣ Amazon Silk

                      ‣ Bada Browser

                      ‣ Opera Mini

                      ‣ NetFront

                      ‣ Phantom

                      ‣ ...

Tuesday, May 29, 12
and with different
                         versions...



Tuesday, May 29, 12
with different engines




Tuesday, May 29, 12
with different engines
                      ‣   Rendering engines
                          ‣ WebKit
                          ‣ Gecko

                          ‣ Presto

                          ‣ Trident

                      ‣   Modern execution engines
                          ‣ V8
                          ‣ JagerMonkey

                          ‣ SquirrelFish (aka Nitro)

                          ‣ Carakan

                          ‣ Chakra



Tuesday, May 29, 12
and there’s more!



Tuesday, May 29, 12
web views




Tuesday, May 29, 12
web views




Tuesday, May 29, 12
web views

                      ‣   on iOS, different execution engine




Tuesday, May 29, 12
web views

                      ‣ on iOS, different execution engine
                      ‣ differences on HTML5 APIs




Tuesday, May 29, 12
apps with
          browsers
          inside


Tuesday, May 29, 12
pseudo-browsers




Tuesday, May 29, 12
pseudobrowsers




Tuesday, May 29, 12
pseudobrowsers
                      ‣   mostly on iOS and Android




Tuesday, May 29, 12
pseudobrowsers
                      ‣ mostly on iOS and Android
                      ‣ use the web view




Tuesday, May 29, 12
and we can also
                   create native apps
                  -such as phonegap-


Tuesday, May 29, 12
problems for us
                      1. It’s different
                      2. native vs. web
                      3. standards
                      4. vendors hate web developers
                      5. users hate web developers


Tuesday, May 29, 12
native
                        vs
                       web


Tuesday, May 29, 12
native code
                           vs
                       javascript


Tuesday, May 29, 12
browser
                             vs
                      installed apps
                         & stores

Tuesday, May 29, 12
what is native?




Tuesday, May 29, 12
what is a webapp?




Tuesday, May 29, 12
no taxonomy

                            p p                                   p p
                         b a          iv e       r id          5 a
                        e          a t        y b           l
                      w           n          h
                                                        h tm


Tuesday, May 29, 12
problems for us
                      1. It’s different
                      2. native vs. web
                      3. standards
                      4. vendors hate web developers
                      5. users hate web developers


Tuesday, May 29, 12
standars?




Tuesday, May 29, 12
Photo by Ben Millett (Flickr)
Tuesday, May 29, 12
Tuesday, May 29, 12
Are you
         sure?




     Photo by Ricky David (Flickr)
Tuesday, May 29, 12
What is   ?



Tuesday, May 29, 12
html5




Tuesday, May 29, 12
html5
                      ‣   w3c standards (all in draft)




Tuesday, May 29, 12
html5
                      ‣ w3c standards (all in draft)
                      ‣ some are other w3c standards




Tuesday, May 29, 12
html5
                      ‣ w3c standards (all in draft)
                      ‣ some are other w3c standards

                      ‣ de-facto standards




Tuesday, May 29, 12
html5
                      ‣ w3c standards (all in draft)
                      ‣ some are other w3c standards

                      ‣ de-facto standards

                      ‣ w3c ex-standards




Tuesday, May 29, 12
html5
                      ‣ w3c standards (all in draft)
                      ‣ some are other w3c standards

                      ‣ de-facto standards

                      ‣ w3c ex-standards

                      ‣ everything “new” on the web




Tuesday, May 29, 12
html version 5?



Tuesday, May 29, 12
why mobile html5?



Tuesday, May 29, 12
typeof html5 != boolean




Tuesday, May 29, 12
some features safe




Tuesday, May 29, 12
some features only on
              few platforms



Tuesday, May 29, 12
some features
                      experimental



Tuesday, May 29, 12
some features with
                          prefixes



Tuesday, May 29, 12
and what about
                      capabilities today?



Tuesday, May 29, 12
Tuesday, May 29, 12
problems for us
                      1. It’s different
                      2. native vs. web
                      3. standards
                      4. vendors hate web developers
                      5. users hate web developers


Tuesday, May 29, 12
why?

                        fragmentation
                      info, docs & tools


Tuesday, May 29, 12
second class developers




Tuesday, May 29, 12
second class developers
         ‣  vague, non-existent or outdated
           documentation




Tuesday, May 29, 12
second class developers
         ‣ vague, non-existent or outdated
          documentation
         ‣ new features discovered by third-parties




Tuesday, May 29, 12
second class developers
         ‣ vague, non-existent or outdated
          documentation
         ‣ new features discovered by third-parties

         ‣ lack of samples




Tuesday, May 29, 12
second class developers
         ‣ vague, non-existent or outdated
          documentation
         ‣ new features discovered by third-parties

         ‣ lack of samples

         ‣ no developer tools




Tuesday, May 29, 12
fragmentation



Tuesday, May 29, 12
fragmentation




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)
                      ‣   screen pixel density




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)
                      ‣   screen pixel density
                          ‣   Low density: 100 - 130 dpi




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)
                      ‣   screen pixel density
                          ‣ Low density: 100 - 130 dpi
                          ‣ Medium density: 130 - 180 dpi




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)
                      ‣   screen pixel density
                          ‣ Low density: 100 - 130 dpi
                          ‣ Medium density: 130 - 180 dpi

                          ‣ High density: 180 - 270 dpi




Tuesday, May 29, 12
fragmentation
                      ‣   screen sizes
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”
                      ‣   screen aspect ratio
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)
                      ‣   screen pixel density
                          ‣ Low density: 100 - 130 dpi
                          ‣ Medium density: 130 - 180 dpi

                          ‣ High density: 180 - 270 dpi

                          ‣ Ultra high density: 270 - 350 dpi


Tuesday, May 29, 12
fragmentation
                                                                        QQVGA
                                                                        QVGA
                                                                        WQVGA
                                                                        FWQVGA
                      ‣   screen sizes                                  LQVGA
                                                                        HVGA
                          ‣   2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10”   nHD
                      ‣   screen aspect ratio                           WVGA
                                                                        FWVGA
                          ‣   4:3, 16:9 (wide-screen), 5:3 (eur wide)   VGA
                      ‣   screen pixel density                          DVGA
                                                                        QHD
                          ‣ Low density: 100 - 130 dpi                  WSVGA
                          ‣ Medium density: 130 - 180 dpi               HD
                                                                        XGA
                          ‣ High density: 180 - 270 dpi
                                                                        WXGA
                          ‣ Ultra high density: 270 - 350 dpi           QXGA

Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
mobile javascript
                          testing



Tuesday, May 29, 12
emulators
                      mobilexweb.com/emulators




Tuesday, May 29, 12
friends
                lots of them

                and with different devices




Tuesday, May 29, 12
virtual labs
            real devices on real networks




            www.perfectomobile.com   www.deviceanywhere.com

Tuesday, May 29, 12
mobile javascript
                        debugging



Tuesday, May 29, 12
debugging tools
            Remote Web Inspector

            • BlackBerry Smartphones 7
            • BlackBerry PlayBook
            • Google Chrome for Android 4
            • Opera Mobile


Tuesday, May 29, 12
debugging tools
        Adobe Shadow




           adobe.com/go/shadow

Tuesday, May 29, 12
debugging tools




                       iwebinspector.com
Tuesday, May 29, 12
problems for us
                      1. It’s different
                      2. native vs. web
                      3. standards
                      4. vendors hate web developers
                      5. users hate web developers


Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
mobile
                    web
                  is slow




Picture from Simon Howden freedigitalphotos.net!
Tuesday, May 29, 12
Tuesday, May 29, 12
battery consumption
WW 2012 – Session: Mobile Web Performance                                                                                                                                                                              April 16–20, 2012, Lyon, Fra

                       50
                       45
                       40
     Energy (Joules)




                       35
                       30
                       25
                       20
                       15
                       10
                        5
                        0
                                               live.com




                                                                                                                                      microsoft




                                                                                                                                                                                               weather
                                                                                                        picasa
                                       baidu




                                                                                                                                                                                                         facebook




                                                                                                                                                                                                                                                   imdb
                                                                                      youtube




                                                                                                                                                                                                                                          go.com
                                                                  wall st. journal




                                                                                                                                                                                                                                blogger
                            3G setup




                                                                                                                                                                       nytimes




                                                                                                                                                                                                                                                          tumblr

                                                                                                                                                                                                                                                                   wikipedia

                                                                                                                                                                                                                                                                               apple
                                                                                                ebay




                                                                                                                             amazon
                                                          gmail




                                                                                                                                                                                 yahoo
                                                                                                                 cnn

                                                                                                                       bbc




                                                                                                                                                  engadget

                                                                                                                                                              natgeo




                                                                                                                                                                                                                    wordpress
                                                                                                                                                                                         aol
                                                                                                       Figure 6: Energy consumption of top websites
           Web site                            Comment                               % Battery            Traffic (bytes)
                                                                                       life             Upload Download
                                                                                                                                                             The resulting numbers are shown in Figure 6. Note that the e
    m.gmail.com            inbox                                                       0.41              9050      12048                                     bars are so small that they are barely visible.
    m.picasa.com
     m.aol.com              Who Killed My Battery ~ mobilexweb.com/go/battery
                        user albums
                        portal home
                                                                                       0.43
                                                                                       0.59
                                                                                                         8223
                                                                                                        11927
                                                                                                                   15475
                                                                                                                   37085
                                                                                                                                                                The left most column in Figure 6 shows the energy neede
                                                                                                                                                             set up a 3G connection and download a few bytes without any
   m.amazon.com         product page                                                   0.48              9523      26838
                                                                                                                                                             ditional processing. Since all navigation requests must setup a
 mobile.nytimes.com US home page                                                       0.53             15386      66336
 touch.facebook.com    facebook wall                                                   0.65             30214      81040                                     connection we treat this measurement as a baseline where th
   mw.weather.com     Stanford weather                                                 0.62             38253     134531                                     teresting differences between web sites are above this line.
      apple.com
  Tuesday, May 29, 12    home page                                                     1.41             86888     716835                                        Figure 6 is generated from the mobile versions of the
battery consumption
                      Amazon consumes 17% energy
                            in a non used JS

                       jQuery.js ~ 4 joules (0,02%)
                         ~5000 jQuery parsings per charge




             Who Killed My Battery ~ mobilexweb.com/go/battery

Tuesday, May 29, 12
Discrimination

Tuesday, May 29, 12
Tuesday, May 29, 12
Tuesday, May 29, 12
problems for us
                      1. It’s different
                      2. native vs. web
                      3. standards
                      4. vendors hate web developers
                      5. users hate web developers


Tuesday, May 29, 12
some last advices



Tuesday, May 29, 12
Tuesday, May 29, 12
performance,
                      performance




Tuesday, May 29, 12
good practices




Tuesday, May 29, 12
don’t be fanatic




  photo by Kurt Christensen
           (flickr)
Tuesday, May 29, 12
be multiplatform




Tuesday, May 29, 12
be




                      futurefriend.ly
Tuesday, May 29, 12
you can reach a good
                                 thank you!
                           experience
                     firt.mobi              Tomorrow
                firtman@gmail.com            10.30am
                   twitter: @firt
               www.mobilexweb.com          Book signing




    Pictures)from)freedigitalphotos.net)
Tuesday, May 29, 12

More Related Content

Viewers also liked

The History of HYBRID PARKING GARAGES
The History of HYBRID PARKING GARAGESThe History of HYBRID PARKING GARAGES
The History of HYBRID PARKING GARAGESWilliam Wieners
 
Cleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VA
Cleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VACleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VA
Cleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VAClearedJobs.Net
 
Add a human touch to online customer service
Add a human touch to online customer serviceAdd a human touch to online customer service
Add a human touch to online customer serviceSagittarius
 
Guia instalacion de GRETL
Guia instalacion de GRETLGuia instalacion de GRETL
Guia instalacion de GRETLMiguel Jerez
 
Brandstorm Creative Group Portfolio
Brandstorm Creative Group PortfolioBrandstorm Creative Group Portfolio
Brandstorm Creative Group Portfolioandresipm
 
Pareja Estable
Pareja EstablePareja Estable
Pareja Establenuska
 
Baloncesto escolar valladolid idolos sport
Baloncesto escolar valladolid idolos sportBaloncesto escolar valladolid idolos sport
Baloncesto escolar valladolid idolos sportidolosport
 
VIU EL PRESENT
VIU EL PRESENTVIU EL PRESENT
VIU EL PRESENTtonieitor
 
Portafolio de servicios 2012
Portafolio de servicios 2012Portafolio de servicios 2012
Portafolio de servicios 2012Harley Baron
 
Inundaciones en Tabasco - Hildebrando Flores Gallegos
Inundaciones en Tabasco - Hildebrando Flores GallegosInundaciones en Tabasco - Hildebrando Flores Gallegos
Inundaciones en Tabasco - Hildebrando Flores GallegosHildeAme
 

Viewers also liked (16)

AEP Project
AEP ProjectAEP Project
AEP Project
 
The History of HYBRID PARKING GARAGES
The History of HYBRID PARKING GARAGESThe History of HYBRID PARKING GARAGES
The History of HYBRID PARKING GARAGES
 
Cleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VA
Cleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VACleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VA
Cleared Job Fair Job Seeker Handbook May 8, 2014, Crystal City, VA
 
Add a human touch to online customer service
Add a human touch to online customer serviceAdd a human touch to online customer service
Add a human touch to online customer service
 
Guia instalacion de GRETL
Guia instalacion de GRETLGuia instalacion de GRETL
Guia instalacion de GRETL
 
Brandstorm Creative Group Portfolio
Brandstorm Creative Group PortfolioBrandstorm Creative Group Portfolio
Brandstorm Creative Group Portfolio
 
Pareja Estable
Pareja EstablePareja Estable
Pareja Estable
 
Pedazodepastel
PedazodepastelPedazodepastel
Pedazodepastel
 
Baloncesto escolar valladolid idolos sport
Baloncesto escolar valladolid idolos sportBaloncesto escolar valladolid idolos sport
Baloncesto escolar valladolid idolos sport
 
VIU EL PRESENT
VIU EL PRESENTVIU EL PRESENT
VIU EL PRESENT
 
Roberto ahumedo gomez
Roberto ahumedo gomezRoberto ahumedo gomez
Roberto ahumedo gomez
 
Dart coloring book
Dart coloring bookDart coloring book
Dart coloring book
 
Portafolio de servicios 2012
Portafolio de servicios 2012Portafolio de servicios 2012
Portafolio de servicios 2012
 
33 05 el tercer secreto de fatima version diplomatica www.gftaognosticaespir...
33 05 el tercer secreto de fatima  version diplomatica www.gftaognosticaespir...33 05 el tercer secreto de fatima  version diplomatica www.gftaognosticaespir...
33 05 el tercer secreto de fatima version diplomatica www.gftaognosticaespir...
 
Inundaciones en Tabasco - Hildebrando Flores Gallegos
Inundaciones en Tabasco - Hildebrando Flores GallegosInundaciones en Tabasco - Hildebrando Flores Gallegos
Inundaciones en Tabasco - Hildebrando Flores Gallegos
 
Cv Eduardo Valarezo
Cv Eduardo ValarezoCv Eduardo Valarezo
Cv Eduardo Valarezo
 

Similar to Breaking HTML5 limits with Mobile JavaScript

Maximiliano Firtman
Maximiliano FirtmanMaximiliano Firtman
Maximiliano FirtmanColombia3.0
 
Mobile first responsive web design
Mobile first responsive web designMobile first responsive web design
Mobile first responsive web designWill Hindson
 
The Future is Responsive
The Future is ResponsiveThe Future is Responsive
The Future is ResponsiveJonathan Smiley
 
Tucuman valley Desarrollo Mobile, nativo o HTML5?
Tucuman valley Desarrollo Mobile, nativo o HTML5?Tucuman valley Desarrollo Mobile, nativo o HTML5?
Tucuman valley Desarrollo Mobile, nativo o HTML5?Maximiliano Firtman
 
Choose Your Own Adventure 3: The Final Countdown/Return of the Rainbows
Choose Your Own Adventure 3: The Final Countdown/Return of the RainbowsChoose Your Own Adventure 3: The Final Countdown/Return of the Rainbows
Choose Your Own Adventure 3: The Final Countdown/Return of the RainbowsAdam Jacob
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiJared Faris
 

Similar to Breaking HTML5 limits with Mobile JavaScript (6)

Maximiliano Firtman
Maximiliano FirtmanMaximiliano Firtman
Maximiliano Firtman
 
Mobile first responsive web design
Mobile first responsive web designMobile first responsive web design
Mobile first responsive web design
 
The Future is Responsive
The Future is ResponsiveThe Future is Responsive
The Future is Responsive
 
Tucuman valley Desarrollo Mobile, nativo o HTML5?
Tucuman valley Desarrollo Mobile, nativo o HTML5?Tucuman valley Desarrollo Mobile, nativo o HTML5?
Tucuman valley Desarrollo Mobile, nativo o HTML5?
 
Choose Your Own Adventure 3: The Final Countdown/Return of the Rainbows
Choose Your Own Adventure 3: The Final Countdown/Return of the RainbowsChoose Your Own Adventure 3: The Final Countdown/Return of the Rainbows
Choose Your Own Adventure 3: The Final Countdown/Return of the Rainbows
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 

More from Maximiliano Firtman

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Maximiliano Firtman
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsMaximiliano Firtman
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)Maximiliano Firtman
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Maximiliano Firtman
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and PerformanceMaximiliano Firtman
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the WebMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Maximiliano Firtman
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano Firtman
 

More from Maximiliano Firtman (20)

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020
 
The modern PWA Cheat Sheet
The modern PWA Cheat SheetThe modern PWA Cheat Sheet
The modern PWA Cheat Sheet
 
Hacking Web Performance 2019
Hacking Web Performance 2019Hacking Web Performance 2019
Hacking Web Performance 2019
 
Progressive Web Apps Keynote
Progressive Web Apps KeynoteProgressive Web Apps Keynote
Progressive Web Apps Keynote
 
Hacking Web Performance
Hacking Web PerformanceHacking Web Performance
Hacking Web Performance
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web Apps
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the Web
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 

Recently uploaded

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Breaking HTML5 limits with Mobile JavaScript

  • 1. May, 29th, 2012 San Francisco, CA Max Firtman @firt BREAKING HTML5 LIMITS ON MOBILE JAVASCRIPT Tuesday, May 29, 12
  • 2. who am I? @firt mobile+web developer mobilexweb.com Tuesday, May 29, 12
  • 4. where? buenos aires ~ argentina Tuesday, May 29, 12
  • 5. where? buenos aires ~ argentina patagonia soccer meat & wine tango Tuesday, May 29, 12
  • 7. books Image from my house Tuesday, May 29, 12
  • 10. the answer is no Tuesday, May 29, 12
  • 14. About this workshop Tuesday, May 29, 12
  • 15. About... Introduction Live examples & labs Live coding, how? Tuesday, May 29, 12
  • 16. Logistics 9am: start ~11.00am: break 30 min ~11.30am: second part ~12.15pm: end, Q&A 1pm: lunch :) Tuesday, May 29, 12
  • 17. Logistics Please: - Mobile phones in vibration mode (ironic, I know) - Participate and ask! Tuesday, May 29, 12
  • 21. mobile ‣ absolutely personal Tuesday, May 29, 12
  • 22. mobile ‣ absolutely personal ‣ +5 billions Tuesday, May 29, 12
  • 23. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Tuesday, May 29, 12
  • 24. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... Tuesday, May 29, 12
  • 25. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... Tuesday, May 29, 12
  • 26. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere. Tuesday, May 29, 12
  • 29. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands Islands Tuesday, May 29, 12
  • 30. lots of questions Photo by wayneandwax (Flickr) Tuesday, May 29, 12
  • 31. we need to learn lots of questions Tuesday, May 29, 12
  • 33. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
  • 34. it’s different Slower networks Tuesday, May 29, 12
  • 35. it’s different Different browsing Tuesday, May 29, 12
  • 36. it’s different Different behavior Tuesday, May 29, 12
  • 37. it’s different Proxy-based browsers aka Where is my JavaScript? Tuesday, May 29, 12
  • 39. mobile browsers ‣ too many Tuesday, May 29, 12
  • 40. mobile browsers ‣ too many ‣ (some) too limited Tuesday, May 29, 12
  • 41. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Tuesday, May 29, 12
  • 42. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (most) without documentation Tuesday, May 29, 12
  • 43. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (most) without documentation ‣ (most) without a name Tuesday, May 29, 12
  • 44. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools Tuesday, May 29, 12
  • 45. statistics gs.statcounter.com - Apr 12 Tuesday, May 29, 12
  • 47. some are known ‣ Safari (on iOS) ‣ Opera Mobile (on Android & Symbian) ‣ Firefox (on Android) ‣ Chrome (on Android) ‣ Internet Explorer (on Windows Phone) Tuesday, May 29, 12
  • 49. some are unknown ‣ Nokia Browser (on Symbian, S40 & Meego 1.2) ‣ BlackBerry Browser ‣ Android Browser ‣ webOS Browser ‣ UCWeb ‣ Amazon Silk ‣ Bada Browser ‣ Opera Mini ‣ NetFront ‣ Phantom ‣ ... Tuesday, May 29, 12
  • 50. and with different versions... Tuesday, May 29, 12
  • 52. with different engines ‣ Rendering engines ‣ WebKit ‣ Gecko ‣ Presto ‣ Trident ‣ Modern execution engines ‣ V8 ‣ JagerMonkey ‣ SquirrelFish (aka Nitro) ‣ Carakan ‣ Chakra Tuesday, May 29, 12
  • 56. web views ‣ on iOS, different execution engine Tuesday, May 29, 12
  • 57. web views ‣ on iOS, different execution engine ‣ differences on HTML5 APIs Tuesday, May 29, 12
  • 58. apps with browsers inside Tuesday, May 29, 12
  • 61. pseudobrowsers ‣ mostly on iOS and Android Tuesday, May 29, 12
  • 62. pseudobrowsers ‣ mostly on iOS and Android ‣ use the web view Tuesday, May 29, 12
  • 63. and we can also create native apps -such as phonegap- Tuesday, May 29, 12
  • 64. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
  • 65. native vs web Tuesday, May 29, 12
  • 66. native code vs javascript Tuesday, May 29, 12
  • 67. browser vs installed apps & stores Tuesday, May 29, 12
  • 69. what is a webapp? Tuesday, May 29, 12
  • 70. no taxonomy p p p p b a iv e r id 5 a e a t y b l w n h h tm Tuesday, May 29, 12
  • 71. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
  • 73. Photo by Ben Millett (Flickr) Tuesday, May 29, 12
  • 75. Are you sure? Photo by Ricky David (Flickr) Tuesday, May 29, 12
  • 76. What is ? Tuesday, May 29, 12
  • 78. html5 ‣ w3c standards (all in draft) Tuesday, May 29, 12
  • 79. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards Tuesday, May 29, 12
  • 80. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards Tuesday, May 29, 12
  • 81. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards Tuesday, May 29, 12
  • 82. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the web Tuesday, May 29, 12
  • 85. typeof html5 != boolean Tuesday, May 29, 12
  • 87. some features only on few platforms Tuesday, May 29, 12
  • 88. some features experimental Tuesday, May 29, 12
  • 89. some features with prefixes Tuesday, May 29, 12
  • 90. and what about capabilities today? Tuesday, May 29, 12
  • 92. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
  • 93. why? fragmentation info, docs & tools Tuesday, May 29, 12
  • 95. second class developers ‣ vague, non-existent or outdated documentation Tuesday, May 29, 12
  • 96. second class developers ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties Tuesday, May 29, 12
  • 97. second class developers ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples Tuesday, May 29, 12
  • 98. second class developers ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer tools Tuesday, May 29, 12
  • 101. fragmentation ‣ screen sizes Tuesday, May 29, 12
  • 102. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” Tuesday, May 29, 12
  • 103. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio Tuesday, May 29, 12
  • 104. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) Tuesday, May 29, 12
  • 105. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density Tuesday, May 29, 12
  • 106. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi Tuesday, May 29, 12
  • 107. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi ‣ Medium density: 130 - 180 dpi Tuesday, May 29, 12
  • 108. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi ‣ Medium density: 130 - 180 dpi ‣ High density: 180 - 270 dpi Tuesday, May 29, 12
  • 109. fragmentation ‣ screen sizes ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” ‣ screen aspect ratio ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) ‣ screen pixel density ‣ Low density: 100 - 130 dpi ‣ Medium density: 130 - 180 dpi ‣ High density: 180 - 270 dpi ‣ Ultra high density: 270 - 350 dpi Tuesday, May 29, 12
  • 110. fragmentation QQVGA QVGA WQVGA FWQVGA ‣ screen sizes LQVGA HVGA ‣ 2.5”, 3”, 3.5”, 4”, 4.5”, 5.5”, 7”, 10” nHD ‣ screen aspect ratio WVGA FWVGA ‣ 4:3, 16:9 (wide-screen), 5:3 (eur wide) VGA ‣ screen pixel density DVGA QHD ‣ Low density: 100 - 130 dpi WSVGA ‣ Medium density: 130 - 180 dpi HD XGA ‣ High density: 180 - 270 dpi WXGA ‣ Ultra high density: 270 - 350 dpi QXGA Tuesday, May 29, 12
  • 113. mobile javascript testing Tuesday, May 29, 12
  • 114. emulators mobilexweb.com/emulators Tuesday, May 29, 12
  • 115. friends lots of them and with different devices Tuesday, May 29, 12
  • 116. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.com Tuesday, May 29, 12
  • 117. mobile javascript debugging Tuesday, May 29, 12
  • 118. debugging tools Remote Web Inspector • BlackBerry Smartphones 7 • BlackBerry PlayBook • Google Chrome for Android 4 • Opera Mobile Tuesday, May 29, 12
  • 119. debugging tools Adobe Shadow adobe.com/go/shadow Tuesday, May 29, 12
  • 120. debugging tools iwebinspector.com Tuesday, May 29, 12
  • 121. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
  • 126. mobile web is slow Picture from Simon Howden freedigitalphotos.net! Tuesday, May 29, 12
  • 128. battery consumption WW 2012 – Session: Mobile Web Performance April 16–20, 2012, Lyon, Fra 50 45 40 Energy (Joules) 35 30 25 20 15 10 5 0 live.com microsoft weather picasa baidu facebook imdb youtube go.com wall st. journal blogger 3G setup nytimes tumblr wikipedia apple ebay amazon gmail yahoo cnn bbc engadget natgeo wordpress aol Figure 6: Energy consumption of top websites Web site Comment % Battery Traffic (bytes) life Upload Download The resulting numbers are shown in Figure 6. Note that the e m.gmail.com inbox 0.41 9050 12048 bars are so small that they are barely visible. m.picasa.com m.aol.com Who Killed My Battery ~ mobilexweb.com/go/battery user albums portal home 0.43 0.59 8223 11927 15475 37085 The left most column in Figure 6 shows the energy neede set up a 3G connection and download a few bytes without any m.amazon.com product page 0.48 9523 26838 ditional processing. Since all navigation requests must setup a mobile.nytimes.com US home page 0.53 15386 66336 touch.facebook.com facebook wall 0.65 30214 81040 connection we treat this measurement as a baseline where th mw.weather.com Stanford weather 0.62 38253 134531 teresting differences between web sites are above this line. apple.com Tuesday, May 29, 12 home page 1.41 86888 716835 Figure 6 is generated from the mobile versions of the
  • 129. battery consumption Amazon consumes 17% energy in a non used JS jQuery.js ~ 4 joules (0,02%) ~5000 jQuery parsings per charge Who Killed My Battery ~ mobilexweb.com/go/battery Tuesday, May 29, 12
  • 133. problems for us 1. It’s different 2. native vs. web 3. standards 4. vendors hate web developers 5. users hate web developers Tuesday, May 29, 12
  • 136. performance, performance Tuesday, May 29, 12
  • 138. don’t be fanatic photo by Kurt Christensen (flickr) Tuesday, May 29, 12
  • 140. be futurefriend.ly Tuesday, May 29, 12
  • 141. you can reach a good thank you! experience firt.mobi Tomorrow firtman@gmail.com 10.30am twitter: @firt www.mobilexweb.com Book signing Pictures)from)freedigitalphotos.net) Tuesday, May 29, 12