An introductory keynote to mobile web development history and challanges

1. Mobile Web Is Here
Tuesday, September 18, 12

2. Agenda
The Mobile Eco System
Challenges for Mobile Developers
Mobile Web To The Rescue
Online Resources
Tuesday, September 18, 12

3. The Mobile Eco System
Tuesday, September 18, 12

4. The Mobile Eco System
Almost
Dead
Almost
Dead Dead
Dead
Tuesday, September 18, 12

5. How We Got Here
1990, started using 2G
systems
1992, First SMS
1998, First ringtone
sale
1999, First mobile
internet in Japan
Tuesday, September 18, 12

6. 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
Tuesday, September 18, 12

7. Modern Mobile Device
3G or 3.5G capable
Internet Connectivity
Voice and Video calls
No longer used “just
for talking”
Supports Apps
Tuesday, September 18, 12

8. Major Players
Apple
Google
Nokia
Microsoft
Tuesday, September 18, 12

9. Apple
2007, first iPhone
device
iPhone Power
Focus on Design
Use Capacitive
Touchscreen
AppStore Built In
Tuesday, September 18, 12

10. Tuesday, September 18, 12

11. Google
2005 Google Buys
Android Inc
2007 Announcing
Android Platform
2008 HTC Dream (first
Android Device)
Tuesday, September 18, 12

12. Nokia
The Oldest player in
the game.
World’s largest phone
manufacturer.
Owner of the Symbian
OS.
Tuesday, September 18, 12

13. Microsoft
Known best for its
desktop applications.
Its mobile version
Windows Mobile was
never a success.
Its newest product
WinPhone7 looks
promising.
Tuesday, September 18, 12

14. 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
Tuesday, September 18, 12

15. ALL OF THEM
Tuesday, September 18, 12

16. Mobile HTML/CSS/JS
Web technology is the one thing all devices have
in common
Tuesday, September 18, 12

17. Mobile HTML/CSS/JS
Using HTML, CSS and JavaScript, we can write
applications that will run on any device.
Tuesday, September 18, 12

18. Mobile HTML/CSS/JS
These apps can run online or offline using HTML5
offline capabilities
Tuesday, September 18, 12

19. Mobile HTML/CSS/JS
Web apps can integrate
special device capabilities to
create Hybrid Applications
Music Waste Festival App
Tuesday, September 18, 12

20. Web Vs. Native
Write once, test Write everywhere,
Coding
everywhere Test everywhere
Use limited device Use full device
Caps
capabilities capabilities
Build your own UI Use device UI
Look & Feel
components components
Tuesday, September 18, 12

21. 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”
Tuesday, September 18, 12

22. Mobile Web Challenges
Develop & Test on many platforms
Adjust UI to various screen sizes
Handle mobile UX
Tuesday, September 18, 12

23. MOBILE APP USER EXPERIENCE
Tuesday, September 18, 12

24. 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
Tuesday, September 18, 12

25. The Tools
Code Less, Do More
Tuesday, September 18, 12

26. Writing Apps
Same source editor as the web
Can use:
Komodo Edit
Dashcode
MacVim/gvim/vim
Aptana Studio
Tuesday, September 18, 12

27. Writing Apps
But you should really just use Webstorm
Tuesday, September 18, 12

28. Debugging Apps -
Desktop
Use Safari/Chrome inspector tools to debug
Use Ripple to test your hybrid app from chrome
Use iPhone/Android Emulator
Use BrowserStack
Tuesday, September 18, 12

29. Debugging Apps -
Device
Use weinre For on device inspection
Tuesday, September 18, 12

30. 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
Tuesday, September 18, 12

31. Tips: Performance
jQuery is not your friend (consider jqmobi)
Test on a real device throughout development
Think about network traffic
Tuesday, September 18, 12

32. 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/
Tuesday, September 18, 12

33. Mobile Frameworks
JQuery Mobile
Sencha Touch
jqMobi
Tuesday, September 18, 12

34. jQuery Mobile
Most hyped mobile framework today, and the one
we’ll use in the course.
Built on top of jQuery
Themed UI Widgets
Tuesday, September 18, 12

35. Sencha Touch
Stable and mature mobile framework
Works best on iPhone & Android
Commercial framework (currently free)
Tuesday, September 18, 12

36. Q&A
Tuesday, September 18, 12

37. Thanks For Listening
Ynon Perek
ynonperek@yahoo.com
ynonperek.com
Tuesday, September 18, 12