Writing Mobile Web
Applications
Thursday, July 12, 12
Slide 2
Slide 2 text
Agenda
The Mobile Eco System
Challenges for Mobile Developers
Mobile Web To The Rescue
Online Resources
Thursday, July 12, 12
Slide 3
Slide 3 text
The Mobile Eco System
Thursday, July 12, 12
Slide 4
Slide 4 text
How We Got Here
1990, started using 2G
systems
1992, First SMS
1998, First ringtone
sale
1999, First mobile
internet in Japan
Thursday, July 12, 12
Slide 5
Slide 5 text
How We Got Here
2G was good for talk,
not good enough for
data
2001, First 3G network
in Japan
2007, 295 Mil
subscribers on 3G
networks worldwide
Thursday, July 12, 12
Slide 6
Slide 6 text
Modern Mobile Device
3G or 3.5G capable
Internet Connectivity
Voice and Video calls
No longer used “just
for talking”
Supports Apps
Thursday, July 12, 12
Slide 7
Slide 7 text
Major Players
Apple
Google
Nokia
Microsoft
Thursday, July 12, 12
Slide 8
Slide 8 text
Apple
2007, first iPhone
device
iPhone Power
Focus on Design
Use Capacitive
Touchscreen
AppStore Built In
Thursday, July 12, 12
Slide 9
Slide 9 text
Google
2005 Google Buys
Android Inc
2007 Announcing
Android Platform
2008 HTC Dream (first
Android Device)
Thursday, July 12, 12
Slide 10
Slide 10 text
Nokia
The Oldest player in
the game.
World’s largest phone
manufacturer.
Owner of the Symbian
OS.
Thursday, July 12, 12
Slide 11
Slide 11 text
Microsoft
Known best for its
desktop applications.
Its mobile version
Windows Mobile was
never a success.
Its newest product
WinPhone7 looks
promising.
Thursday, July 12, 12
Slide 12
Slide 12 text
Which One Should You
Choose ?
iPhone apps are written in Objective C.
Android apps are written in Java.
Symbian apps are written in C++.
Blackberry apps are written in Java (but not the
same Java as Android).
WinPhone apps are written in .NET
Thursday, July 12, 12
Slide 13
Slide 13 text
ALL OF THEM
Thursday, July 12, 12
Slide 14
Slide 14 text
Mobile HTML/CSS/JS
Web technology is the one thing all devices have
in common
Using HTML, CSS and JavaScript, we can write
applications that will run on any device.
These apps can run online or offline using HTML5
offline capabilities
Web apps can integrate special device capabilities
to create Hybrid Applications
Thursday, July 12, 12
Slide 15
Slide 15 text
Web Vs. Native
Coding
Write once, test
everywhere
Write everywhere,
Test everywhere
Caps
Use limited device
capabilities
Use full device
capabilities
Look & Feel
Build your own UI
components
Use device UI
components
Thursday, July 12, 12
Slide 16
Slide 16 text
Web Vs. Native
Typical Use Cases
Typical Use Cases
Provide information
about service/
business (home page)
Photo taking app
M-Commerce (mobile
online shop)
Targeting specific
audience
Simple games 3D or complex games
Thursday, July 12, 12
Slide 17
Slide 17 text
Mobile HTML/CSS/JS
The App is a single html file, with many stylesheets
and script files.
Modular and OO JavaScript is used, to keep
“state”
Thursday, July 12, 12
Slide 18
Slide 18 text
Mobile Web Challenges
Develop & Test on many platforms
Adjust UI to various screen sizes
Handle mobile UX
Thursday, July 12, 12
Slide 19
Slide 19 text
Mobile UX
Thursday, July 12, 12
Slide 20
Slide 20 text
Mobile UX
App is used in short bursts - waiting for the bus or
subway
App is used while watching TV
App is interrupted by incoming call or SMS
Thursday, July 12, 12
Slide 21
Slide 21 text
Mobile Do’s
Use responsive web site
Thursday, July 12, 12
Slide 22
Slide 22 text
Mobile Do’s
Use large UI components (finger size is 44x44)
Thursday, July 12, 12
Slide 23
Slide 23 text
Mobile Do’s
Be prepared for users jumping in
and out of your app
Thursday, July 12, 12
Slide 24
Slide 24 text
The Tools
Code Less, Do More
Thursday, July 12, 12
Slide 25
Slide 25 text
Writing Apps
Same source editor as the web
Can use:
Komodo Edit
Dashcode
MacVim/gvim/vim
Webstorm (Recommended)
Thursday, July 12, 12
Slide 26
Slide 26 text
Debugging Apps -
Desktop
Use Safari/Chrome inspector tools to debug
Use Ripple to test your hybrid app from chrome
Use Weinre
Consider BrowserStack (paid, recommended)
Thursday, July 12, 12
Slide 27
Slide 27 text
Debugging Apps -
Device
Use weinre For on device inspection
Use debug CSS to debug style sheets
Use jsfiddle test test snippets on mobile
Thursday, July 12, 12
Slide 28
Slide 28 text
Deploying Apps
For online apps, every web server will do.
For offline apps, consider PhoneGap
Before deployment, use a build script to minimize
js/css files
Thursday, July 12, 12
Slide 29
Slide 29 text
Tips: Performance
jQuery is not your friend (consider zepto.js)
Test on a real device throughout development
Think about network traffic
Thursday, July 12, 12
Slide 30
Slide 30 text
HTML5 Boilerplate
A ready made starter for html5 mobile apps
Cross-platform compatible (Android, iOS,
Blackberry, Symbian)
Supports all devices and overcomes many glitches
http://html5boilerplate.com/mobile/
Thursday, July 12, 12
Slide 31
Slide 31 text
Mobile Frameworks
JQuery Mobile
Sencha Touch
jqMobi
Thursday, July 12, 12
Slide 32
Slide 32 text
jQuery Mobile
Most hyped mobile framework today, and the one
we’ll use in the course.
Built on top of jQuery
Themed UI Widgets
Thursday, July 12, 12
Slide 33
Slide 33 text
Sencha Touch
Stable and mature mobile framework
Works best on iPhone & Android
Commercial framework (currently free)
Latest version 2 is still buggy
Thursday, July 12, 12
Slide 34
Slide 34 text
Q & A
Thursday, July 12, 12
Slide 35
Slide 35 text
Thanks For Listening
Ynon Perek
ynonperek@yahoo.com
Keynote is also available at:
ynonperek.com
Thursday, July 12, 12