Web Development

Frontend

Frontend web development refers to building the user-facing elements of a web site, or ‘user interface’. This is usually done through a mixture of Hypertext Markup Language (HTML) which describes the structure and content of web pages or ‘web documents’, Cascading Style Sheets (CSS) which apply styling and Javascript which allows for interactivity.

Frameworks

As web UIs have become more feature-rich and interactive, frameworks have allowed for easier development, avoiding re-inventing of the wheel and allowing consistent experiences for users.

The Node Package Manager (NPM) and associated packaging ecosystem are widely used for distributing frameworks and managing framework projects.

Angular

Angular is a web framework focusing primarily on Single Page Applications (SPAs). SPAs are a class of web interface suited to portals and rich form-filling experiences for users. Angular uses the Typescript language, which is essentially ‘Javascript with Types’. This allows for a more reliable development experience, as extra tooling can be leveraged to avoid defects. Typescript will likely feel familiar to those with C-sharp or C++ experience.

Angular has support for the Google Material design framework via an extra NPM package. This gives high quality and consistent UI components.

Some further Angular resources:

• Angular Style Guide

• Sample Angular CI/CD Pipeline

• Angular Material File Upload Further

Other Frameworks

• React

• Vue

• Nuxt Layer on Vue

• Htmx

Backend

Backend web development refers to the ‘server-side’ implementation of a web-site, including its business logic. Commonly used backend languages are Python, Javascript, Go, Ruby and PHP - but there are many others.

There are different approaches to building web-backends. This includes exposing an Application Programming Interface (API) using semantics such a Representational State Transfer (REST), accepting web forms, and serving static web (HTML, CSS) content and media (images, video) accessible by uniform resource locators (URLs). Often web-backends will include combinations of these approaches.

Frameworks

As with frontend development it is common to use frameworks to support building a website backend.

Django

Django is a Python based, backend framework. It was originally developed to meet the needs of a news-room, and still has a focus on article publication and blog-like platforms. However, it has also been widely adopted for general web development. Its powerful Object-Relational Mapping (ORM) layer, which allows easy linking between an architectures ‘model’ and ‘database’ layers has been appealing for developers.

Django has a rich ecosystem of plugins and extensions. The Django Rest Framework (DRF) is used to easily generate a REST API on top of a collection of Django models.

Some useful Django extensions:

• A curated list of django plugins

• django-countries: A list of countries for use in forms and models, including flags.

Examples of Django deployment with containers:

• docker-compose-django

• Docker with Django, Postgres, Nginx

• Python Docker Best Practice

• Sample Django CI/CD

Other Django resources:

• Session Auth for SPAs

• DRF auth for Angular

Pydantic and FastAPI

Pydantic is a type-driven serialization and validation library for Python. If you annotate your Python data models using Python types it provides tools for model consistency checking, serialization and user input validation.

Pydantic can be used in combination with FastAPI to quickly build a REST API, in a more lightweight way than with Django and DRF.

Some useful Pydantic resources:

• Serialization and Inheritence

Other Frameworks

• NodeJs and Express

• Microsoft ASP.NET

Catalogues

radiantearth/stac-browser