Le domaine du développement web est vaste: de nouvelles technologies, bibliothèques et frameworks apparaissent chaque semaine et il peut être difficile pour un débutant d’en faire le tour. Ceci est le premier article d’une série d’introduction en deux parties au développement web. (Remarque: Ce n’est pas un guide étape par étape pour construire votre première application web, c’est simplement une tentative de vous exposer aux différentes parties impliquées dans le développement web.)

Commençons par les bases. Les applications Web peuvent être divisées en deux composants principaux: frontend et backend. Traditionnellement, le frontend ou côté client de l’application est ce que l’utilisateur voit et interagit avec. Le backend ou le côté serveur est quant à lui concerné par le fonctionnement de l’application — communiquer avec la base de données, gérer les mises à jour des données, etc. Dans ce post, je vais me concentrer sur les bases du développement frontend et des suggestions sur ce que vous pouvez faire pour approfondir vos connaissances dessus. Le développement de frontend commence par la sainte trinité: HTML, CSS et JavaScript.

HTML (HyperText Markup Language)

Le HTML représente la structure d’une page Web et est utilisé pour spécifier son contenu. Lorsque nous visitons un site Web, nos navigateurs reçoivent le document HTML pour cette page Web et l’affiche. Le document est constitué d’éléments constituant les blocs de construction de pages Web. Les éléments sont définis à l’aide de balises, par exemple, <h1> indique un en-tête, <p> indique un paragraphe et <ol> indique une liste ordonnée.

En utilisant différents éléments, nous pouvons traduire ce que nous imaginons dans notre esprit sur une page Web. Une bonne façon de commencer est de créer une page Web qui vous décrit, en explorant les différents éléments du HTML en cours de route. Je recommande d’utiliser un éditeur de code en ligne tel que CodePen, où l’interface vous aide à visualiser instantanément les changements de code.

Utilisation d’éléments HTML pour créer le contenu d’une page Web

CSS (Cascading Style Sheets)

Vous avez probablement remarqué que si le HTML nous aide à définir des éléments pour les pages Web, le contenu peut sembler assez fade. C’est là qu’intervient le CSS. Le CSS nous aide à styliser les pages web — nous donnant le pouvoir d’ajouter des bordures, de changer les couleurs et les tailles des polices et même d’ajouter de l’animation. Les éléments HTML ont des propriétés et en utilisant des sélecteurs CSS, nous pouvons changer leurs valeurs comme l’exemple ci-dessous:

selector {
  property: value;
}

Utilisons l’exemple précédent et changeons la couleur du texte du paragraphe en rouge et le style de police en italique.

Utilisation du sélecteur p pour changer la couleur et le style de police

Souvent, nous aurons plusieurs éléments du même type. Nous pouvons regrouper certains de ces éléments en utilisant la propriété class ou spécifier un identifiant pour un titre individuel dont nous voulons modifier la propriété. Pour mieux comprendre ce concept, utilisons l’analogie d’une école. Chaque élève d’une école a un numéro d’étudiant distinct id et différents élèves peuvent être dans la même classe class. Dans la feuille de style CSS, nous pouvons sélectionner par classe ou par ID comme indiqué ci-dessous:

Utilisation de sélecteurs de classe et d’identifiant pour appliquer des styles à différents éléments

Pour utiliser un sélecteur de classe, nous utilisons un point (.) Suivi du nom de la classe, alors que pour un sélecteur d’identifiant, nous remplaçons le point par un hash (#). Si vous regardez attentivement, le premier paragraphe a à la fois un id intro et une classe para par. Cependant, seuls les styles appartenant à l’identifiant sont appliqués car l’identifiant a priorité sur la classe. Openclassrooms a un excellent cours pour apprendre l’HTML et le CSS.

Une fois que vous maîtrisez les bases du CSS, vous pouvez commencer à chercher à utiliser un framework CSS pour vos projets. Les frameworks font le plus gros du travail et vous permettent de styliser les pages web rapidement et efficacement. Considérez-les comme un projet pré-codé qui peut être utilisé sur votre le vôtre. Parmi les frameworks CSS les plus utilisés vous retrouverez Bootstrap, Foundation et Semantic UI.

JavaScript

Nous avons créé une page Web avec quelques éléments et nous les avons stylés. Le JavaScript nous permet de rendre les pages Web interactives  —  répondre aux clics, récupérer des données à partir d’un serveur, mettre à jour dynamiquement des pages et bien plus encore. C’est un langage de programmation à part entière et nécessite plus de temps pour comprendre que HTML ou CSS. Si vous avez une expérience de programmation antérieure avec d’autres langages comme Java ou Python, beaucoup de concepts vous sembleront familiers  —  variables, fonctions, tableaux, etc.

Regardons comment le JavaScript peut nous aider à mettre à jour dynamiquement le contenu de la page:

Mise à jour dynamique du contenu et des styles en utilisant JavaScript

Sans modification de nos éléments HTML ou styles CSS d’origine, nous avons mis à jour le document en utilisant JS. De plus, nous avons utilisé la fonction getElementById() pour récupérer le premier paragraphe et une variable nommée element pour le stocker. Bien que notre exemple ne semble pas tout à fait impressionnant, les applications réelles de JS sont phénoménales. Imaginez un scénario où vous utilisez un site Web de médias sociaux et vous faites défiler jusqu’à la fin de la page, la page Web récupérera dynamiquement des données et mettra à jour le contenu en utilisant JS.

Pourriez-vous écrire votre application entière dans vanilla JavaScript (javascript pur) ? Oui.
Devriez-vous ? Ça dépend 🤷🏾‍♂️.

En tant que débutant, si vous construisez une application web légère avec une manipulation HTML minimale et des exigences de gestion d’événements, vous seriez bien en utilisant JS pur. D’un autre côté, vous pouvez réduire considérablement le temps passé sur des opérations complexes pour des applications riches en fonctionnalités en utilisant une bibliothèque d’interface utilisateur. Le plus simple pour commencer est sans doute jQuery.

jQuery

jQuery est une bibliothèque JavaScript qui implémente une philosophie «écrire moins, pour faire plus» et permet d’accélérer le temps de développement grâce à la manipulation de DOM, à la gestion des événements et aux fonctions d’animation.

jQuery est similaire à CSS dans la mesure où il utilise des sélecteurs et nous permet d’appeler des fonctions sur l’élément sélectionné. En poursuivant avec notre exemple précédent, utilisons jQuery cette fois-ci pour effectuer les mêmes changements.

Utilisation de jQuery pour mettre à jour le DOM

Pour utiliser jQuery, nous devons d’abord importer la bibliothèque dans le code HTML. Les éléments peuvent être sélectionnés en utilisant le signe dollar ($). Comme vous pouvez le voir, nous pouvons écrire du code plus court en utilisant jQuery pour obtenir le même résultat. Le site officiel de jQuery a une bonne documentation sur les différentes fonctions et fonctionnalités disponibles. Gardez à l’esprit qu’en important la bibliothèque jQuery, nous ajoutons un peu de surcharge qui peut engendrer des problèmes de performances. Généralement, jQuery est considéré comme plus lent que du vanilla JS.

Que devez-vous faire maintenant ?

Commencez à travailler sur des mini-projets, en structurant vos pages en HTML, en les stylisant en CSS, en ajoutant de l’interactivité en utilisant JS et en implémentant des animations en utilisant jQuery. Cette feuille de route du développeur Front-End est un bon guide pour vous aider à naviguer dans le processus de devenir un développeur front-end:

Feuille de route du développeur frontend

Les prochaines étapes impliqueraient d’apprendre à utiliser une bibliothèque UI (interface utilisateur) comme React de Facebook, ou des frameworks comme Angular ou Vue.js. Au fur et à mesure que vous commencerez à créer de plus grandes applications, la question de quel design pattern (modèle de conception) utiliser, devra également être prise en compte.

J’espère que vous avez appris quelque chose d’utile, dans la deuxième partie je me concentrerais sur le développement backend. 😬

“Si le débogage est le processus de suppression des bogues logiciels, alors la programmation doit être le processus de les mettre.”
— Edsger W. Dijkstra

#TheGalsenGeek👨🏾‍💻🇸🇳

Partagez cet article: