70
with Sencha Touch 2 Martin de Keijzer iOSOnRailsConf 2013 13-14 April, Alushta Ukraine Building mobile web applications Sunday, 14 April 13

Hybrid Mobile Web Apps with Sencha Touch 2

Embed Size (px)

DESCRIPTION

Creating apps usually is a very time consuming process when it comes to development. You need to write your code for all different platforms like iOS, Android, Blackberry, Windows Phone. Sencha Touch solves this problem by giving you a framework for the langauge we as web developers all know and love; Javascript! In this session we will see how Sencha Touch makes it easy to create apps. We will talk about the pro’s and cons of using HTML5 and Javascript. After that I will take you on a tour on how to create a simple tab-based application with an external data source. We will have a look at theming, and look into some performance optimizations.

Citation preview

Page 1: Hybrid Mobile Web Apps with Sencha Touch 2

with Sencha Touch 2

Martin de KeijzeriOSOnRailsConf 2013 13-14 April, Alushta Ukraine

Building mobile web applications

Sunday, 14 April 13

Page 2: Hybrid Mobile Web Apps with Sencha Touch 2

Introduction

2

Sunday, 14 April 13

Page 3: Hybrid Mobile Web Apps with Sencha Touch 2

About me

Martin de KeijzerDutch web developer

3

@Martin1982

PHPBenelux Board Member

Working for Ibuildings

http://www.martindekeijzer.nl

Sunday, 14 April 13

Page 4: Hybrid Mobile Web Apps with Sencha Touch 2

The mobile web

4

Sunday, 14 April 13

Page 5: Hybrid Mobile Web Apps with Sencha Touch 2

Apps

Languages

‣ Apple: Objective-C

‣ Android: Java

‣Windows Phone: C# / Visual Basic

5

Distribution MethodsApple: AppStore

Android: Market

Windows Phone: Microsoft Market Place

Sunday, 14 April 13

Page 6: Hybrid Mobile Web Apps with Sencha Touch 2

Web Apps

6

Available through the web

Sunday, 14 April 13

Page 7: Hybrid Mobile Web Apps with Sencha Touch 2

Web Apps

Platform independent

7

Sunday, 14 April 13

Page 8: Hybrid Mobile Web Apps with Sencha Touch 2

Web Apps

Can be transformed to an App-like experience

8

Sunday, 14 April 13

Page 9: Hybrid Mobile Web Apps with Sencha Touch 2

Web Apps

9Can be wrapped as native apps

Sunday, 14 April 13

Page 10: Hybrid Mobile Web Apps with Sencha Touch 2

Sunday, 14 April 13

Page 11: Hybrid Mobile Web Apps with Sencha Touch 2

The Sencha Touch way

‣Building applications, not websites

‣ Pure JavaScript

‣ Touch framework

‣MV(S)C Paradigm

‣Based on ExtJS 4

Downloadable from http://www.sencha.com

11

Sunday, 14 April 13

Page 12: Hybrid Mobile Web Apps with Sencha Touch 2

Rapidly startingSencha Cmd

12

Sunday, 14 April 13

Page 13: Hybrid Mobile Web Apps with Sencha Touch 2

Quick start: Sencha Cmd

13

sencha generate app <name> <path>

Sunday, 14 April 13

Page 14: Hybrid Mobile Web Apps with Sencha Touch 2

Quick start: Sencha Cmd

14

•App

•Resources

•app.js

•.json files

•index.html

•touch (DO NOT TOUCH!)

Sunday, 14 April 13

Page 15: Hybrid Mobile Web Apps with Sencha Touch 2

Changing the SDK is bad! Extending is ok.

15

Sunday, 14 April 13

Page 16: Hybrid Mobile Web Apps with Sencha Touch 2

Testing

16

WebkitSunday, 14 April 13

Page 17: Hybrid Mobile Web Apps with Sencha Touch 2

Setting up viewsInterface design

17

Sunday, 14 April 13

Page 18: Hybrid Mobile Web Apps with Sencha Touch 2

User interface

Abstraction of various app ui elements:

‣containers‣panels‣ tab panels‣carousels‣ lists‣ forms‣ toolbars

18

Sunday, 14 April 13

Page 19: Hybrid Mobile Web Apps with Sencha Touch 2

Creating views

19app/view/Technologies.js

Sunday, 14 April 13

Page 20: Hybrid Mobile Web Apps with Sencha Touch 2

Creating views

20

http://docs.sencha.com

Sunday, 14 April 13

Page 21: Hybrid Mobile Web Apps with Sencha Touch 2

Creating views

21

/app.js

Sunday, 14 April 13

Page 22: Hybrid Mobile Web Apps with Sencha Touch 2

Creating views

22app/view/Main.jsSunday, 14 April 13

Page 23: Hybrid Mobile Web Apps with Sencha Touch 2

Creating views

23

Sunday, 14 April 13

Page 24: Hybrid Mobile Web Apps with Sencha Touch 2

Bootstrapping & ControllersTaking control

24

Sunday, 14 April 13

Page 25: Hybrid Mobile Web Apps with Sencha Touch 2

Bootstrapping and Controllers

25

/app.jsFinal point of bootstrapping, controllers & profiles go first

Sunday, 14 April 13

Page 26: Hybrid Mobile Web Apps with Sencha Touch 2

Bootstrapping and Controllers

26

Sunday, 14 April 13

Page 27: Hybrid Mobile Web Apps with Sencha Touch 2

Events

27Create a new controller

sencha generate controller <name>

Sunday, 14 April 13

Page 28: Hybrid Mobile Web Apps with Sencha Touch 2

Events

28

Make the component selectable

Sunday, 14 April 13

Page 29: Hybrid Mobile Web Apps with Sencha Touch 2

Events

29app/controller/TechnologiesTab.jsSunday, 14 April 13

Page 30: Hybrid Mobile Web Apps with Sencha Touch 2

Events

30app/controller/TechnologiesTab.js

Sunday, 14 April 13

Page 31: Hybrid Mobile Web Apps with Sencha Touch 2

Events

31

Querying

Predefined events

Sunday, 14 April 13

Page 32: Hybrid Mobile Web Apps with Sencha Touch 2

Events

32app/controller/TechnologiesTab.jsSunday, 14 April 13

Page 33: Hybrid Mobile Web Apps with Sencha Touch 2

Events

33

Sunday, 14 April 13

Page 34: Hybrid Mobile Web Apps with Sencha Touch 2

and communicationData binding

34

Sunday, 14 April 13

Page 35: Hybrid Mobile Web Apps with Sencha Touch 2

Data communication

35

Sunday, 14 April 13

Page 36: Hybrid Mobile Web Apps with Sencha Touch 2

Model

36

Model

Field

Association Validation

Sunday, 14 April 13

Page 37: Hybrid Mobile Web Apps with Sencha Touch 2

Model

37

sencha generate model <name> <property:type,[property:type]...>

Sunday, 14 April 13

Page 38: Hybrid Mobile Web Apps with Sencha Touch 2

Model

38app/model/Technologies.js

Sunday, 14 April 13

Page 39: Hybrid Mobile Web Apps with Sencha Touch 2

Store

39

Store

Model

Filter Grouper Sorter

Sunday, 14 April 13

Page 40: Hybrid Mobile Web Apps with Sencha Touch 2

Store

40

app/store/Technologies.js

app.jsSunday, 14 April 13

Page 41: Hybrid Mobile Web Apps with Sencha Touch 2

Proxy

41

Proxy

Reader Writer

Store Model

Sunday, 14 April 13

Page 42: Hybrid Mobile Web Apps with Sencha Touch 2

Proxy

42

app/model/Technologies.js

Sunday, 14 April 13

Page 43: Hybrid Mobile Web Apps with Sencha Touch 2

Create a list

43app/view/Technologies.jsSunday, 14 April 13

Page 44: Hybrid Mobile Web Apps with Sencha Touch 2

Data in action!

44

Sunday, 14 April 13

Page 45: Hybrid Mobile Web Apps with Sencha Touch 2

When an OS doesn’t play well with your appDevice profiles

45

Sunday, 14 April 13

Page 46: Hybrid Mobile Web Apps with Sencha Touch 2

Device profiles

Different devices can require different options.

46

Sunday, 14 April 13

Page 47: Hybrid Mobile Web Apps with Sencha Touch 2

Device Profiles

Tablet has more screen real estate and can provide more user interaction than a phone.

47

Sunday, 14 April 13

Page 48: Hybrid Mobile Web Apps with Sencha Touch 2

Device Profiles

Device profiles provide a solution!

48

Sunday, 14 April 13

Page 49: Hybrid Mobile Web Apps with Sencha Touch 2

Profile setup

49

sencha generate profile <name>

Sunday, 14 April 13

Page 50: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

50

app/view/Desktop/Main.js

Sunday, 14 April 13

Page 51: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

51

app/view/Tablet/Main.js

Sunday, 14 April 13

Page 52: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

52

app/view/Phone/Main.js

Sunday, 14 April 13

Page 53: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

53

app/profile/Tablet.js

Sunday, 14 April 13

Page 54: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

54

Desktop

Sunday, 14 April 13

Page 55: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

55

Phone

Sunday, 14 April 13

Page 56: Hybrid Mobile Web Apps with Sencha Touch 2

Profile overriding

56

Tablet

Sunday, 14 April 13

Page 57: Hybrid Mobile Web Apps with Sencha Touch 2

Styling an appYour app’s got style!

57

Sunday, 14 April 13

Page 58: Hybrid Mobile Web Apps with Sencha Touch 2

Sunday, 14 April 13

Page 59: Hybrid Mobile Web Apps with Sencha Touch 2

Installing Compass

59

gem install compass

Sunday, 14 April 13

Page 60: Hybrid Mobile Web Apps with Sencha Touch 2

The scss file

60

compass compile

compass watch

Extension: .scss

Sunday, 14 April 13

Page 61: Hybrid Mobile Web Apps with Sencha Touch 2

The scss file

61resources/sass/app.scssSunday, 14 April 13

Page 62: Hybrid Mobile Web Apps with Sencha Touch 2

Compass Variables

62

touch/resources/themes/

stylesheets/sencha-touch/

default/_variables.scss

Sunday, 14 April 13

Page 63: Hybrid Mobile Web Apps with Sencha Touch 2

Compass Mixins

63

Sunday, 14 April 13

Page 64: Hybrid Mobile Web Apps with Sencha Touch 2

Quick Tips

•Well documented on http://docs.sencha.com

•Sencha Command

•Sencha Architect 2

•Keep your views clean, use controllers!

•Mobile devices have limited hardware64

Sunday, 14 April 13

Page 65: Hybrid Mobile Web Apps with Sencha Touch 2

Need another look?

65

http://www.github.com/Martin1982/

iOSOnRailsConf

Sunday, 14 April 13

Page 66: Hybrid Mobile Web Apps with Sencha Touch 2

66

Sencha Touch by Sencha

Sunday, 14 April 13

Page 67: Hybrid Mobile Web Apps with Sencha Touch 2

66

Sencha Touch by Sencha

Sunday, 14 April 13

Page 68: Hybrid Mobile Web Apps with Sencha Touch 2

Tomorrow’s mini Workshop

67

Prepare to tag along:Sencha Cmd

Sencha Touch 2.1.1 GPL

Sunday, 14 April 13

Page 69: Hybrid Mobile Web Apps with Sencha Touch 2

QUESTIONS

68

Sunday, 14 April 13

Page 70: Hybrid Mobile Web Apps with Sencha Touch 2

[email protected]@Martin1982

Thank you for listening

Sunday, 14 April 13