Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross Platform Development: Bridging the Gap

Cross Platform Development: Bridging the Gap

Droidcon India presentation on a new approach to build Mobile apps with Native look and feel and reusable controller logic.

Priyank Gupta

November 02, 2012
Tweet

Other Decks in Programming

Transcript

  1. DROIDCON  2012  -­‐  India  
    Priyank  Gupta  
    Developer  at  ThoughtWorks  
    priyaaank  
    priyaaank  

    View Slide

  2. EvoluBon  
    2000   2005   2007  

    View Slide

  3. PlaEorms  that  maGers  

    View Slide

  4. Mobile  Strategy  
    Laser  Strategy    
    Cover  your  bases  

    View Slide

  5. NaBve  
    •  High  Fidelity  User  
    Experience  
    •  NaBve  Widgets  –  Date  
    Picker  
    •  Access  to  all  NaBve  
    components  –  Home  
    Screen  Widgets  
    •  Specialized  skill  set  
    •  Feature  Parity  
    •  Expensive  Development  and  
    Maintenance  
    •  Lack  of  robust  TDD  frameworks  

    View Slide

  6. Cross  PlaEorm  Toolkits  
    •  Code  Reusability  
    •  Cheaper  development  and  
    maintenance  
    •  TDD  
    •  Web  technologies  
    •  Sub-­‐opBmal  User  experience  
    Uncanny  Valley  hypothesis  
    •  Lack  of  naBve  widgets  and  OS  
    semanBcs  
    •  3rd  Party  dependency  to  access  
    new  features  

    View Slide

  7. Components  
    •  UI  
    •  Local  Data  store  
    •  Local  Services  
    •  Web  Service  
    •  ApplicaBon  Logic  
     

    View Slide

  8. Bridging  the  Gap  
    iOS  
    Android  
    Web  
    B
    R
    I
    D
    G
    E
    Controller    
    Logic  
    App  
    Server  
    hGp  
    ObjecBve  C  
    Java  
    HTML/JS  
    NaBve  +  Javascript  
    Javascript  
    Server  Side  Tech.  

    View Slide

  9. Example  Flow  
    Page  
    Object  
    Bridge  
    Bridge  
    Bridge  
    ConvenBon  
    Based  lookup  
    for  controller  
    Controller  
    JS  Evaluater  
    Call  to  fetch  results  
    Fetch  Results  
    Controller  
    JS  Evaluater  
    Response  
    Page  render  
    with  data  
    Page  
    Object  
    Invoke  Render  
    with  Data  
    View  
    Refreshed  
    AcBon  
    Triggered  
    Trigger  
    Event  

    View Slide

  10. Why  Awesome?  
    •  Flexibility  to  choose  
    •  NaBve  widgets  +  HTML5  
    •  NaBve  components/services  
    •  Jasmine  +  Cucumber  =  Code  Coverage  
    •  Code  Reusability  
    •  Web  technologies  for  most  part  
    •  Get  a  mobile  web-­‐app  as  a  side  effect  

    View Slide

  11. Is  it  a  Cross  PlaEorm  Toolkit?  
    •  It  doesn’t  promise  write  once,  run  anywhere  
    •  It’s  a  framework  with  underpinnings  to  structure  code  
    •  It’s  a  established  way  to  communicate  between  NaBve  and  
    Web  
    •  It  can  be  used  to  extend  exisBng  NaBve  apps  to  Hybrid  ones  

    View Slide

  12. Applicability  
    •  Cover  your  Bases  
     
    •  Fat  ApplicaBon  Logic  
    •  Laser  Strategy  
     
    •  Dumb  API-­‐interface  apps  

    View Slide

  13. Crossing  the  Bridge  
    •  Calatrava  
    •  Open  Source  
    •  From  ThoughtWorks  
    •  Provides  basic  underpinnings  
    •  Available  at:  hGp://calatrava.github.com/  
    Credits:  Giles  Alexander  
     

    View Slide

  14. QuesBons!  
    priyaaank  
    priyaaank  

    View Slide