126 lines
6.0 KiB
Plaintext
126 lines
6.0 KiB
Plaintext
---
|
|
sidebar_position: 3
|
|
title: "CP 3"
|
|
description: "Synthèse de la CP 3 \"Développer une interface utilisateur web dynamique\" du titre professionnel Développeur Web et Web Mobile (DWWM TP-01280m03, référentiel expiré)."
|
|
---
|
|
|
|
import Admonition from '@theme/Admonition';
|
|
|
|
# Développer une interface utilisateur web dynamique
|
|
|
|
<Admonition type="warning" title="Attention, tu es en train de consulter un référentiel expiré !">
|
|
[Aller sur le contenu du nouveau référentiel en vigueur](/titres-professionnels/DWWM/intro)
|
|
</Admonition>
|
|
|
|
## 📚 Références
|
|
|
|
- REAC _(mise à jour du 27/04/2018)_, pages 17 et 18
|
|
- RC _(mise à jour du 19/04/2018)_, page 9
|
|
|
|
## 🚀 Contexte
|
|
|
|
Et maintenant que tout est fait pour la partie statique, il va falloir mettre en place une partie dynamique !
|
|
|
|
<Admonition type="quote" title="Mais... comment je peux faire ET du statique, ET du dynamique ?">
|
|
Pas de panique, c'est très simple !
|
|
|
|
En réalité, toutes les pages peuvent avoir du JavaScript sans souci, mais il est important de ne pas parler de JavaScript dans la partie statique.
|
|
Par contre, vu qu'ici on parle de la <abbr title="Compétence Professionnelle">CP</abbr> 3 et donc de contenu dynamique, JavaScript prend toute son importance ! Tu peux tout à fait te baser sur la même page que la précédente et parler maintenant des interactions utilisateurs 😉
|
|
</Admonition>
|
|
|
|
<Admonition type="info" title="Petit rappel">
|
|
En dehors de l'aspect statique, la <abbr title="Compétence Professionnelle">CP</abbr> 3 se base sur tous les points de la <abbr title="Compétence Professionnelle">CP</abbr> 2, donc référencement et responsive !
|
|
</Admonition>
|
|
|
|
Si tu as utilisé des requêtes AJAX pour récupérer des données, c'est le moment de les mettre en avant avec des extraits de code commentés pour expliquer leur fonctionnement !
|
|
|
|
<Admonition type="example" title="Exemple de connexion avec React">
|
|
```tsx showLineNumbers
|
|
import React, { useState } from 'react';
|
|
|
|
// On crée un état initial pour notre formulaire
|
|
const initialState = {
|
|
email: '',
|
|
password: '',
|
|
};
|
|
|
|
const LoginForm = () => {
|
|
const [form, setForm] = useState(initialState);
|
|
|
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
// On récupère le nom et la valeur de l'input qui a déclenché l'événement
|
|
const { name, value } = event.target;
|
|
setForm({ ...form, [name]: value });
|
|
};
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
// On empêche le formulaire de se soumettre et donc de recharger la page
|
|
event.preventDefault();
|
|
|
|
// On peut maintenant envoyer les données du formulaire à notre API
|
|
const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify(form) });
|
|
const data = await response.json();
|
|
|
|
// On peut ensuite traiter la réponse de l'API
|
|
// ...
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<label htmlFor="email">Email</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
placeholder="jean.dupont@exemple.fr"
|
|
/>
|
|
|
|
<label htmlFor="password">Mot de passe</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
name="password"
|
|
value={form.password}
|
|
onChange={handleChange}
|
|
placeholder="********"
|
|
/>
|
|
|
|
<button type="submit">Se connecter</button>
|
|
</form>
|
|
);
|
|
};
|
|
```
|
|
</Admonition>
|
|
|
|
## 🎯 Critères d'évaluation
|
|
|
|
- Les pages web sont conformes à l'expérience utilisateur y compris pour l'expérience mobile
|
|
- L'architecture de l'application répond aux bonnes pratiques de développement et de sécurisation d'application web
|
|
- L'application web est optimisée pour les équipements mobiles
|
|
- La démarche de recherche permet de résoudre un problème technique ou de mettre en œuvre une nouvelle fonctionnalité
|
|
- La veille sur les vulnérabilités connues permet d'identifier des failles potentielles
|
|
- La documentation technique liée aux technologies associées, rédigée en langue anglaise, est comprise _(sans contre-sens, ...)_
|
|
|
|
## 🤯 Aller plus loin _(hors référentiel)_
|
|
|
|
Cette partie concerne principalement les développeuses et développeurs qui ont utilisés des frameworks/bibliothèques
|
|
pour le développement de leur interface utilisateur, comme React, Angular, Vue.js, etc.
|
|
|
|
Dans la plupart des cas, ces outils permettent de créer la partie front-end de manière dynamique, mais sans aucune gestion de la partie back-end.
|
|
Peut-être que vous me voyez venir... 😏
|
|
|
|
Comme la partie référencement est essentielle sur un site web et sur ce titre professionnel,
|
|
il est important de bien comprendre comment fonctionne le référencement sur une application web dynamique qui ne gère pas le back-end.
|
|
Le contenu généré par JavaScript _(côté navigateur)_ n'est pas indexé par les moteurs de recherche, ce qui implique que le référencement naturel est impacté.
|
|
|
|
Pour contre-balancer cet aspect, il est possible de mettre en place des solutions comme le [Server Side Rendering _(SSR)_](https://openclassrooms.com/fr/courses/5922626-optimisez-le-referencement-de-votre-site-seo-en-ameliorant-ses-performances-techniques/6055261-decidez-entre-client-side-et-server-side-rendering) ou le [Static Site Generation _(SSG)_](https://www.cloudflare.com/fr-fr/learning/performance/static-site-generator/) pour générer le contenu côté serveur et le rendre accessible aux moteurs de recherche.
|
|
|
|
Pour React, l'une des solutions les plus connue reste [Next.js](https://nextjs.org/), qui permet de gérer le rendu côté serveur et de générer des pages statiques.
|
|
On retrouve d'ailleurs une solution similaire pour Vue.js avec [Nuxt.js](https://nuxtjs.org/).
|
|
|
|
Bien que ces solutions soient très intéressantes, je conseille régulièrement de regarder [Vike](https://vike.dev/)
|
|
qui permet aux applications React, Vue, Svelte, Preact, Solid et Angular de palier à ce problème de référencement _(et bien plus encore)_.
|
|
|