Part 1: A Guide to Web Application Development

A guide to web application development could be summarised into three words: planning, framework, and architecture. But it shouldn’t be. In all fairness, it is much more complicated than that. Web applications have become highly specialised, advanced products that combine the best of mobile applications and web browsers to offer users quality solutions. Several businesses have chosen web applications over mobile applications (we highlight a few in this article), due to their capability of being used without needing to be installed and not requiring updates that interrupt usability. Web applications simply require sufficient planning and thought to result in seamless creations that users will not only adopt but recommend to others. This guide to web application development delves into what the development of web apps entails, the types thereof, and which frameworks to consider for your web application.

What is a web application?

Web applications are computer software programs that are accessed via a browser, which users can interact with. Web applications are typically made up of two parts, the server-side, that processes input data through HTML, AJAX, or API requests, and a client-side, that interprets the data and displays it for the user in the interface.

Web applications differ from other applications in that they combine mobile applications and websites. While a mobile application relies on mobile devices and a native environment, and a website only displays information via web pages that are not interactive, a web application offers the interactivity of mobile, and the same amount of (or more) information compared to a website.

Some examples of web applications include:

• Google Docs Editors
• Canva
• Netflix
• META
• Twitter
  

The benefits of web applications

It’s commonplace to find web applications more popular than websites in today’s digital world; often, companies opt to include some form of web app functionality in their sites, whether that be in the form of chatbots, ecommerce or completing forms online. It’s rare to come across a “pure” website, and that probably has to do with the benefits of choosing web application development over websites:

• Web applications are cross-platform compatible, which means they can be accessed and used across multiple devices or browsers without impacting the functionality of the app.
• Web application development occurs on the server-side, or “back-end”, and the client-side, or “front-end”. This makes the web app more manageable, as the development team can implement updates and make changes on the server-side without compromising usability.
• Web applications are more secure because the server-side and client-side operate independently of one another. Specific access is required to manage the data and back-end.
• Web applications are more cost-effective than websites and mobile applications as they require less support and maintenance. Updates can also be made instantaneously.
• Because web apps are more manageable and are cross-platform compatible, they are also more readily available to users who may have limited bandwidth.
  

The different types of web applications

Selecting the right web application fit for your product comes down to functionality. Each type of web application differs in terms of its structure, or “architecture”, and how it communicates with the server.

Type 01: Progressive Web Apps (PWAs)

Progressive web applications operate and display similarly to that of mobile applications. The difference between PWAs and mobile apps, however, is that the user simply visits their browser to view and interact with the progressive web app, rather than first having to download and install the application on their mobile device. Another advantage of a PWA is that it combines all the benefits of native mobile apps with web browser functionality, which combats the need to develop separate native apps for different operating systems (this is especially beneficial to ecommerce merchants). Further to this, progressive web apps incorporate a “service worker”. The “service worker” adds value to the user as it uses caching to allow for offline features. What this means for users is that they can quickly access stored information from their last interaction with the web app, even when they do not have internet access.

Type 02: Single Page Applications (SPAs)

As the name suggests, a single page application consists of one page that is browser-based and combines static information with elements of display that can change. Email apps are typically SPAs and display a navigation bar that is static (remains on your screen), even when you scroll through your inbox messages. The server-side communicates with the client-side of the SPA through its tiered architecture to render specific subsets of information, rather than entire web pages. So, when a user requests specific information from the web app, an API request is triggered and instructs the business layer to execute the request, also known as the “logic”. The information is exchanged through the data layer of the tiered architecture and a JSON file (the response from the server-side) is then submitted to the browser to display on the presentation layer. The great thing about this functionality is that the load time for users is drastically reduced, though initial load time may be a bit slow. SPAs are also considered cost effective web application solutions.

Type 03: Multi-Page Applications (MPAs)

Naturally, if SPAs exist then MPAs exist as well. Multi-page applications are web applications that consist of multiple web pages that are all linked to one another. This type of web application is considered more traditional as the app display needs to reload each time a new data request is made.  With multi-page applications a request is made by the user, which then needs to be transferred to the server-side and returned to the browser to action. Each page not only has its own functionality to load or reload information, but also requires its own design layer. Multi-page applications are a top consideration due to search engine optimisation. Indexing for search engines is made easy due to the multiple-page hierarchy and use of internal links. Further to SEO, MPAs are also beneficial to businesses who may wish to scale up in the future, as these products or services can easily be integrated as new web pages.

Type 04: Static Web Applications (SWAs)

Developed using jQuery, HTML, AJAX, and CSS, static web applications are web apps that are not interactive, though they do offer compatibility for animations and video content to enhance the user interface. Static web apps process requests by sending that request to the server which then identifies the correct HTML file and sends it back to the browser. The browser then processes the file and displays it to the user. Static web apps make use of JavaScript to transform the information request into a display output. Static web applications are particularly useful to launch to market quickly, as they incorporate “building-block” coding that every web developer is familiar with (HTML, JavaScript, and CSS). They are also scalable and flexible.

Type 05: Dynamic Web Applications (DWAs)

While static web applications are rather simple and straightforward in their construct, dynamic web applications are more complicated. DWAs can be single page websites or have multiple web pages, but what truly distinguishes them is their level of interactivity. A dynamic web apps’ functionality, appearance and content changes at every user request or input. Three components work together to provide this level of interactivity, namely: the backend component, the client-side component, and the front-end component. Users input a request on the frontend, which is then processed through the central admin panel to collect the data from the backend and share it to the browser which then actions the appropriate response to update the information, display or visuals of the DWA for the user. The benefit of a dynamic web application is that server access is not required and thus implementing features is quick and easy. Moreover, updates happen each time the user accesses the DWA. Dynamic web applications are also loved amongst developers because they are easily, and quickly, updated to keep up with the evolving demands of users.

Type 06: eCommerce Web Applications

At their core, eCommerce web applications are multi-page applications that have added features and functionalities incorporated into their design. Examples include online payments, shopping carts and delivery tracking metrics that are all considered dynamic. eCommerce web applications are truly beneficial to businesses looking to provide an uncompromised user experience because they offer personalisation to a degree that websites cannot.

Type 07: CMS Web Applications

Content Management System web applications are a mouthful, but this type of web application is simply a CMS that offers tools to better manage the web application itself. Examples of CMS web applications are WordPress and Webflow. These Content Management Systems offer the building blocks for the web application that can be managed by web developers, as well as those who do not have the technical capability to create, curate, modify and manage their own web apps. They must simply follow the template guidelines. The main benefit of CMS web applications is that more users can have access to the content and be able to make changes to or update that content, resulting in faster updates.

We’ve discussed the different types of web applications for you to consider, but now you need to understand the different frameworks available to you, to develop the web application that will meet your needs.

Web application development frameworks you should know

Web application development frameworks offer valuable tools and features that form the foundation of building out the right web application for your business. Frameworks also provide libraries and scripts of ready-to-implement coding for specific functions and features that streamline the development process.

Ruby on Rails (RoR)

Created by David Heinemeier Hansson in the early 2000’s, Ruby on Rails is a web application development framework that is founded on the Ruby programming language that combines HTML, CSS, and Javascript for improved interactivity. Commonly referred to as Rails, RoR is an open-sourced web application development framework for the server-side, with a Model-View-Controller architectural core. Airbnb, Dribbble and Shopify are examples of companies who have incorporated RoR into their web applications. Ruby on Rails is considered a quality web app development framework that can efficiently manage high levels of traffic, though some developers feel it has begun losing the popularity contest due to newer frameworks that offer improved functionality and expanded feature capabilities. Special mention needs to be made for RoR’s Do Not Repeat Yourself approach (or DRY approach) that minimises bugs as the code is never repetitive, always simplified and easily managed.

PHP

Sometimes referred to as a hypertext pre-processor, PHP is an HTML-embedded scripting language that creates dynamic web applications by melding Common Gateway Interface (CGI) with HTML. Due to PHP being based in HTML, this framework is compatible with MySQL, Oracle and more. Facebook, MailChimp and Wikipedia all make use of PHP web application frameworks. PHP offers developers a way to build dynamic web apps that are flexible, simple, and quick. Developers also love this framework as it has template scripts that are ready-to-use, can be supported across most major operating systems, and, like Ruby on Rails, has a Model-View-Controller architectural core.

Node.js

Node.js has quickly gained accolades as a preferred framework by developers since its first introduction in 2009 by Ryan Dahl. Node.js is an open-sourced JavaScript-based platform that offers server-side capabilities, which can also be supported on Chrome’s V8 Javascript engine. Express, Socket.io, and Meteor.js are all Node.js-founded frameworks that enhance the back-end of web applications. Node.js is unrestricted and allows developers to code their hearts’ desires. Other benefits of this framework include its scalability and improved performance thanks to the framework having non-blocking I/O compatibility. Developers also love Node.js because the back-end can be coded in JavaScript, one of the most commonly used coding languages. LinkedIn, Uber and PayPal are all examples of businesses who used Node.js to develop their web applications.

Angular

Angular was borne from Angular.js, which was a project undertaken by Miško Hevery during his time at Google. The framework was later open-sourced as developers at Google felt that, because it was based in typescript (out of JavaScript), it could be widely used and incorporated for front-end web application development. Angular is a fast-to-market framework as it offers a collection of tools and libraries that make building out the web app much faster and more efficient. The coding snippets are also cross-platform compatible for further efficiency. Examples of companies who used Angular are Gmail, Forbes and Upwork. We’ve mentioned Angular’s biggest benefit is how quick it is to develop, but that isn’t its only benefit. Angular also minimises coding error thanks to its foundation in typescript, allows for more integrations and is easily customisable.

React

React.js is an open-sourced framework based in JavaScript that offers developers the tools and building blocks needed to create feature-rich web apps without having to spend ample time coding new lines or changing existing code. These ready-to-use components simplify the development process without compromising on a quality user interface. Instagram, Netflix, and WhatsApp are examples of React.js web applications. These, and other companies, have opted for the React.js web application framework as it is supported by a large community of developers, offers code readability, and does not require the front-end of the web app to reload to update.

The stages of web application development

While you may have an idea of the type of web application that will suit your needs, and better understand the frameworks available to you, something we would be remiss not to mention is the process that should be followed when undertaking your development project. There are a set series of steps to be followed to ensure the best possible web application outcome:

Step 01: Define a problem

To create a web application that users will adopt and recommend to others, you first need to determine what problem you can solve for them. Thus, the first stage of the process of web application development involves in-depth research and data analysis to determine the problem the target audience is facing. It is then pertinent to formulate a solution to that problem, which will be outlined in step two of the process.

Step 02: Build a wireframe

The wireframe refers to the different aspects that need to be formulated, crafted, and then tested to result in the best possible web application outcome. Building a wireframe means creating the blueprint for the web app by taking into consideration resources, tools, frameworks, and iterations or testing phase, as well as determining the best development process.

Step 03: Determine the architecture

We’ve outlined our recommended frameworks for web application development, and this stage of the process is all about determining which of those frameworks will provide the best support for the problem you’re aiming to solve. Each architecture has multiple layers for consideration:

1. Presentation; acts as the bridge between the browser and user interface
2. Business; processes the browser requests
3. Data access; transfers data with the servers for the business layer
4. Data service; focusses on data security
   

Step 04: Design and develop the web app

Once the layers of the architecture have been outlined, it is time to shift focus to the user interface and highlight all the important touchpoints that users will mainly interact with on the web application. This process directly impacts the development stage and is thus very important. The other consideration to be made is regarding the navigations, as this too will impact the development decisions made. Once the architecture has been selected, the key features determined, and the user interface interactivity outlined, it is time to develop the web application.

Step 05: Test, iterate and deploy

The development process itself will involve coding, building, and integrating, until the web application has reached a usable state, by which time it should be tested. Many development teams choose to enact the agile approach to the development process which involves segregating the activities into sprints to streamline the process and maximise resources at each iteration stage. The goal is to develop a quality web application of the highest possible standard.

The important thing to remember is that the process does not end after step five of the development process. Once deployed, the web application needs to be continually monitored and maintained to stay up-to-date, relevant and keep its quality assurance promise.

The cost of web application development

There are several considerations that need to be made when determining the cost of web application development. Some of the factors that influence the cost include the complexity of the features you aim to have for your web app, as well as the level of experience you wish for your team of developers to have. Another consideration to make is where you wish to hire your developers from, as some countries offer more expensive development services than others. Determining the cost of web application development is so complex and unique to each client’s specific requirements and needs, that we’ve covered this topic in a whole separate blog. Read it here.

The future trend of web technology is clear: more users are heading online for solutions to their pain points, and more people are making use of smartphones and smart devices. While the adoption of web technologies is evident, it is simply not enough to have just any web application. With a growing market of web application products, it is pertinent to have a web application that offers high engagement and interactivity with a seamless design or else users may opt for a competitor’s product. The easiest way to avoid this is to partner with a design and development studio that has the experience and insight you need for a high-quality web application, so why not reach out to the Blott Studio team? Get in touch here.