développement front-end et développement back-end
Auteur: Winkin Adrien
Publié le 30-03-2024 | Catégorie: Introduction au développement web
Cet article a pour but de vous présenter les différents aspects du développement web en séparant le développement front-end du développement back-end. Nous espérons qu'il vous donnera envie de vous lancer dans le monde passionnant du développement web.
Développement front-end
Le développement front-end l'une des deux composante principale d'un(e) site/application web (l'autre est le développement back-end). Il s'agit de la partie visible d'un site ou d'une application web avec laquelle les utilisateurs interagissent directement. Il est bon de noter que le code front-end est visible et éditable par tous grâce à l'outil "inspect". Les développeurs front-end sont donc responsables de concevoir, de créer et d'optimiser l'interface utilisateur, pour garantir une expérience utilisateur agréable et intuitive.
L'importance du développement front-end
Le développement front-end est important d'un point de vue expérience utilisateur. Une interface bien conçue et réactive peut transformer une simple visite en ligne en une expérience marquante et satisfaisante. Cela peut également influencer la manière dont les utilisateurs perçoivent la crédibilité et la qualité d'un site ou d'une application. Un site web bien construit avec une navigation fluide et des performances optimales peut augmenter la rétention des utilisateurs, les conversions et finalement contribuer au succès global d'une entreprise.
Les aspects essentiels
Le développement front-end possède plusieurs aspects que nous devons maîtriser pour prétendre être développeur dans cette branche. Les concepts abordés plus bas sont les essentiels. Il est donc important de savoir que le développement front-end ne se limite pas à cela. Le bon développeur front-end doit aussi penser au marketing, à l'architecture du site,...
Les langages de programmation et frameworks
- HTML : ce langage permet d'insérer du texte dans nos site web sous forme de liste, de tableau,... Le code HTML est la structure de base d'un site web. Il peut être apparenté au squelette du corps humain. Ce langage utilise un système de balises pour structurer nos pages web
- CSS : il permet d'enjoliver nos pages web. Les feuilles de style (fichier contenant du CSS) sont lié à une page HTML avec un lien placé dans la balise de HTML. Chaque bout de code CSS est destiné à un ou plusieurs élément HTML définis en balises, en classes ou en id (voir cet article pour en savoir plus) et sert à leur apporter du style.
- JavaScript : ce langage apporte toute la dynamique et les intéractions du côté client sur nos pages web. C'est grâce à lui qu'on peut faire des animation ou que les choses peuvent bouger sur nos pages web. C'est également le seul langage qui peut servir pour le développement front-end et back-end.)
Responsive Web Design ou développement responsive
C'est un terme que vous avez peut-être déjà entendu et tant mieux parce qu'il est très important. Si vous n'en avez jamais entendu parler, c'est le fait de développer de manière à ce que le design de notre interface utilisateur soit adapté à tous les supports (mobiles, tablettes, PC,...). Le framework le plus connu pour développer responsive, bien qu'il soit utile pour de nombreuses choses, est Bootstrap. C'est d'ailleurs ce framework qui a été utilisé pour créer ce site.
Accessibilité Web
Ce point est très souvent négligé par les développeurs et c'est pour cela que j'en parle ici. En effet, L'accessibilité web consiste à rendre les sites web utilisables par tous, y compris les personnes handicapées. Cela implique de fournir une sémantique appropriée dans le code HTML, d'utiliser des contrastes de couleur adéquats, d'ajouter des descriptions aux images pour les lecteurs d'écran, et bien plus encore.
Optimisation des performances
C'est un concept qui entre également en compte lorsqu'on parle de seo et que nous abordons dans un cet article. l'optimisation des performances consiste à minimiser le temps de chargement des pages dans le but d'améliorer l'expérience utilisateur et d'obtenir un meilleur référencement seo. Cela implique la compression des images, la mise en cache du contenu, la minification du code CSS et JavaScript, et l'utilisation de techniques pour réduire le temps de réponse du serveur.
Attention à la sécurité
Ce n'est pas vraiment un aspect du développement front-end mais plutôt un avertissement. Comme je l'ai dit plus haut, la partie client d'un site web est visible et éditabe par tout le monde. Il est tentant de "sécuriser" un site avec des protections javascript parce que cela évite un énorme travail du côté serveur mais ce n'est pas suffisant! Vous ne pouvez pas garantir la sécurité d'un site web en étant développeur front-end.
Développement back-end
Le développement back-end est la deuxième branche principale du développement web. Il est responsable de la sécurité des sites web, de la gestion des bases de données et du traitement des données côté serveur. Le code back-end n'est évidement pas visible du côté client. Les développeurs back-end sont donc responsables d'assurer la sécurité des utilisateurs et de créer un système de gestion de bases de données efficace.
L'importance du développement back-end
Sans développement back-end, il n'y a pas de sécurité web et donc pas d'Internet. De même sans bases de données, réseaux sociaux ainsi que le commerce sur Internet n'existeraient pas. C'est pourquoi, il est primordial de s'intéresser un minimum au développement back-end lorsqu'on s'intéresse de sérieusement aux grands aspects du web tels que la programmation ou la sécurité. Sur ce, débutons en voyant d'abord ce que vous devrez apprendre pour devenir développeur back-end.
Les aspects essentiels du développement back-end
Voici les principaux concepts que vous devrez apprendre pour devenir développeur back-end :
Langages de programmation et frameworks
- Le PHP : le PHP est le langage de programmation le plus connu en ce qui concerne la partie serveur d'un site web. Il est complet et plutôt simple à apprendre (tout est relatif). Il y a une grosse communauté derrière ce langage ce qui vous assure une aide rapide en cas de problème.
- Le langage SQL : c'est le langage qui permet d'intéragir avec les bases de données sous forme de requêtes. Par exemple, sur ce site, il y a une base de données qui répertorie tous les utilisateurs inscrits, lorsque quelqu'un essaye de se connecter, il y a une requête SQL qui permet d'interroger cette base de données pour voir si les identifiants que l'utilisateur a rentré correspondent bien à un utilisateur inscrit.
- Tout le reste : en effet, il y a énormément de langages et de frameworks qui permettent de développer du côté serveur mais sur ce site, nous parlerons exclusivement de PHP et de SQL parce que ce sont les plus utilisés et que je ne maîtrise pas les autres. Cela dit, je peux nommer les autres technologies couramment utilisées : il y a le langage Ruby et les frameworks Flask et Django (de python).
La sécurité
En effet, la sécurité est (selon moi) la partie la plus importante du développement web en général et elle est assurée du côté serveur. On dit souvent que la cybersécurité web consiste à contrôler les formulaires sur un site web mais c'est bien plus que ça!Il faut protéger son site contre des attaques de type DDOS (je parlerai de cette attaque dans un autre article), sensibiliser ses utilisateurs, crypter les données sensibles qui transitent sur le site, faire des maintenances et sauvegardes régulières et la liste est très longue. Cependant, le fait de gérer les entrées utilisateurs est le rôle principal du PHP (ou du développement back-end en général). Et lorsque je parle d'entrées utilisateurs, je parle des formulaires mais aussi des documents qu'ils peuvent insérer, des URL et de tous les éléments où l'on peut inclure des choses extérieures au site en question.
Top 5 des failles web les plus courantes
- l'injection SQL : une telle attaque peut avoir lieu à chaque qu'une entrée utilisateur est insérée dans une requête SQL. Le principe est de détourner une entrée utilisateur afin d'injecter du code SQL qui modifiera la requête en question. Pour s'en protéger, il est important de filtrer et de contrôler toutes les entrées utilisateur.Les différents langages de développement back-end proposent des fonctions qui s'occupent de filtrer ces entrées
- Cross-Site Scripting (XSS) : les attaques XSS se produisent lorsque des scripts malveillants sont injectés dans des pages web consultées par d'autres utilisateurs. Cela peut permettre à un pirate de voler des informations sensibles ou de prendre le contrôle de comptes d'utilisateurs. Pour s'en protéger, utilisez des fonctions d'échappement des caractères nécessaires à l'inclusion de scripts.
- Les mots de passe trop faibles : à l'heure actuelle, on crée des outils de brute force de plus en plus puissant capables de bruteforcer des mots de passe de 7 caractères en quelques minutes. Pour se protéger de cette faille, il faut autoriser un maximum de 5 tentatives de mots de passe ratés et ensuite suspendre le compte pour 5 min (ou plus...).
- Inclusion de fichiers locaux (LFI) : cette faille se produit lorsqu'une application web permet à un utilisateur d'inclure des fichiers locaux sur le serveur. un pirate peut exploiter cette faille pour accéder à des fichiers sensibles du serveur, voire exécuter du code malveillant. Pour s'en protéger, filtrez correctement les entrées utilisateurs, limitez les permissions du serveur web et configurez bien votre pare-feu.
- Vol de session : un pirate vole l'identifiant de session d'un utilisateur, généralement en interceptant les cookies de session non chiffrés. Pour ce faire, il suffit d'appliquer un certificat SSL à votre nom de domaine pour que votre site soit en HTTPS.
Les bases de données
Une grande part du développement back-end consiste à se débrouiller pour arranger toutes les données des utilisateurs qui sont entrées sur le site web. Pour ce faire, on utilise des système de gestion de bases de données tel que mySQL (il est gratuit et c'est le plus connu) et on stocke toutes les données dans une base de données. Celles-ci fonctionnent avec des tables. Par exemple, sur ce site, il y a une table qui gère les utilisateurs, une autre qui gère les articles, une autre les commentaires,... Les tables fonctionnent avec des colonnes. Pour la table qui gère les articles, il y a une colonne qui stocke les titres des articles, une autre les id des articles,... Et nous intéragissons avec cet ensemble grâce à des requêtes SQL placées dans notre code PHP. Ces requêtes peuvent sélectionner, ajouter, supprimer,... des données dans les tables de la base de donnée
Les API
Les API (Interfaces de Programmation Applicatives) sont des composants essentiels du développement back-end, permettant la communication entre différentes parties d'une application ou entre différentes applications. Les API agissent comme des passerelles permettant aux applications de partager des données et des fonctionnalités de manière structurée. Elles sont également utilisées l'intégration de services tiers tels qu'un mode de paiement ou autres. Lors de la création d'une API, il est important de définir des points d'entrée clairs, de décider des méthodes de requête (GET, POST, PUT, DELETE), et de concevoir une documentation complète pour les utilisateurs de l'API. La sécurité des API est primordiale. L'authentification et l'autorisation doivent être mises en place pour contrôler l'accès aux ressources. Des techniques telles que les tokens JWT (JSON Web Tokens) et OAuth sont couramment utilisées.
Serveur et hébergement
Le choix d'un hébergeur fait aussi parti du développement back-end et ce choix dépend des besoins de votre application. Vous pouvez opter pour un hébergement partagé, un serveur dédié ou des services cloud comme Amazon Web Services (AWS), Microsoft Azure ou Google Cloud Platform (GCP). Les services cloud offrent une évolutivité élevée et la possibilité de mettre en place des architectures distribuées. De plus, La configuration correcte du serveur est essentielle pour assurer des performances optimales. Cela inclut la gestion des ressources système, la configuration des paramètres de sécurité et l'optimisation des performances du serveur web.
Conclusion
En conclusion, le développement front-end est un domaine essentiel du développement web qui façonne l'expérience utilisateur des sites web et des applications. En utilisant des technologies telles que HTML, CSS et JavaScript ainsi que des frameworks, les développeurs front-end créent des interfaces attrayantes et interactives. L'accent mis sur l'accessibilité et l'optimisation des performances garantit une expérience utilisateur positive, accessible à tous, tout en répondant aux défis des différentes tailles d'écran et des appareils. Il est également important de ne pas miser sur ces compétences en javascript pour assurer la sécurité d'un site web. Pour finir, la plus grande part du développement front-end consiste à rester à jour et à se documenter sur les nouvelles technologies ainsi que sur les mises à jour des anciennes. Je conçois que tous ces concepts puissent paraître abstrait et c'est normal ce n'est qu'une brève introduction au monde passionnant du développement back-end mais j'espère que vous êtes malgré tout motivé à apprendre les technologies dont nous avons parlé. Pour résumer cet article, je dirai que le mieux pour démarrer est d'apprendre PHP et SQL en raison de la grande communauté autour de ces 2 langages. Ensuite je dirai qu'il ne faut jamais faire confiance aux utilisateurs et toujours partir du principe qu'ils sont malveillants de manière à sécuriser rigoureusement l'intégralité de son système.