Today most software solutions on the market are "packaged". These are ready-made applications designed to simplify distribution and – where they don't run in the cloud – installation, giving end users a convenient way to obtain a complete set of related features or resources. This approach bundles software so that it is easy to manage, distribute and maintain.
However, when users' needs are more specific than the generic ones packaged software usually covers, such solutions may fail to match business processes fully. In these cases, the ideal scenario becomes providing semi-customised solutions, usually built by modifying a packaged solution where possible, or better still fully customised solutions.
In the latter case the answer is development "from scratch", i.e. writing code from zero: a much more laborious and expensive activity that nevertheless guarantees maximum customisation and potentially maximum scalability. Although it is a significant investment for companies, it usually pays off in several ways: first of all "functionally", because instead of adapting processes and people to software, the software is adapted to the business processes, optimising timing and medium- to long-term returns.
But how are solutions of this kind built?
At ESSE I we have summarised in 7 points what it takes to create an entry-level web application, to bring you closer to our world and "how we work". Our aim is not really to inform experienced developers (who may not find this article particularly useful) but less experienced ones, as well as our more curious clients and prospects, to help them better understand the (far from trivial) work behind what we create.
Right, are you ready to build your online management system from scratch?
Follow these steps carefully to develop your web application!
1) Analysis, planning and design
This important first phase is divided into 3 steps: first you need to identify the main goals of your online management system and the features required. Then you need to create a "conceptual schema" to visualise how the different components relate to one another. Finally you need to design the user interface to ensure an intuitive, user-friendly experience.
These activities usually involve coordinating several team members, each with very different skills. In practice, it is unlikely that one person has all the skills needed to cover every kind of IT need; a full-stack developer might, but how many full-stack developers are also good QA test engineers, system administrators, DB admins and so on?
Let's try to follow these steps on our own anyway; what matters is always focusing on fundamental questions such as: "What benefits will users get from the software?"
2) Development environment
In this phase you need to choose and configure the development environment you will work in. At ESSE I we use several IDEs ("Integrated Development Environments") such as Visual Studio, Visual Studio Code or Rider. Since we develop on the Microsoft stack, make sure you have the necessary components installed, such as .NET.
What is .NET?
.NET is an open source framework for the Windows, Linux and macOS operating systems. It is the cross-platform successor to the .NET Framework. The project is developed mainly by Microsoft employees through the .NET Foundation and released under the MIT licence (source: Wikipedia).
3) Front-end technologies
While we always use .NET on the server side, on the client side we choose different technologies depending on available resources, clients' specific needs or particular features. We usually choose between Blazor, React or Angular. Here they are in detail:
Blazor
Blazor is a framework, part of ASP.NET Core, for building interactive client-side web interfaces. With Blazor you can:
- build rich, interactive UIs using C# instead of JavaScript;
- share application logic written in .NET between server and client;
- render the UI as HTML and CSS for broad browser compatibility, including mobile browsers.
Blazor is based on WebAssembly, a technology that allows .NET code to run in the browser. It also offers several hosting models, including:
- Blazor Server: processing runs on the server, and SignalR sends the interface updates to the browser;
- Blazor WebAssembly: processing runs client-side in the browser using WebAssembly;
- Blazor Hybrid: processing runs client-side in native mobile and desktop apps.
Angular
Angular is a development platform for building web applications with TypeScript. It includes:
- a component-based framework for building scalable web applications;
- a set of tools and libraries to make developing, testing, deploying and maintaining applications easier;
- a community of developers and partners who support and contribute to the project.
Angular is the evolution of AngularJS, an earlier JavaScript-based framework. The two versions are not compatible and use different approaches to building interactive web interfaces.
Angular, as we said, uses TypeScript, a language that extends JavaScript with features such as classes, interfaces, types and decorators.
This framework lets you build web applications that run on any platform, including smartphones and tablets. It also supports the concept of the Single Page Application, i.e. a single HTML page that is updated dynamically without reloading the whole page.
React
React is an open source JavaScript library created in 2013 as an evolution of XHP, a PHP framework created by Facebook to improve the performance of its web pages. It lets you build interactive UIs using components, i.e. reusable, composable pieces of code.
React uses an XML-like syntax called JSX, which lets you write HTML and JavaScript in the same file (source). It can also be used to build mobile apps with React Native, a library that uses the same approach as React but generates native code for iOS and Android (source).
Like Angular, React supports the Single Page Application concept, i.e. a single HTML page that is updated dynamically without reloading the whole page.
React integrates with various tools and libraries to make developing, testing, deploying and maintaining applications easier.
We believe the quality of the end result lies above all in the ability to "blend harmoniously" front-end and back-end technologies (yes, we are talking about harmony again, but it really is necessary if you don't want to lose your mind among so many technologies – it is our way of "squaring the circle").
In this way you can get a clean, fast, responsive interface (one that also works well on mobile devices) that puts its users at ease.
4) Back-end technologies
In this phase you need to choose and implement a back-end technology, i.e. a set of systems able to run code on the server, handling calls from the front end and returning responses that are "dynamically" turned into client-side code, usually HTML.
The Microsoft technology we use is ASP.NET Core (C#).
You may also need to configure a local web server such as IIS (Internet Information Services) or use the built-in server provided by the chosen back-end technology.
Bear in mind, though, that this phase can be greatly simplified or even "skipped" by renting an external web server. Usually, unless the project is very specific or requires substantial resources, this is the best solution. In that case, rather than configuration, it is a matter of choosing the best hosting, with usually minimal and very simplified configuration.
Or, better still, of "choosing the hosting provider" that can most efficiently meet the project's specific needs. In general, our advice is not to skimp on price and to opt for good-quality hosting even if it isn't the cheapest.
5) Database and data persistence
Data must always be kept separate from source code, and for simplicity let's consider using a relational database.
For years Microsoft has offered its rock-solid SQL Server, in which ESSE I has extensive expertise and which it always recommends, but databases such as MySQL or PostgreSQL can also be valid alternatives for managing your online software's data.
Once you have chosen the most suitable database, you need to design its schema.
How? By creating the tables needed to store the information. It will then be possible to make the data interact with the source code using query languages such as SQL. The operations possible with SQL include not only reading but also inserting, updating and deleting the information in the database (in fact, on new projects we no longer work this way, because we use Entity Framework, which provides data access through a model made up of entity classes and a context that represents a session with the database). In this way:
- .NET developers can work with a database using .NET objects;
- most of the data access code that would normally have to be written is no longer needed;
- many database engines are supported, including SQL Server, SQLite, PostgreSQL, MySQL and others.
6) Implementing features and testing
We are now at the heart of coding. In this phase you use the back-end technologies to implement the features required in the online management system. These will certainly include user registration, authentication and authorisation to protect access to sensitive information.
As for the other features, development can follow different models or methodologies depending on the requirements, resources and time available.
Some examples of models are:
- the waterfall model, a linear sequence of phases, from requirements analysis to release of the final product, with detailed documentation for each phase and a formal review before moving on to the next;
- the agile model (almost always adopted by ESSE I), an iterative and incremental approach based on short development cycles called sprints, in which features are defined, implemented and tested collaboratively by the development team and the client or user representative, with continuous assessment of feedback and product quality;
- the prototyping model, which involves creating simplified or partial versions of the application called prototypes, whose purpose is to demonstrate the main features and gather feedback from users or clients, then refine or change the design and implementation as needed.
Whatever model is chosen, feature development requires the following activities:
- defining the functional requirements, i.e. the specifications of the features the application must offer, in terms of inputs, outputs, performance, constraints and usage scenarios;
- designing the application's architecture and interface, i.e. the logical and physical structure of the software and hardware components that make it up, and how they interact with each other and with users;
- implementing the application's source code, i.e. translating the design into a programming language using the appropriate tools and technologies;
- testing the application, i.e. verifying the correctness, quality and security of the implemented features through static, dynamic and automated analysis of the code and its execution;
- releasing the application, i.e. distributing the final product to users or clients, possibly accompanied by technical and user documentation and after-sales support.
7) Deployment and monitoring
The deployment and monitoring phase of a web application is the process of publishing, managing and checking how the application runs on the web. This phase requires the following activities:
- choosing the hosting service, i.e. the provider offering the space and resources needed to host the application on the web, based on scalability, reliability, security and cost requirements;
- configuring the domain, i.e. the unique name that identifies the application on the web, and the SSL certificate, i.e. the document that guarantees encryption and authenticity of communications between the application and its users;
- publishing the application, i.e. transferring the application's files and data from the developer to the hosting service via protocols such as FTP, SFTP or SSH, or using automation tools such as Git or Docker;
- managing the application, i.e. maintaining and updating the application on the web through the hosting service's control panel or using automation tools such as Ansible or Kubernetes;
- monitoring the application, i.e. collecting and analysing information on the application's performance, usage and anomalies on the web, using tools such as Google Analytics, New Relic or Sentry.
Conclusions
As you will have seen, building an online management system requires enormous, constant commitment. But with careful planning and the right technologies you can build a powerful, functional application.
Of course, for large projects it is complex, not to say impossible, to do all this work alone. Still, we want to give you some advice: never stop trying things out and getting your hands dirty with code. Experimenting and testing are always worth doing, because they help you learn faster.
If, on the other hand – highly recommended! – you prefer to entrust the creation of your online management software to a professional team like ours, you only have to ask.
Contact us for a no-obligation conversation and together we'll work out whether to collaborate.
