Article original : My role as a Front-end Web engineer explained ?
Par Shaun Michael Stone
Bonjour, je m'appelle Shaun Stone. Je suis un ingénieur front-end web senior de Londres, Royaume-Uni. Je travaille dans l'industrie de la FinTech et j'adore ce que je fais. Dans cet article, je souhaite expliquer un peu mon rôle. Pour toute personne qui souhaite poursuivre une carrière dans le développement web, vous pourriez trouver cela utile.
Je vais couvrir : ce que nous faisons, comment nous gérons notre travail, le parcours professionnel, les langages et les outils que nous utilisons. En conclusion, je donnerai des conseils sur la manière dont vous pouvez vous lancer dans l'industrie du logiciel. Ne vous inquiétez pas, je ne vends rien — quelques conseils que j'aurais aimé avoir lorsque j'ai commencé. ?
Un ingénieur front-end web est responsable de la mise en œuvre des éléments visuels que les utilisateurs voient et avec lesquels ils interagissent dans une application web.
Nous construisons des interfaces utilisateur ?
Nous nous concentrons sur la construction des interfaces utilisateur (UI) pour les utilisateurs de notre site web ou de notre application web. Nous prenons en compte quelques éléments :
- Accessibilité : Souvent négligée sur le web, nous concevons nos applications pour répondre aux besoins des utilisateurs ayant une forme de handicap. Cela peut être une déficience cognitive ou une dexterité limitée. Une personne qui a du mal avec les zones cliquables telles que les boutons radio ou les cases à cocher en est un exemple.
- Esthétique : Les styles de nos éléments d'interface utilisateur tels que les boutons, les polices et l'espacement. Récemmment, nous avons mis en œuvre un système de design qui impose une cohérence à travers nos produits. Plus d'informations sur les systèmes de design peuvent être trouvées ici.
- Performance : Nous devons penser à la performance de nos applications pour garder les vitesses de page rapides. Cela implique de réduire les requêtes réseau, de garder les images et les fichiers SVG optimisés en utilisant des méthodes comme la compression. Plus vous chargez rapidement cette page d'inscription, plus vous avez de chances que les utilisateurs s'inscrivent. Nous utilisons Lighthouse de Google pour établir des benchmarks et recueillir des métriques intéressantes.
- Sécurité : Primordiale. De minuscules bugs dans le code peuvent entraîner la fuite d'informations privées, et il y a des gens qui en ont très envie. Bien sûr, c'est un sujet énorme. Consultez Les bases de la sécurité de l'information par Mozilla :
- Qualité du code : Nous utilisons des revues de code pour vérifier le travail des uns et des autres. Nous exigeons au moins deux approbations avant que quoi que ce soit ne puisse être déployé dans nos applications en direct. Nous utilisons des normes de codage qui doivent être suivies dans tout le front-end. Github nous permet de faire cela et plus encore.
Gestion du travail ?
Nous suivons les principes agiles du développement logiciel, comme la plupart des entreprises. C'est une façon de planifier notre travail pour les deux prochaines semaines (un sprint). Pendant ce processus, nous affinons les tickets que nous avons pour ces deux semaines.
Tout le travail restant que nous avons est stocké dans ce qu'on appelle un backlog. Ce backlog se remplit avec le travail que nous devons faire à l'avenir.
Avoir une feuille de route nous donne une direction claire de là où nous voulons être. Pour cela, nous utilisons un outil de gestion de projet appelé Jira d'Atlassian.
Cérémonies ?
- La planification de sprint prépare l'équipe pour le succès tout au long du sprint. La réunion consiste à parcourir le backlog du travail à faire et à prioriser ce qui doit être terminé pour les deux prochaines semaines. L'équipe doit estimer chaque story pour voir combien d'efforts sont nécessaires de notre part. En fonction des efforts impliqués, nous pouvons évaluer la capacité (combien peut être fait par rapport aux ressources de développement disponibles).
- Le daily stand-up est une réunion très brève avec votre équipe pour expliquer : ce que vous avez fait hier, ce que je fais aujourd'hui, et y a-t-il quelque chose qui m'empêche de faire mon travail ? (blocage). Cela permet à tout le monde d'être informé. Gardez-le court. Il fut un temps où un stand-up a duré une heure pour moi… ?
- La revue de sprint a lieu à la fin du sprint. Nous présentons aux autres parties prenantes (membres de l'équipe Produit, utilisateurs de notre système) ce que nous avons réussi à accomplir. Nous le faisons en faisant une démonstration du travail que nous avons effectué. Cela leur donne confiance que nous progressons.
- La rétrospective est un moyen de réfléchir à ce qui s'est bien passé et à ce qui ne s'est pas bien passé. Cela soulève des problèmes. À partir de ces problèmes, nous créons des actions. Une action est une chose pour initier un processus où nous pouvons empêcher cette chose négative de se reproduire. Les choses qui se sont bien passées nous donnent une compréhension de ce qui nous fait mieux travailler.
Parcours professionnel
Les entreprises ont leurs propres parcours professionnels. Un modèle de progression très courant pour un ingénieur logiciel est le suivant.
Veuillez noter : Ceci est mon propre avis et basé sur mes propres expériences. Les termes « Ingénieur » et « Développeur » sont utilisés de manière interchangeable.
- Les développeurs junior ont peu ou pas d'expérience. Ils doivent être guidés par des membres plus seniors de l'équipe pour faire leur travail. Ils poseront généralement beaucoup de questions mais peuvent apprendre beaucoup et seront très motivés pour le faire. Leur salaire est de niveau débutant.
- Les développeurs de niveau intermédiaire ont une quantité raisonnable d'expérience. Ils peuvent accomplir certaines tâches par eux-mêmes. Mais ils ont encore besoin de se tourner vers des membres seniors pour obtenir des conseils de temps en temps. Ils peuvent assister les juniors et également fournir de bonnes idées aux membres seniors.
- Les développeurs seniors peuvent livrer de A à Z sans aucun guidage. Ils guident les autres pour faire de même et suivent les bonnes pratiques. Ils ont suffisamment d'expérience pour savoir quand les choses peuvent mal tourner et comment éviter ces problèmes.
Mais une fois que vous atteignez le niveau senior, est-ce tout ? Non, ce ne devrait pas être le cas. Il y a deux chemins que vous pouvez suivre.
4a. Tech lead/Développeur principal/Architecte serait donné au développeur principal/de rang supérieur de l'équipe qui fournit une vision technique solide et a le respect de ses pairs. Moins impliqué dans le code, et plus dans les fondations des langages et des bibliothèques utilisés, le processus de développement et l'infrastructure.
4b. Responsable d'équipe/Gestionnaire d'équipe est maintenant plus axé sur les personnes de l'équipe. Leur bien-être, leur progression de carrière et avoir un entretien individuel avec chaque membre de l'équipe pour s'assurer qu'ils sont heureux mais qu'ils livrent également comme prévu. Plus de réunions entraîneraient moins de temps de développement. Des compétences en gestion sont requises, et ce n'est pas une tâche facile.
À la suite de cela, vous pourriez passer à un rôle plus exécutif. Un exemple est un responsable de l'ingénierie. Cette personne gère plusieurs Tech leads/Responsables d'équipe. Un autre exemple est le Chief Technology Officer.
Les entreprises évaluent généralement votre niveau de compétence en fonction du nombre d'années d'expérience que vous avez. Pour moi, cela relève du sophisme. J'ai travaillé avec de nouveaux arrivants qui étaient étiquetés comme plus juniors mais qui étaient compétents et forts. Les candidats doivent être pris au pied de la lettre.
Langages à apprendre ?
- HTML est un langage de balisage, la structure des pages web.
- CSS est le langage pour décrire la présentation du web, traitant des couleurs, de la mise en page, de l'espacement et plus encore.
- JavaScript est le langage du web. C'est un langage côté client et améliore l'interaction pour l'utilisateur sur une page web.
Investissez beaucoup de temps pour maîtriser ces trois langages. J'ai un exemple rapide de la façon dont ils fonctionnent ensemble dans ce CodePen. Amusez-vous !
Veuillez noter : Cet exemple est simplifié à des fins de démonstration uniquement.
Voir mon CodePen ici
Si vous en êtes capable, créez votre propre version avec un nom d'entreprise de votre choix et postez-la dans les commentaires.
Outils à utiliser ?
- Utilisez Git pour gérer les versions de votre code. Il permet aux équipes de collaborer sur des fichiers sans causer de perte de travail.
- Utilisez un environnement de développement intégré (IDE) pour écrire votre code. C'est un logiciel similaire à Notepad mais avec plus de fonctionnalités. Il peut fournir des suggestions sur la façon d'écrire votre code et colorier votre texte pour le rendre plus facile à interpréter.
Conseils ?
La première chose à faire est de créer un compte Github. Comme Behance pour les designers, ce sera un endroit où vous pourrez présenter le code que vous écrivez. Cela nous donnera (employeurs) quelque chose sur lequel travailler. Lorsque j'ai quitté l'université, je cherchais une opportunité pour construire quelque chose, même si c'était gratuit. Je savais qu'à long terme, cela me serait bénéfique.
Trouvez du travail freelance ?
L'un de mes premiers projets freelance était pour une grande entreprise. L'application qu'ils voulaient que je construise était facilement un devis de 2 à 3 000 £. Je l'ai fait pour quelques centaines de livres. C'était une vraie aubaine pour eux, mais cela m'a aidé lors de l'entretien pour mon premier emploi, c'est sûr.
Prouvez que votre travail existe ?
Chaque fois que je passe en revue des CV, généralement, si cela dit que vous avez suivi un cours sur Udemy et que c'est tout, alors cela ne suffira pas. Je veux voir la preuve de votre travail. Pour chaque projet sur lequel vous avez travaillé, même si c'était un projet personnel ou pour un membre de la famille, c'est quelque chose qui peut être mis sur le CV. Ces affirmations d'expérience doivent être étayées par des preuves réelles, qu'il s'agisse d'un lien vers la démonstration vidéo ou d'un lien vers la page réelle.
Premier emploi ? Super ! ?
Maintenant, vous rassemblez une petite collection de travaux. Vous impressionnez une petite entreprise et commencez votre premier emploi. Vous serez junior, et les personnes autour de vous ont beaucoup à vous apprendre gratuitement. Apprendre de vos pairs est, selon mon expérience, la meilleure façon d'apprendre, et c'est — bien sûr — beaucoup moins cher. La plupart des cours en ligne aident au début et sont bons à suivre avec parcimonie. Vous devriez pouvoir améliorer vos compétences grâce à une expérience commerciale réelle.
Prouvez-vous ?
Montrez que vous êtes passionné par votre travail et que vous voulez améliorer les choses de manière proactive. Chaque emploi que vous obtenez aura des qualités bonnes et mauvaises. Essayez de comprendre comment améliorer les mauvaises choses et prenez les bonnes choses en compte pour toute aventure future. Dans un nouvel emploi — si cela peut être — enseignez-leur les bonnes choses que vous avez apprises précédemment, et essayez de corriger les nouvelles mauvaises choses. Si vous sentez que vous n'apprenez plus, changez les circonstances pour que vous appreniez à nouveau. Vos compétences doivent toujours être pertinentes dans l'industrie, sinon, vous serez laissé pour compte. C'est triste mais vrai.
Vendez-vous ?
Trouvez toujours des excuses pour ajouter à votre LinkedIn. Expliquez ce que vous avez fait dans votre travail (rôles et responsabilités). Documentez-le comme un journal avant de l'oublier. Ajoutez une photo professionnelle et un résumé solide. Voici ce que j'ai actuellement. Cela a évolué au fil des ans.
À ce jour, j'ai 7 ans d'expérience dans la construction d'applications web. J'ai travaillé dans l'automobile, la finance, les jeux en ligne et j'ai été exposé à la construction et à la maintenance d'applications web sur mesure pour diverses entreprises impliquées dans : le lavage de voitures, le divertissement numérique, les gaz industriels, la vente au détail et les services de comparaison de haut débit. Certains de mes principaux centres d'intérêt incluent l'écriture de fiction et de non-fiction, la construction et l'intégration d'API, l'automatisation des tâches répétitives, la construction de jeux mobiles et d'animations avec Haxe, Unity ou JavaScript/HTML5 canvas.
En plus de lire beaucoup de livres techniques, j'ai écrit le mien appelé Automatisation avec Node.js. Je lis des articles sur des plateformes telles que Sitepoint, CSSTricks, Egghead, PHPArchitect et Smashing. J'assiste à des conférences telles que PHP London et je garde un œil sur les chaînes de développeurs de Facebook et Google. Je suis toujours ouvert aux nouvelles approches et je recherche des astuces et des conseils que je peux appliquer à mon propre travail — que je peux également partager avec mes pairs.
C'est une industrie rapide ??
Le monde du front-end évolue très rapidement. Les bibliothèques/frameworks semblent toujours apparaître année après année. Vous verrez que de nombreux rôles nécessitent une expérience de React (créé par Facebook), Angular (par un employé de Google), ou Vue (par un gars intelligent nommé Evan You). Il y en a beaucoup d'autres mais je ne vais pas entrer dans les détails maintenant.
Essayez de maîtriser ces bibliothèques car elles sont très demandées. Je travaille avec React dans mon rôle et j'ai investi beaucoup de temps pour devenir compétent dans son utilisation. Ces bibliothèques et frameworks sont une couche qui repose sur le langage JavaScript. Devenez d'abord un pro en JavaScript.
Construisez des choses ??
Motivez-vous à travailler sur un projet pendant votre temps libre. Pendant des années, j'ai été très intéressé par des projets de développement de jeux personnels. Vous apprenez tellement pendant le processus. Un jour, au travail, j'ai pensé : « Ne serait-ce pas une bonne idée d'avoir un jeu comme Battleships, mais avec des lapins à la place. » Je sais, une pensée étrange à avoir.
J'ai donc trouvé un artiste, je lui ai dit ce que je voulais, puis j'ai commencé à travailler sur une preuve de concept. Pour jouer, vous placez cinq lapins et cinq pièges, puis vous vous asseyez et vous regardez. Je ne vais pas gâcher la surprise. Jeu ici.
C'est tout pour l'instant. Si vous voulez plus de conseils, n'hésitez pas à me contacter ! Merci d'avoir lu et bonne chance ! Laissez quelques applaudissements si vous le souhaitez. ?
Tout le meilleur,
Shaun Michael Stone. ✉️