Everything you need to know about web application development

Overview

• What exactly is a web application?
• What are the various types of web applications?
  • Static web applications
  • Dynamic web applications
  • Hybrid web applications
  • Progressive web applications
• Some examples of web applications
  • On-line commerce platforms
  • Customer relationship management solutions (CRM)
  • Enterprise Resource Planning software (ERP)
  • Content Management Systems (CMS)
• Web application development process
  • 1. Planning
  • 2. Requirements
  • 3. Design and prototyping
  • 4. Software Development
  • 5. Testing and quality assurance
  • 6. Release
  • 7. Maintenance
• Technologies used to build web applications
  • Client-side code
  • Server-side code
• Web frameworks
  • How to choose your framework
  • Front-end frameworks
  • Back-end frameworks
• How much does it cost to develop a web application?
• The keys to success
  • Clear goals
  • Investing in user interface
  • Security
  • Robust infrastructure
  • Scaling up
  • Resilience
  • The right technological partner

What exactly is a web application?

Web applications are most often client-server-type applications whose user interface and interaction rely on web technology, making them accessible through a standard web browser (Google Chrome, Firefox, Microsoft Edge, Opera, Vivaldi, etc.) Some of the better-known web applications are the Google Workspace and Microsoft 365 application suites. 

Web applications are different from traditional websites in that they are more interactive and allow users to manipulate data and accomplish tasks that can be very complex. In terms of functionality, they are often similar to traditional applications, while often differing in appearance, user experience and sometimes ease of use. If you’ve had a chance to use both Microsoft Office’s desktop application and its web application version, Office 365, you’ll know what we mean.

The user interface of a web application can also be encapsulated in a web viewing application, which allows to build both mobile applications (thanks to UIWebView on iOS and WebView on Android) and desktop applications (by using the Electron framework for example, which includes the Chromium web rendering engine). Web viewing applications are in fact pared-down web browsers with no browsing interface, that only provide access to a single online application. Popular applications like WhatsApp, Twitch, Microsoft Teams and Slack are based on this technology. 

Web applications provide many advantages:

• The client-side execution, performed in a web browser, requires no complex installation for users. As far as the user is concerned, they are plug-and-play.
• They dispense users from performing updates, since they are always up-to-date by definition.
• They don’t require much client-side horsepower (disk space, computing power).
• By their very nature, they run on all desktop platforms (Windows, Mac, Linux), as do web applications that are optimized for mobile devices (iOS and Android).
• Any such application, as well as connected data, can easily be accessed from several different devices, for example work and personal computers, which can be useful for teleworking.
• Data stored remotely facilitates collaboration (for example, several users can work on and modify the same document simultaneously).
• And the list goes on.

What are the various types of web applications?

Static web applications

Instead of fetching content through server-side processes and then sending this content to users, static web applications rely entirely on the client’s web browser to manage their interaction with layout and content. In other words, static web applications don’t rely on a server to provide dynamic content, using instead a standard web server to deliver static files. As it relies entirely on web technologies, it is made up of files in HTML, CSS or JavaScript, as well as images (GIF, JPEG, SVG). Graphics manipulation (HTML+CSS) is handled within the web browser, through JavaScript. 

One of the advantages of static web applications is their frugal use of server-side resources, since they’re just files stored on a plain old web server (HTTP) and sent “as is” to end-users. No need to manage an infrastructure robust enough to ramp-up to handle multiple active processes as the number of users increases. Also, you can produce applications that can function off-line. That being said, their field of application is quite limited.

Dynamic web applications

Dynamic web applications rely on a web server to serve files to the web browser client (Apache, Nginx, Lighttpd, etc.) and on an application server to produce the content requested by the client. Application server technologies can come in several different programming languages, as we’ll see later.

The downside to these dynamic applications is that they need a permanent connection to the server executing the application instance. Plus, said connection must have the bandwidth to support complex applications; otherwise, users experience slow, error-plagued service. And when the Internet connection fails, so does the application. Finally, the more users there are, the more robust the server-side infrastructure should be, to support peak usage.

Hybrid web applications

We’re just touching on these for the sake of theoretical thoroughness, and because you will come across this terminology. “Hybrid” applications execute some of their functions locally, within the web browser, on JavaScript, and the balance of their functions on a remote server. In other words, they’re both static and dynamic. In practice, most dynamic web applications are actually hybrid, insofar as they call on locally-executed JavaScript scripts, if only to inject content in the client’s HTML using Ajax, a technique based on JavaScript.

Progressive Web Applications

Progressive web applications (PWAs) are a method of developing web applications specifically for mobile phones that prioritizes quality of user experience, regardless of the device used or the quality of the Internet connection. It’s an unofficial standard supported by Google, specifically for its Android platform. You can assess the level of compliance of an application to the PWA “standard”. Practically speaking, it’s a static web application (see above).

Some examples of web applications

Web applications rule the Internet. All transactional sites are in fact web applications. They are increasingly common as “software as a service”, or SaaS. These applications, available for free or by subscription, are accessible through a web browser and can be almost as sophisticated as native desktop applications. The Office 365 suite is an example of such a SaaS; more recently, Adobe launched a very decent web application version of its flagship software, Photoshop. It goes to show how versatile and powerful web applications can be.

Web applications can also be so discreet that most users don’t even know they’re using one. This is the case with encapsulated web applications, which look just like a standard desktop application and don’t need a web browser. These applications are developed using frameworks, like Electron, which combine the Chromium rendering engine (the graphics engine underpinning the Chrome web browser) and the runtime Node.js.

On-line commerce platforms

Online commerce sites are in fact web applications that can handle many different tasks, from order processing to inventory management. Large businesses, like Amazon, develop their own applications to meet their specific needs. Small and medium-sized businesses, on the other hand, tend to use SaaS solutions, like Shopify. This kind of platform provides all the tools needed to create and launch electronic commerce sites, including product and supply chain management, and payment systems.

Customer relationship management solutions

Customer relationship management (or CRM) software is a tool designed to help companies offer their clients a unique experience and maintain their relations with them in order to develop sales. CRMs provide a complete picture of every interaction with every customer and offer sophisticated sales tracking tools. CRMs support collaborative work among different teams, like Sales and Marketing, for example. Some examples of popular customer relationship management solutions are the Salesforce and HubSpot platforms.

Enterprise Resource Planning software

Enterprise Resource Planning (or ERP) software is the backbone of many companies; it centralizes several essential functions, like human resources management, accounting, finances, decision-making support, etc. This crucial software is increasingly being offered as a SaaS, i.e. as a subscription-based web application. Some of these online solutions include Microsoft Dynamics 365, Oracle NetSuite ERP, Sage X3 ERP, SAP Business ByDesign, Plex Manufacturing Cloud, and others.

Content Management Systems (CMS)

There are two ways of managing online content, in other words, of building a website. The first one is to install an application, for example Drupal or ProcessWire, on a server. The second one, which is simpler, is to use a SaaS platform where everything is pre-installed, for example Wordpress.com, Squarespace or Wix. In either case, you’re dealing with “back office” web applications, i.e. interfaces that allow you to manage your content.

Web application development process

As for any application, the process of developing a web application must go through several indispensable stages to succeed:

1. Planning

Planning is fundamental to web app development, and is based on exploratory meetings and analysis with the multidisciplinary team in charge of development. At the planning phase, you put in place all your risk abatement measures to start off on the right foot. Do not rush it or worse, dodge it, as your planning is a good predictor of your project’s success or failure. At this stage, you define the concept, set the basic outline of the product, identify the target market and assess the relevance of each one of your projected features.

2. Requirements

This step takes up the work you did in the planning stage while adding a new layer of detail. You seek to comprehensively and accurately capture the needs and objectives of the web application. You’ll end up with a complete list of the application features that each team will prioritize (in “sprints”) for design and development purposes. The completion of this stage should yield all the information you need to assess the cost of your project.

3. Design and prototyping

Once you’ve defined your requirements, the architecture of the application is sketched out in this phase. It can take one of several forms. For example, it can describe the technological architecture (hardware and software), or the interfaces exposed to different services or data sources.

At this stage, an analysis of the User Experience (UX) helps build a functional mock-up (wireframe) to validate the visuals (User Interface), the usability and the efficiency of browsing within the application. The goal of UX/UI for a web application is to provide excellent user experiences through interfaces that are interactive, intuitive, fluid, efficient and user-friendly. The success of a web application rides on the quality of its design, which will dictate whether users adopt and use all of its features.

Different proofs of concept can give rise to different functional prototypes. These proofs of concept are validated and tested on the front-rnd with representative users of the target market, before launching into the next step. Spiria provides a service called “Discovery Process”, which includes and covers these first three phases. The goal is to plan out any future software product and to provide you with functional prototypes and a clear, comprehensive roadmap.

4. Software Development

As its name indicates, this is the stage when developers write the actual code for the application (front-end and back-end) and connect the interfaces to achieve the defined objectives. Depending on the server-side platform and the type of web application, developers will use various programming languages and software tools. All this is explained in detail in the “Technology Stacks” section below

As we work with the Agile-Scrum methodology, this is an iterative process. This means that the client can monitor, test and approve the features as they get coded, and that an operational solution can be delivered progressively, according to the needs prioritized by development cycles (the “sprints”).

5. Testing and quality assurance

Throughout the development phase, various tests put the web application through its paces with a view to validating its behaviour, security, performance and operation in different client-side environments (real or virtual). Several aspects of the program get validated: do the interfaces display correctly on all screens, regardless of their format and orientation (in the case of mobile), and are they reactive enough? Does the application use up too much battery power? Does it properly manage network bandwidth when trying to connect? Are the details of user accounts stored safely? And so on.

The teams execute test plans and the results are parsed. During this quality assurance (QA) work, a continuous feedback loop between quality analysts and developers serves to eliminate any malfunction, error or unexpected result. When all the problems identified by the quality analysts are addressed, the application is ready for release. In-depth quality assurance tests at the development stage are the only way to ensure that the web application will be stable, usable and secure from day one.

6. Release

Application release marks the end of development and testing of your web application. It’s that great day when users will be able to discover your application.

For most web applications, this phase involves making the client application available on a platform and transferring the server application and related databases to a production environment.

Suppliers of infrastructure dedicated to web services, like Amazon Elastic Compute Cloud (EC2) or Microsoft Azure App Services, offer tools that simplify and secure the deployment of web applications on their servers.

The last step is to connect the client and server sides for a seamless routing of queries and responses through HTTPS. You can use a load balancer to receive queries made by clients on the front-end and forward them to the back-end instances which will send a response. But here again, the main cloud computing suppliers offer sophisticated tools, like Elastic Load Balancing, which automatically distribute incoming traffic over various Amazon EC2 instances. Best practice requires that all client-server traffic be encrypted; therefore, you’ll need an up-to-date SSL certificate.

7. Maintenance

This is the phase where, typically, a new team takes over. This new team is a post-release, after-sales client service team. Following a stabilisation period for the solution after its release, the support and maintenance team monitors client requests, crash reports and any problems flagged by end-users. This team also ensures that the application remains compatible with new generations of web browsers and new versions of operating systems.

Note that swift assistance for end-users and frequent updates to fix and improve the application are essential to retain user engagement. Also, do encourage your users to provide you with comments and suggestions on your application. They can be a great source of ideas for application enhancement.

Technologies used to build web applications

Most commonly, dynamic web applications follow the lines of a three-tier client-server architecture.

The first tier handles the presentation of the application on the user’s screen, called user interface. This is handled by the web browser using web technologies like HTML, CSS and JavaScript.

The second tier resides on an application server and processes client queries, receiving them and sending back appropriate responses. This is referred to as “application logic”. There is a wide choice of different technologies to handle this tier; you can even use several of them for a single application, by breaking up the tier in various entities.

The third tier handles data storage. This tier is basically a traditional database that responds to the queries forwarded from the second tier. The choice of technologies for this tier is more limited: MySQL, PostgreSQL, Microsoft SQL Server, Oracle, SQLite, MongoDB, among others.

Client-side code

This is the code that is loaded by the client’s machine to display the user interface and data transactions with the server. This code is split in three parts: HTML, cascading style sheets and JavaScript. To develop this code, you can start from scratch, or use one or more frameworks. Frameworks make things run faster and usually provide a set of conventions that make life easier for all involved.

Server-side code

The application that runs on the server can be coded in a variety of programming languages, like C#, Java, Python, Ruby, or PHP, for example. This application receives the client’s HTTP queries, processes them and returns the expected responses to the client. Here too, you can use development frameworks; each language offers at least one.

Web frameworks

How to choose your framework

Choosing the right framework is crucial, as a bad choice will waste time and money: while you can’t suddenly change tools mid-development, sticking to an unsuitable architecture will cause problems over the entire life cycle of the application. 

When choosing your framework, consider the following factors:

• Needs of the application. The first thing to consider before choosing your framework is what the application has to be able to do. With a firm grasp of the needs of the application, you can target your research to come up with a shortlist of potential frameworks. 
• Popularity of the framework. While the popularity of a framework is not a technical criteria, it is still an important consideration: the more popular the framework, the more active the attendant community. This means more responses to questions on sites like StackOverflow, more tutorials, more plug-ins, more contributions to open-source resources, etc. Furthermore, popularity correlates with a solution’s longevity.
• Quality of the documentation. Documentation quality can vary immensely from one framework to the next. When choosing your framework, make sure the documentation is exhaustive. As a general rule, the larger the number of examples and tutorials, the better the documentation. Also check that the documentation is up-to-date based on the most current version of the framework.
• Cost. One thing to remember when choosing a framework is that some are free, others are only partly free, while others are only available on paid platforms.
• Functional scalability. Many frameworks can be scaled-up or extended through modules or plug-ins. Look at the richness and variety of the catalogue before you make any decisions. You may find a module that will save you time and money on a key function.
• Compatibility with existing architecture. Your application may have to fit in within a larger architecture, or on servers that support a limited number of languages and frameworks. For example, if you already use Microsoft .NET for services that interact with the database or for business logic, you may want to use ASP.NET for your web applications.
• Team skills. If one or more of your developers are already conversant with a given framework and language, you’ve got a head start: you’ll have a shorter learning curve and avoid the most common mistakes. Conversely, if none of your developers are familiar with Ruby, you may want to steer clear of Ruby on Rails, unless they have a lot of time on their hands.
• Security. Last but not least of the issues to consider! Some frameworks emphasize security and have basic security measures built-in, whereas others leave it up to developers. Also, you’ll want to use a framework that is regularly updated to fix any security issues as they crop up, which brings us back to the criteria of popularity. Finally, be very cautious when using plug-ins, as they can introduce chinks in an otherwise secure framework armor.

Front-end frameworks

Client-side web frameworks are based on JavaScript and TypeScript, a strict syntactical superset of JavaScript developed by Microsoft. The following are the most common examples of such frameworks, but there are many more out there.

React is a free, extremely popular, open-source JavaScript library that underpins countless Web applications. Maintained by Facebook and a community of developers, it allows you to build highly interactive interfaces using components. In use, React is particularly flexible and efficient, using a virtual DOM and updating the rendering in the browser only when really necessary.
⇨ reactjs.org.

Vue is a JavaScript library developed by a former Google engineer and maintained by a community of developers. It offers excellent documentation and functionalities, including a virtual DOM, that rival any competitors’. This “lite” library, which enjoys a well-deserved popularity, is the go-to choice for progressive web applications.
⇨ vuejs.org.

Angular is a framework based on TypeScript and developed by Google. Emphasizing stability, robustness and security over innovation, it is ideal for large enterprise applications. Angular is better suited to complex applications than to highly interactive ones. While its learning curve is rather steep, once mastered, it enables quick and robust development.
⇨ angular.io.

Ember is an easy-to-learn JavaScript framework with a very dynamic community. Now in its tenth year of existence, it provides a very plush and mature library of plug-ins. It supports server-side updating of the DOM (in Node.js via FastBoot). Emphasizing productivity and conventions, it fosters orderly development and supports collaborative work, unlike React, for example, which provides few safeguards. If you’re the kind of person who likes a place for everything and everything in its place, Ember is the solution for you.
⇨ emberjs.com.

JQuery, one of the oldest JavaScript frameworks, is still spry and active. It is supported by a large community, offers a vast choice of plug-ins and provides endless possibilities to manipulate the DOM. Though it is perfectly suited for many different kinds of applications, it is more cumbersome than modern frameworks and is losing ground with developers.
⇨ jquery.com.

Backbone is a JavaScript library with an MVC architecture that encourages you to translate your data into models, DOM manipulations into views, and link them together with events. This “lite” framework is ideal for simple, small, one-page web applications.
⇨ backbonejs.org.

Svelte isn’t actually a framework or library, but rather a compiler that offers a radically different approach to building web interfaces. The fans of this tool are fewer but devoted, as it allows them to develop projects with much less coding than other frameworks. The compilation process produces just the JavaScript code necessary for your application; no need for the client to load an entire JavaScript library. It’s much more resource-efficient than React or Vue.js, and is much quicker and reactive from the end-users’ point of view.
⇨ svelte.dev.

Back-end frameworks

As you can use a wide variety of languages to build a web application, very often, the choice of languages will dictate the choice of frameworks.

Django (Python) is a free, high-level, open-source MVC framework that supports quick development and clean, pragmatic design. It takes care of many of the issues related to web development, including security, so that you can concentrate on coding your application without reinventing the wheel. Based on Python, Django code is easy to read and maintain. It is an excellent choice for many web applications.
⇨ www.djangoproject.com.

Ruby on Rails (Ruby) is an MVC framework based on the Ruby language and whose philosophy is close to that of Django. When it launched, in 2004, it revolutionized web application development; most modern frameworks stem from it. It enjoys plentiful documentation and a large community that is as enthusiastic as it is welcoming. RoR applications can present some challenges when deploying into production. While it’s relatively easy to learn at first, things can get complicated when dealing with complex problems.
⇨ rubyonrails.org.

ASP.NET Core (C#, F#) is Microsoft’s open-source web framework. Its modular architecture is geared to developing large, complex applications and excels at it. It can run on various platforms and works completely seamlessly with modern client-side JavaScript frameworks (React, Angular, Vue, Ember). Developers benefit from the powerful Microsoft Visual Studio integrated development environment, which allows them to be more productive.
⇨ “What is ASP.NET Core?”

Laravel (PHP) is the MVC framework of choice for PHP developers. Its syntax is known to be expressive and elegant. However, in terms of performance, Laravel is a step below other frameworks like Django or Express. Its popularity is predicated on PHP’s.
⇨ laravel.com.

Flask (Python), which is very popular with pythonists, is a microframework, i.e. a bare-bones basic package that can be fleshed out with modules. Its documentation and community are solid. It’s an excellent choice to provide web services on small systems with limited means (for example, on a Raspberry Pi card or an Arduino microcontroller).
⇨ palletsprojects.com/p/flask/.

Express (Node.js/JavaScript) is a minimalist framework for the ever-popular Node.js. Like Flask, the basic system is lean, with plumping out through components. It’s the tool of choice for front-end JavaScript developers who wish to add some back-end skills to their toolbox. Many full-stack frameworks (i.e. front- and back-end frameworks) rely on Express for the back-end, including Feathers, KeystoneJS, Kraken, LoopBack, MEAN and Sails.
⇨ expressjs.com.

Spring Framework (Java) is a powerful, functionally-rich and well-thought-out tool for Java development. It provides a collection of programming and configuration models that simplify and streamline the development of web applications. It is well-suited to projects where maturity and stability are more important than speed of development.
⇨ spring.io.

How much does it cost to develop a web application?

The costs of developing a web application can vary hugely. Every application is unique and meets specific needs that can vary in number and degree of complexity.

Imagine that you want to build a highway. In order to estimate the cost, you’d have to answer many questions: How long will it be? How wide? Will it require expropriations? What is the terrain like? Will it cross sensitive areas? Will it require noise barriers in urban settings? How many overpasses and bridges will it require? The answers to these questions, among others, will impact the final cost. The same goes for application development. You need to ask the right questions, and have the right answers. That said, building a web application is usually faster and less expensive than building a highway.

The real answer to the question of the cost of development is as prosaic as it is disappointing: it depends. While many variables come into play, the main ones are the scope and the complexity of the project, which impact development time, which, in turn, translates into dollars and cents. While the simplest applications can be developed for a few thousand dollars, more complex applications that fulfill many different functions and handle sensitive information can cost 500,000$ or more and require a year’s development time. The only way to accurately estimate the cost is to make an exhaustive list of the needs and objectives of your web application. This activity is executed at the planning and requirements stage of the project (see above).

If you don’t have a big budget, your best bet is to restrict your application’s scope and complexity. Start by defining your minimum viable product (MVP), i.e. the application that will meet your users’ basic needs, with features that are only strictly necessary or whose usefulness is established beyond a doubt.

There are many advantages to going for an MVP. For example:

• By sending your MVP to market quickly and inexpensively, you start generating revenue that will finance future development.
• A functional application that is actually in use attracts investors more readily.
• An MVP allows you to capitalize on your early users’ comments, suggestions and expressed needs to improve your application iteratively, instead of wasting money on features that will never actually be used.

Also keep in mind that the cost of an application doesn’t end with development: you need to budget for recurring costs, both fixed and variable, throughout its life cycle. Dynamic web applications, for example, can incur costs related to infrastructure (servers, backups, etc.), third-party services, and software licences, not to mention maintenance operations, support, updates, upgrades, etc. 

The keys to success

Clear goals

The success of your web application will be predicated on clearly identifying your goals and expectations. Clear business goals will guide your development team in developing a delivery strategy, prioritizing requirements, defining the criteria for success and developing a roadmap for the long haul.

To avoid wasting precious time (and money) on the road to development, or losing your way entirely, you should examine three basic questions from every angle: What is it? Who is it for? How to achieve it? The answers to these questions will provide you with a detailed roadmap, increase your chances of reaching success, and minimize risk along the way.

Investing in user interface

Your application’s user interface rests on two essential pillars:

User experience (UX), which includes the paths, interactions, perceptions and impressions experienced by users when interfacing with your application. It’s everything that contributes to a feeling of user-friendliness; conversely, when done poorly, it gives rise to a feeling of frustration, which is the last thing you need when trying to acquire and retain customers to reach business goals.

User interface (UI) visually complements and supports UX. It refers to all the visuals your users interact with on your web application. It makes your application visually appealing and contributes to the feeling of ease of use. It helps users intuitively understand application features and helps them fulfill their objectives.

Users expect simple, fluid and efficient interactions from web applications. They especially don’t want to have to figure out how to do things, and appreciate intuitive design. Make sure to give them a positive experience based on an easy-to-understand hierarchy of information and predictable design elements, so they can easily browse through your application. That’s when the usability tests come into their own; they reveal potential friction points and ensure that the interface engages its target market.

Security

Security must be a paramount consideration with this type of application, which is generally connected to the web and which stores and processes not only enterprise data but also customer information. Baking security into your application right from the get-go is always the most efficient strategy over the long run; it can never be an afterthought. After all, your company’s reputation, and very existence, rides on it.

Robust infrastructure

You know how annoying a slow, sluggish application can be. Don’t do this to your users. If your application looks more like the turtle than the hare, your clients will look elsewhere. The speed of a web application is a function of the quality of development and the infrastructure it relies on (like servers and connectivity). To keep service quality high, keep an eye on your application’s performance.

Scaling up

Now that your application is responsive and your infrastructure suitably robust, monitor its performance in real time. If the number of users surges (a nice problem to have), application performance will plateau and then decline, irritating existing users and turning off new ones. Worse yet, a sudden spike in visitors could crash your application-side server. Devising a pre-emptive strategy ahead of time will minimize these risks and head off any surge-related issues. However, to achieve this, your web application has to be specifically designed with a view to future scaling up and expansion.

Resilience

The overall architecture of your web application must not harbor any single point of failure, i.e. any single element whose failure can take out the rest of the system. Insofar as any system failures can cripple your business, examine every and all imaginable scenarios and deploy preventative measures accordingly, such as redundancies, backups, CDNs, etc. That said, the fact is that even the biggest players are not safe from single point of failure: take Facebook, whose systems shut down worldwide for a whole day, in 2021. One tiny mistake in configuration changes on the backbone routers that coordinate network traffic between data centers was enough to fell the giant.

The right technological partner

Unless you develop your application in-house, you’re going to have to search for the right technological partner, who will turn your ideas into a powerful web application, the precursor to your success. Do you need some advice to make the perfect choice? It just so happens we have a piece on that very issue: “Identify the right software development partner”.