Building Mobile (app) Masterpiece with Distributed Agile

Building  Mobile  Masterpiece    with  Distributed  Agile  

Weerasak  (Wee)  Witthawaskul  

October  22,  2013  

First,  thanks  to…  

!   @weera  for  making  the  meetup  possible  

!   Agile66  Facebook  page  

!   Geeky  Base  for  location  and  facility  

!   And  all  of  you,  curious  smart  minds  

Who  am  I?  

Who  am  I?  

Why  should  you  listen  to  me?  

!   You  already  know  agile  and  want  to  know  

how  I  adopted  distributed  agile  

!   You  want  to  know  why  mobile  development  

has  more  challenges  than  web  development  

!   How  you  can  apply  agility  to  your  projects  

Case  Study  

Morningstar  for  iPad  

!   Portfolio  management  and  

financial  research  app  

!   Shipped  in  September  2013  

!   Top  10  in  Finance  free  app  in  

US  store  as  of  October  2013  

Demo  time  

Project  History  

!   Initiated  in  2011  as  an  incubator  project  to  experiment  and  

complement  morningstar.com's  user  experience  using  

tablets  

!   The  company  already  had  smartphone  apps  on  iPhone,  

Android,  Blackberry  from  a  China  team  

!   I  joined  the  company  in  April  2011  as  the  first  Chicago  

developer  

!   Zero  professional  experience  with  mobile,  how  to  start?  

Initial  Observations  •  Management  buy-­‐in  to  use  Agile  methods  

•  Young,  energetic  team  

•  Lack  of  process  &  automation  

•  UI  Design  work  was  not  in  the  same  sprints  

•  Ambitious  cross  platform  architecture  

•  Lack  of  OO  Design  &  Clean  Code  discipline  

Action  Items  

•  Communication,  communication,  communication  

•  Architectural  and  Process  Analysis  

•  Continuous  Integration  Setup  

•  Product,  Design  and  Development  Sprint  Alignment  

•  Agile  Practice  Training  &  TDD  

Tools  

•  JIRAs  for  distributed  team  whiteboards  

•  Jenkins  for  automated  build  &  deployment  

•  TestFlight  for  iOS  app  internal  distribution  

Build  Pipeline  –  iOS  Client  

Client  code  checkins  

Unit  Test  Build  

Main  Build   TestFlight  

UI  Automation  Build  

Automated  User  Acceptance  Tests  

Build  Pipeline  –  Server  

Server  code  checkins  

Unit  Test  Build   Main  Build  

Sanity  Test  Builds  with  SoapUI  

Internal  Dev  Server  

Stable  Dev  Server  

Manual  deploy  

Auto  deploy  

Continuous  Integration  

•  Morningstar  app  for  iPad  

– 7,300+  (client)  and  2,600+  (server)  commits  

– 4,000+  automated  iPad  builds  &  deployments  

– 1,000+  automated  server  builds  &  deployments  

– Code  checkins  à  Test  builds  à  Deploy  builds  

10/22/13 Mobile Solutions Development Team 15

Past  Internal  Environments  

10/22/13  Mobile  Solutions  

Development  Team   16  

Build  &  Auto    Deploy  

Dev  Server  

iOS  Devices  

OK   OK  OK  

Build  &  Auto    Deploy  

Build  &  Auto    Deploy  

Manual  1-­‐click  Deploy  

Stable  Dev    Server  

Current  Environments  Build  &  Auto    

Deploy  

Dev  Server  

iOS  Devices  

Build  &  Auto    Deploy  

Build  &  Auto    Deploy  

Manual  1-­‐click  Deploy  with  approval  Stable  Dev    Server  

QA  Server  

Staging    Server  Live  

Server  

Test  Driven  Development  •  Client  –  400+  Classes,  72,000+  LOC,  160+  XIBs  

–  600+  Unit  Tests  

– GHUnit  for  testing,  OCMock  for  mocking  

– User  Acceptance  Testing  •  Behavior  Driven  Test  with  Frank  (retired)  

•  Apple  UIAutomation  (under  development)  

10/22/13 Mobile Solutions Development Team 18

Test  Driven  Development  

•  Server  –  230+  classes,  20K+  LOC  

–  180+  test  classes,  20K+  LOC  

–  86%  line  coverage  

–  65%  conditionals  coverage  

–  JUnit  for  testing  

–  JMockIt  for  mocking  

10/22/13 Mobile Solutions Development Team 19

Full  Stack  Mobile  Development  

•  Concurrent  client  (iPad)  and  server  (Java)  development  

•  Multi-­‐version  support  

•  Client  or  server  logic  

•  Skillsets  

Evolving  Architectures  

Request/Response  

Async  Server-­‐side  Publish/Subscribe  

Client-­‐side  Publish/Subscribe  

Past   Present   Future  

Gateway  Architecture  

Morningstar  iPad  app  

Login  

MorningstarMobile  Server  

Portfolio  API  

Others  

HTML  pages  

REST/JSON  over  HTTPS  

UIWebView  over  HTTPS  

Apple  iTunes    In  App  Purchase  

Reusable  Components  

Popover  with  bottom  fade  

effect  

Securities  labels  with  ratings  

Security  Charts  

Publish/Subscribe  Architecture  

Each  row  subscribes  to  its  security  object  

When  the  app  receives  updates  to  a  security  object,  all  subscribers  get  latest  data  and  

update  views  

User  taps  to  see  mini-­‐quote  

Based  on  Event  subscription/notification  from  NSNotificationCenter  

Internal  Features  

•  Feature  Toggles  

•  Internal  Server  Connection  

•  “Shake”  Feedback  

•  Logging  &  Performance  Monitoring  

Feature  Toggles  •  Allow  us  to  experiment  with  new  features  

•  Can  be  used  to  enable/disable  features  based  on  context  

10/22/13 Mobile Solutions Development Team

RESTful  APIs  

•  Since  we  cannot  control  published  app  

customer  upgrades*,  we  have  to  make  sure  

the  server  supports  multiple  client  app  

versions,  different  locales,  multiple  products.  

– REST  with  JSON  over  HTTPS  

– Cacheability,  CDN  friendly  (Akamai/Varnish)  

RESTful  API  Examples  •  HTTPS  GET/PUT/POST/DELETE/OPTIONS  

•  Endpoint  convention  

–  Format:  https://{dns}/{ServicePrefix}/{resources}  

–  ServicePrefix  

•  /service/1.0/locales/en-­‐US/products/RT/  

–  REST  resources  

•  /securities/USA:MORN/news  

•  /securities/USA:MORN/quotes  

•  /securities/USA:MORN/info  

•  Example    

–  GET  https://mobileservice.morningstar.com/service/1.0/locales/en-­‐US/products/

RT/securities/USA:MORN/news  

Standard  Data  Formats  •  “Glue”  between  client/server  

•  Standard  formats  for  Security,  

Holding,  Portfolio,  News  etc.  

•  Reusable  parsers  

•  JSON  data  types  

•  DateTime  in  UTC  (ISO8601)  

•  Regardless  of  data  formats  from  

different  data  sources,  mobile  

server  and  app  share  one  

common  format  

Async  I/O    Promise<HttpResponse>,  WS.getAsync  and  Promise.waitAll  

Server   Security  Data   Portfolio  API   CMS  

Async  calls  Chained  of    HTTP    

response    Promises  

 waitAll  

transform  &  serialize  results  

Thread  yield  

Launch  Results  

•  Public  launched  on  Sep  16,  2013  

•  5,000  app  downloads  in  1  week  

•  1M  web  service  calls  in  1  week;  4M  calls  in  3  

weeks  

•  Average  web  service  response  time  is  ~712ms  

Rome  was  not  built  in  a  day  •  Agile  is  more  a  guideline.  Mix  &  match  for  your  team  

•  Focus  on  working  software  

•  Iterate,  iterate  and  iterate  

•  Internal  feedback  is  good;  external  feedback  is  great  

•  Deadline  vs  Feature  dilemma  

•  Continual  improvements  and  releases  are  key  to  

improve  user  engagement  &  satisfaction  

First  release  is  just  the  beginning  Creating  masterpiece  is  the  end  goal  

Thanks  &  Questions?  @_wee_