This 6 hour, hands-on training class introduces you and teaches you intermediate to advanced mobile web development using jQuery Mobile. We get you up and running with this popular JavaScript framework for creating mobile apps and mobile optimized web sites! In this six hour class, you will learn how to develop client side user interfaces for smart phones and tablets.
2. Want more? Follow me for more tutorials
and source code.
@therockncoder
Saturday, June 15, 13
3. Check out my videos:
www.youtube.com/rockncoder
Saturday, June 15, 13
4. Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder
Saturday, June 15, 13
5. Before We Begin
⢠This class will move fast
⢠Donât worry if you donât complete an
exercise
⢠The exercises and solutions are available
for download
⢠All slides are available for download
Saturday, June 15, 13
6. What Are Going To
Do?
We are going to learn about jQuery Mobile by examining a
working application.We arenât going to decompose each
line of code, instead we will examine each major area of
functionality.
Saturday, June 15, 13
10. âYou have to learn to fake
the funk before you can
begin to make the funk.â
Saturday, June 15, 13
11. HTML5 Overview
⢠Fast Facts
⢠Best Practices
⢠Exercise - Creating a semantic SPA
⢠Summary
Saturday, June 15, 13
12. Fast Facts
⢠HTML5 not ofďŹcial but in wide use
⢠Well supported by smart phones: iPhone,
Android, Blackberry, and WP8
⢠W3C analyzed millions of web pages to
decide on new semantic tags
⢠SPA - single page application
Saturday, June 15, 13
13. Best Practices
⢠Use semantic tags for clarity
⢠Place multiple pages together for speed
⢠Use page transitions for a better UX
Saturday, June 15, 13
14. Exercise #1
Semantic SPA
⢠Start with the exercise folder
⢠Add a second JQM page
⢠Use transitions to smooth page change
Saturday, June 15, 13
15. Summary
⢠The new semantic tags in HTML5 increase
clarity
⢠jQuery Mobile includes attributes to
improve app look and feel
Saturday, June 15, 13
16. âJava is to JavaScript as
Car is to Carpet.â
Saturday, June 15, 13
17. JavaScript Overview
⢠Fast Facts
⢠The Power Trio
⢠Events
⢠Best Practices
⢠Exercise - Create page code
⢠Summary
Saturday, June 15, 13
18. Fast Facts
⢠Created by Brendan Eich of Netscape
⢠Originally named LiveScript, but renamed
for marketing purposes
⢠Based on Self and Scheme languages, but
not C
Saturday, June 15, 13
19. The Power Trio
⢠Objects
⢠Functions
⢠Closures
Saturday, June 15, 13
20. Objects
⢠Are associative arrays or dictionaries
consisting of key/value pairs
⢠The key can be ANY string
⢠Can be modiďŹed at run-time
⢠No difference between dot and bracket
notations
Saturday, June 15, 13
21. Functions
⢠Are ďŹrst-class entities
⢠They are objects themselves and can have
properties and methods
⢠The provide the primary method of
information hiding
⢠Can be nested and passed as parameters
Saturday, June 15, 13
22. Closures
⢠A very tough concept to grasp
⢠A closure is a special kind of object that
combines two things: a function, and the
environment in which that function was
created.
Saturday, June 15, 13
23. Events
⢠A loosely couple way of component
communication
⢠Receive or handle events
⢠Transmit or trigger events
⢠In jQuery .on() and .off() are preferred
Saturday, June 15, 13
24. Best Practices
⢠Minimize the use of global memory
⢠Wrap code in functions to protect it
⢠Load JS ďŹles last for speed*
⢠Use events to avoid tight coupling
Saturday, June 15, 13
25. Exercise #2
Create Page Code
⢠Start from the exercise #2 code
⢠Create code to hook events for both page
1 and 2
Saturday, June 15, 13
26. Summary
⢠JavaScript in the browser is a very dirty
environment
⢠Apps must be pro-active in order to
function well
⢠Always write your code in a structured way
Saturday, June 15, 13
27. Why not jQuery 2.0?
⢠jQuery 2.0 is available and is smaller and
faster since it no longer supports IE
versions 6, 7, and 8. Yet we use version 1.91
in the app, why? The jQuery Mobile team
has not yet upgraded JQM to support it.
Saturday, June 15, 13
28. Ajax pt. 1
⢠Fast Facts
⢠jQuery ajax()
⢠Promise
⢠Data Formats
⢠Exercise - Getting data from the server
⢠Summary
Saturday, June 15, 13
29. Fast Facts
⢠The web designed to load complete HTML
pages
⢠Microsoft created XMLHTTP object in 1998
⢠Mozilla based their XMLHttpRequest object
on it in 2000
⢠The XMLHttpRequest object became a
defacto standard
Saturday, June 15, 13
30. .ajax()
⢠Before the introduction of Prototype &
jQuery in 2006 communication with the
server was browser speciďŹc
⢠Performs an async HTTP request
⢠.ajax(url, [settings])
Saturday, June 15, 13
31. .promise()
⢠Returns a Promise object that is resolved
once all actions complete
⢠Considered easier to ready than callbacks
Saturday, June 15, 13
32. Data Formats
⢠There two standard data formats:
⢠JSON - JavaScript Object Notation
⢠XML - eXtensible Markup Language
⢠JSON is the lighter of the two
Saturday, June 15, 13
33. JSON
⢠Created by Douglas Crockford in 2001
⢠JSON.stringify to serialize
⢠JSON.parse to deserialize
⢠OfďŹcially only double quotes supported
Saturday, June 15, 13
34. Best Practices
⢠Always be prepared for failure
⢠Prefer chunky over chatty
⢠Prefer JSON over XML
⢠Use double quotes in JSON
Saturday, June 15, 13
35. Exercise #3
Getting Data
⢠Starting from exercise #3
⢠Make a call toYP API
⢠Use an alert or console.log to display
results
Saturday, June 15, 13
36. Summary
⢠Its ability to do cross-browser Ajax is one
of jQueryâs most popular features
⢠Ajax data to/from RESTful web services is
very popular
Saturday, June 15, 13
37. Ajax pt. 2
⢠HTTP TrafďŹc Watching
⢠Chrome & Fiddler
⢠Exercise - Paging, Getting more data
⢠Summary
Saturday, June 15, 13
38. HTTP TrafďŹc Watching
⢠Issues with Ajax often cause bugs
⢠Their async nature makes can make ďŹxing
these bugs challenging
⢠There are tools to help
Saturday, June 15, 13
39. Chrome & Fiddler
⢠Chrome includes tools to watch network
trafďŹc (lightweight)
⢠Fiddler a free tool from Telerik is also
available (super)
⢠Fiddler is only available for the PC
Saturday, June 15, 13
40. Exercise #4
Getting more data
⢠Starting from exercise #4
⢠Make more calls to theYP API which
request more data
⢠Again use alert or console.log to display
results
Saturday, June 15, 13
41. Summary
⢠Debugging Ajax issues can be tough but
there are tools to help
⢠Often the amount of data available exceeds
that which can be easily handled
Saturday, June 15, 13
42. Listviews
⢠Fast Facts
⢠Best Practices
⢠Vertical Scrolling
⢠Exercise - Creating list from data
⢠Summary
Saturday, June 15, 13
43. Fast Facts
⢠Listviews are coded as either HTML
unordered (ul) or ordered (ol) lists
⢠Can be used as menus, settings or simply
display a list of items
Saturday, June 15, 13
44. Vertical Scrolling
⢠JQM supports vertical scrolling as does any
other web site
⢠Can also ďŹx the position of the header and
footer
Saturday, June 15, 13
45. Exercise #5
Creating a Listview
⢠Start with exercise #5
⢠Finish the listview generation code
⢠Remember to call the refresh method
Saturday, June 15, 13
46. Summary
⢠JQM out of the box supports vertical
scrolling
⢠The end result is less than app-like however
Saturday, June 15, 13
47. iScroll
⢠Fast Facts
⢠Best Practices
⢠Exercise - Implement pull to refresh
⢠Summary
Saturday, June 15, 13
48. Fast Facts
⢠iScroll4 created by Matteo Spinelli
⢠Source code is MIT Licensed
⢠Works by using CSS3 transformation
⢠Number of scroll regions only limited by
memory
Saturday, June 15, 13
50. Exercise #6
Smooth Scrolling
⢠Start with exercise #6
⢠Finished the smooth scrolling method
⢠If you have trouble, look at the working
âccâ app
Saturday, June 15, 13
51. Summary
⢠Smooth scrolling improves both UI and UX
⢠It is relatively easy to replace traditional
HTML scrolling
Saturday, June 15, 13
52. Templates
⢠Fast Facts
⢠Handlebars
⢠Best Practices
⢠Exercise - Rewrite the code to use
templates
⢠Summary
Saturday, June 15, 13
53. Fast Facts
⢠Mixing HTML with JavaScript violates
separation of concerns
⢠Templating engines allow for the inclusion
of HTML which can be modiďŹed easily
⢠HTML by deďŹnition does not operate on
unknown tags
Saturday, June 15, 13
54. Handlebars.js
⢠There are many of templating engines
⢠Handlebars.js works on both the client and
the server
⢠The project is maintain by the same team
as Ember.js
Saturday, June 15, 13
55. Best Practices
⢠HTML is content
⢠CSS is presentation
⢠JavaScript is behavior
⢠Separation of Concerns (SOC) states not
to mix any of the three
Saturday, June 15, 13
56. Exercise #7
Using Templates
⢠Start from exercise #7
⢠Replace the use of JS strings with a
template
Saturday, June 15, 13
57. Summary
⢠Using templates keeps us from violating
separation of concerns
⢠The handlebars templates are easy for both
engineers and designers to work with
Saturday, June 15, 13
58. Geolocation
⢠Fast Facts
⢠The Geolocation Object
⢠Best Practices
⢠Exercise - Get location
⢠Summary
Saturday, June 15, 13
59. Fast Facts
⢠Not actually part of HTML5
⢠User must grant web site access to the
geolocation data
⢠Can be a signiďŹcant drain on batteries
⢠Can take a signiďŹcant amount of time
before location async return
Saturday, June 15, 13
60. The Geolocation Object
⢠Part of the navigator object, which has no
ofďŹcial standard
⢠Three methods: getCurrentPosition(),
watchPosition(), clearWatch()
Saturday, June 15, 13
61. Best Practices
⢠People have just concerns about location
privacy
⢠Provide an alternative if possible
⢠Gracefully fail it not able to continue
⢠Remember to clear unneeded
watchPositions
Saturday, June 15, 13
62. Exercise #8
Getting Location
⢠Starting with exercise #8
⢠Use a console.log to display the current
latitude and longitude
Saturday, June 15, 13
63. Summary
⢠Geolocation is support by most current
browsers, mobile and desktop
⢠Power used Geolocation can drain power
and tax CPU
Saturday, June 15, 13
65. Google Maps
⢠There are many publicly available map
providers
⢠Google was chosen because of its
accuracy, simplicity, and cost (free)
⢠To use simply include a ďŹle, specify a div,
and call the draw map code
Saturday, June 15, 13
66. Exercise #9
Displaying a Map
⢠Start with exercise #9
⢠The Maps include ďŹle is present
⢠The map div is displayed on the page
⢠Write the code to make the map appear
Saturday, June 15, 13
67. Map Annotation
⢠Markers identify locations on the map
⢠You can use Googleâs markers or your own
⢠Markers can have click events
Saturday, June 15, 13
68. Exercise #10
Annotating a Map
⢠Start with exercise #10
⢠Place a maker on the map at:
⢠latitude = 33.8226203918457
⢠longitude= -118.331848144531
Saturday, June 15, 13
69. Summary
⢠Most users expect to see a map wherever
location information is displayed
⢠Google Maps is the most popular map
provider (75% of web sites)
Saturday, June 15, 13
70. Responsive Design
⢠Fast Facts
⢠Phone vs Tablet
⢠Grids, Divs, and Tables
⢠Exercise - Make display responsive
⢠Summary
Saturday, June 15, 13
71. Fast Facts
⢠Responsive design means supporting
multiple device resolutions from a single
application
⢠JQM added the Grid object to support
responsive design
⢠JQM 1.3.0 added tables
Saturday, June 15, 13
72. Best Practices
⢠Be careful of one size ďŹts all solutions
⢠The needs of your mobile user maybe
different than those on desktop
⢠Always keep bandwidth restrictions in mind
Saturday, June 15, 13
73. Exercise #11
Making a Responsive Design
⢠Start with exercise #11
⢠Adjust the values of the media queries to
see how the app adjust
Saturday, June 15, 13
74. Summary
⢠Responsive Design is difďŹcult and must be
thoroughly planned
⢠A solution for one web site will not
necessarily work for another
Saturday, June 15, 13
75. Media
⢠Fast Facts
⢠Taking a picture (yes, from a mobile
browser)
⢠Exercise - Upload a picture to a server
⢠Summary
Saturday, June 15, 13
76. Fast Facts
⢠Modern smart phones treat the input
type=âďŹleâ as the camera
⢠Can take picture or video or choose from
photo album
⢠The real work is done on the server
Saturday, June 15, 13
77. Taking and Uploading a
Picture
⢠Must turn off JQMâs Ajax with data-
ajax=âfalseâ
⢠Use a input type=ďŹle with form post with
enctype=âmultipart/form-dataâ
Saturday, June 15, 13
78. Exercise #12
Uploading a Picture
⢠Start with exercise #12
⢠Complete form tag for upload
⢠You will not actually be able to submit the
photo since that requires a server
Saturday, June 15, 13
79. Summary
⢠Many mobile browser support photo
upload, but not all
⢠Can upload photo and video but keep in
mind how much memory is required
⢠Can also choose from photos in the userâs
album
Saturday, June 15, 13
80. Charts
⢠Fast Facts
⢠jqPlots
⢠Exercise - Create a chart from hours of
operation
⢠Summary
Saturday, June 15, 13
81. Fast Facts
⢠Humans understand visual faster than
written
⢠Charts are a standard way to render
numeric data
⢠There are lots of charting solutions for the
web
Saturday, June 15, 13
82. jqPlot
⢠An open source project by Chris Leonello
⢠A jQuery widget
⢠Supports its own plug-in
⢠Rendered completely on the client
Saturday, June 15, 13
83. Best Practices
⢠Charts are computationally expensive to
render
⢠It is possible to render charts dynamically,
but not recommended
Saturday, June 15, 13
84. Exercise #13
Charting Data
⢠Start from exercise #13
⢠Implement bar chart to display hours of
operation of coffee shops
Saturday, June 15, 13
87. My Links
⢠@therockncoder
⢠https://github.com/Rockncoder
⢠http://youtube.com/rockncoder
⢠http://slideshare.net/rockncoder
Saturday, June 15, 13
88. Course Summary
⢠When in doubt follow best practices
⢠Build a Coffee+Coffee app of your own
⢠Still lots we havenât covered
Saturday, June 15, 13
89. jQuery Mobile Advance
⢠MV* Frameworks
⢠Responsive Design
⢠Deep Templating
⢠Memory Management
⢠Unit Testing
⢠Nag Phillip until he schedules it!
Saturday, June 15, 13