Web Applications Patterns course @ EPITA / January 2025 with Louis Gavalda.
- Discuss and learn about a few of the most common patterns used in web applications.
- Build something together -- and by doing so, learn to apply them in your own projects.
- Have fun.
And more precisely, we are going to build:
- a Django web application for... 🥁 taking notes.
- a REST API (using Django Ninja) on top of our Django application.
- a basic SPA (using Svelte) for consuming content from our API.
- Be curious.
- Be confident in your thinking/coding ability.
- Be confortable using a terminal.
- Know how to read (documentation).
Download or clone this repository: https://github.com/louisgavalda/web-applications-patterns
git clone https://github.com/louisgavalda/web-applications-patterns.git web-applications-patterns-gitExecute these commands in your terminal in order to install and run the Django app:
# Change directory, we go into to the project folder
cd web-applications-patterns-git
# Create a new Python virtual environment named 'venv'
python3 -m venv venv
# Activate the virtual environment
source ./venv/bin/activate
# Install all project dependencies listed in requirements.txt
pip install -r requirements.txt
# Generate database migration files (based on model changes)
./manage.py makemigrations
# Run the migrations in order to apply changes to the database; it gets created if it does not exist
# Create an admin user account with the specified (dummy) email
./manage.py createsuperuser --email user@example.com # password
# Start the Django development server in debug mode
DEBUG=1 ./manage.py runserverOpen your browser and go to http://127.0.0.1:8000/
If everything is OK, you should see this message:
yes, it works! 👍
The MVC (Model-View-Controller) pattern is a fundamental architectural pattern that divides a web application into three distinct but interconnected components:
The brain and data manager
The Model represents your application's data structure and business logic.
- Manages data, business rules, logic, and operations
- Interacts with your database
- Maintains the integrity of your data
- Is completely independent of the user interface
Example: In a blog application, the Model would handle:
- Post creation and validation
- User authentication rules
- Comment management
- Database interactions
The face of your application
The View is responsible for presenting data to users.
- Renders the user interface
- Displays data in a human-readable format
- Handles the visual presentation logic
- Receives data from the Controller
Example: In a blog application, Views would include:
- The homepage template showing recent posts
- The user profile page layout
- The comment submission form
- The admin dashboard interface
The traffic director
The Controller mediates between the Model and View.
- Processes incoming requests from users
- Coordinates between Model and View
- Makes decisions about which data to fetch
- Determines which View to display
Example: When a user creates a new blog post:
- The Controller receives the form submission
- Validates the input data
- Tells the Model to create a new post
- Chooses the appropriate View to display (success or error page)
- User interacts with the View (clicks a button, submits a form)
- Controller receives the request
- Controller processes the request and interacts with the Model if needed
- Model performs business logic and data operations
- Controller receives results from the Model
- Controller selects and updates the appropriate View
- Updated View is presented to the user
This separation of concerns leads to:
- More maintainable code
- Easier debugging
- Better code organization
- Simpler testing
- Enhanced scalability
Example with the Python Django framework which is built around a MVC (or MTV?) pattern.
We will draw inspiration from the famous Django tutorial. Read the first part of the tutorial, and maybe the beginning of the second one if you're curious.
We will create an app for... 🥁 taking notes.
Following is a practical explanation of what a REST API is (using our notes application as an example):
A REST API (Representational State Transfer Application Programming Interface) is a way for your frontend (i.e. Svelte) to communicate with your backend (i.e. Django) through HTTP requests. Think of it as a contract between frontend and backend that defines how they exchange data.
Here are the key concepts applied to our notes taking app:
Your data entities become URLs (endpoints):
- /api/notes/ → all notes
- /api/notes/42/ → specific note with ID 42
- /api/tags/ → all tags
Each endpoint supports specific operations:
GET /api/notes/ → Retrieve all notes
POST /api/notes/ → Create a new note
GET /api/notes/42/ → Retrieve note 42
PUT /api/notes/42/ → Update note 42
DELETE /api/notes/42/ → Delete note 42
// GET /api/notes/42/
{
"id": 42,
"title": "My Note",
"content": "Some content",
"tags": [
{"id": 1, "name": "work"},
{"id": 2, "name": "important"}
],
"created_at": "2024-01-15T10:30:00Z",
"updated_at": "2024-01-15T10:30:00Z"
}GET /api/notes/?search=python → Search notes containing "python"
GET /api/notes/?tag=work → Filter notes with "work" tag
GET /api/notes/?sort=updated_at → Sort notes by update date
200 OK → Request successful
201 Created → New note created successfully
400 Bad Request → Invalid data sent
404 Not Found → Note doesn't exist
500 Server Error → Something went wrong on the server
Example Frontend Usage (Svelte):
// Fetching all notes
async function getNotes() {
const response = await fetch('/api/notes/');
const notes = await response.json();
}
// Creating a new note
async function createNote(noteData) {
const response = await fetch('/api/notes/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(noteData)
});
const newNote = await response.json();
}Best Practices:
- Use plural nouns for resources (/notes/ not /note/)
- Nest related resources logically (/notes/42/tags/)
- Use query parameters for filtering/sorting
- Return appropriate status codes
- Include error messages in responses
- Version your API if needed (/api/v1/notes/)
This structure allows your Svelte frontend to interact with our Django backend in a standardized, predictable way, making it easier to develop and maintain our application.
Key Benefits:
- Stateless: Each request contains all needed information
- Cacheable: Responses can be cached for performance
- Uniform Interface: Consistent way to handle all resources
- Client-Server Separation: Frontend and backend can evolve independently
We will use Django Ninja to add a REST to our Django application.
See the Django Ninja tutorial. Django Ninja is already installed, you don't need to take care of that. Simply draw inspiration from the CRUD example and try to adapt it for our notes taking application.
A Single Page Application is a web application that loads a single HTML page and dynamically updates content as the user interacts with it, without requiring full page reloads. This creates a more fluid, desktop-like experience.
Key characteristics of a SPA:
- Client-side routing
- Dynamic content loading
- Smooth transitions
- State management
- Reduced server load
- Better user experience
A few examples of popular SPA frameworks/libraries:
- React
- Created by Facebook
- Uses Virtual DOM
- Large ecosystem
- Popular features: Hooks, JSX
function App() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
)
}- Vue.js
- Progressive framework
- Gentle learning curve
- Two-way data binding
- Template-based
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
}
</script>- Svelte
- Compile-time framework
- No virtual DOM
- Less boilerplate
- Smaller bundle size
<script>
let count = 0
function increment() {
count += 1
}
</script>
<p>{count}</p>
<button on:click={increment}>
Increment
</button>- Angular
- Full-featured framework by Google
- TypeScript-based
- Comprehensive tooling
- Built-in dependency injection
@Component({
selector: 'app-counter',
template: `
<p>{{count}}</p>
<button (click)="increment()">Increment</button>
`
})
export class CounterComponent {
count = 0;
increment() {
this.count++;
}
}- Solid.js
- React-like syntax
- Fine-grained reactivity
- Very performant
- Small bundle size
function Counter() {
const [count, setCount] = createSignal(0);
return (
<>
<p>{count()}</p>
<button onClick={() => setCount(c => c + 1)}>
Increment
</button>
</>
);
}Key Considerations When Choosing a Framework:
- Learning curve
- Community size
- Performance requirements
- Bundle size
- Development experience
- Available tooling
- Team expertise
- Project scale
- SEO requirements
Each framework has its strengths, and the choice often depends on specific project requirements, team expertise, and business needs.
For our project we will use Svelte (with SvelteKit) to build a SPA for our notes taking application.
Execute these commands in your terminal in order to install and run the Svelte application:
# Access the Svelte project directory.
cd svelte-app
# Install the JavaScript/Node dependencies.
npm install
# Run the Svelte app using the development server.
npm run devThe Observer Pattern is a behavioral design pattern that establishes a one-to-many relationship between objects, where when one object (the Subject/Observable) changes state, all its dependents (Observers) are notified and updated automatically. It's particularly useful for implementing distributed event handling systems.
Core Components:
- Subject/Observable: The object holding the state and maintaining a list of observers
- Observer: The object that wants to be notified of changes
Real-world Example:
Think of it like a YouTube channel subscription:
- The YouTube channel is the Subject
- Subscribers are the Observers
- When a new video is posted (state change), all subscribers get notified
Modern Implementation Examples:
- React's useState Hook:
const [state, setState] = useState(initialState);
// Components re-render (observe) when state changes- RxJS Observables:
const observable = new Observable(subscriber => {
subscriber.next('Hello');
subscriber.next('World');
});
observable.subscribe(value => console.log(value));- EventEmitter in Node.js:
const eventEmitter = new EventEmitter();
eventEmitter.on('event', data => console.log(data));
eventEmitter.emit('event', 'Something happened!');The Observer Pattern is particularly relevant in modern web development where real-time updates and reactive programming are common requirements. It's the foundation for many modern frameworks and libraries (like RxJS, for React) that handle state management and UI updates.
Common Use Cases:
- Real-time data updates in UI components
- Event handling systems
- Message broadcasting
- Stock market updates
- Push notifications
- Chat applications
- Live data monitoring
Benefits:
- Loose coupling between subjects and observers
- Support for broadcast communication
- Dynamic relationships can be established at runtime
- Good for establishing real-time event handling
Considerations:
- Memory leaks if observers aren't properly detached
- Order of notification isn't guaranteed
- Cascade of updates can occur if not managed properly
- Potential performance impact with many observers
Here's a simple dummy implementation in TypeScript:
// Observer interface
interface Observer {
update(data: any): void;
}
// Subject interface
interface Subject {
attach(observer: Observer): void;
detach(observer: Observer): void;
notify(data: any): void;
}
// Concrete Subject
class NewsAgency implements Subject {
private observers: Observer[] = [];
attach(observer: Observer): void {
if (!this.observers.includes(observer)) {
this.observers.push(observer);
}
}
detach(observer: Observer): void {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notify(data: any): void {
for (const observer of this.observers) {
observer.update(data);
}
}
publishNews(news: string): void {
console.log(`Publishing news: ${news}`);
this.notify(news);
}
}
// Concrete Observer
class NewsSubscriber implements Observer {
private name: string;
constructor(name: string) {
this.name = name;
}
update(data: string): void {
console.log(`${this.name} received news: ${data}`);
}
}A monolithic application (like our typical Django app) is structured as a single, unified codebase where all functionality - user authentication, business logic, database operations, file handling, etc. - lives together. Think of it as a large building where all departments work under one roof.
For example, in a Django e-commerce site:
- All code runs as one process
- A single database handles all data
- Components are tightly coupled
- Scaling requires replicating the entire application
- Simpler to develop and deploy initially
In contrast, a microservices architecture breaks down the application into smaller, independent services that each handle a specific business function. Each service:
- Runs as its own process
- Can use its own database
- Communicates with other services via APIs (usually REST or gRPC)
- Can be scaled independently
- Can be written in different programming languages
For example, an e-commerce site using microservices might have:
- An authentication service managing users
- A product catalog service
- An order processing service
- A payment service
- A shipping service
Each of these would run independently, with its own codebase and database, communicating through well-defined interfaces.
This provides better scalability and flexibility, but increases operational complexity and requires more sophisticated deployment and monitoring solutions.
Here is a breakdown of the advantages, disadvantages, and main tools used in microservices architecture.
Advantages:
- Fine-grained scalability: Each service can be scaled independently according to its needs
- Technological flexibility: Freedom to choose the best technology for each service
- Resilience: A service failure doesn't affect the entire system
- Independent deployment: Updates possible service by service
- Team organization: Each team can be autonomous with their service
Disadvantages:
- Increased operational complexity: More elements to manage and coordinate
- Higher cost: More complex infrastructure, more servers
- More difficult debugging: Issues can involve multiple services
- Data consistency: Challenge to maintain consistency between services
- Network latency: Inter-service communication adds latency
See this article from 2021: 10 Companies Using Microservices. Who is Using Them?
Commonly used tools when building a microservices architecture are:
-
Containerization and Orchestration:
- Docker for containerization
- Kubernetes for orchestration
- Docker Compose for local development
-
Service Discovery and Configuration:
- Consul or Eureka for service discovery
- etcd or ZooKeeper for distributed configuration
- Spring Cloud Config for configuration management
-
Communication:
- REST or gRPC for APIs
- RabbitMQ, Kafka for asynchronous messaging
- GraphQL for API aggregation
-
Monitoring and Observability:
- Prometheus for metrics collection
- Grafana for visualization
- Jaeger or Zipkin for distributed tracing
- ELK Stack (Elasticsearch, Logstash, Kibana) for logs
-
CI/CD:
- Jenkins, GitLab CI, or GitHub Actions
- ArgoCD or Flux for GitOps
- Helm for Kubernetes packaging
-
Gateway and Security:
- Kong or Traefik for API Gateway
- Keycloak or Auth0 for authentication
- Vault for secrets management
-
Testing:
- Pact for contract testing
- Gatling or K6 for load testing
- Chaos Monkey for resilience testing