Mobile HTML5 Applications In Hours, Not Days. Build Amazing Apps - - PowerPoint PPT Presentation

▶
mobile html5 applications
SMART_READER_LITE
LIVE PREVIEW

Mobile HTML5 Applications In Hours, Not Days. Build Amazing Apps - - PowerPoint PPT Presentation

Aug 29, 2023 506 likes •1.05k views

Mobile HTML5 Applications In Hours, Not Days. Build Amazing Apps with Web Standards QCon SF @adityabansod Thursday, November 8, 12 Aditya Bansod VP, Product Marketing @adityabansod aditya@sencha.com Thursday, November 8, 12 Mobile app

slide-1
SLIDE 1

Build Amazing Apps with Web Standards QCon SF @adityabansod

Mobile HTML5 Applications

In Hours, Not Days.

Thursday, November 8, 12
slide-2
SLIDE 2

Aditya Bansod

VP, Product Marketing @adityabansod aditya@sencha.com

Thursday, November 8, 12
slide-3
SLIDE 3

Mobile app development is hard

Thursday, November 8, 12
slide-4
SLIDE 4 Thursday, November 8, 12
slide-5
SLIDE 5

The Native Route

Thursday, November 8, 12
slide-6
SLIDE 6

A badge for all these ways the web is changing

Thursday, November 8, 12
slide-7
SLIDE 7 MS

RIM Apple Google Top US Smartphone Platforms August 2011, comScore MobiLens

Thursday, November 8, 12
slide-8
SLIDE 8 C#

J2ME/Air Obj-C Java/C++ Native programming languages you’ll need US Smartphones, August 2011

Thursday, November 8, 12
slide-9
SLIDE 9 IE

WebKit WebKit WebKit Browser platforms to target US Smartphones, August 2011

Thursday, November 8, 12
slide-10
SLIDE 10

But at least we are using

  • ne language,
  • ne markup,
  • ne style system
Thursday, November 8, 12
slide-11
SLIDE 11

One Stack

Thursday, November 8, 12
slide-12
SLIDE 12 Workers & Parallel Processing File Systems Databases App Caches JavaScript Semantic HTML CSS Styling & Layout WebFont Video Audio Graphics Cross-App Messaging Camera Location Contacts SMS Orientation Gyro HTTP AJAX Events Sockets SSL

(all the elements of a modern application platform)

Thursday, November 8, 12
slide-13
SLIDE 13 IE Chrome Safari Firefox iOS BB10 Android @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 Thursday, November 8, 12
slide-14
SLIDE 14

Stay on top of diversity

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

Thursday, November 8, 12
slide-15
SLIDE 15

Capabilities & specifications Support 100% Browsers

Thursday, November 8, 12
slide-16
SLIDE 16

Capabilities & specifications 100% Polyfills Support Frameworks Browsers

Thursday, November 8, 12
slide-17
SLIDE 17 Thursday, November 8, 12
slide-18
SLIDE 18

pages interactive apps

Thursday, November 8, 12
slide-19
SLIDE 19

Build Amazing Apps with Web Standards

pages interactive apps

Thursday, November 8, 12
slide-20
SLIDE 20 SERVERS & SERVICES MY APPLICATION Sencha Touch Mobile Ext JS Desktop BROWSER ENGINES Sencha.io HTTP/HTTPS WebSocket JavaScript HTML CSS Thursday, November 8, 12
slide-21
SLIDE 21 SERVERS & SERVICES MY APPLICATION Sencha Touch Mobile Ext JS Desktop BROWSER ENGINES
  • Desktop framework
  • Cross-Browser
  • Modern desktop UI
  • Mobile framework
  • Native packaging
  • Modern mobile UI
Sencha.io HTTP/HTTPS WebSocket JavaScript HTML CSS Thursday, November 8, 12
slide-22
SLIDE 22 SERVERS & SERVICES Sencha.io HTTP/HTTPS WebSocket MY APPLICATION Sencha Touch Mobile Ext JS Desktop BROWSER ENGINES UI: Controls + Containers Foundation: OOP + MVC + Library Data: Models + Stores + Connectors JavaScript HTML CSS Thursday, November 8, 12
slide-23
SLIDE 23

Sencha Touch 2

A JavaScript framework for building rich mobile apps with web standards

Thursday, November 8, 12
slide-24
SLIDE 24

www.sencha.com/apps

Thursday, November 8, 12
slide-25
SLIDE 25 Thursday, November 8, 12
slide-26
SLIDE 26

Sencha Basics

Thursday, November 8, 12
slide-27
SLIDE 27

Class System

Packages Inheritance Scope Management Class Loading Mix-ins

Thursday, November 8, 12
slide-28
SLIDE 28

Ext.create( ‘class_name’, { } ); Ext.define( ‘class_name’, { } );

Class System

Thursday, November 8, 12
slide-29
SLIDE 29

Classes

Thursday, November 8, 12
slide-30
SLIDE 30

Classes

Thursday, November 8, 12
slide-31
SLIDE 31

Classes

Thursday, November 8, 12
slide-32
SLIDE 32

MVC

Thursday, November 8, 12
slide-33
SLIDE 33

xtype

Thursday, November 8, 12
slide-34
SLIDE 34

xtemplate

Thursday, November 8, 12
slide-35
SLIDE 35

UI

Thursday, November 8, 12
slide-36
SLIDE 36

Touch Components

Thursday, November 8, 12
slide-37
SLIDE 37

Ext JS Components

Thursday, November 8, 12
slide-38
SLIDE 38

“ ”

I want to go fast...

Thursday, November 8, 12
slide-39
SLIDE 39

Design Develop Deploy

DEVELOPMENT WORKFLOW

Ext Designer 1.2

Thursday, November 8, 12
slide-40
SLIDE 40

Ext Designer

  • Ext JS interface builder
  • Support for Ext JS Charts
  • Code generation for complex UI

layouts

  • JSON/XML data connectivity
  • Export projects and code
Thursday, November 8, 12
slide-41
SLIDE 41

Design Develop Deploy

Sencha Architect 2

Thursday, November 8, 12
slide-42
SLIDE 42

Sencha Architect 2

  • Everything from Ext Designer 1.2

+

  • Sencha Touch 2
  • Code Editing
  • MVC
  • Native Deployment
Thursday, November 8, 12
slide-43
SLIDE 43

Let’s take a closer look

Thursday, November 8, 12
slide-44
SLIDE 44

Architect’s workspace

Thursday, November 8, 12
slide-45
SLIDE 45

Application Toolbar

Thursday, November 8, 12
slide-46
SLIDE 46

Project Inspector

Thursday, November 8, 12
slide-47
SLIDE 47

Design Canvas

Thursday, November 8, 12
slide-48
SLIDE 48

Toolbox

Thursday, November 8, 12
slide-49
SLIDE 49

Configuration

Thursday, November 8, 12
slide-50
SLIDE 50

Code Editor

Thursday, November 8, 12
slide-51
SLIDE 51

Wear your helmets for the live demo!

Thursday, November 8, 12
slide-52
SLIDE 52

Thanks Qcon NYC!

Thursday, November 8, 12
slide-53
SLIDE 53

Aditya Bansod

VP, Product Marketing @ adityabansod aditya@sencha.com

Thursday, November 8, 12