My focus in building the app without any MVC framework was to understand the ideal logic flow of the code, under the hypothesis that such an understanding would improve my ability to use an MVC framework like Angular more effectively. This meant trying to optimize the modularity of my code as well as strictly following the design patterns recommended by my teacher.
As previous blogs have mentioned, MVC stands for Model View Controller, and it’s a popular design pattern for websites. The Model holds data, the View translates the data into a palatable GUI, and the Controller allows the user to interact with that GUI.
We will be using a very similar structure for this project, adding in one addition for maximum modularity; the adapter. The adapter make the asynchronous API call and passes the data to the model. The model is updated with the data, which then updates the Controller, which then updates the View.
This is the adapter itself — it takes in a user’s battletag, calls the Overwatch API with that tag, and returns the results, which are separated into average and game (aggregate) data. I used jQuery’s Ajax function to do the asynchronous call, and then its methods success and error to handle the potential results. On the success case, that data is then moved into a new model, which is in turn added to the store. The model is given aggregate and average data for the user, or character data, depending on which request was made.
The controller takes in button clicks from the user and runs them through a series of functions to determine what the user is inputting, request the relevant data, and respond on-screen with the appropriate information.
Let’s take a quick look at the front end in order to see where those inputs are coming from and what options the user has.
The router gets all its info directly from here. The two user input fields supply the battletags that are used in the AJAX calls, the three options determine which adapter function is used. Average and Overall stats go to the userAdapter file, whose API call returns both aggregate and average data, while the Character stats goes to the heroStats adapter.
Once the AJAX call is finished, we’ve created instances of the User model to hold the data and stored them in the store. That gives us access to the information in the Controller, and we can step into a couple of functions that parse that data into appropriately structured HTML. Append that HTML to our containers, and we’re ready to go!