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

Introduction

2

Sunday, 14 April 13

About me

Martin de KeijzerDutch web developer

3

@Martin1982

PHPBenelux Board Member

Working for Ibuildings

http://www.martindekeijzer.nl

Sunday, 14 April 13

The mobile web

4

Sunday, 14 April 13

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

Web Apps

6

Available through the web

Sunday, 14 April 13

Web Apps

Platform independent

7

Sunday, 14 April 13

Web Apps

Can be transformed to an App-like experience

8

Sunday, 14 April 13

Web Apps

9Can be wrapped as native apps

Sunday, 14 April 13

Sunday, 14 April 13

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

Rapidly startingSencha Cmd

12

Sunday, 14 April 13

Quick start: Sencha Cmd

13

sencha generate app <name> <path>

Sunday, 14 April 13

Quick start: Sencha Cmd

14

•App

•Resources

•app.js

•.json files

•index.html

•touch (DO NOT TOUCH!)

Sunday, 14 April 13

Changing the SDK is bad! Extending is ok.

15

Sunday, 14 April 13

Testing

16

WebkitSunday, 14 April 13

Setting up viewsInterface design

17

Sunday, 14 April 13

User interface

Abstraction of various app ui elements:

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

18

Sunday, 14 April 13

Creating views

19app/view/Technologies.js

Sunday, 14 April 13

Creating views

20

http://docs.sencha.com

Sunday, 14 April 13

Creating views

21

/app.js

Sunday, 14 April 13

Creating views

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

Creating views

23

Sunday, 14 April 13

Bootstrapping & ControllersTaking control

24

Sunday, 14 April 13

Bootstrapping and Controllers

25

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

Sunday, 14 April 13

Bootstrapping and Controllers

26

Sunday, 14 April 13

Events

27Create a new controller

sencha generate controller <name>

Sunday, 14 April 13

Events

28

Make the component selectable

Sunday, 14 April 13

Events

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

Events

30app/controller/TechnologiesTab.js

Sunday, 14 April 13

Events

31

Querying

Predefined events

Sunday, 14 April 13

Events

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

Events

33

Sunday, 14 April 13

and communicationData binding

34

Sunday, 14 April 13

Data communication

35

Sunday, 14 April 13

Model

36

Model

Field

Association Validation

Sunday, 14 April 13

Model

37

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

Sunday, 14 April 13

Model

38app/model/Technologies.js

Sunday, 14 April 13

Store

39

Store

Model

Filter Grouper Sorter

Sunday, 14 April 13

Store

40

app/store/Technologies.js

app.jsSunday, 14 April 13

Proxy

41

Proxy

Reader Writer

Store Model

Sunday, 14 April 13

Proxy

42

app/model/Technologies.js

Sunday, 14 April 13

Create a list

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

Data in action!

44

Sunday, 14 April 13

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

45

Sunday, 14 April 13

Device profiles

Different devices can require different options.

46

Sunday, 14 April 13

Device Profiles

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

47

Sunday, 14 April 13

Device Profiles

Device profiles provide a solution!

48

Sunday, 14 April 13

Profile setup

49

sencha generate profile <name>

Sunday, 14 April 13

Profile overriding

50

app/view/Desktop/Main.js

Sunday, 14 April 13

Profile overriding

51

app/view/Tablet/Main.js

Sunday, 14 April 13

Profile overriding

52

app/view/Phone/Main.js

Sunday, 14 April 13

Profile overriding

53

app/profile/Tablet.js

Sunday, 14 April 13

Profile overriding

54

Desktop

Sunday, 14 April 13

Profile overriding

55

Phone

Sunday, 14 April 13

Profile overriding

56

Tablet

Sunday, 14 April 13

Styling an appYour app’s got style!

57

Sunday, 14 April 13

Sunday, 14 April 13

Installing Compass

59

gem install compass

Sunday, 14 April 13

The scss file

60

compass compile

compass watch

Extension: .scss

Sunday, 14 April 13

The scss file

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

Compass Variables

62

touch/resources/themes/

stylesheets/sencha-touch/

default/_variables.scss

Sunday, 14 April 13

Compass Mixins

63

Sunday, 14 April 13

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

Need another look?

65

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

iOSOnRailsConf

Sunday, 14 April 13

66

Sencha Touch by Sencha

Sunday, 14 April 13

66

Sencha Touch by Sencha

Sunday, 14 April 13

Tomorrow’s mini Workshop

67

Prepare to tag along:Sencha Cmd

Sencha Touch 2.1.1 GPL

Sunday, 14 April 13

QUESTIONS

68

Sunday, 14 April 13

mdkeijzer@ibuildings.nl@Martin1982

Thank you for listening

Sunday, 14 April 13