Single Page Application: Things a Web Developer Must Consider When Building an App

Sarah Clark | September 5, 2015 | Web Development | No Comments

The rapid rate of technological advancement has made Single Page Application the de facto web development standard now. What makes it all the more appealing and interesting is the fact, that a major portion of the app can run on a single web page. If spoken from a technical point of view, a large number of web pages now have single page application. What differentiates a web app from that of the web page is the complexity of the page. A page can turn into an app when you are able to incorporate multiple functions and workflows, state management and other CRUD operations on the same page.

Building a single page application can be intimidating, given the vast area covered by web development. But, consensus in technologies and tools has made application development productive and enjoyable. A large number of apps consist of pieces that are client side and server side. The client side comes with a combination of different technologies, practices and libraries that make application development productive. However, single page application development comes with several things that need to be considered when you are building an app.

Let’s begin with picking an application development framework first. There are many popular frameworks available and some of them are as follows:

BackboneJS
CanJS
SpineJS
BatmanJS
EmberJS
AngularJS
MeteorJS

Choosing the right framework is very important when you are building an app. All the above mentioned frameworks might differ from each other provided the level of implementation and the level of sophistication. However, what’s common is the abstractions that each of these apps provide:

Model – A JSON data structure with a wrapper around along with property change notification and getter/setter support.

Collection – Containing a collection of models. Everytime some changes are made in the collection, new notifications are provided.

Events – Providing a standard pattern for the publication and subscription of notifications.

View – DOM fragment with a backing object and a support for listening to events relative to it. The view has accessibility to Model instance that are corresponding. There are frameworks having a Controller, which allows the changes to orchestrate between the View and the Model.

Routing – This enables navigation within the app using URLs and relies on the history of the browser API.

Syncing – Persistent changes in the model with Ajax calls.

Use of advanced frameworks such as BatmanJS, CanJS, Angular JS and Ember JS helps in the expansion of basic features that can provide support to client side templates and automatic data binding. These data bound templates help to sync the view along with some changes that are made to the model. Picking up an advanced framework provides many ‘out-of-the-box’ features that allow web developers to build a certain kind of app.

Speaking of the different frameworks, Meteor can provide client-side as well as server-side development tools. These are provided using Node JS, while end-to-end model synchronization can be provided using MongoDB. Saving a client model can automatically help to persist in MongoDB. Running a Node backend and using a MongoDB together can be a fantastic option.

The complexity of your app should determine which framework you should pick up for a productive output. Save some time to evaluate the productivity of these frameworks based on the representative use-case.

#1 – The Client Side Templates

Some of the popular JS based client side templates are Handlebars and Underscore. While the previously mentioned advanced frameworks have a built-in templating system, using a lean framework like Backbone means you would have to consider having a templating engine. For those having limited template requirement, using Underscore provides an excellent starting point. In case of advanced projects, Handlebars can work best and it also offers many expressive templates with built-in features.

Working on client side templates may require pre-compilation of templates on the server. This provides plain JS functions that can make some improvement in the page load time. Handlebars can support pre-compilation, thus saving you time and effort to make full exploration.

#2 – Modular Development

A JavaScript code is added traditionally to a page using the element <script/>. Typically, you have to first list the libraries and dependencies before you can make a list of the codes that are used to make a reference of the dependencies. This kind of style can work well when you have to include only a few number of files. However, addition of additional scripts can make maintenance a nightmare.

You can treat each of these scripts as a Module and identify it using a relative file path or a name. You can build a module based system app, by using semantics along with library support like Browserify and RequireJS.

Identification of the app functionality can be done using the module. You can use certain folder structure to organize the modules and group them with the help of a particular functionality or feature. The modules help to manage your application scripts and eliminate the global dependencies that are included along with the <script/> elements, before the application scripts. Libraries that do not have compatible AMD (Asynchronous Module Definition), it is RequireJS that can expose the non-AMD scripts as modules by offering a shim feature.

The module based systems are currently of two kinds – (1) AMD and (2) CommonJS

In an Asynchronous Module Definition, the modules contain a single top-level statement called

define( ). This can list all the required dependencies and expose the functionality of a module, using the expost function. The names of CommonJS module are given based on a built-in module lookup process or a relative file path. No module comes with a define( ) functionality and the dependencies can be stated explicitly using require( ) calls. A module can use the module.exports object to expose its functionality. This can be created automatically by each module. It is more prevalent to use a CommonJS module style in a NodeJS application. Here, skipping the call to a define( ) call makes more sense, for you will be working using a file-system based lookup module.

#3 – Package Management

Most apps, be it some third party piece of code or a library, come with a single dependency. Management of these dependencies becomes necessary as the number increases. This will help you to cover yourself from any kind of breaking changes that the new version might introduce. The package management can identify the dependencies that are present in your app, along with their given specific versions and names. This enables one to have control over the dependencies and ensures the usage of identical library versions. The packages that are needed for your app, are listed usually in a single file. This file contains the library name and version.

Some of the most common package managers that are available for different tech shacks include –

Linux: Aptitude
PERL: CPAN
.NET: Nuget
PHP: Composer
Ruby: Gems
Java: Maven and Gradle
Node: NPM

Despite the fact that the package management comes with the ability that is server side, nevertheless, its popularity is derived from client side development. The browser package manager introduced by Twitter is similar to the Node: NPM. The client-side dependencies that are listed by Bower is component.json. After they are downloaded, a bower CSI tool is used to run them. For example: You need to run the ‘bower install jquery’ for installing jQuery from Terminal. The development becomes predictable with the ability to control the dependencies of a project. This also helps to provide the app with a clear library list.

#4 – Unit and Integration Testing

In app development, unit testing is the most critical part. This helps to ensure that the features continue working even when you introduce libraries, refactor code and make changes to the app. It would otherwise have been proven to be difficult in case of any minor change in code. Unit testing becomes a powerful tool in making architectural changes, when it is combined with end-to-end integration testing.

Some of the most popular client-side frameworks are Mocha, Jasmine and QUnit. Mocha and Jasmine can support the BDD or the Behavior Driven Development style. Here, the tests are read as English statements. QUnit provides a more traditional framework for unit testing and offers an API that is assertion style. These frameworks can run a test on a single browser.

#5 – The UI Consideration

A good CSS knowledge is very essential in order to work with innovative HTML designs.

The User Interface is an essential part of an app design that differentiates an application based on its look and feel. Some of the points that are worth mentioning are –

Form Handling – This is the process of using different validations on the form submit, input controls (like date picker, email, numeric inputs, color picker, autocomplete), error highlight in form inputs, and propagation of error that are server-side on the client.

Formatting – Application of custom formats to values and numbers.

Error Handling – Propagation of client as well as server errors. Crafting of texts for different error nuances, maintenance of an error dictionary and filling of runtime values in placeholders.

Notifications and Alerts – Tell user about important activities and events and to show server based system messages.

Custom Controls – Capturing of unique interaction patterns present in the app and reusing them as controls. Identification of control inputs and outputs without combining it with any specific part of the app.

Grid System – Building up of layouts using grid system such as CSS grid, 90gs, etc. The grid system can help create responsive layout for different kind of form factors.

UI Library Pattern – Get comfortable with the UI patterns that are common.

Layered Graphics – Understanding the intricacies of box models, CSS, positioning, floats, etc.

Internationalization – Adapting sites to different locales. Detection of locales to gather information about clients, through round-trip or using Accept-Language HTTP header.

#6 – CSS Preprocessors

CSS is deceptively a simple language containing simple constructs. It is unwieldy to manage, especially if the different properties and selectors provide the same value. Using a set of colors throughout the CSS file is common. However this introduces repetition, which can increase the possibility of human errors.

CSS preprocessors help in organizing, refactoring and sharing of common code. Features like functions, variables, partials and mixing make maintenance of CSS easy. An extra step in the build up step is required when a preprocessor is used. The final CSS will have to be generated. You can find other tools that can help in the auto-compilation of files and find libraries that can simplify the development of stylesheets. Stylus and SASS are the two preprocessors that are popular for offering corresponding helper libraries. These libraries make the build up of grid-based systems easy and can create responsive page layout that are adaptable to form factors like phones and tablets.

Although the CSS preprocessors make building of CSS along with shared rules easier, you are still responsible for structuring the rules and segmenting them into the respective files. Principles like OOCSS and SMACSS are known for serving as a guide during the process.

#7 – Version Control

In version control system, using Git makes merging and branching hassle free. There are alternatives as well, such as Mercurial (hg) and Subversion. However, if your task is not that big then using Git is the most preferred option.

#8 – Browser

In app development, unit testing is important. There are many browsers available that help in supporting. Libraries such as jQuery and Zepto help to abstract the DOM manipulation API. However, CSS and JavaScript contain other differences, which might take a little bit of extra effort on your side to identify.

Here are some guidelines to help you differentiate –

You can test a website on multiple browsers and operating systems, with the help of tools like BrowserStack and Sauce Labs.

Detection of browser to check whether it can support any given feature by using polyfills and shims like Modernizr and es5shim.

Using CSS resets like Blueprint and Normalize give browsers a clean slate look.

Using vendor prefixes on the CSS properties that can support the different types of rendering engines.

Using browser compatibility charts like canluse and findmebyIP.

#9 – Libraries

Some of the libraries that you might think considering are as follows –

Visualizations: Highcharts, Spark Lines, xCharts, D3
Formatting: accountingjs, numeraljs, moment
Controls: Bootstrap, jQuery UI, select 2
Helpers: Sugar, Underscore, Modernizr, es5shim, Html5 Boilerplate

#10 – Minification

Combine your scripts into a single file before deploying an application. This can also be followed for CSS. This process is generally referred to as minification and it can help you reduce the script size and the number of HTTP requests.

You can minify the JavaScript and CSS using UglifyJS, RequireJS optimizer, Jammit. It can help to further optimize by combining icons and images into a single sprite sheet.

#11 – Performance

CSS preprocessors make building of CSS along with shared rules easier.

When building your app, make sure you profile it first whenever you face with an issue related to its performance. A Webkit inspector can offer a built-in profiler, which provides a comprehensive report for memory, CPU and rendering of bottlenecks. The profiler helps to isolate an issue that can be immediately fixed and optimized.

Some of the common improvements related to performance are as follows:

Simplification of CSS selectors that can minimize layout costs and recalculation
Minimize the DOM manipulations and remove other unnecessary elements
Prevent data bindings, whenever the number of DOM elements run into hundreds
Cleaning up of event handlers in the view instances, which are no longer of use
Generation of server side HTML. You can easily create the backing view along with existing DOM element, once on the client side
Having servers of specific regions in order to ensure a fast turn around
Using CDNs for serving static assets and libraries
Analysis of web page using tools like YSlow and taking actions as outlined in the report

#12 – Auditing and Good Analytics

Google Analytics provides the best solution for tracking down the app’s usage and gathering of audit trails. Integration of simple Google Analytics script on each page will help to gather tracking codes of your app’s metrics.

Conclusion

Web development is a world where changes happen rapidly. The past few years, we have witnessed an evolution in the tools, libraries and practices. The development and production of an app come with the usage of a number of modern technologies. It is therefore necessary to keep yourself up-to-date with the recent and new changes that happen in application development. The best way to keep yourself in the know is by subscribing yourself to newsletters and blogs for regular updates and news.

Author
Recent Posts

Follow me

Sarah Clark

Sarah Clark, working in B3NET Inc. & Mobixed as Content Developer. B3NET is leading web design & web development company from Orange County, California, Search Optimal is the Internet Marketing division of it. Sarah is working in web, mobile & Internet marketing domain with her 8 years of experience.

Follow me