James Pearce Director, Developer Relations @ jamespearce - - PowerPoint PPT Presentation

▶
james pearce
SMART_READER_LITE
LIVE PREVIEW

James Pearce Director, Developer Relations @ jamespearce - - PowerPoint PPT Presentation

Sep 23, 2022 332 likes •1.34k views

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com HTML5 and the dawn of rich mobile web applications or Everything I know about HTML5 I learned from How Mobile Rolls 2008 We must have an iPhone App! 2010 We

slide-1
SLIDE 1
slide-2
SLIDE 2

James Pearce

Director, Developer Relations @ jamespearce jamesp@sencha.com

slide-3
SLIDE 3

HTML5 and the dawn of rich mobile web applications

slide-4
SLIDE 4
  • r
slide-5
SLIDE 5

Everything I know about HTML5 I learned from

slide-6
SLIDE 6

How Mobile Rolls

slide-7
SLIDE 7

2008

slide-8
SLIDE 8

We must have an iPhone App!

slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11

2010

slide-12
SLIDE 12

We must have an Android App!

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

2011

slide-16
SLIDE 16
  • mfg
slide-17
SLIDE 17

Palm Microsoft Apple Android RIM

RIM Android Apple Microsoft Palm

Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010

Java J2ME Air C++ C# Obj-C JS

slide-18
SLIDE 18

RIM Microsoft Android Apple Nokia

Nokia Apple Android Microsoft RIM

Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010

Lua C Python C++ C# Obj-C J2ME

http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/

... Java

slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21

Device diversity

slide-22
SLIDE 22

App Stores Updates

slide-23
SLIDE 23

The Promise of Web Technologies

slide-24
SLIDE 24

Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ...

The Web

Mobile: the next era of the web as we know it

slide-25
SLIDE 25

http://www.victoriassecret.com

slide-26
SLIDE 26

http://mobile.victoriassecret.com

slide-27
SLIDE 27

The mobile web is not a 320px web

slide-28
SLIDE 28

(“responsive web design”)

slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32

Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ...

The Web

But wait! Weren’t we talking about apps?

slide-33
SLIDE 33

Web technologies are a viable alternative to native development

Hypothesis:

slide-34
SLIDE 34

Applications Documents Programmatic DOM Declarative HTML APIs Templates Arguments URLs Synchronization Request/Response

The Web is Evolving...

Thick client Thin client

slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37

localStorage WebSQL gradient

  • webkit

CSS Text GeoLocation canvas type=camera @page @media manifest accelerometer keyframe transform <video>

slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41

this is uncanny

slide-42
SLIDE 42

A New Mobile App Stack

Worker Parallel Processing File Systems DBs App Cache Javascript Semantic HTML CSS Styling & Layout WebFonts Video Audio Graphics x-App Messaging Device Access Camera Location Contacts SMS Orientation Gyro Server & Services HTTP AJAX Events Sockets SSL More...

slide-43
SLIDE 43

Rich Media & Styling Full Resource Access Parallel Processing Inter-App Communication Full Offline Capability

COMPLETE MODERN APP PLATFORM

slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47

Web technologies are a viable alternative to native development

slide-48
SLIDE 48

Caveats?

Performance Browser support Device access Discoverability Monetization App ‘experience’

All less of a issue than you might think

slide-49
SLIDE 49

Progressive enhancement

slide-50
SLIDE 50

JS CSS

app

progressive enhancement

HTML

doc

assumption

HTML JS CSS

app

assumption

vs

slide-51
SLIDE 51

State of the Art: Mobile HTML5

slide-52
SLIDE 52

Environments ?

slide-53
SLIDE 53

Browsers

WebKit FOEs

slide-54
SLIDE 54

HTML5 support

IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2 @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow:

  • pacity:

Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB

slide-55
SLIDE 55

Stay on top of diversity

Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com

slide-56
SLIDE 56

Enter The Framework

slide-57
SLIDE 57

Why use a framework?

Provide user interface components Smooth browser inconsistencies Mimic native or server paradigms Create consistent application architectures ...and more

slide-58
SLIDE 58
slide-59
SLIDE 59

Strokes for folks

Applications Sites & Documents Programmatic DOM Declarative HTML APIs Templates Arguments URLs Synchronization Request/Response Thick client Thin client

slide-60
SLIDE 60

jQTouch

UI layer on top of jQuery Declarative HTML Library progressively enhances Browsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsers http://jQTouch.com

slide-61
SLIDE 61

jQTouch

Scripts & stylesheets CSS classes for semantics & config

slide-62
SLIDE 62

jQuery Mobile (alpha)

UI layer on top of jQuery Declarative HTML Library progressively enhances Browsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOS http://jquerymobile.com

slide-63
SLIDE 63

jQuery Mobile

data-* for semantics & config Scripts & stylesheet

slide-64
SLIDE 64

Sencha Touch

Self-contained library Programmatic Javascript Standalone MVC applications Browsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & other WebKit Windows Phone 7* http://sencha.com/touch

* to come

slide-65
SLIDE 65

Sencha Touch

Data model & records Programmatically create toolbar & list

slide-66
SLIDE 66

Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework

What’s in a good framework?

slide-67
SLIDE 67

Lists

  • Nested, Grouped, Sortable

Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5

  • Audio
  • Video
  • GeoLocation

Components

slide-68
SLIDE 68

Use CSS3 & SASS

  • Flexible themes
  • Highly optimized

Theming

slide-69
SLIDE 69

Forms

slide-70
SLIDE 70

Scrolling

Momentum/bounce physics Hardware accelerated Throughout all components:

  • Lists
  • Carousel
  • Pickers
slide-71
SLIDE 71

Touch Events

Built on native events Abstracted for performance Additional events

  • Tap
  • Double tap
  • Tap and hold
  • Swipe
  • Rotate
  • Drag & drop
slide-72
SLIDE 72

Data Package

Models, Stores, and Proxies

  • Associations
  • Validation
  • Local & server storage

Easily consume web services

  • JSON/P
  • XML
  • YQL
slide-73
SLIDE 73

“The Kitchen Sink”

http://sencha.com/x/5e

slide-74
SLIDE 74

Implementing Mobile Web Sites|Apps

slide-75
SLIDE 75

Evolving sites for mobile

HTML, CSS...

Models Controllers Views

slide-76
SLIDE 76

Evolving sites for mobile

Models Controllers Mobile Desktop

Switcher

HTML, CSS...

slide-77
SLIDE 77

Mobile detection

class ApplicationController < ActionController::Base has_mobile_fu end *.mobile.erb is_mobile_device? in_mobile_view?

https://github.com/brendanlim/mobile-fu

slide-78
SLIDE 78

Smart detection & user choice

“Switch to our desktop site”

slide-79
SLIDE 79
slide-80
SLIDE 80

Thematic consistency

w3c-speak

http://mysite.com/posts/123 http://mysite.mobi/posts/123

slide-81
SLIDE 81

Mobile switching

http://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2

slide-82
SLIDE 82

Then to an app...

JSON

Models Controllers Mobile Desktop

Switchers

REST

slide-83
SLIDE 83

Thematic consistency

http://mysite.com/posts/123 http://mysite.com/#!/posts/123

slide-84
SLIDE 84

The stack of the present

Storage Business logic User interface

req/res

Rendering

slide-85
SLIDE 85

The stack of the future

Storage Security Business logic User interface

sync

Storage

The return of the thick client!

slide-86
SLIDE 86

Do we have time for some code?

slide-87
SLIDE 87

Brand consistency

slide-88
SLIDE 88

Getting help from the cloud

http://i.tinysrc.mobi/http://mysite.com/myimage.png

http://tinysrc.net/

slide-89
SLIDE 89

Mobile devices are different

Telephony Geolocation Camera Messaging

And mobile users are different too!

slide-90
SLIDE 90

Going Hybrid

slide-91
SLIDE 91

A platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com

PhoneGap

slide-92
SLIDE 92

+

slide-93
SLIDE 93

Full API list:

http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap

File Geolocation Media Network Notification Storage Accelerometer Camera Compass Contacts Device Events

http://docs.phonegap.com

slide-94
SLIDE 94

PhoneGap Build

slide-95
SLIDE 95

A word about app stores

(pssst: they’re an admission of defeat)

slide-96
SLIDE 96

Doing mobile right

Everyone loves apps - but native development sucks This is the year of the mobile web - but caveats apply Web technologies are a viable alternative to native apps

slide-97
SLIDE 97

Apps vs Web technology

built with

slide-98
SLIDE 98

James Pearce

Director, Developer Relations @ jamespearce jamesp@sencha.com