Objectif

Créer une application web complète de gestion de tâches (To-Do List) intégrant des techniques avancées de JavaScript sans utiliser de framework.

Partie 1: Approfondissement des Fonctions

Fonctions Fléchées et Fermetures

  1. Définir les Fonctions
    • Créez une fonction fléchée pour ajouter une tâche.
    • Utilisez une fermeture pour gérer l'état des tâches.
javascript
const taskManager = (() => {
  let tasks = [];

  return {
    addTask: (title) => {
      tasks.push({ title, completed: false });
      console.log(`Task added: ${title}`);
    },
    getTasks: () => tasks
  };
})();

taskManager.addTask("Learn JavaScript");
console.log(taskManager.getTasks());

Partie 2: Programmation Asynchrone

Promesses et Async/Await

  1. Chargement Asynchrone
    • Créez une fonction async pour charger les tâches depuis une API fictive.
javascript
const fetchTasks = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const data = await response.json();
    return data.slice(0, 5); // Limiter à 5 tâches
  } catch (error) {
    console.error("Erreur lors du chargement des tâches", error);
  }
};

fetchTasks().then(tasks => console.log(tasks));

Partie 3: Manipulation Avancée du DOM

Techniques d'Optimisation et Sécurisation

  1. Manipulation du DOM
    • Utilisez DocumentFragment pour ajouter des tâches au DOM.
    • Sécurisez le contenu avec textContent.
javascript
const addTasksToDOM = (tasks) => {
  const list = document.getElementById('task-list');
  const fragment = document.createDocumentFragment();

  tasks.forEach(task => {
    const li = document.createElement('li');
    li.textContent = task.title;
    fragment.appendChild(li);
  });

  list.appendChild(fragment);
};

fetchTasks().then(tasks => addTasksToDOM(tasks));

Partie 4: Modèles d'Architecture en JavaScript

Modèle MVC

  1. Implémenter MVC
    • Créez des classes pour le modèle, la vue et le contrôleur.
javascript
class TaskModel {
  constructor() {
    this.tasks = [];
  }

  addTask(task) {
    this.tasks.push(task);
  }

  getTasks() {
    return this.tasks;
  }
}

class TaskView {
  constructor() {
    this.app = document.getElementById('app');
    this.form = this.createForm();
    this.taskList = this.createTaskList();
    this.app.append(this.form, this.taskList);
  }

  createForm() {
    const form = document.createElement('form');
    form.innerHTML = `
      <input type="text" id="new-task" />
      <button type="submit">Add Task</button>
    `;
    return form;
  }

  createTaskList() {
    const ul = document.createElement('ul');
    ul.id = 'task-list';
    return ul;
  }

  renderTasks(tasks) {
    const ul = document.getElementById('task-list');
    ul.innerHTML = '';
    tasks.forEach(task => {
      const li = document.createElement('li');
      li.textContent = task.title;
      ul.appendChild(li);
    });
  }
}

class TaskController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.view.form.addEventListener('submit', (event) => {
      event.preventDefault();
      const taskInput = document.getElementById('new-task');
      const taskTitle = taskInput.value.trim();
      if (taskTitle) {
        this.model.addTask({ title: taskTitle });
        this.view.renderTasks(this.model.getTasks());
        taskInput.value = '';
      }
    });

    this.view.renderTasks(this.model.getTasks());
  }
}

const app = new TaskController(new TaskModel(), new TaskView());

Partie 5: JavaScript Côté Serveur avec Node.js

Créer une API REST avec Express

  1. Serveur Node.js et Express
    • Configurez une API REST pour gérer les tâches.
javascript
const express = require('express');
const app = express();
app.use(express.json());

let tasks = [];

app.get('/tasks', (req, res) => {
  res.json(tasks);
});

app.post('/tasks', (req, res) => {
  const task = req.body;
  tasks.push(task);
  res.status(201).json(task);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Partie 6: Test et Débogage

Frameworks de Test et Techniques de Débogage

  1. Tester l'API avec Jest et Supertest
javascript
const request = require('supertest');
const app = require('./app'); // supposons que l'application est exportée

describe('GET /tasks', () => {
  it('should return an empty array', async () => {
    const res = await request(app).get('/tasks');
    expect(res.statusCode).toEqual(200);
    expect(res.body).toEqual([]);
  });
});

describe('POST /tasks', () => {
  it('should create a new task', async () => {
    const res = await request(app).post('/tasks').send({ title: 'Test Task' });
    expect(res.statusCode).toEqual(201);
    expect(res.body.title).toEqual('Test Task');
  });
});

Partie 7: Sécurité en JavaScript

Protection contre XSS et CSRF

  1. Implémenter des Mesures de Sécurité
  • Utilisez helmet pour sécuriser les en-têtes HTTP.
javascript
const helmet = require('helmet');
app.use(helmet());
  • Ajoutez des tokens CSRF pour protéger contre les attaques CSRF.
javascript
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
app.use(csrfProtection);

Partie 8: Performances et Optimisation

Analyse et Optimisation du Code

  1. Optimisation des Performances
    • Analysez les performances avec les outils de navigateur.
    • Utilisez des techniques de profiling et d'optimisation de code.
javascript
// Exemple de code optimisé
const list = document.getElementById('task-list');
const fragment = document.createDocumentFragment();
tasks.forEach(task => {
  const li = document.createElement('li');
  li.textContent = task.title;
  fragment.appendChild(li);
});
list.appendChild(fragment);

Conclusion

En suivant ces exercices, vous allez construire une application complexe de gestion de tâches qui intègre de nombreuses techniques avancées de JavaScript. Ces compétences vous permettront de créer des applications robustes, performantes et sécurisées.

Modifié le: vendredi 17 mai 2024, 10:05