Lessons learnt building a mobile web app

non mvc-framework architecture, layers of test and use of promises to build a robust app fully tested

Transcript

1. Lessons Learnt Building a mobile web application
2. @hell03610
3. The App
4. The app
5. + Technology
6. jQuery mobile <div data-role="page"> <div data-role="content"> <ul data-role="listview"> </ul> </div> </div> $.mobile.showPageLoadingMsg(); $.mobile.hidePageLoadingMsg(); $.mobile.changePage('pageId'); Markup Javascript API
7. PhoneGap + PhoneGap Build >jake apk
8. Another app
9. + Another technologies
10. Lungojs <section> <article> <ul> </ul> </div> </section> Lungo.Notification.loading(); Lungo.Notification.hide(); Lungo.Router.section('sectionId'); Markup Javascript API
11. The Challenge
12. Build a robust app fully tested
13. +-----------+ | | +---------------------+ +------------+ | | | CONTROLLER | | | | | |---------------------| | | | | | | | | | UI |<------------+ | | | | | | | +--------------> SERVER | | | | | | | | | | +--------+ | | | | | | | +-------+-------------+ | | | +-----------+ | | | | | | | | +------------+ +-------+ | | | | | +--------v---------+ +-------v-------------+ +----------+----------+ | HELPER | | DOMAIN | | SERVICE | |------------------| |---------------------| |---------------------| | | | | | | | | | +--------> | | | | <--------+ | | | | | | | +------------------+ +---------------------+ +---------------------+ Diagram
14. 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
15. Controller - Code
16. 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
17. Domain - Code
18. Service  Several public testable methods  1 to 1 to server endpoint  Will work with promises
19. Service
20. How do we test the UI?
21. How do we test the UI? From outside, exercising the UI and faking the domain
22. Controller - Test Rspec + Cucumber + Capybara
23. Controller - Test
24. Faking the domain
25. (promises)
26. 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  ...
27. 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
28. Let's go back to the project
29. +-----------+ | | +---------------------+ +------------+ | | | CONTROLLER | | | | | |---------------------| | | | | | | | | | UI |<------------+ | | | | | | | +--------------> SERVER | | | | | | | | | | +--------+ | | | | | | | +-------+-------------+ | | | +-----------+ | | | | | | | | +------------+ +-------+ | | | | | +--------v---------+ +-------v-------------+ +----------+----------+ | HELPER | | DOMAIN | | SERVICE | |------------------| |---------------------| |---------------------| | | | | | | | | | +--------> | | | | <--------+ | | | | | | | +------------------+ +---------------------+ +---------------------+ Diagram
30. Domain- Test Jasmine + Sinon.js + Chai.js + Chai for promises
31. Service - Test Jasmine + Sinon.js+ Chai.js
32. The map is not the territory
33. 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!
34. 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)
35. 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
36. Build tests to make a robust app, Test in real devices to make users happy