In general, the structure of an app's architecture should be fairly simple:

1. Router

The router is going to direct your users to the initial page of your app, and then is going to navigate to the other pages of your app.

                              +----------------------+
                              |                      |
                              |                      |
                              |        Router        |  <-  http://mysite.com/dashboard
                              |                      |
                              |                      |
                              +-----------+-------+--+
                                 |+       |       |
                     +============|       |       +------------+
                    +============++       |                    |
                    +|                    |                    |
                    ||                    |                    |
    ++==============vv==++       +--------v--------+       +---v------------+
    ||                  ||       |                 |       |                |
    ||      (Page)      ||       |     (Page)      |       |     (Page)     |
    ||                  ||       |                 |       |                |
    || Heroes Dashboard ||       |   Heroes List   |       |  Hero Details  |
    ||                  ||       |                 |       |                |
    ||                  ||       |                 |       |                |
    ||                  ||       |                 |       |                |
    ++==================++       +-----------------+       +----------------+

2. Pages/Components

  • Make up the visual portion of your app. A page displays information to your users, and is composed of html and usually one or more child view components.

  • A view component is simply a piece of html+js, representing a piece of real estate on your page (for example, a data list, an information box, etc.)

  • A page facilitates all data retrieval, and then distributes the data to the components.

    •                                      1. Data Requested from Service
                                         |
             ++==================++      v
             ||                  ||               +-----------------+
             ||      (Page)      ++--------------->                 |
             ||                  ||               |    (Service)    |
             || Heroes Dashboard ||               |                 |
             ||                  <<- - - - - - - -+  Heroes Service |
             ||                  ||               |                 |
             ||                  ||          ^    +-----------------+
             ++=========+========++          |
                        |                 2. Data Returned
                        |
              +---------+--------+
              |                  |   <- 3. Data Fed to Components
              |                  |
    +---------v------+     +-----v---------+
    |                |     |               |
    |  (Component)   |     |  (Component)  |
    |                |     |               |
    |   Navigation   |     |  Heroes List  |
    |      Tabs      |     |               |
    |                |     |               |
    +----------------+     +---------------+

    3. Services

    Services are to allow your pages to access data (from network requests, local storage, etc.), and returns Models and Collections which are passed to your view components. 

                                       2. HTTP Request to Server
                                                        |
                                                        |      +------------+
                                 +-----------------+    v      |            |
                                 |                 |           |            |
                                 |    (Service)    +----------->            |
                                 |                 |           |   Server   |
                                 |  Heroes Service <- - - - - -+            |
                                 |                 |           |            |
                                 +----^-----+------+     ^     |            |
                                      |     |            |     +------------+
                                      |                  |
                                      |     |    3. HTTP Response Received
                                      |
    1. Data Requested from Service -> |     |
                                      |
                                      |     | <- 4. Data Models Returned
                                      |        
                                      |     |
                              ++======+=====v=======++
                              ||                    ||
                              ||       (Page)       ||
                              ||                    ||
                              ||  Heroes Dashboard  ||
                              ||                    ||
                              ||                    ||
                              ||                    ||
                              ++====================++

    Next Article: Services