Tweet
Tweet

Slide 1

Slide 1 text

An introduction to Sencha Touch @patrickhamann January 2012 Friday, 27 January 12

Slide 2

Slide 2 text

What we’ll be covering •What is Sencha Touch •What it can do for you •When and when not to use it •Tips Friday, 27 January 12

Slide 3

Slide 3 text

Lots of frameworks Friday, 27 January 12

Slide 4

Slide 4 text

What is it? Friday, 27 January 12

Slide 5

Slide 5 text

A HTML5 Javascript framework •Built with open web standards •Utilising HTML5 Javascript API’s •Targeted at Mobile webkit: •iOS, Android, Blackberry and Palm •Write once, run everywhere •Plays nice with Phonegap Friday, 27 January 12

Slide 6

Slide 6 text

The new mobile web application Source: James Pearce Friday, 27 January 12

Slide 7

Slide 7 text

Traditional vs Mobile application stack Rendering UI UI Business Storage UI UI Business Storage Security Storage Sync Friday, 27 January 12

Slide 8

Slide 8 text

UI Toolkit UI Toolkit •Components - Lists, tabs, buttons, overlays •Touch events - Native, Event management, physics •Fully customisable and theme-able with SASS Friday, 27 January 12

Slide 9

Slide 9 text

Application logic Application architecture •MVC - Model, view, controller •Ext4 - Class system (Sencha Touch 2) •Extendable Friday, 27 January 12

Slide 10

Slide 10 text

Storage Data everywhere! •Offline storage - in-memory, session or persistent local •Ajax and JSONP •RESTful Readers & Proxies Friday, 27 January 12

Slide 11

Slide 11 text

Demo time. Friday, 27 January 12

Slide 12

Slide 12 text

Navigation and tabs Friday, 27 January 12

Slide 13

Slide 13 text

Lists Friday, 27 January 12

Slide 14

Slide 14 text

Forms Friday, 27 January 12

Slide 15

Slide 15 text

Carousel Friday, 27 January 12

Slide 16

Slide 16 text

Overlays and action sheets Friday, 27 January 12

Slide 17

Slide 17 text

Overlays and action sheets Friday, 27 January 12

Slide 18

Slide 18 text

Layouts Fit Card hbox vbox Source: Craig Walker Friday, 27 January 12

Slide 19

Slide 19 text

Theming Source: David Kaneda Friday, 27 January 12

Slide 20

Slide 20 text

Theming Source: James Pearce Friday, 27 January 12

Slide 21

Slide 21 text

Phonegap •Package for native deployment •Open source •WebUIView •Creates javascript access to native API’s •Camera, Sensors, file, network http://www.phonegap.com Friday, 27 January 12

Slide 22

Slide 22 text

When can i use it? So when can i use it? Friday, 27 January 12

Slide 23

Slide 23 text

Think first •Bandwidth? •Latency? - Does your data change? •Native vs Web? •Processor? Friday, 27 January 12

Slide 24

Slide 24 text

Why you should •Cross-platform •Touch events and gestures •Data manipulation •Native experience •JS engines are getting fast, very fast Friday, 27 January 12

Slide 25

Slide 25 text

Getting started & tips Friday, 27 January 12

Slide 26

Slide 26 text

Getting started •Read the documentation - it’s amazing •Ask in the forums •Read the source •Learn to love SASS •Test on mobiles, soon and often •Be an active member of this user group! Friday, 27 January 12

Slide 27

Slide 27 text

Performance is key •Build tools - concatenate, minify & compress •Cache - appCache manifest, local data •Watch your DOM - destroy everything •Remove un-used library css Friday, 27 January 12

Slide 28

Slide 28 text

Go forth and make! Friday, 27 January 12

Slide 29

Slide 29 text

Thankyou. Any questions? @patrickhamann Friday, 27 January 12