Creating Awesome SPAs With React

I remember when I started building webapps, I used to rely heavily on the backend framework for most of my templating needs. It felt very tempting(at first) to simply stuff up my pages with Jinja or blade scripts to create a functional user interface. Because back then my understanding of MVC was very limited, this cost me maintainable code. I came across a very interesting book that discusses the best practices of creating a Single Page Apps , you can find it . The view layer which I thought of as a mere by-product of my core logic needed much more, its own MVC! The rules are pretty much the same. But it has to be kept in mind that complexity of the model, view, and controller depends on the requirements. For interfaces like GitHub actions per page is comparatively lower than that of Gmail or Canva, managing calls to server is different for apps with low interactivity than those with rich UIs. so it is important to be familiar with the design beforehand, this philosophy favours development in , because react encourages you to think of your DOM elements as separate components. here react Without further ado let’s discuss how the files are arranged in our app. Constituents Let’s discuss the different aspects of the SPA and break them down. Lets see what they are first, we’ll wire them up in the next section. Data Layer Models in a SPA, like other apps handles the data layer of the project, it is responsible for making API calls that fetch data and uses the response to populate the models, since react don’t have any official way of defining models, I chose to use for this. It also spared me the trouble of defining my own . JSON backboneJS datasource There are two classes in backboneJS to manage data efficiently, Model and Collection class. The model Models are the absolute representation of data in BackboneJS. Following is a snippet of a basic Model. import Backbone from 'backbone'; const Property = Backbone.Model.extend({ urlRoot : Constants.api\_url+'/api/property' }); export default Property; This is the code inside file which is a Backbone , we can tweak its properties to set up validators, set defaults etc. But most importantly we’ll use it to fetch data from our API. Our model will fetch data with a jqXHR request, all we have to do is specify a valid URL to our API. Property.js model Collections Collections are used to manage sets of models. A model simply represents a single entity of that data type what if your API returns a list of properties? import Backbone from 'backbone'; import Property from '../models/Property'; var PropertyCollection = Backbone.Collection.extend({ model: Property,

initialize: function(models, options) {

this.data = options.data;

},

url: function(){

return Constants.api\_url;

},

parse: function(data) {

return data;

} }); export default PropertyCollection; The code above resides in PropertyCollection.js as you can see we initialized the ‘model’ property with model we declared earlier. If your REST API follows proper conventions it automatically CURD requests, you can simply use .create() .fetch() and .destroy() methods. Property configures View + Controller For those of you wondering why I mashed up these two together, I have a question. What is the ultimate purpose of a SPA? To deliver the UI! It is just a more complex view layer after all. Having separate controllers would make sense if you are doing some heavy client side calculations. But for most of the apps the only concern is to deliver a seamless interface, and to solve this purpose the views do the heavy lifting! Read out fo’ your conscious. this In the case of react however eliminating controllers makes even more sense because, because each component has its own rendering and lifecycle methods. Which pretty much covers all the calculations you need. Before you start writing your views you have to analyse the design of your end-user app. Take a nice look at the designs of the pages youre gonna serve and observe the hierarchy carefully. Look at this example for instance. Wireframe for a hypothetical APP Suppose that this is a page for an APP you’re trying to build. At the top level you have , which encapsulates everything you want to display. This will be your first react component. Then create the child components one by one in separate file. Body import React from 'react'; import Header from '../widgets/Header'; import Title from '../widgets/Title'; import Footer from '../widgets/Footer'; import PropertyDetail from '../widgets/PropertyDetail' const SinglePage = ({match}) => { return(

) } export default SinglePage; This is a top level component like , of our wireframe from an app I made , , and are all children of top level wrappers. Even has children of its own an so on. Body Header Title PropertyDetail Footer PropertyDetail All the top level components later serve as independent pages of the app Now lets talk about the wireframe for a bit. Although we know that can be the page of our app, but the same cannot be said for or they will instead be the widgets of our app, in most caes the widgets will be making use of the models we discussed earlier. Body Featured Content Posts , Routes Now for routing we’ll use the react router which most of you must have heard of. But before that let’s discuss about the URLs a bit. A URL in a SPA is a denotation of a particular state of the app, i.e. together with the route and parameters the APP can be loaded in a desired state. In a interactive SPA it is very normal to have multiple states per page, you would want accessibility to as many states of your apps through URLs but this would mean messy URL schemes, so its best to balance out both. To make clean URLs I decided to keep them in a separate file(and not use 😄) to get a familiar MVC feel. Routes defined using React Router are JSX tags only and components are passed to them as props. dynamic URLs Here and are my top level react components. Also note that you have to wrap multiple URLs with tags. ListPage SinglePage Wiring Up Okay we know what constitutes an awesome SPA, its time to put the pieces together. Firstly generate a project using found in the Facebook incubator repository, it is very helpful in setting up the initial project and all the modern web development tools are managed for you, so you can focus on writing the app rather than configuring webpack(which by the way deserves a separate article to explain). Since you’d be writing modular code, it’d be much easier to write tests, create-react-app uses for running tests. create-react-app Jest After generating the app your folder structure will look like this. my-app/├── package.json├── package-lock.json├── public│ ├── favicon.ico│ ├── index.html│ └── manifest.json├── README.md└── src├── App.css├── App.js├── App.test.js├── index.css├── index.js├── logo.svg└── registerServiceWorker.js Try running , if everything’s fine your app should be accessible on 3000 port. Also remember to put all the code in directory, anything beyond that folder is not accessible, its a restriction imposed by create-react-app generator. npm start src Rearranging stuff Lets face it, none of those dreams of creating an SPA would ever come true with the current state of working directory. Apart from and we will move everything to a new directory. before touching anything create this directory structure. Let the scripts stay where they are. index.js registerServiceWorker.js my-app/├── package.json├── package-lock.json├── public│ ├── favicon.ico│ ├── index.html│ ├── js│ └── manifest.json├── README.md└── src├── assets #All the media/styles/fonts/helper_functions:p│ ├── objects│ └── styles├── components #controller+view Layer│ ├── pages #top-level pages│ └── widgets #children├── data #Data Layer│ ├── collections #Backbone.Collection│ └── models #Backbone.Model├── routes #React router routes├── App.css #unruly mess├── App.js├── App.test.js├── index.css├── index.js├── logo.svg└── registerServiceWorker.js #end unruly mess AppFlowChart.sucks First things first create these (not necessarily in this order) Create a simple react component in call it /src/components/pages Home.js Create in and create a route pointing to the Home object . This will render contents of when you access domain root. Urls.js /src/Urls Home.js Change the render line in to index.js ReactDOM.render( , document.getElementById(‘root’)); While doing this make sure each JavaScript file exports only one thing and ensure correct usage of import statement. Another thing to note here is the top level react pages cannot be react class because React Router passes parameters in urls which are passed as parameters not props! While it is encouraged to make your widgets as classes that extend React.component. You can now use your models to pass data to your widgets or initialise their . state Finally when you are ready to deploy the app, run , this will bundle all your assets, set react to production mode and save the packed project to build directory of the project. You are now ready to deploy your app! npm run build As a parting note I’d like to say I enjoyed sharing my take on SPAs and it also helped me organise my own thoughts on the topic. If you enjoyed this article, feel free to hit that clap button below 👏 to help others find it!