SlideShare a Scribd company logo
1 of 52
Download to read offline
Mobile JavaScript
Brian LeRoux
 Nitobi Software
The majority of internet use will
     be via a mobile device in 5 years.
                     - Brian LeRoux, 2007 *




* credible expert with vested interest in the mobile web
Small screens.
Less memory.
Less CPU.
Less hard drive space if any.
Sketchy connectivity.
Constraints == Focus




That is why 8 bit games still pwn.
Webkit




         6
Yay Webkit!


          Good!
          sqlite
          cache manifest
          css awesome
          custom fontage
Bad *




        * many variants
        ** not mozilla
Ugly
•   Blackberry less than 4.6 have no XHR

•   Windows Mobile runs IE 4

•   Or worse: IE 6 + 7
Execution speed is not a problem.
           The footprint is.
XUI
2.4 kb


10x Smaller than jQuery / Dojo
Good enough.

DOM / Event / Style / XHR / FX
Easily extended
What about UI components?
FUCK UI components.
Apps built w/ components look like it.
Solve your unique problem.

        goals > features
Tapbots, for example.
This is the modern equivalent of
                     Outlook Express.




Fuck components. Especially native components.
Solve your problem.
That said: jQTouch is Badass.
  If all you need is an iPhone solution.



           http://www.jqtouch.com/
XUI

By example.
Selectors
  // basics
  x$('div.foo');
  x$('ul#global-nav li.selected');

  // element literals
  x$(window);
  x$(document);

  // lists
  x$('li', 'div');

  // arrays even
  x$(['div#foo', 'div.bar']);
Chaining, of course
x$('ul#nav li a:first').html('hey there').css({color:'blue'});
Helpful stuff

x$('ul li').has('ul li.selected');
x$('ul li').not('ul li.selected');
x$('.book').each(function() { ... });

...and a bunch more.
DOM manipulation basics




x$(‘#protection’).html( '<strong>hard wood</strong>' );
DOM helpers



inner
outer 
top
bottom
remove
before
afte
By popular demand
// getter
var aboutUrl = x$('a.about').attr('href');

// setter
x$('a.mysite').attr('href','http://westcoastlogic.com');
Style BS


 css
 addClass
 hasClass
 removeClass
Events   click
         load
         touchstart
         touchmove
         touchend
         touchcancel
         gesturestart
         gesturechange
         gestureend
         orientationchange
FX
     x$('#fx').tween({background:'red', duration:1.5 });
Super hackable.
BTW!
Checkout: http://phonegap.com for (most) of these APIs:

Geolocation
Accelerometer
Notifications
Media playback
Camera
Device info
Contacts                                  On these devices:
Online/Offline
SMS / Telephone                           iPhone / iPod Touch
Magnetometer                              Android
                                          Blackberry
                                          Nokia
                                          Palm
                                          Windows Mobile
Thanks!
              
      brian@nitobi.com
 http://westcoastlogic.com
http:twitter.com/brianleroux
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript

More Related Content

Similar to Mobile JavaScript

Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
davyjones
 
Falsy Values - Warsaw 2011
Falsy Values - Warsaw 2011Falsy Values - Warsaw 2011
Falsy Values - Warsaw 2011
Brian LeRoux
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .net
Chris Love
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Patrick Lauke
 

Similar to Mobile JavaScript (20)

Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Falsy Values - Warsaw 2011
Falsy Values - Warsaw 2011Falsy Values - Warsaw 2011
Falsy Values - Warsaw 2011
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014
 
Txjs
TxjsTxjs
Txjs
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .net
 
Mobilise your ASP.NET website
Mobilise your ASP.NET websiteMobilise your ASP.NET website
Mobilise your ASP.NET website
 
Mobile html5 v2
Mobile html5 v2Mobile html5 v2
Mobile html5 v2
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
 
Cross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyCross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case study
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. WebThe Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Real World Lessons in jQuery Mobile
Real World Lessons in jQuery MobileReal World Lessons in jQuery Mobile
Real World Lessons in jQuery Mobile
 
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
 

More from Brian LeRoux (15)

Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
Mobeers waterloo-2011
Mobeers waterloo-2011Mobeers waterloo-2011
Mobeers waterloo-2011
 
Phonegap 2.x
Phonegap 2.xPhonegap 2.x
Phonegap 2.x
 
TxJS 2011
TxJS 2011TxJS 2011
TxJS 2011
 
Nitobi/PhoneGap at Bootup 2011
Nitobi/PhoneGap at Bootup 2011Nitobi/PhoneGap at Bootup 2011
Nitobi/PhoneGap at Bootup 2011
 
After HTML5 Mobilism 2011
After HTML5 Mobilism 2011After HTML5 Mobilism 2011
After HTML5 Mobilism 2011
 
Mobile Knife Fighting at JSConf US
Mobile Knife Fighting at JSConf US Mobile Knife Fighting at JSConf US
Mobile Knife Fighting at JSConf US
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
Fullfrontal 2010
Fullfrontal 2010Fullfrontal 2010
Fullfrontal 2010
 
Palm Developer Day PhoneGap
Palm Developer Day PhoneGap Palm Developer Day PhoneGap
Palm Developer Day PhoneGap
 
Scurvyconf
ScurvyconfScurvyconf
Scurvyconf
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
Mobile Web App Development
Mobile Web App DevelopmentMobile Web App Development
Mobile Web App Development
 
Phonegap 1.0
Phonegap 1.0Phonegap 1.0
Phonegap 1.0
 
PhoneGap at JSConf
PhoneGap at JSConfPhoneGap at JSConf
PhoneGap at JSConf
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Precisely
 

Recently uploaded (20)

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
 

Mobile JavaScript