SlideShare a Scribd company logo
1 of 58
Building jQuery Mobile Web Apps

                                by

           Jag Reehal (@jagreehal)




OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Agenda
 About   me

   What this talk is about

   Why use a mobile web UI framework?

   Why jQuery Mobile?

   Look at some of the basic building blocks

   Build an app using jQuery Mobile

   What are the downsides?

   Wrap up




                      OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
About Me

   Live in Cambridge


   I've been a freelance web developer for over twelve years


   Freelance mobile web developer for over two years


   Microsoft and Java certified


   Experience of building native iOS and Android apps


   Barcelona supporter


             OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
This talk is about

    Developing jQuery Mobile web apps


    (jQuery Mobile can be used as the UI for native apps)



    This talk is not about native vs. web apps




              OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Why use a mobile web UI framework?

Because of the




                             BROWSER!


        We want the SAME markup to be rendered CONSISTANTLY across
        browsers




                 OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Why use a mobile web UI framework?

    Who did web development in the days of Netscape?




    My first job after graduating in 2000 was to make Fords ecommerce
    website work with… IE6



    The only way was to have separate files for each browser



    Now I’m a mobile web developer and the browser problem
    has got worse…


              OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
It’s not just about native browsers…




          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
because users could be using…




             And there’s more I couldn’t fit in!


http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php

                        OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Worldwide mobile browser trends for the
last 6 months




         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
European mobile browser trends for the
last 6 months




         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
North American mobile browser trends for
the last 6 months




         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
African mobile browser trends for the last 6
months




          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Asian mobile browser trends for the last 6
months




          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
And don’t forget about browser versions!




         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
And let’s not forget about device
fragmentation (yes I’m looking at you
Android)




          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
“write less, do more”



OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
jQuery Mobile

   makes it easy to develop user interfaces for mobile web apps


   has events for touch actions like tap, tap-and-hold, and swipe


   uses progressive enhancement so your UI will adapt to what the browser supports


   is responsive so can adapt to screen size and orientation


   is free to use for commercial projects


   excellent support on its’ forum and on StackOverflow



                      OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Supports more platforms than any other
mobile web UI framework




         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Had ‘A’ grade support for mobile browsers
before V1




         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Is fast and compact

      31kb                        jQuery.min.js


      24kb                        jQuery.mobile.min.js


     7kb                          jQuery.mobile.min.css

 You can use content distribution network (CDN) or self host

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Let’s build a app using jQuery Mobile




 App provides functionality for a user to register and view events and who’s
  attending

 Aim to show how easy it is to build a optimised UI for mobiles and tablets which
  can detect touch specific actions e.g. swipe.

 The code is on github - https://github.com/operationmobile/jQueryMobileDemo

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
I will use




 Just jQuery and the jQuery Mobile Framework NO other JavaScript library

 Minimal custom CSS styles

 No server side code

 A text editor – no need for a special IDE

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
If you’re here (i.e. not viewing this on
slideshare) follow along!

 Follow along http://tinyurl.com/jqmpres       View final http://tinyurl.com/jqmfinal




                     OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 1. Basic page template

 Viewport meta tag for layout

 Uses jQuery CDN for JavaScript and CSS resources

 Uses data-role HTML5 attributes

<div data-role="page">
  <div data-role="header">
     <h1>Page Title</h1>
  </div>
  <div data-role="content">
     <p>Page content goes here.</p>
  </div>
  <div data-role="footer">
     <h4>Page Footer</h4>
  </div>
</div>


FILE: 1_basic_page_template.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 2. Fixed footer

 Use data-position="fixed" to lock the footer to the bottom
  of the page e.g.


<div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
</div>




FILE: 2_basic_page_template_fixed_footer.html

                     OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 3. Multi page template

 Can have multiple pages in single html file

 Each page much have a unique Id

 Uses hash tags to navigate between pages e.g.

<a href="#bar">bar</a>

would go to the page

<div data-role="page" id="bar">




FILE: 3_multi_page_template.html

                       OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 4. Page transitions

 Lots of options

 Can configure default using config

 Use on individual links

<a href="#bar" data-role="button" data-
transition="fade">fade</a>

 Uses same transition to go back

 BTW you can make links into buttons using a data-
  role attribute




FILE: 4_multi_page_template_page_transitions.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 5. Multi page fixed footers

 Must specify fixed data position attribute for smooth
  experience otherwise their (initial) position can be random

 Use same data-id attribute in footers

<div data-role="header" data-position="fixed">
  <h1>Foo</h1>
</div>
<div data-role="footer" data-position="fixed" data-id="myfooter">
  <h4>Page Footer</h4>
</div>




FILE: 5_multi_page_template_fixed_header_footer_between_transition.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 6. Multi page back button

 Default is not to show a back button

 Default can be overridden in config

 Or you can add it on page by page basis

<div data-role="page" id="bar" data-add-back-btn="true">
</div>

 Think about if you really need one e.g. browser/device
  back button




FILE: 6_multi_page_template_page_back_button.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 7. Header buttons

 Can specify position to be on the left or right side using
  CSS class

 Can use icon that comes with the framework or use your
  own by using data-icon attribute

<div data-role="header">
  <a href="#" class="ui-btn-right" data-icon="home">Home</a>
  <h1>Page Title</h1>
</div>




FILE: 7_header_button_on_right.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 8. Dialog Pages

 Same as a page but with data-rel attribute in link to specify
  target is a dialog

 Can use same transitions as a page

 Can add custom buttons etc. to close the dialog

<a href="#bar" data-rel="dialog">Bar</a>




FILE: 8_dialogs.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 9. Demo template

 Contains a page with a dialog

 Specifies lang=“en” in head element

 Set the charset to UTF-8




FILE: 9_demo_template.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 10. Add a list

 Want to display a list of events

 Same as normal HTML list but with added attribute
  that jQuery Mobile uses to render list UI

<ul data-role="listview">
  <li><a href="#event">Jag Reehal's talk</a></li>
</ul>




FILE: 10_demo_using_list.html

                     OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 11. Add a list divider

 Use list dividers to enhance the UX of your app

 Add list item with data-role attribute

<ul data-role="listview">
  <li data-role="list-divider">Upcoming Events</li>
  <li><a href="#event">Jag Reehal's talk</a></li>
</ul>




FILE: 11_demo_using_list_divider.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 12. Use data inset for rounded corners

 Adding data-inset attribute gives lists nicer styling

<ul data-role="listview" data-inset="true">

 Margin can also be added manually using CSS styles




FILE: 12_demo_using_list_inset.html

                        OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 13. Create event page

 New page to show event details

 Users can register to attend an event

 View people who are attending




FILE: 13_create_event_page.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 14. Add event actions using buttons

 Use data-role and data-type attributes to align buttons

<div data-role="controlgroup" data-type="horizontal">
…
</div>




FILE: 14_demo_events_actions_using_buttons_in_footer.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 15. Adding actions in the footer v2

 Use navbar data-role with icons for nice action
  buttons

<div data-role="navbar">
  <ul>
  …
  </ul>
</div>

 Icons can be placed above, below and to the left or
  right of the text




FILE: 15_demo_event_actions_using_nav_in_footer.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 16. Add Registration Form
Way to much code to list! Get the code to see the mark up!




 Uses native controls – unless
  you specify not to

 Running the demo will only show
  input uses type so only numbers
  for a type=“number” field

 Custom controls!




FILE: 16_demo_registration_form.html

                                  OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 17. Page events to handle form submit

 Use page event to set up handler for form submit
  action

 Do NOT use $(document).ready

 Use pagecreate events – see docs for more info




FILE: 17_demo_jQueryMobile_page_events_to_handle_form_submit.html

                  OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 18. Store attendees

 Could use form submit to send data to a server

 In this example add attendee to a JavaScript collection

 Which is not persisted if you refresh the page!

 We’ll add HTML5 local storage later in the demo




FILE: 18_demo_storing_attendees.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 19. Add sample data

 Use the populate button to add items into the
  JavaScript array!

 Not going to be happy if you’re a Real Madrid fan ;)




FILE: 19_demo_add_sample_data.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 20. Show attendees in Event page

 In the pageshow event loop over attendees
  collection and add list item for each attendee

 Don’t forget to call refresh when you’ve added
  or deleted an element!

$('#attendees').listview('refresh');




FILE: 20_demo_show_attendees_in_event_page.html

                        OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 21. Fix list view wrapping

 Use CSS style so that list items don’t have ellipses

.ui-li-desc {white-space: normal;}




FILE: 21_demo_fix_list_view_wrapping.html

                      OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 22. Show list filter

 Built in to the framework is the to filter list options

 Can specify your own placeholder

 In the demo it’s only shown when at least one
  attendee has registered

 Can be added by using data-filter attribute

<ul data-role="listview" data-filter="true">
</ul>




FILE: 22_demo_show_list_filter.html

                      OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 23. Show thumbnails

 Convention based list templates are built in to the
  framework

 If img is the first element in a list item element then it
  will used as a thumbnail

<li>
   <img/>
   <h3>Name</h3>
   <p>Bio</p>
</li>

 Demo uses twitter avatar as thumbnail




FILE: 23_demo_show_thumbnails.html

                     OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 24. Create attendee page

 Show attendee information

 But each link is to the same page… so how can
  you pass data?

     Local storage?

     URL?

     jQuery data?

     Set JavaScript variable?




FILE: 24_create_show_attendee_page.html

                  OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 25. Show attendee page passing id

 Add id attribute to each list item element

 On the click event of a list item element set id as
  current id

 Populate placeholders in attendee details page

 Show the attendees details page




FILE: 25_demo_show_attendee_passing_id.html

                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 26. Attendee Swipe

 Because jQuery Mobile is touch optimised

 Adding touch events is easy!

 In the demo swipe left and right to view attendees!

 This is done by binding to the events

$('#attendee').bind('swiperight', function (e) {});

$('#attendee').bind('swipeleft', function (e) {});




FILE: 26_demo_attendee_swipe.html

                       OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 27. Using the themes

 jQuery Mobile comes with 5 themes




 Themes can be set by using the data-theme attribute

<div data-role="page" id="home" data-theme="e">




FILE: 27_demo_use_theme.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 28. Using the themes on elements

 Can use mixture of themes for different elements e.g.
  theme ‘e’ for the page and theme ‘a’ for a list

<div data-role="page" id="home" data-theme="e">
  <div data-role= "listview" data-theme="a">
  </div>
</div>




FILE: 28_demo_use_theme_on_elements.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Step 29. Using themeroller

 jQuery Mobile tool for creating your own theme -
  http://jquerymobile.com/themeroller/




 Use the UI to create theme, download and link to your custom
  style

<link rel="stylesheet" href="themes/browntheme.css" />




FILE: 29_demo_using_themeroller

                     OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Steps 30. Use HTML5 local storage to store
attendees


 Not a jQuery Mobile feature

         Not checking if localstorage is supported on
         your device - we could have used a polyfill

 Very easy to integrate into demo – only a few lines
  need to be added




FILE: 30_demo_local_storage.html

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Want further inspiration?

 If you want further inspiration checkout the jQuery Mobile
  gallery http://www.jqmgallery.com/




                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Operation Mobile Blog

 Check out my blog series on Yummy Bakes
  (http://tinyurl.com/ybmvc)

 Looking at mobile web UX, performance, etc.

 Version using ASP.NET MVC 4

 Version using knockout.js

 Version using backbone.js

 Create native versions using Phonegap and Titanium
  Mobile

 Use other mobile web frameworks such as Kendo
  UI, jQMobi and Sencha Touch

 Automated UI testing

                  OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
What are the downsides?

 Not suited for building games (but that’s not what it was built for)


 Doesn’t give full native experience


 Favors iOS. A lot of web UI frameworks are much smoother on iOS


     Ask to see a demo on a friends Android/iOS device


     Opportunity for other frameworks to take advantage e.g. jQMobi


 Heavyweight if all you want is to detect touch events – use Zepto.js
  instead


                    OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
So to wrap up

 jQuery Mobile is the most compatible mobile web UI framework out there


 Although not native gives consistent experience across wide range of
  devices with progressive enhancement

 Yes you have to may have to write JavaScript to do anything useful and do
  some custom styling


 But 99.9% of the time you'll just be using the framework!


 You saw how quickly we put together a touch enabled web app


 Can be used to build native apps (talk to your organiser if you want me to do
  a talk on this!)

                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Feedback

 Let me know after the talk

 On twitter @jagreehal

 By email jag@operationmobile.com




                   OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

More Related Content

What's hot

Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump StartHaim Michael
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Aaron Gustafson
 
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Aaron Gustafson
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Rod Martin
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Eye candy for your iPhone
Eye candy for your iPhoneEye candy for your iPhone
Eye candy for your iPhoneBrian Shim
 
Top Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentTop Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentSimon Guest
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsJames Pearce
 
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
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames Pearce
 
jQuery Mobile and JavaScript
jQuery Mobile and JavaScriptjQuery Mobile and JavaScript
jQuery Mobile and JavaScriptGary Yeh
 

What's hot (20)

Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump Start
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
 
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
 
Fundamental JQuery
Fundamental JQueryFundamental JQuery
Fundamental JQuery
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Eye candy for your iPhone
Eye candy for your iPhoneEye candy for your iPhone
Eye candy for your iPhone
 
Top Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentTop Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web Development
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
 
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
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
jQuery Mobile and JavaScript
jQuery Mobile and JavaScriptjQuery Mobile and JavaScript
jQuery Mobile and JavaScript
 

Viewers also liked

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynotedmethvin
 
CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsMarc Grabanski
 
Pushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency SystemPushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency SystemKevin Ballard
 
End of year review/preview
End of year review/previewEnd of year review/preview
End of year review/previewNigelG
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social ObjectsJESS3
 
jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump StartTroy Miles
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhereStoyan Stefanov
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Mapfrankieroberto
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 
Menoovr
Menoovr Menoovr
Menoovr menoovr
 
Hoppala at O'Reilly Where 2.0 Conference
Hoppala at O'Reilly Where 2.0 ConferenceHoppala at O'Reilly Where 2.0 Conference
Hoppala at O'Reilly Where 2.0 ConferenceMarc René Gardeya
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Gardendigitalbindery
 

Viewers also liked (20)

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Unit testing
Unit testingUnit testing
Unit testing
 
Impact of Open Source
Impact of Open SourceImpact of Open Source
Impact of Open Source
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
 
Pushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency SystemPushing Python: Building a High Throughput, Low Latency System
Pushing Python: Building a High Throughput, Low Latency System
 
Frameworks
FrameworksFrameworks
Frameworks
 
End of year review/preview
End of year review/previewEnd of year review/preview
End of year review/preview
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social Objects
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump Start
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
Menoovr
Menoovr Menoovr
Menoovr
 
Hoppala at O'Reilly Where 2.0 Conference
Hoppala at O'Reilly Where 2.0 ConferenceHoppala at O'Reilly Where 2.0 Conference
Hoppala at O'Reilly Where 2.0 Conference
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Kevin Kelly
Kevin KellyKevin Kelly
Kevin Kelly
 
Demand Media
Demand MediaDemand Media
Demand Media
 

Similar to Building jQuery Mobile Web Apps

Introduction to j query mobile framework
Introduction to j query mobile frameworkIntroduction to j query mobile framework
Introduction to j query mobile frameworkShreerang Patwardhan
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileTerry Ryan
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make itJonathan Snook
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingHemant Sarthak
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Building WebApp with HTML5
Building WebApp with HTML5Building WebApp with HTML5
Building WebApp with HTML5Tien Tran Le Duy
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesRyan Stewart
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile appRyan Stewart
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...
02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...
02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...Cristian Rodríguez Enríquez
 
Mobilizing your Drupal Site - Vancouver League of Drupallers
Mobilizing your Drupal Site - Vancouver League of DrupallersMobilizing your Drupal Site - Vancouver League of Drupallers
Mobilizing your Drupal Site - Vancouver League of Drupallersbaronmunchowsen
 

Similar to Building jQuery Mobile Web Apps (20)

Introduction to j query mobile framework
Introduction to j query mobile frameworkIntroduction to j query mobile framework
Introduction to j query mobile framework
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Building WebApp with HTML5
Building WebApp with HTML5Building WebApp with HTML5
Building WebApp with HTML5
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...
02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...
02 Building cross-platform mobile applications with jQuery Mobile / Desarroll...
 
Mobilizing your Drupal Site - Vancouver League of Drupallers
Mobilizing your Drupal Site - Vancouver League of DrupallersMobilizing your Drupal Site - Vancouver League of Drupallers
Mobilizing your Drupal Site - Vancouver League of Drupallers
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 

Recently uploaded

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
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
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
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
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Recently uploaded (20)

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
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
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
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...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

Building jQuery Mobile Web Apps

  • 1. Building jQuery Mobile Web Apps by Jag Reehal (@jagreehal) OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 2. Agenda  About me  What this talk is about  Why use a mobile web UI framework?  Why jQuery Mobile?  Look at some of the basic building blocks  Build an app using jQuery Mobile  What are the downsides?  Wrap up OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 3. About Me Live in Cambridge I've been a freelance web developer for over twelve years Freelance mobile web developer for over two years Microsoft and Java certified Experience of building native iOS and Android apps Barcelona supporter OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 4. This talk is about Developing jQuery Mobile web apps (jQuery Mobile can be used as the UI for native apps) This talk is not about native vs. web apps OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 5. Why use a mobile web UI framework? Because of the BROWSER! We want the SAME markup to be rendered CONSISTANTLY across browsers OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 6. Why use a mobile web UI framework? Who did web development in the days of Netscape? My first job after graduating in 2000 was to make Fords ecommerce website work with… IE6 The only way was to have separate files for each browser Now I’m a mobile web developer and the browser problem has got worse… OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 7. It’s not just about native browsers… OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 8. because users could be using… And there’s more I couldn’t fit in! http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 9. Worldwide mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 10. European mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 11. North American mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 12. African mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 13. Asian mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 14. And don’t forget about browser versions! OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 15. And let’s not forget about device fragmentation (yes I’m looking at you Android) OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 16. “write less, do more” OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 17. jQuery Mobile  makes it easy to develop user interfaces for mobile web apps  has events for touch actions like tap, tap-and-hold, and swipe  uses progressive enhancement so your UI will adapt to what the browser supports  is responsive so can adapt to screen size and orientation  is free to use for commercial projects  excellent support on its’ forum and on StackOverflow OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 18. Supports more platforms than any other mobile web UI framework OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 19. Had ‘A’ grade support for mobile browsers before V1 OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 20. Is fast and compact 31kb jQuery.min.js 24kb jQuery.mobile.min.js 7kb jQuery.mobile.min.css  You can use content distribution network (CDN) or self host OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 21. Let’s build a app using jQuery Mobile  App provides functionality for a user to register and view events and who’s attending  Aim to show how easy it is to build a optimised UI for mobiles and tablets which can detect touch specific actions e.g. swipe.  The code is on github - https://github.com/operationmobile/jQueryMobileDemo OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 22. I will use  Just jQuery and the jQuery Mobile Framework NO other JavaScript library  Minimal custom CSS styles  No server side code  A text editor – no need for a special IDE OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 23. If you’re here (i.e. not viewing this on slideshare) follow along!  Follow along http://tinyurl.com/jqmpres  View final http://tinyurl.com/jqmfinal OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 24. Step 1. Basic page template  Viewport meta tag for layout  Uses jQuery CDN for JavaScript and CSS resources  Uses data-role HTML5 attributes <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> FILE: 1_basic_page_template.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 25. Step 2. Fixed footer  Use data-position="fixed" to lock the footer to the bottom of the page e.g. <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> FILE: 2_basic_page_template_fixed_footer.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 26. Step 3. Multi page template  Can have multiple pages in single html file  Each page much have a unique Id  Uses hash tags to navigate between pages e.g. <a href="#bar">bar</a> would go to the page <div data-role="page" id="bar"> FILE: 3_multi_page_template.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 27. Step 4. Page transitions  Lots of options  Can configure default using config  Use on individual links <a href="#bar" data-role="button" data- transition="fade">fade</a>  Uses same transition to go back  BTW you can make links into buttons using a data- role attribute FILE: 4_multi_page_template_page_transitions.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 28. Step 5. Multi page fixed footers  Must specify fixed data position attribute for smooth experience otherwise their (initial) position can be random  Use same data-id attribute in footers <div data-role="header" data-position="fixed"> <h1>Foo</h1> </div> <div data-role="footer" data-position="fixed" data-id="myfooter"> <h4>Page Footer</h4> </div> FILE: 5_multi_page_template_fixed_header_footer_between_transition.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 29. Step 6. Multi page back button  Default is not to show a back button  Default can be overridden in config  Or you can add it on page by page basis <div data-role="page" id="bar" data-add-back-btn="true"> </div>  Think about if you really need one e.g. browser/device back button FILE: 6_multi_page_template_page_back_button.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 30. Step 7. Header buttons  Can specify position to be on the left or right side using CSS class  Can use icon that comes with the framework or use your own by using data-icon attribute <div data-role="header"> <a href="#" class="ui-btn-right" data-icon="home">Home</a> <h1>Page Title</h1> </div> FILE: 7_header_button_on_right.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 31. Step 8. Dialog Pages  Same as a page but with data-rel attribute in link to specify target is a dialog  Can use same transitions as a page  Can add custom buttons etc. to close the dialog <a href="#bar" data-rel="dialog">Bar</a> FILE: 8_dialogs.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 32. Step 9. Demo template  Contains a page with a dialog  Specifies lang=“en” in head element  Set the charset to UTF-8 FILE: 9_demo_template.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 33. Step 10. Add a list  Want to display a list of events  Same as normal HTML list but with added attribute that jQuery Mobile uses to render list UI <ul data-role="listview"> <li><a href="#event">Jag Reehal's talk</a></li> </ul> FILE: 10_demo_using_list.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 34. Step 11. Add a list divider  Use list dividers to enhance the UX of your app  Add list item with data-role attribute <ul data-role="listview"> <li data-role="list-divider">Upcoming Events</li> <li><a href="#event">Jag Reehal's talk</a></li> </ul> FILE: 11_demo_using_list_divider.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 35. Step 12. Use data inset for rounded corners  Adding data-inset attribute gives lists nicer styling <ul data-role="listview" data-inset="true">  Margin can also be added manually using CSS styles FILE: 12_demo_using_list_inset.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 36. Step 13. Create event page  New page to show event details  Users can register to attend an event  View people who are attending FILE: 13_create_event_page.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 37. Step 14. Add event actions using buttons  Use data-role and data-type attributes to align buttons <div data-role="controlgroup" data-type="horizontal"> … </div> FILE: 14_demo_events_actions_using_buttons_in_footer.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 38. Step 15. Adding actions in the footer v2  Use navbar data-role with icons for nice action buttons <div data-role="navbar"> <ul> … </ul> </div>  Icons can be placed above, below and to the left or right of the text FILE: 15_demo_event_actions_using_nav_in_footer.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 39. Step 16. Add Registration Form Way to much code to list! Get the code to see the mark up!  Uses native controls – unless you specify not to  Running the demo will only show input uses type so only numbers for a type=“number” field  Custom controls! FILE: 16_demo_registration_form.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 40. Step 17. Page events to handle form submit  Use page event to set up handler for form submit action  Do NOT use $(document).ready  Use pagecreate events – see docs for more info FILE: 17_demo_jQueryMobile_page_events_to_handle_form_submit.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 41. Step 18. Store attendees  Could use form submit to send data to a server  In this example add attendee to a JavaScript collection  Which is not persisted if you refresh the page!  We’ll add HTML5 local storage later in the demo FILE: 18_demo_storing_attendees.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 42. Step 19. Add sample data  Use the populate button to add items into the JavaScript array!  Not going to be happy if you’re a Real Madrid fan ;) FILE: 19_demo_add_sample_data.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 43. Step 20. Show attendees in Event page  In the pageshow event loop over attendees collection and add list item for each attendee  Don’t forget to call refresh when you’ve added or deleted an element! $('#attendees').listview('refresh'); FILE: 20_demo_show_attendees_in_event_page.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 44. Step 21. Fix list view wrapping  Use CSS style so that list items don’t have ellipses .ui-li-desc {white-space: normal;} FILE: 21_demo_fix_list_view_wrapping.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 45. Step 22. Show list filter  Built in to the framework is the to filter list options  Can specify your own placeholder  In the demo it’s only shown when at least one attendee has registered  Can be added by using data-filter attribute <ul data-role="listview" data-filter="true"> </ul> FILE: 22_demo_show_list_filter.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 46. Step 23. Show thumbnails  Convention based list templates are built in to the framework  If img is the first element in a list item element then it will used as a thumbnail <li> <img/> <h3>Name</h3> <p>Bio</p> </li>  Demo uses twitter avatar as thumbnail FILE: 23_demo_show_thumbnails.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 47. Step 24. Create attendee page  Show attendee information  But each link is to the same page… so how can you pass data?  Local storage?  URL?  jQuery data?  Set JavaScript variable? FILE: 24_create_show_attendee_page.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 48. Step 25. Show attendee page passing id  Add id attribute to each list item element  On the click event of a list item element set id as current id  Populate placeholders in attendee details page  Show the attendees details page FILE: 25_demo_show_attendee_passing_id.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 49. Step 26. Attendee Swipe  Because jQuery Mobile is touch optimised  Adding touch events is easy!  In the demo swipe left and right to view attendees!  This is done by binding to the events $('#attendee').bind('swiperight', function (e) {}); $('#attendee').bind('swipeleft', function (e) {}); FILE: 26_demo_attendee_swipe.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 50. Step 27. Using the themes  jQuery Mobile comes with 5 themes  Themes can be set by using the data-theme attribute <div data-role="page" id="home" data-theme="e"> FILE: 27_demo_use_theme.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 51. Step 28. Using the themes on elements  Can use mixture of themes for different elements e.g. theme ‘e’ for the page and theme ‘a’ for a list <div data-role="page" id="home" data-theme="e"> <div data-role= "listview" data-theme="a"> </div> </div> FILE: 28_demo_use_theme_on_elements.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 52. Step 29. Using themeroller  jQuery Mobile tool for creating your own theme - http://jquerymobile.com/themeroller/  Use the UI to create theme, download and link to your custom style <link rel="stylesheet" href="themes/browntheme.css" /> FILE: 29_demo_using_themeroller OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 53. Steps 30. Use HTML5 local storage to store attendees  Not a jQuery Mobile feature Not checking if localstorage is supported on your device - we could have used a polyfill  Very easy to integrate into demo – only a few lines need to be added FILE: 30_demo_local_storage.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 54. Want further inspiration?  If you want further inspiration checkout the jQuery Mobile gallery http://www.jqmgallery.com/ OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 55. Operation Mobile Blog  Check out my blog series on Yummy Bakes (http://tinyurl.com/ybmvc)  Looking at mobile web UX, performance, etc.  Version using ASP.NET MVC 4  Version using knockout.js  Version using backbone.js  Create native versions using Phonegap and Titanium Mobile  Use other mobile web frameworks such as Kendo UI, jQMobi and Sencha Touch  Automated UI testing OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 56. What are the downsides?  Not suited for building games (but that’s not what it was built for)  Doesn’t give full native experience  Favors iOS. A lot of web UI frameworks are much smoother on iOS  Ask to see a demo on a friends Android/iOS device  Opportunity for other frameworks to take advantage e.g. jQMobi  Heavyweight if all you want is to detect touch events – use Zepto.js instead OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 57. So to wrap up  jQuery Mobile is the most compatible mobile web UI framework out there  Although not native gives consistent experience across wide range of devices with progressive enhancement  Yes you have to may have to write JavaScript to do anything useful and do some custom styling  But 99.9% of the time you'll just be using the framework!  You saw how quickly we put together a touch enabled web app  Can be used to build native apps (talk to your organiser if you want me to do a talk on this!) OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  • 58. Feedback  Let me know after the talk  On twitter @jagreehal  By email jag@operationmobile.com OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION