89
jQuery Mobile Jump Start Troy Miles aka @therockncoder Saturday, June 15, 13

jQuery Mobile Jump Start

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: jQuery Mobile Jump Start

jQuery Mobile Jump Start

Troy Miles aka @therockncoder

Saturday, June 15, 13

Page 2: jQuery Mobile Jump Start

Want more? Follow me for more tutorials and source code.@therockncoder

Saturday, June 15, 13

Page 3: jQuery Mobile Jump Start

Check out my videos:www.youtube.com/rockncoder

Saturday, June 15, 13

Page 4: jQuery Mobile Jump Start

Source code for my tutorials hosted on GitHub @

https://github.com/Rockncoder

Saturday, June 15, 13

Page 5: jQuery Mobile Jump Start

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

Page 6: jQuery Mobile Jump Start

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

Page 7: jQuery Mobile Jump Start

Coffee+Coffee

• Listview

• Location/Maps

• Ajax

• Templates

Saturday, June 15, 13

Page 8: jQuery Mobile Jump Start

Today’s Agenda

• 0830-0900 Setup

• 0900-0930 HTML Overview

• 0930-1000 JavaScript Overview

• 1015-1030 Morning Break

• 1000-1030 Ajax pt. 1

• 1045-1115 Ajax pt. 2

Saturday, June 15, 13

Page 9: jQuery Mobile Jump Start

Today’s Agenda

• 1115-1145 Listviews

• 1145-1215 Templates

• 1215-1245 Lunch

• 1245-1345 Location & Maps

• 1400-1445 Responsive Design

• 1445-1515 Media & Charts

Saturday, June 15, 13

Page 10: jQuery Mobile Jump Start

“You have to learn to fake the funk before you can begin to make the funk.”

Saturday, June 15, 13

Page 11: jQuery Mobile Jump Start

HTML5 Overview

• Fast Facts

• Best Practices

• Exercise - Creating a semantic SPA

• Summary

Saturday, June 15, 13

Page 12: jQuery Mobile Jump Start

Fast Facts

• HTML5 not official 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

Page 13: jQuery Mobile Jump Start

Best Practices

• Use semantic tags for clarity

• Place multiple pages together for speed

• Use page transitions for a better UX

Saturday, June 15, 13

Page 14: jQuery Mobile Jump Start

Exercise #1Semantic SPA

• Start with the exercise folder

• Add a second JQM page

• Use transitions to smooth page change

Saturday, June 15, 13

Page 15: jQuery Mobile Jump Start

Summary

• The new semantic tags in HTML5 increase clarity

• jQuery Mobile includes attributes to improve app look and feel

Saturday, June 15, 13

Page 16: jQuery Mobile Jump Start

“Java is to JavaScript as Car is to Carpet.”

Saturday, June 15, 13

Page 17: jQuery Mobile Jump Start

JavaScript Overview

• Fast Facts

• The Power Trio

• Events

• Best Practices

• Exercise - Create page code

• Summary

Saturday, June 15, 13

Page 18: jQuery Mobile Jump Start

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

Page 19: jQuery Mobile Jump Start

The Power Trio

• Objects

• Functions

• Closures

Saturday, June 15, 13

Page 20: jQuery Mobile Jump Start

Objects

• Are associative arrays or dictionaries consisting of key/value pairs

• The key can be ANY string

• Can be modified at run-time

• No difference between dot and bracket notations

Saturday, June 15, 13

Page 21: jQuery Mobile Jump Start

Functions

• Are first-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

Page 22: jQuery Mobile Jump Start

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

Page 23: jQuery Mobile Jump Start

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

Page 24: jQuery Mobile Jump Start

Best Practices

• Minimize the use of global memory

• Wrap code in functions to protect it

• Load JS files last for speed*

• Use events to avoid tight coupling

Saturday, June 15, 13

Page 25: jQuery Mobile Jump Start

Exercise #2Create Page Code

• Start from the exercise #2 code

• Create code to hook events for both page 1 and 2

Saturday, June 15, 13

Page 26: jQuery Mobile Jump Start

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

Page 27: jQuery Mobile Jump Start

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

Page 28: jQuery Mobile Jump Start

Ajax pt. 1

• Fast Facts

• jQuery ajax()

• Promise

• Data Formats

• Exercise - Getting data from the server

• Summary

Saturday, June 15, 13

Page 29: jQuery Mobile Jump Start

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

Page 30: jQuery Mobile Jump Start

.ajax()

• Before the introduction of Prototype & jQuery in 2006 communication with the server was browser specific

• Performs an async HTTP request

• .ajax(url, [settings])

Saturday, June 15, 13

Page 31: jQuery Mobile Jump Start

.promise()

• Returns a Promise object that is resolved once all actions complete

• Considered easier to ready than callbacks

Saturday, June 15, 13

Page 32: jQuery Mobile Jump Start

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

Page 33: jQuery Mobile Jump Start

JSON

• Created by Douglas Crockford in 2001

• JSON.stringify to serialize

• JSON.parse to deserialize

• Officially only double quotes supported

Saturday, June 15, 13

Page 34: jQuery Mobile Jump Start

Best Practices

• Always be prepared for failure

• Prefer chunky over chatty

• Prefer JSON over XML

• Use double quotes in JSON

Saturday, June 15, 13

Page 35: jQuery Mobile Jump Start

Exercise #3Getting Data

• Starting from exercise #3

• Make a call to YP API

• Use an alert or console.log to display results

Saturday, June 15, 13

Page 36: jQuery Mobile Jump Start

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

Page 37: jQuery Mobile Jump Start

Ajax pt. 2

• HTTP Traffic Watching

• Chrome & Fiddler

• Exercise - Paging, Getting more data

• Summary

Saturday, June 15, 13

Page 38: jQuery Mobile Jump Start

HTTP Traffic Watching

• Issues with Ajax often cause bugs

• Their async nature makes can make fixing these bugs challenging

• There are tools to help

Saturday, June 15, 13

Page 39: jQuery Mobile Jump Start

Chrome & Fiddler

• Chrome includes tools to watch network traffic (lightweight)

• Fiddler a free tool from Telerik is also available (super)

• Fiddler is only available for the PC

Saturday, June 15, 13

Page 40: jQuery Mobile Jump Start

Exercise #4Getting more data

• Starting from exercise #4

• Make more calls to the YP API which request more data

• Again use alert or console.log to display results

Saturday, June 15, 13

Page 41: jQuery Mobile Jump Start

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

Page 42: jQuery Mobile Jump Start

Listviews

• Fast Facts

• Best Practices

• Vertical Scrolling

• Exercise - Creating list from data

• Summary

Saturday, June 15, 13

Page 43: jQuery Mobile Jump Start

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

Page 44: jQuery Mobile Jump Start

Vertical Scrolling

• JQM supports vertical scrolling as does any other web site

• Can also fix the position of the header and footer

Saturday, June 15, 13

Page 45: jQuery Mobile Jump Start

Exercise #5Creating a Listview

• Start with exercise #5

• Finish the listview generation code

• Remember to call the refresh method

Saturday, June 15, 13

Page 46: jQuery Mobile Jump Start

Summary

• JQM out of the box supports vertical scrolling

• The end result is less than app-like however

Saturday, June 15, 13

Page 47: jQuery Mobile Jump Start

iScroll

• Fast Facts

• Best Practices

• Exercise - Implement pull to refresh

• Summary

Saturday, June 15, 13

Page 48: jQuery Mobile Jump Start

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

Page 49: jQuery Mobile Jump Start

Best Practices

• Release no longer needed iScrolls with the destroy() method

Saturday, June 15, 13

Page 50: jQuery Mobile Jump Start

Exercise #6Smooth Scrolling

• Start with exercise #6

• Finished the smooth scrolling method

• If you have trouble, look at the working “cc” app

Saturday, June 15, 13

Page 51: jQuery Mobile Jump Start

Summary

• Smooth scrolling improves both UI and UX

• It is relatively easy to replace traditional HTML scrolling

Saturday, June 15, 13

Page 52: jQuery Mobile Jump Start

Templates

• Fast Facts

• Handlebars

• Best Practices

• Exercise - Rewrite the code to use templates

• Summary

Saturday, June 15, 13

Page 53: jQuery Mobile Jump Start

Fast Facts

• Mixing HTML with JavaScript violates separation of concerns

• Templating engines allow for the inclusion of HTML which can be modified easily

• HTML by definition does not operate on unknown tags

Saturday, June 15, 13

Page 54: jQuery Mobile Jump Start

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

Page 55: jQuery Mobile Jump Start

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

Page 56: jQuery Mobile Jump Start

Exercise #7Using Templates

• Start from exercise #7

• Replace the use of JS strings with a template

Saturday, June 15, 13

Page 57: jQuery Mobile Jump Start

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

Page 58: jQuery Mobile Jump Start

Geolocation

• Fast Facts

• The Geolocation Object

• Best Practices

• Exercise - Get location

• Summary

Saturday, June 15, 13

Page 59: jQuery Mobile Jump Start

Fast Facts

• Not actually part of HTML5

• User must grant web site access to the geolocation data

• Can be a significant drain on batteries

• Can take a significant amount of time before location async return

Saturday, June 15, 13

Page 60: jQuery Mobile Jump Start

The Geolocation Object

• Part of the navigator object, which has no official standard

• Three methods: getCurrentPosition(), watchPosition(), clearWatch()

Saturday, June 15, 13

Page 61: jQuery Mobile Jump Start

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

Page 62: jQuery Mobile Jump Start

Exercise #8Getting Location

• Starting with exercise 8

• Use a console.log to display the current latitude and longitude

Saturday, June 15, 13

Page 63: jQuery Mobile Jump Start

Summary

• Geolocation is support by most current browsers, mobile and desktop

• Power used Geolocation can drain power and tax CPU

Saturday, June 15, 13

Page 64: jQuery Mobile Jump Start

Maps

• Maps (Google Maps)

• Exercise - Display our current location

• Annotating Maps

• Exercise - Displaying cafe location

• Summary

Saturday, June 15, 13

Page 65: jQuery Mobile Jump Start

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 file, specify a div, and call the draw map code

Saturday, June 15, 13

Page 66: jQuery Mobile Jump Start

Exercise #9Displaying a Map

• Start with exercise #9

• The Maps include file is present

• The map div is displayed on the page

• Write the code to make the map appear

Saturday, June 15, 13

Page 67: jQuery Mobile Jump Start

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

Page 68: jQuery Mobile Jump Start

Exercise #10Annotating a Map

• Start with exercise #10

• Place a maker on the map at:

• latitude = 33.8226203918457

• longitude= -118.331848144531

Saturday, June 15, 13

Page 69: jQuery Mobile Jump Start

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

Page 70: jQuery Mobile Jump Start

Responsive Design

• Fast Facts

• Phone vs Tablet

• Grids, Divs, and Tables

• Exercise - Make display responsive

• Summary

Saturday, June 15, 13

Page 71: jQuery Mobile Jump Start

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

Page 72: jQuery Mobile Jump Start

Best Practices

• Be careful of one size fits all solutions

• The needs of your mobile user maybe different than those on desktop

• Always keep bandwidth restrictions in mind

Saturday, June 15, 13

Page 73: jQuery Mobile Jump Start

Exercise #11Making a Responsive Design

• Start with exercise #11

• Modify the code to show the map next to the listview when there is sufficient width

Saturday, June 15, 13

Page 74: jQuery Mobile Jump Start

Summary

• Responsive Design is difficult

• A solution for one web site will not necessarily work for another

Saturday, June 15, 13

Page 75: jQuery Mobile Jump Start

Media

• Fast Facts

• Taking a picture (yes, from a mobile browser)

• Exercise - Upload a picture to a server

• Summary

Saturday, June 15, 13

Page 76: jQuery Mobile Jump Start

Fast Facts

• Modern smart phones treat the input type=”file” 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

Page 77: jQuery Mobile Jump Start

Taking and Uploading a Picture

• Must turn off JQM’s Ajax with data-ajax=”false”

• Use a input type=file with form post with enctype=”multipart/form-data”

Saturday, June 15, 13

Page 78: jQuery Mobile Jump Start

Exercise #12Uploading 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

Page 79: jQuery Mobile Jump Start

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

Page 80: jQuery Mobile Jump Start

Charts

• Fast Facts

• jqPlots

• Exercise - Create a chart from hours of operation

• Summary

Saturday, June 15, 13

Page 81: jQuery Mobile Jump Start

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

Page 82: jQuery Mobile Jump Start

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

Page 83: jQuery Mobile Jump Start

Best Practices

• Charts are computationally expensive to render

• It is possible to render charts dynamically, but not recommended

Saturday, June 15, 13

Page 84: jQuery Mobile Jump Start

Exercise #13Charting Data

• Start from exercise #13

• Implement bar chart to display hours of operation of coffee shops

Saturday, June 15, 13

Page 85: jQuery Mobile Jump Start

Summary

• jqPlot is free and easy use charting solution

Saturday, June 15, 13

Page 86: jQuery Mobile Jump Start

Links

• jquerymobile.com

• jquery.com

• cubiq.org/iscroll-4

• jqplot.com

• http://handlebarsjs.com/

• callbackhell.com

• garann.github.io/template-chooser/

Saturday, June 15, 13

Page 87: jQuery Mobile Jump Start

My Links

• @therockncoder

• https://github.com/Rockncoder

• http://youtube.com/rockncoder

• http://slideshare.net/rockncoder

Saturday, June 15, 13

Page 88: jQuery Mobile Jump Start

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

Page 89: jQuery Mobile Jump Start

jQuery Mobile Advance

• MV* Frameworks

• Responsive Design

• Deep Templating

• Memory Management

• Unit Testing

• Nag Phillip until he schedules it!

Saturday, June 15, 13