james pearce
play

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

Sep 23, 2022 •332 likes •1.33k 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

  2. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

  3. HTML5 and the dawn of rich mobile web applications

  4. or

  5. Everything I know about HTML5 I learned from

  6. How Mobile Rolls

  7. 2008

  8. We must have an iPhone App!

  11. 2010

  12. We must have an Android App!

  15. 2011

  16. omfg

  17. JS C# Palm J2ME Microsoft RIM RIM Android Apple Air Microsoft Apple Palm Obj-C Java Android Top U.S. Smartphone Platforms, C++ 3 Month Average Ending December 2010 comScore MobiLens 2010

  18. J2ME C RIM C# Microsoft Nokia Python Apple Java Android Android Nokia Microsoft C++ RIM Lua Obj-C ... Apple Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010 http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/

  21. Device diversity

  22. Updates App Stores

  23. The Promise of Web Technologies

  24. The Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ... Mobile: the next era of the web as we know it

  25. http://www.victoriassecret.com

  26. http://mobile.victoriassecret.com

  27. The mobile web is not a 320px web

  28. (“responsive web design”)

  32. The Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ... But wait! Weren’t we talking about apps?

  33. Hypothesis: Web technologies are a viable alternative to native development

  34. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client

  37. -webkit accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas gradient keyframe

  41. this is uncanny

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

  43. COMPLETE MODERN APP PLATFORM Rich Media & Styling Full Resource Access Parallel Processing Inter-App Communication Full O ffl ine Capability

  47. Web technologies are a viable alternative to native development

  48. Caveats? Performance Browser support All less of a issue Device access than you might think Discoverability Monetization App ‘experience’

  49. Progressive enhancement

  50. assumption HTML JS CSS progressive doc app enhancement vs assumption HTML JS CSS app

  51. State of the Art: Mobile HTML5

  52. Environments ?

  53. Browsers FOEs WebKit

  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: opacity: 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

  55. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com

  56. Enter The Framework

  57. Why use a framework? Provide user interface components Smooth browser inconsistencies Mimic native or server paradigms Create consistent application architectures ...and more

  59. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client

  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

  61. jQTouch Scripts & stylesheets CSS classes for semantics & config

  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

  63. jQuery Mobile Scripts & stylesheet data-* for semantics & config

  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

  65. Sencha Touch Data model & records Programmatically create toolbar & list

  66. What’s in a good framework? Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework

  67. Components Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video - GeoLocation

  68. Theming Use CSS3 & SASS - Flexible themes - Highly optimized

  69. Forms

  70. Scrolling Momentum/bounce physics Hardware accelerated Throughout all components: - Lists - Carousel - Pickers

  71. Touch Events Built on native events Abstracted for performance Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop

  72. Data Package Models, Stores, and Proxies - Associations - Validation - Local & server storage Easily consume web services - JSON/P - XML - YQL

  73. “The Kitchen Sink” http://sencha.com/x/5e

  74. Implementing Mobile Web Sites|Apps

  75. Evolving sites for mobile Views HTML, CSS... Controllers Models

  76. Evolving sites for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models

  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

  78. Smart detection & user choice “Switch to our desktop site”

  80. Thematic consistency w3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123

  81. Mobile switching http://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2

  82. Then to an app... Desktop Switchers Mobile REST Controllers JSON Models

  83. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123

  84. The stack of the present req/res User interface Rendering Business logic Storage

  85. The stack of the future User interface sync Security Business logic Storage Storage The return of the thick client!

  86. Do we have time for some code ?

  87. Brand consistency

  88. Getting help from the cloud http://i.tinysrc.mobi/ http://mysite.com/myimage.png http://tinysrc.net/

  89. Mobile devices are di ff erent Geolocation Telephony Camera Messaging And mobile users are different too!

  90. Going Hybrid

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

  92. +

  93. Full API list: Accelerometer File Camera Geolocation Compass Media Contacts Network Device Notification Events Storage http://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap

  94. PhoneGap Build

  95. A word about app stores (pssst: they’re an admission of defeat)

  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

  97. built with Apps vs Web technology

  98. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

Wh Where have ve our r curlew rlew gone? e? James Pearce-Higgins Director of Science

Wh Where have ve our r curlew rlew gone? e? James Pearce-Higgins Director of Science

Wh Where have ve our r curlew rlew gone? e? James Pearce-Higgins Director of Science British Trust for Ornithology Trailing bubbles of music over the squelchy hillside music as desolate, as beautiful as your loved places, mountainy

642 views • 35 slides
Pearce Creek DMCF Exterior Monitoring Post-Placement Sampling Fall 2019 Results Pearce Creek

Pearce Creek DMCF Exterior Monitoring Post-Placement Sampling Fall 2019 Results Pearce Creek

Pearce Creek DMCF Exterior Monitoring Post-Placement Sampling Fall 2019 Results Pearce Creek Implementation Committee May 2020 1 www.pearcecreekoutreach.com Project Overview Objective: Collect post-placement data from locations to

469 views • 17 slides
Pearce Creek DMCF Exterior Monitoring Post-Placement Sampling Spring 2019 Results Pearce Creek

Pearce Creek DMCF Exterior Monitoring Post-Placement Sampling Spring 2019 Results Pearce Creek

Pearce Creek DMCF Exterior Monitoring Post-Placement Sampling Spring 2019 Results Pearce Creek Implementation Committee November 15, 2019 1 www.pearcecreekoutreach.com Project Overview Objective: Collect post-placement data from locations to

531 views • 17 slides
Council on Finance &amp; Administration Tennessee Annual Conference: John Pearce Council on

Council on Finance &amp; Administration Tennessee Annual Conference: John Pearce Council on

Council on Finance &amp; Administration Tennessee Annual Conference: John Pearce Council on Finance &amp; Administration Team Karen Barrineau John Pearce - President Davis Chappell Terry Hundley - Vice President Paul Purdue - Secretary

676 views • 39 slides
INSPIRE CHALLENGE ACHIEVE Year 7 Parent Information Evening AGENDA Welcome Mrs Pearce and Mrs

INSPIRE CHALLENGE ACHIEVE Year 7 Parent Information Evening AGENDA Welcome Mrs Pearce and Mrs

INSPIRE CHALLENGE ACHIEVE Year 7 Parent Information Evening AGENDA Welcome Mrs Pearce and Mrs Kennedy Co-Headteachers Growth Mindset and Character Mrs Pearce and Mrs Kennedy Co-Headteachers Settling in, Attendance and Behaviour Mrs

727 views • 69 slides
COMP30019 Graphics and Interaction Rasterization and Barycentric Coordinates Adrian Pearce

COMP30019 Graphics and Interaction Rasterization and Barycentric Coordinates Adrian Pearce

Introduction COMP30019 Graphics and Interaction Rasterization and Barycentric Coordinates Adrian Pearce Department of Computing and Information Systems University of Melbourne The University of Melbourne Adrian Pearce University of Melbourne

269 views • 7 slides
End-to-End SIP Session-ID at IETF88 dra%-ie)-insipid-session-id-02

End-to-End SIP Session-ID at IETF88 dra%-ie)-insipid-session-id-02

End-to-End SIP Session-ID at IETF88 dra%-ie)-insipid-session-id-02 4 November, 2013 James Polk, Paul Jones Gonzalo Salgueiro, Chris Pearce Why an

670 views • 13 slides
COMP30019 Graphics and Interaction Kinematics Adrian Pearce Department of Computing and

COMP30019 Graphics and Interaction Kinematics Adrian Pearce Department of Computing and

Introduction Forward kinematics Inverse kinematics COMP30019 Graphics and Interaction Kinematics Adrian Pearce Department of Computing and Information Systems University of Melbourne The University of Melbourne Adrian Pearce University of

572 views • 28 slides
Directors update Sarah Pearce ATUC| 2 June 2015

Directors update Sarah Pearce ATUC| 2 June 2015

Directors update Sarah Pearce ATUC| 2 June 2015 CSIRO ASTRONOMY AND SPACE SCIENCE Highlights Great progress on ASKAP Australian Innova?on

434 views • 8 slides
Zero-energy vortices in gated graphene C.A. Downing, D.A. Stone, A.R. Pearce, R.J. Churchill and

Zero-energy vortices in gated graphene C.A. Downing, D.A. Stone, A.R. Pearce, R.J. Churchill and

Zero-energy vortices in gated graphene C.A. Downing, D.A. Stone, A.R. Pearce, R.J. Churchill and M.E. Portnoi University of Exeter IIP-UFRN United Kingdom Natal, Brazil Quantum transport in 2D systems Bagnres-de-Luchon, May 2015

749 views • 44 slides
ENT Specialist Clinics Philippa Pearce Acknowledgments: Victorian Government Department

ENT Specialist Clinics Philippa Pearce Acknowledgments: Victorian Government Department

Implementation of an Advanced Practice Physiotherapy Vestibular Assessment Clinic (PVAC) within ENT Specialist Clinics Philippa Pearce Acknowledgments: Victorian Government Department of Health and Senior Clinician Physiotherapist

459 views • 6 slides
When you hear hooves sometimes it is a zebra. (A A really rare zebra) DR ANDY PEARCE DR

When you hear hooves sometimes it is a zebra. (A A really rare zebra) DR ANDY PEARCE DR

When you hear hooves sometimes it is a zebra. (A A really rare zebra) DR ANDY PEARCE DR SCOTT HACKETT BIRMINGHAM HEARTLANDS HOSPITAL The Case 15 month old male. At presentation: Cough 5 month history. Discharge from left ear 2

385 views • 10 slides
ADAPTING COUNSELLING TRAINING FOR ONLINE PARTICIPATION DURING COVID 19 Dr Peter Pearce and

ADAPTING COUNSELLING TRAINING FOR ONLINE PARTICIPATION DURING COVID 19 Dr Peter Pearce and

ADAPTING COUNSELLING TRAINING FOR ONLINE PARTICIPATION DURING COVID 19 Dr Peter Pearce and Lorraine Munro Metanoia Institute Aims and Structure of the Webinar Do we want to / do we have to? Surfacing/Rehearsing our personal responses to

704 views • 35 slides
BIOSECURITY OF THE OVINE PERSUASION Louise Pearce (LBN) and Tim Biffin (LLS) Sheep Lice the

BIOSECURITY OF THE OVINE PERSUASION Louise Pearce (LBN) and Tim Biffin (LLS) Sheep Lice the

BIOSECURITY OF THE OVINE PERSUASION Louise Pearce (LBN) and Tim Biffin (LLS) Sheep Lice the background Biology: ask me, or check Liceboss.com Sources: bought in pushed through the fence environmental contamination is

212 views • 9 slides
1 James 1:1a James , a servant of God and of the Lord Jesus Christ - James is used 42

1 James 1:1a James , a servant of God and of the Lord Jesus Christ - James is used 42

1 James 1:1a James , a servant of God and of the Lord Jesus Christ - James is used 42 times in the KJV NT -In all cases it is translated from the original Greek Iako bos [ee-ak'-o-bos] Strongs G2385 -The same as G2384 Graecized;

752 views • 33 slides
Tex$le Technology Accessing the Design and Visual Communica$on

Tex$le Technology Accessing the Design and Visual Communica$on

Tex$le Technology Accessing the Design and Visual Communica$on Achievement Standards through a Tex$les Programme Lesley Pearce Lesley Pearce Na$onal Facilitator

1.38k views • 89 slides
Measurement @ Google Michael Piatek piatek@google.com March 27, 2014 My background PhD from

Measurement @ Google Michael Piatek piatek@google.com March 27, 2014 My background PhD from

Measurement @ Google Michael Piatek piatek@google.com March 27, 2014 My background PhD from University of Washington in 2011 Distributed systems &amp; networking Google since 2010 Infrastructure systems until 2011 Since: Mobile

183 views • 15 slides
Inferring User Demographics and Social Strategies in Mobile Social Networks Yuxiao Dong #

Inferring User Demographics and Social Strategies in Mobile Social Networks Yuxiao Dong #

Inferring User Demographics and Social Strategies in Mobile Social Networks Yuxiao Dong # , Yang Yang + , Jie Tang + , Yang Yang # , Nitesh V. Chawla # # University of Notre Dame + Tsinghua University 1 Did you know: As of 2014, there are

484 views • 46 slides
Use of Mobile and Sensor Technologies for Clinical Research William Riley, Ph.D. Director,

Use of Mobile and Sensor Technologies for Clinical Research William Riley, Ph.D. Director,

Diversity Considerations in the Use of Mobile and Sensor Technologies for Clinical Research William Riley, Ph.D. Director, Office of Behavioral and Social Sciences Research Does the Digital Divide Still Exist? Providing Access Only a Partial

375 views • 21 slides
One Project. One Language. Three Apps. TJ VanToll (@tjvantoll) iOS Web Android Agenda

One Project. One Language. Three Apps. TJ VanToll (@tjvantoll) iOS Web Android Agenda

One Project. One Language. Three Apps. TJ VanToll (@tjvantoll) iOS Web Android Agenda Background (~15 minutes) Demos (~25 minutes) Web vs. Native Web vs. Native Native Benefit: User behavior Apps account for over 90% of internet

338 views • 31 slides
Modding the OSM Data Model Jochen Topf Modding the OSM Data Model Jochen Topf What we will talk

Modding the OSM Data Model Jochen Topf Modding the OSM Data Model Jochen Topf What we will talk

Modding the OSM Data Model Jochen Topf Modding the OSM Data Model Jochen Topf What we will talk about... 1. Background 2. Problems Objects Way nodes Nodes Ways Way geometry Relations Relations Tags Areas Object Identity and Object

725 views • 57 slides
A toy example in Minimal Model Program In minimal model program for 3-folds, Mori connected

A toy example in Minimal Model Program In minimal model program for 3-folds, Mori connected

A toy example in Minimal Model Program In minimal model program for 3-folds, Mori connected minimal models with flops. A flop is a pair of birational proper surjections: X Y Z of 3-folds with certain properties. In particular, X and Y

321 views • 10 slides
Lecture 11: Introduction CSE 373: Data Structures and to Hash Tables Algorithms CSE 373 SU 19 -

Lecture 11: Introduction CSE 373: Data Structures and to Hash Tables Algorithms CSE 373 SU 19 -

Lecture 11: Introduction CSE 373: Data Structures and to Hash Tables Algorithms CSE 373 SU 19 - ROBBIE WEBER 1 Administrivia When youre submitting your group writeup to gradescope, be sure to use the group submission option if you have a

483 views • 36 slides
rs tr s

rs tr s

rs tr s ss r ss rs

442 views • 29 slides

More recommend