Lessons learnt building a mobile web app

Slide 1

Slide 1 text

Lessons Learnt Building a mobile web application

Slide 2

Slide 2 text

@hell03610

Slide 3

Slide 3 text

The App

Slide 4

Slide 4 text

The app

Slide 5

Slide 5 text

+ Technology

Slide 6

Slide 6 text

jQuery mobile

$.mobile.showPageLoadingMsg(); $.mobile.hidePageLoadingMsg(); $.mobile.changePage('pageId'); Markup Javascript API

Slide 7

Slide 7 text

PhoneGap + PhoneGap Build >jake apk

Slide 8

Slide 8 text

Another app

Slide 9

Slide 9 text

+ Another technologies

Slide 10

Slide 10 text

Lungojs

Lungo.Notification.loading(); Lungo.Notification.hide(); Lungo.Router.section('sectionId'); Markup Javascript API

Slide 11

Slide 11 text

The Challenge

Slide 12

Slide 12 text

Build a robust app fully tested

Slide 13

Slide 13 text

+-----------+ | | +---------------------+ +------------+ | | | CONTROLLER | | | | | |---------------------| | | | | | | | | | UI |<------------+ | | | | | | | +--------------> SERVER | | | | | | | | | | +--------+ | | | | | | | +-------+-------------+ | | | +-----------+ | | | | | | | | +------------+ +-------+ | | | | | +--------v---------+ +-------v-------------+ +----------+----------+ | HELPER | | DOMAIN | | SERVICE | |------------------| |---------------------| |---------------------| | | | | | | | | | +--------> | | | | <--------+ | | | | | | | +------------------+ +---------------------+ +---------------------+ Diagram

Slide 14

Slide 14 text

Controller  Attached to UI  Communicates with Domain  Has usually only one method public: init  Can use helpers for building markup Handlebars.js, domo.js  Can use helpers for encapsulating phonegap api Ie: camera api

Slide 15

Slide 15 text

Controller - Code

Slide 16

Slide 16 text

Domain  Logic of our app  Several public testable methods  Can have state  Will delegate to services for async calls to server  Will work with promises

Slide 17

Slide 17 text

Domain - Code

Slide 18

Slide 18 text

Service  Several public testable methods  1 to 1 to server endpoint  Will work with promises

Slide 19

Slide 19 text

Service

Slide 20

Slide 20 text

How do we test the UI?

Slide 21

Slide 21 text

How do we test the UI? From outside, exercising the UI and faking the domain

Slide 22

Slide 22 text

Controller - Test Rspec + Cucumber + Capybara

Slide 23

Slide 23 text

Controller - Test

Slide 24

Slide 24 text

Faking the domain

Slide 25

Slide 25 text

(promises)

Slide 26

Slide 26 text

Promises provide a well-defined interface for interacting with an object that represents the result of an action that is performed asynchronously,and may or may not be finished at any given point in time. Proposals  Promise/A  Promise/B  Promise/D http://wiki.commonjs.org/wiki/Promises Implementations  Jquery (Deferred)  Q  Promise.js  ...

Slide 27

Slide 27 text

step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // Do something with value4 }); }); }); }); return step1(initialVal).then(step2).then(step3).then(step4); Pyramid of Doom Promises

Slide 28

Slide 28 text

Let's go back to the project

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Domain- Test Jasmine + Sinon.js + Chai.js + Chai for promises

Slide 31

Slide 31 text

Service - Test Jasmine + Sinon.js+ Chai.js

Slide 32

Slide 32 text

The map is not the territory

Slide 33

Slide 33 text

Debugging  It's almost not needed  But suddenly something works wrong in a device  Weinre to the rescue! Which I learnt here, by the way, thanks!

Slide 34

Slide 34 text

Technical conclusions  Promises are cool, but might be hard to test in your stack  An pure MVC framework is not needed to have your code under control  Try to use only one stack (sometimes it is not possible)

Slide 35

Slide 35 text

Conclusions  A mobile app can be fully tested...in browser  Enough for testing what the app does  Don't feel safe, devices (can) behave different  Does not tell you if you're building the right thing