Overview: Application Architecture

As we are going to grow our app in the next tutorials to add more real-time features (user roster, typing indicator, etc..), it’s a good place to think about architecting the app better.

There are simple ways to architect our app. For example, we can use one controller and put everything in it: the message collection, the code related to PubNub, the view helpers, etc. Also, all of the markups to render view in one big HTML file like this:

However, it’s not ideal. Below would be a better architecture for our app:

We introduce two things:

• A MessageService, which will be responsible for storing the messages and communicating directly with PubNub to retrieve them in real-time.
• A UI split in different directives so that we will be able to reuse the components we have built in the future. Plus, the directives will be able to communicate directly and independently with the MessageService.