Developing Maintainable Websites with Single Page Applications
Hello full stack developers. Web front-end today needs a RAD(Rapid Application Development) style of developing. As part of my work, I developed websites which implements loading web pages from the server on demand(in simple words). Then I started looking at SPA and felt it is quite amazing. I wan’t to share that experience with you.
You need to understand why Single Page Applications(SPA) are the hot topic today. Instead of building the UI in a traditional way (request webpages), these SPA design makes developers to write code in a totally different way. There are many MVC frameworks like AngularJS, Angular2, React JS, Knockout JS, Aurelia etc to develop Web UI rapidly, but the essence of each of them is pretty simple. All MVC frameworks helps us to implement one design pattern. That design pattern is “No requesting of web pages, only REST API”.
Defining the website UI structure with a Model
Use a Model to keep track of the UI state and never let the UI out of sync with your Models
What does the above line mean actually?. The modern web front-end development is advanced a lot from 2010. In order to exploit the features of MVC(Model-View-Controller) architecture, we need to consider the front-end as a separate entity which talks to the back-end only using the API(Most preferably REST JSON) . Whether you use two way bidning or one way binding of data just do save data as per layout.
All websites goes through following flow of steps.
- Request a web page from Server
- Authenticate and show the Dashboard UI
- Allow the user to Modify & Save
- Request as many as web pages from the server to show individual pages on the site
But in the SPA, the flow is quite different.
- Request the HTML template/s to the browser in a one single go.
- Then query the JSON REST API to fill a model(data object).
- Adjust the UI according to the data in the model(JSON).
- When users modify the UI, the model(data object) should change automatically. For example, in AngularJS it is possible with the two way data binding. Finally make REST API calls to notify server about changes whenever you want.
Keeping the entire UI in form of a model(JSON object) is a really good design, because we can clearly know the hierarchy of website by looking at that JSON object instead of navigating through the web pages.
How SPA is maintainable ?
In Single Page Applications, we initially use mock data (dummy JSON) for developing the UI. We don’t write any Ajax code initially. In a typical(old) UI development style, one makes Ajax calls with custom data according to the user interactions.
But in case of SPA, one makes Ajax calls with the subset of model(JSON) state. It means at any point of time, just pluck some data from universal JSON object and make an Ajax API request. On recieving any feedback from the server, add that content to that model(JSON) object. Holy grail, your UI state will be updated accordingly.
Since there is a single source of information, it curbs the repetition of fetching data from the DOM. It also facilitates us to remove the necessity to write hundreds of lines of code for DOM manipulation(for example using Jquery). Less code. Less time to fix bugs.
AngularJS way of defining a UI as a model
I am going to show a sample design and how we can translate that UI structure into a data model. Here I am using Angular JS, but any MVC framework does the same thing.
For example let us assume we have this UI with lot of tables in it.
Now in AngularJS, I define state for this as follows.
In the controller we are placing some mock data. Usually to display a mockup we hardcode data into HTML directly. But here we store data in a model. We can also get the data from an API at the beginning of the page load. The good practice in Angular JS is to use a service rather than controller to supply this universal data. We can use that data service in multiple controllers.
Always place your data in a service. Then bind that data to the HTML elements using ng-bind. Do not use Jquery to create tables dynamically or add any form elements to the DOM. Use a list instead and use ng-repeat to create the repetition. When you remove something from DOM just remove the element from the list. Everything then will be controlled by state of the data. Not by the custom logic. JQuery code is verbose and horrible to decode. I replaced nearly 65% of my JQuery code with 20% of Angular code in my recent project. It helps others to adjust with my code easily later. Using an MVC framework, we can write clean code for the UI functionality. Single Page Applications takes the advantage of MVC frameworks. In the above example we don’t have the way to input details, but we can have a form with details (Page, Visits, % New Visits, Revenue) for adding data to the table. addBorderedTableRow is the function that to be binded using ng-click on the save button of form.
Whenever we need to send the user preference back to server, just pluck the data needed from model state and make an Ajax request.
UI is about user interactions and talking between client and server. So do that talk gracefully by sending the exact state of UI in the data and let server chose what to do.
Summary
This is just a 1000 feet picture from the top. By using MVC frameworks like AngularJS or React JS you can achieve the boost in the productivity. Here UI talks to the server only using REST API. No loading of templates on each click of user. All the code for the UI is just delivered once to the browser and Single Page Application will take care of what to do with user interaction. It may wait until the set of details supplied or just talk back to the server and get response. If you have any query just comment or tweet to me.
Thanks :)
