Appsterdam WWLL : Sencha Touch

Slide 1

Slide 1 text

“How to build highly scalable cross-platform mobile apps.” Lee Boonstra @ladysign Wednesday, July 31, 13

Slide 2

Slide 2 text

Lee Boonstra Technical Trainer @ Sencha [email protected] ladysign leeboonstra http://www.ladysign-apps.com Wednesday, July 31, 13

Slide 3

Slide 3 text

Wednesday, July 31, 13

Slide 4

Slide 4 text

Check our Job openings http://www.sencha.com/company/careers/ Wednesday, July 31, 13

Slide 5

Slide 5 text

“As a technical trainer I teach Sencha Touch and Ext JS. I write documentation and speak at events.” Wednesday, July 31, 13

Slide 6

Slide 6 text

“I’ve a Java and a Front-end development background. Before Sencha, I worked as a lead developer for different clients.” Wednesday, July 31, 13

Slide 7

Slide 7 text

Sencha Touch 2 Cookbook Wednesday, July 31, 13

Slide 8

Slide 8 text

Overview • HTML5 mobile app frameworks • Where Sencha ﬁts in • Build an app with Sencha Architect • Packaging for production Wednesday, July 31, 13

Slide 9

Slide 9 text

“How to build highly scalable cross-platform mobile apps.” Wednesday, July 31, 13

Slide 10

Slide 10 text

That’s a mouthful of words... Wednesday, July 31, 13

Slide 11

Slide 11 text

That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps Wednesday, July 31, 13

Slide 12

Slide 12 text

That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps • Cross-platform • works on all major platforms out of the box Wednesday, July 31, 13

Slide 13

Slide 13 text

That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps • Cross-platform • works on all major platforms out of the box • Mobile app • works on mobile and tablet (touch) devices Wednesday, July 31, 13

Slide 14

Slide 14 text

Slide 15

Slide 15 text

HTML5 vs. Native The Matrix (1999) Wednesday, July 31, 13

Slide 16

Slide 16 text

HTML5 vs. Native The Matrix (1999) Wednesday, July 31, 13

Slide 17

Slide 17 text

HTML5 vs. Native The Matrix (1999) Wednesday, July 31, 13

Slide 18

Slide 18 text

HTML5 vs. Native “This is your last change. After this there is no turning back” Morpheus (Matrix 1999) The Matrix (1999) Wednesday, July 31, 13

Slide 19

Slide 19 text

No, this is not a discussion! Wednesday, July 31, 13

Slide 20

Slide 20 text

The Matrix (1999) Wednesday, July 31, 13

Slide 21

Slide 21 text

Wednesday, July 31, 13

Slide 22

Slide 22 text

Wednesday, July 31, 13

Slide 23

Slide 23 text

Where a mobile web app fits in Mobile App - Mobile and Tablet Web App - Desktop and Laptop Internet / Intranet Database Server SQL Server Oracle Sybase MySql ... Application Server Java PHP ColdFusion .NET Ruby on Rails ... Web Server IIS Apache Tomcat Websphere ... JSON/XML Transport Layer Wednesday, July 31, 13

Slide 24

Slide 24 text

More choices... Wednesday, July 31, 13

Slide 25

Slide 25 text

Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13

Slide 26

Slide 26 text

- Write once, run everywhere Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13

Slide 27

Slide 27 text

- Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13

Slide 28

Slide 28 text

- Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13

Slide 29

Slide 29 text

- Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time - Takes no device space Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13

Slide 30

Slide 30 text

- Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time - Takes no device space - Can be found in App Stores Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13

Slide 31

Slide 31 text

Advantages of building mobile apps with a HTML5 framework - Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time - Takes no device space - Can be found in App Stores - Can access native device APIs Wednesday, July 31, 13

Slide 32

Slide 32 text

Sencha Touch Fast and easy development of rich (mobile) web apps for the broadest range of devices Wednesday, July 31, 13

Slide 33

Slide 33 text

Sencha Touch Mobile HTML5 Framework ‣ High-performance mobile HTML5 framework for building cross-platform apps ‣ Complete set of nice mobile UI (touch-aware) components ‣ MVC application pattern ‣ Handy data layer Wednesday, July 31, 13

Slide 34

Slide 34 text

Sencha Touch Mobile HTML5 Framework ‣ Build apps that run on Android, Apple iOS, BlackBerry, and Windows Phone 8 ‣ Experimental support Firefox OS ‣ ST 2.3 also supports Tizen ‣ Native packaging for iOS and Android from Windows and Mac Wednesday, July 31, 13

Slide 35

Slide 35 text

Wednesday, July 31, 13

Slide 36

Slide 36 text

App Showcase Wednesday, July 31, 13

Slide 37

Slide 37 text

Sartorius App dkd Internet Service GmbH http://app.sartorius.com/sartobind Wednesday, July 31, 13

Slide 38

Slide 38 text

Fastbook Demo Sencha Inc. http://fb.html5isready.com/ http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story Wednesday, July 31, 13

Slide 39

Slide 39 text

Discover Music Sencha Inc. http://discovermusic.senchafy.com/ Wednesday, July 31, 13

Slide 40

Slide 40 text

Let’s get our hands dirty The Matrix Revolutions (2003) Wednesday, July 31, 13

Slide 41

Slide 41 text

Code Ext.define('MyApp.view.MainView', { extend: 'Ext.navigation.View', alias: 'widget.mainview', requires: [ 'MyApp.view.CustomerList' ], config: { navigationBar: { docked: 'top', }, items: [ { xtype: 'customerlist', title: 'Customers' } ] } }); Wednesday, July 31, 13

Slide 42

Slide 42 text

Sencha Cmd Scaffold: apps, models, controllers ... Wednesday, July 31, 13

Slide 43

Slide 43 text

MVC Architecture Wednesday, July 31, 13

Slide 44

Slide 44 text

MVC Architecture Wednesday, July 31, 13

Slide 45

Slide 45 text

Sencha Architect Visual app builder, create Sencha Touch and Ext JS applications by dragging and dropping components and previewing your application live. Wednesday, July 31, 13

Slide 46

Slide 46 text

Wednesday, July 31, 13

Slide 47

Slide 47 text

Wednesday, July 31, 13

Slide 48

Slide 48 text

Wednesday, July 31, 13

Slide 49

Slide 49 text

Wednesday, July 31, 13

Slide 50

Slide 50 text

Wednesday, July 31, 13

Slide 51

Slide 51 text

Wednesday, July 31, 13

Slide 52

Slide 52 text

Wednesday, July 31, 13

Slide 53

Slide 53 text

Wednesday, July 31, 13

Slide 54

Slide 54 text

Wednesday, July 31, 13

Slide 55

Slide 55 text

Wednesday, July 31, 13

Slide 56

Slide 56 text

Wednesday, July 31, 13

Slide 57

Slide 57 text

Wednesday, July 31, 13

Slide 58

Slide 58 text

Wednesday, July 31, 13

Slide 59

Slide 59 text

Wednesday, July 31, 13

Slide 60

Slide 60 text

Wednesday, July 31, 13

Slide 61

Slide 61 text

Wednesday, July 31, 13

Slide 62

Slide 62 text

Wednesday, July 31, 13

Slide 63

Slide 63 text

Wednesday, July 31, 13

Slide 64

Slide 64 text

Wednesday, July 31, 13

Slide 65

Slide 65 text

Wednesday, July 31, 13

Slide 66

Slide 66 text

Wednesday, July 31, 13

Slide 67

Slide 67 text

github.com/DanielGallo/CustomerApp Wednesday, July 31, 13

Slide 68

Slide 68 text

Packaging Apps Wednesday, July 31, 13

Slide 69

Slide 69 text

Building your app for Web sencha app build production Wednesday, July 31, 13

Slide 70

Slide 70 text

PhoneGap Build Sencha Mobile Packager Building your app for App Stores Wednesday, July 31, 13

Slide 71

Slide 71 text

‣ Build native iOS and Android apps using Sencha Touch 2 ‣ Access native APIs from a Sencha Touch 2 app ‣ Cordova 2.9.x APIs & packaging integration ‣ Package apps on Windows and Mac Sencha Mobile Packager Wednesday, July 31, 13

Slide 72

Slide 72 text

‣ Device information ‣ In-app purchases ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notiﬁcation ‣ Orientation ‣ Push Ext.device.Camera.capture({ success: function(image) { imageView.setSrc(image); }, quality: 75, destination: 'data' }); Sencha Mobile Packager Wednesday, July 31, 13

Slide 73

Slide 73 text

Sencha Mobile Packager ‣ Device information ‣ In-app purchases ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notiﬁcation ‣ Orientation ‣ Push Ext.Viewport.add({ xtype: 'list', itemTpl: '{First} {Last}', store: { fields: ['First', 'Last'], data: Ext.device.Contacts.getContacts() } }); Wednesday, July 31, 13

Slide 74

Slide 74 text

From command line: Building Your App sencha package build packager.json Wednesday, July 31, 13

Slide 75

Slide 75 text

Building Your App { "applicationName": "Simple Camera App", "bundleSeedId": "Q8U8378N9L", "applicationId": "com.leeboonstra.cameraapp", "outputPath": "../build/", "versionString": "1.0", "inputPath": "./", "icon": { "57": "resources/icons/icon.png", "72": "resources/icons/[email protected]", "114": "resources/icons/[email protected]", "144": "resources/icons/[email protected]" }, ... Wednesday, July 31, 13

Slide 76

Slide 76 text

Building Your App ... "conﬁguration": "Debug", "platform": "iOS", "deviceType": "iPad", "certiﬁcateAlias": "iPhone Developer", "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Wednesday, July 31, 13

Slide 77

Slide 77 text

Building Your App Sencha Architect: Wednesday, July 31, 13

Slide 78

Slide 78 text

Building Your App build.phonegap.com Wednesday, July 31, 13

Slide 79

Slide 79 text

Native APIs Wednesday, July 31, 13

Slide 80

Slide 80 text

Resources Wednesday, July 31, 13

Slide 81

Slide 81 text

Documentation and Examples docs.sencha.com Wednesday, July 31, 13

Slide 82

Slide 82 text

Webinar recordings and product walkthroughs Vimeo vimeo.com/sencha Wednesday, July 31, 13

Slide 83

Slide 83 text

Community-driven forum for seeking and offering help. ‣ Over 400,000 registered members ‣ Ask questions ‣ Offer help to others ‣ Powerful search facility ‣ Premium Forums for paid support subscribers ‣ Monitored by Sencha staff Sencha Forums sencha.com/forum Wednesday, July 31, 13

Slide 84

Slide 84 text

Online resource for ﬁnding and sharing of Sencha framework extensions. Sencha Market market.sencha.com Wednesday, July 31, 13

Slide 85

Slide 85 text

Books senchaexamples.com/books Sencha Touch Cookbook Lee Boonstra O’Reilly Sept 2013 Wednesday, July 31, 13

Slide 86

Slide 86 text

When building highly scalable cross-platform mobile apps, choosing a HTML5 framework can be wise choice. Lee Boonstra @ladysign Wednesday, July 31, 13

Slide 87

Slide 87 text

Create amazing apps built on web standards Lee Boonstra @ladysign http://www.speakerdeck.com/savelee Wednesday, July 31, 13