When building a website/app, you have three tech stack category options. Each option expands on the capabilities of the last. Let's explore each of these categories in detail, highlighting key factors and distinguishing features. To conclude, I outline the approach we take for this project.
Frontend (F)
A user requests a URL, and the web server sends back an HTML file to the browser. CSS styles the page; Javascript adds interactivity. HTML provides the structure and content.
Developers can choose to use Javascript and/or third-party services to generate an HTML file. This can happen at build-time (developers upload these pre-built files) or at run-time (where the HTML is dynamically generated when the page loads).
If the page is entirely pre-built and served as-is, the process is known as static rendering. If any part of the static page is dynamically generated or modified by Javascript during runtime, this is called hybrid rendering – static plus client-side rendering.
Backend-Frontend (BF)
When a user requests a URL, the web server forwards the request to the backend code (eg Python), which generates the HTML file. The web server then sends this HTML back to the browser. This process is known as server-side rendering (SSR).
Additional requests can be handled server-side, such as loading a new URL, or client-side (CSR), where Javascript fetches data from the server and dynamically updates the page.
Backend-Database-Frontend (BDF)
When a user requests a URL, the web server forwards the request to the backend code. The backend may interact with a database (eg a relational or NoSQL database) to retrieve data. This data is then formatted or processed as needed and inserted into the HTML, which the web server sends back to the browser.
Factors
Let's review nine key factors to consider when building a website or browser-based app. Here they are:
- Install
- Security
- Performance
- Cost
- UX
- Data privacy
- Functionality
- Development
- Hosting
Install
A managed hosting provider will handle the tech for you. All you need to do is upload your files. If you want to install on a local device, eg desktop, you can use an installer (fast and simple) or manually install through the command line.
If you want want to manage your own hosting, eg VPS, dedicated, or colocated server, you have three options, easiest first: use a server image, an installer, or perform a manual installation.
Security
Server-side code (eg Python) should be stored outside the public folder, to prevent direct access via the web browser. To secure a database – regular patching, prepared statements, and encryption (at-rest and in-transit), and ensuring only the web server can communicate with the database.
A Web Application Firewall (WAF) helps by filtering and blocking malicious requests. A Content Delivery Network (CDN) can prevent requests from directly reaching your origin server.
If you rely on third-party services to provide functionality, you are also depending on their data security practices. Risks include data breaches, mismanagement, and unauthorised access to sensitive information.
Performance
Whatever your choice of tech stack, you can serve static HTML files (dynamically generated HTML files can be cached) to the browser. Additionally, you can offload HTML, Javascript, CSS, image, video, and other assets to a CDN, enhancing performance and scalability.
Relying on third-party services for functionality means you're dependent on their performance optimisations. Latency can become a concern, especially when interacting with these services in real-time.
When processing data with Javascript, performance can become an issue, especially for large or complex datasets. For optimal speed, consider using server-side code, WebAssembly, or a database, which are designed to handle heavy computation and data processing more effectively.
For smaller datasets, storing and processing data client-side can be faster than fetching and processing it server-side.
Cost
If your tech stack lacks the required functionality, you'll need to leverage third-party solutions. This can be done by integrating external APIs (directly or via a plugin) or embedding full applications directly into your website or app (via iframe or web component).
APIs often have various pricing models, such as charges based on usage, duration, resources consumed, requests, or concurrency. Many APIs also offer free tiers. In contrast, full applications typically operate on a subscription-based pricing model.
Relying on third-party services can be problematic due to ongoing costs, potential vendor lock-in, and unpredictable price hikes. It's crucial to monitor API usage, track rate limits, and set up alerts to stay on top of expenses.
UX
The user experience of integrating third-party services can be less than ideal – multiple logins, payment systems, and distinct interfaces. Performance-wise, there could be reliability (downtime) and latency issues.
When using multiple services, it can be helpful to have a centralised dashboard to aggregate key information, such as API usage, costs, and rate limits.
Data privacy
When using third-party services, including hosting providers, you're entrusting them with your data, which introduces risks like breaches, mismanagement, or unauthorised access to sensitive information.
In contrast, open source software enables self-hosting, giving you full control over your data and enhancing privacy.
Functionality
The browser operates in a sandboxed environment – it can send requests and retrieve data, but it can't directly modify data on the server. Server-side code (backend), like Python, unlocks a wide range of functionalities:
- Database interactions
- Libraries and frameworks
- Handle HTTP requests and responses
- Create, edit, and delete files on the server
- Fetch files outside public folder
- Store sensitive data outside public folder
- Perform authentication and encryption
- Perform secure data processing
A database (relational or NoSQL) enables high-performance querying, efficient storage, data integrity, consistency, advanced indexing, and scalable data processing.
Flat files (eg CSV, TSV, text, XML, or JSON) can be used to store, exchange, and manage simple data in a lightweight portable format.
File-based databases such as SQLite and Berkeley DB, offer advanced features suitable for a range of applications where a traditional server-based database would be unnecessary.
External APIs
If your tech stack lacks required functionality, you can integrate external APIs or embed apps into your website/app. Example API functionality:
- Content management system
- Search
- Forms
- Payment
- Comments
- Chat
- Polls
- Database
- Storage
- Data processing
- Authentication
- Authorisation
- Media processing
- Commerce features
- Subscriptions
Send an API request to the API endpoint using Javascript or server-side code, and the service processes the request on their servers. A response is generated, which can then be used as needed, eg updating your website/app interface with the returned data.
Development
Backend and database development involves addressing a wider array of security concerns, including authorisation, authentication, securing sensitive data, data integrity, session management, data processing, security patches, logging, and monitoring.
Backend and database development requires either full-stack developers or a team of single-stack developers.
A frontend tech stack cannot directly write to files on the server. This means that any content or data updates require the page(s) to be re-built and re-deployed.
Hosting
If you use a managed hosting provider, they handle all the technical aspects for you, such as server management, security, software updates, backups, and performance monitoring.
If you self-host, eg on a VPS server, you'll need to take on these responsibilities yourself or hire someone to manage them. A full stack environment typically requires more maintenance than a frontend stack, because it involves managing and securing the backend and database.
Our approach
We take a full-stack – Backend-Database-Frontend (BDF) – open source approach. You can host the code on any platform, customise it to suit your needs, and retain full control over your data privacy.
Our goal is to minimise reliance on third-party services, reducing costs while enhancing performance and the overall user experience.
We provide installers that guarantee a seamless installation experience across multiple operating systems, including Linux, macOS, Windows, and more, while also enabling offline functionality for greater flexibility.
Many users have evolving needs and require the functionality provided by the backend and database. By adopting a BDF approach, we ensure flexibility and scalability to meet these demands.