Slide 1

Slide 1 text

Cross-platform Mobile

Slide 2

Slide 2 text

Pete Hodgson @ph1

Slide 3

Slide 3 text

Portable Body

Slide 4

Slide 4 text

http://martinfowler.com/articles/multiMobile/

Slide 5

Slide 5 text

mobile app

Slide 6

Slide 6 text

UI the rest

Slide 7

Slide 7 text

UI portable body

Slide 8

Slide 8 text

UI portable body

Slide 9

Slide 9 text

UI portable body JavaScript

Slide 10

Slide 10 text

UI portable body iOS JavaScript

Slide 11

Slide 11 text

portable body UI

Slide 12

Slide 12 text

portable body

Slide 13

Slide 13 text

portable body iPhone mobile web Android

Slide 14

Slide 14 text

portable body iPhone mobile web Android

Slide 15

Slide 15 text

iPhone mobile web Android

Slide 16

Slide 16 text

http://calatrava.github.io/

Slide 17

Slide 17 text

- controllers - domain objs. - services views

Slide 18

Slide 18 text

- controllers - domain objs. - services views

Slide 19

Slide 19 text

kernel UI

Slide 20

Slide 20 text

update UI respond to user input kernel UI

Slide 21

Slide 21 text

show me

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

updating the UI

Slide 24

Slide 24 text

updating the UI

Slide 25

Slide 25 text

updating the UI

Slide 26

Slide 26 text

updating the UI

Slide 27

Slide 27 text

someView.render( aViewMessage ) updating the UI

Slide 28

Slide 28 text

someView.render( aViewMessage ) updating the UI {...}

Slide 29

Slide 29 text

someView.render( aViewMessage ) updating the UI {...}

Slide 30

Slide 30 text

reading the UI

Slide 31

Slide 31 text

` reading the UI

Slide 32

Slide 32 text

someView.get( ‘field_id’, callbackFn ) ` reading the UI

Slide 33

Slide 33 text

someView.get( ‘field_id’, callbackFn ) ` reading the UI

Slide 34

Slide 34 text

responding to events

Slide 35

Slide 35 text

responding to events

Slide 36

Slide 36 text

responding to events `

Slide 37

Slide 37 text

someView.bind( ‘event_id’, callbackFn ) responding to events `

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

calatrava is HTML first

Slide 40

Slide 40 text

native HTML first

Slide 41

Slide 41 text

native native HTML first

Slide 42

Slide 42 text

native native HTML first native

Slide 43

Slide 43 text

Testing Acceptance Tests

Slide 44

Slide 44 text

Testing Acceptance Tests app logic

Slide 45

Slide 45 text

where’s your logic? mobile app mobile services

Slide 46

Slide 46 text

shared mobile services app HTML

Slide 47

Slide 47 text

app shared mobile services app app iPhone HTML Android

Slide 48

Slide 48 text

thanks!

Slide 49

Slide 49 text

thanks! @ph1 for slides

Slide 50

Slide 50 text

www.thoughtworks.com/radar