Programmeur web

1. PROGRAMMEUR WEB COTÉ CLIENT
(FRONTEND)

2. INTRODUCTION
Dans le monde du web, Le terme « frontend » désigne tous les éléments
d’un site que l’on voit à l’écran et avec lesquels on peut interagir depuis un
navigateur. La mission d’un développeur ou programmeur web frontend
consiste à implémenter des éléments visuels et interactifs afin de rendre
attractif et pratique un site internet.
Afin de bien comprendre en quoi consiste le métier de développeur ou
programmeur web frontend, nous avons interviewé un professionnel dans
ce domaine.

3. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Quels sont les langages de
programmation, éditeurs de code
et IDE que vous utilisez ?
 J’ai déjà travaillé en Java,
JavaScript, Typescript (Superset
de JavaScript).
 Visual Studio Code est très
performant pour beaucoup de
cas de développement.
Quels sont les systèmes de
contrôle de version que vous
utilisez ?
 Git, et c’est très utilisé dans
le métier.
INTERVIEW
Utilisez-vous des front end
Boilerplates dans vos projets
? Lesquels ?
 Dans mon cas pas souvent
mais les Boilerplates sont très
utiles quand on développe
quelque chose de courant (un
site de e-commerce par
exemple), il dépend donc du
projet.

4. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Quels sont les front end Assets (Actifs
Frontaux de polices, des icônes, des
photos et des graphiques) les plus utilisé
par vous ?
 Ça encore une fois dépend aussi du projet, mais
heureusement ces outils marchent presque de la
même façon partout et donc connaître un outil
doit suffire pour être capable d’en utiliser
d’autres. Par exemple Bootstrap Icônes est très
puissante, toutes les autres librairies d'icônes
sont similaires à celle-là.
Utilisez-vous des outils Dev (quand voudrez
apporter des modifications et tester leur aspect «
en direct » dans votre navigateur avant de
valider les changements) ? lesquels ?
 Pour le cas de Frontend, l’outil de développement
fourni par Chrome navigateur est très puissant et
doit suffire pour beaucoup de cas d’utilisation.
INTERVIEW

5. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Quels sont les librairies et
Frameworks JavaScript avec
lesquelles vous travaillez ?
 Le Framework est Angular. Pour les
Librairies JS, il y en a beaucoup, par
exemple Lodash JS est très souvent
utilisé https://lodash.com/
Quels sont les frontend
Frameworks utilisé
dans vos projets ?
 Angular2 (Pas AngularJS
qui est très différent)
INTERVIEW
Avez-vous utilisé des CSS
préprocesseurs ? Lesquels ?
 Quand un projet grandit à une
certaine taille, on est souvent
amené à utiliser ces outils
pour automatiser un peu la
gestion des CSS, mais dans
mon cas c'était seulement Sass
qui a été utilisé.

6. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Langages de programmation  HTML, CSS,JavaScript
 React, Angular, Vue, Elm et jQuery
Éditeurs de code  Atom :
 IDE populaires chez les développeurs Web.
 open source et gratuit développé par la société GitHub
 disponible pour Mac, Win-dows et Linux.
 Il prend en charge des plug-ins écrits en Node.js
 implémente Git Control.

7. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Éditeurs de code  Visual Studio Code :
 C’est un éditeur de code multiplateforme
 open source et gratuit
 disponible pour Mac, Windows et Linux.
 supportant une dizaine de langages
 IntelliSense pour une autocomplétion intelligente du code
 débogueur intégré pour limiter les erreurs
 Live Code pour travailler avec d’autres développeurs dans le même éditeur
 Il s’avère plus lourd qu’Atom, mais relativement rapide dans son exécution.

8. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Éditeurs de code  Sublime Text :
 C’est un éditeur de texte codé en C++ et Python
 gratuit pour un usage de test et payant pour une utilisation professionnelle
 disponible pour Windows, Mac et Linux
 connu pour sa fonction GotoAnything
 Il est extrêmement peu gourmand en ressources système par rapport aux deux logiciels
précédents.

9. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Systèmes De Contrôle De Version
 Git
 le plus connu et choisi de nos jours.
 décentralisé qui permet à tous les membres d’une équipe de travailler simultanément sur les
mêmes fichiers dans le même projet sans craindre d’écraser le travail de quelqu’un.
 Apache Subversion (SVN)
 Centralisé : stocke le code sur un serveur central.
 les problèmes de serveur pourraient causer des problèmes de vitesse et d’accès.

10. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Frontend Boilerplates
 C’est des modèles de code utilisés pour lancer le processus de développement.
 Formé d’un ensembles de fichiers HTML, CSS et JavaScript qui aident à passer moins de temps à
effectuer le travail de routine de configuration des fichiers de votre site
 Les Boilerplates les plus utilisés sont : HTML5 Boilerplate et Reset CSS.

11. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Actifs Frontaux
 Pour améliorer et perfectionner l’apparence d’un site web, on pourra de servir d’Actifs Frontaux (
Frontend Asset) de polices, icônes, photos et graphiques.
 Parmi les plus utilisés sont :
 Google Fonts(police et icônes)
 Font Awesome(police et icônes),
 Bootstrap icones
 Unsplash et Pixabay pour les photos

12. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Frontend Frameworks
 Pour la convivialité et la belle apparence du site web
 Ce sont des kits de fichiers permettant de styliser et développer un site web.
 Ils sont constitués de menus de navigation, de boutons, de formulaires, de typographie et d’autres actifs
prêts à l’emploi.
 Les meilleurs Frameworks frontaux sont :
 Bootstrap,
 Semantic UI
 Tailwind CSS

13. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Préprocesseurs CSS
 C’est un langage qui offre encore plus de fonctionnalités CSS.
 permet d’écrire un code plus facile à lire, à maintenir et à partager.
 Les plus utilisés sont : CSS Less et Sass.
Les Bibliothèques JavaScript
 C’est des collections de code qui rendent vos sites interactifs
 offrent une meilleure prise en charge des navigateurs
 ajoutent des effets tels que des animations, des balises d’articles de blog et des champs de formulaire à
remplissage automatique.
 jQuery facile à utiliser avec d’autres bibliothèques et comprend une énorme quantité de plugins.
 ReactJS permet de construire rapidement des interfaces utilisateur (comme des menus, des barres de recherche et
des boutons).

14. OUTILS ET TECHNOLOGIES INFORMATIQUES
UTILISÉES
Les Frameworks JavaScript
 les Frameworks fournissent la structure globale des sites utilisant JavaScript, tandis que les
bibliothèques se concentrent sur un ou plusieurs aspects spécifiques d’un site.
 Les plus populaires sont Vue.js et AngularJS.
Outils De Développeur
 souvent appelés : outils dev
 Utilisés pour apporter des modifications et tester leur aspect «en direct» dans le navigateur avant de
valider les changements,
 Les outils dev sont une fonction intégrée aux navigateurs Web modernes
 Le plus répondu est Chrome Dev Tools.
 Autres : Firefox Page Ins-pector, Microsoft Edge Developer Tools et Safari Web Inspector.

15. IDENTIFICATION DES PHASES DE RÉALISATION RELIÉS À
CETTE FONCTION DE TRAVAIL
• Spécification et analyse des besoins
• Création d'un prototype
• Développement ou programmation
• Tests et assurance qualité
• Maintenance et assistance

16. CONCLUSION
• Avec l’évolution des technologies informatiques, le profil du développeur web
frontend est très recherché par les entreprises. De ce fait, ce professionnel n’a
pas de mal à trouver du travail. Il faut cependant qu’il soit formé
convenablement et reste à l’affût des évolutions technologiques.
• Le développeur front end peut enrichir ses compétences en backend pour
devenir développeur full-stack (et donc prendre en charge l’intégralité de la
conception d’un site ou d’une application). Et en cumulant de l’expérience, il
peut également accéder à des postes à plus hautes responsabilités comme
Chef d’équipe, chef de projet, etc.

17. MERCI!!!