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

First un-learn and then more to learn: Our experience building a complex web app entirely in AngularJS

Adhil Azeez NV
September 21, 2013

First un-learn and then more to learn: Our experience building a complex web app entirely in AngularJS

We will take you through our journey of building the mobile version of EngagementHQ, an online product that is helping hundreds of government entities effectively engage and interact with the local communities in different parts of the world.

Adhil Azeez NV

September 21, 2013
Tweet

Other Decks in Technology

Transcript

  1. First un-learn and then more to learn:
    Building a complex web app entirely in AngularJS

    View full-size slide

  2. A platform for community engagement!
    !
    Over 200 clients, Primarily Government sector
    EngagementHQ

    View full-size slide

  3. Share  
    A platform for community engagement!
    !
    Over 200 clients, Primarily Government sector
    EngagementHQ

    View full-size slide

  4. Share   Listen  
    EngagementHQ
    A platform for community engagement!
    !
    Over 200 clients, Primarily Government sector

    View full-size slide

  5. Share   Listen   Learn  
    EngagementHQ
    A platform for community engagement!
    !
    Over 200 clients, Primarily Government sector

    View full-size slide

  6. EngagementHQ

    View full-size slide

  7. EHQ Mobile – The Need
    0"
    5"
    10"
    15"
    20"
    25"
    Jun,"
    2012"
    Jul,"
    2012"
    Aug,"
    2012"
    Sept,"
    2012"
    Oct,"
    2012"
    Nov,"
    2012"
    Dec,"
    2012"
    Jan,"
    2013"
    Feb,"
    2013"
    Mar,"
    2013"
    Apr,"
    2013"
    May,"
    2013"
    Jun,"
    2013"
    %"of"Mobile"Visits"
    %"of"Mobile"Visits"

    View full-size slide

  8. EHQ Mobile – Agility in our Journey
    Day  1:  Idea*on   Day  26:  Demo   Day  86:  Final  Launch  

    View full-size slide

  9. Multi Level Navigation
    Consultation Hub!
    Consultation!
    Tools! Widgets!
    Consultation!
    Tools! Widgets!

    View full-size slide

  10. Multi Level Navigation
    Consultation Hub!
    Consultation!
    Tools! Widgets!
    Consultation!
    Tools! Widgets!
    Tools! Widgets!

    View full-size slide

  11. Consultation Hub
    with Tools and Widgets
    Consultation
    with Tools and Widgets
    Nested views!
    Conditionally change behavior of templates in views
    Attach custom data to state objects!
    Multi Level Navigation

    View full-size slide

  12. $route in Angular core is only URL router L
    AngularUI-Router to Rescue!
    •  Organized around states, which may have routes, as well as other behavior attached
    Multi Level Navigation

    View full-size slide

  13. We had some patterns : Tools have comments
    Could we reuse the comments’ Controller and Views and still be able to have
    custom variables and ensure their states?

    View full-size slide

  14. We had some patterns : Tools have comments
    Dynamically Generate State Objects
    But where does your state generator function go?

    View full-size slide

  15. “Angular is a HTML Compiler – Teaches old HTML new tricks”
    The Power of Directives and Events

    View full-size slide

  16. Various Projects have different access control

    View full-size slide

  17. Various Projects have different access control
    Open Projects

    View full-size slide

  18. Various Projects have different access control
    Open Projects
    Protected Projects

    View full-size slide

  19. Various Projects have different access control
    Open Projects
    Protected Projects
    Paneled Projects

    View full-size slide

  20. Application code gets the data from the server
    process the response !
    !
    take action based on the response status code.

    View full-size slide

  21. Before the!
    Application code gets the data from the server
    process the response !
    !
    take action based on the response status code.
    Pre-!

    View full-size slide

  22. Before the!
    Pre-!
    Application code gets the data from the server
    process the response !
    !
    take action based on the response status code.
    For any kind of synchronous or asynchronous preprocessing of received
    responses, interceptors are used.

    View full-size slide

  23. Refresh
    State Based Routes (UI Router), Reuse Views and Controllers,
    Directives, Events, Response Interceptors, Promise Objects

    View full-size slide

  24. Filters
    And much more that saved the day!

    View full-size slide

  25. $watch
    And much more that saved the day!

    View full-size slide

  26. $eval
    And much more that saved the day!

    View full-size slide

  27. $eval
    Do find us off-stage and we are happy to talk about these…
    And much more that saved the day!

    View full-size slide

  28. We are grateful to these guys
    AngularJS
    Hammer.js
    Angular UI
    Project
    jQuery
    iScroll
    Keboola
    Angular
    Library
    Yeoman
    Bower
    jQuery
    Nestable

    View full-size slide

  29. Adhil Azeez NV
    Front End Developer
    Twitter: adhilnv
    Email: [email protected]
    Praneet Koppula
    UX & Product Management
    Twitter: mphaxise
    Email: [email protected]
    Introducing Ourselves

    View full-size slide