Ce que cela signifie d'être un développeur front-end en 2020 (et au-delà)

Avez-vous déjà pensé à ce que signifie vraiment la partie front -end du développeur front-end ? Une fois, j'ai demandé à Eric Meyer (qui construit des sites Web depuis presque aussi longtemps qu'il existe des sites Web) s'il savait ce que le terme signifiait au tout début, et il a dit oui. Ce n'est donc pas un tout nouveau titre ou poste, mais sa portée a certainement évolué au fil des ans.

"Front-end" signifie essentiellement navigateur Web. Je me considère comme un développeur front-end, et honnêtement, je ne détesterais pas que vous m'appeliez un développeur de navigateur Web. Mais cela ne se fera probablement pas sentir (et on dirait que vous construisez des navigateurs Web). En tant que développeur front-end, vous travaillez en étroite collaboration avec les navigateurs Web et écrivez le code qui s'y exécute, en particulier HTML, CSS, JavaScript et la poignée d'autres langages parlés par les navigateurs Web (par exemple, les formats multimédias comme SVG). Ou, peut-être encore plus communément expliqué, du code qui est finalement traité dans les langages que les navigateurs comprennent. C'est votre territoire en tant que développeur front-end !

Les navigateurs n'existent pas seuls, ils fonctionnent sur un large éventail d'appareils. Nous l'avons appris à l'ère du design réactif. Et le plus important : les utilisateurs utilisent ces navigateurs sur ces appareils. Personne n'est plus proche de l'utilisateur que les développeurs front-end. Les développeurs front-end écrivent donc du code pour les personnes utilisant des navigateurs qui s'exécutent sur une grande variété d'appareils.

Le simple fait de gérer cet immense paysage d'utilisateurs, d'appareils et de navigateurs est un travail en soi ! Je pense que ce n'est pas tous les jours que vous réfléchissez philosophiquement à votre titre de poste, et c'est bien; nous réfléchissons un peu ici avec ton vieux grand-père Chris.

Si vous venez d'obtenir votre diplôme d'un bootcamp de codage et que votre expérience dans la création de sites Web est quelque peu étroite et nouvelle, vous pourriez être pardonné si vous considérez le développement front-end comme "le truc React" et le développement back-end comme "le nœud trucs »ou« les trucs Python », comme le sont les saveurs les plus chaudes de nos jours. Vous n'avez pas tort non plus. React est généralement utilisé comme framework frontal (c'est littéralement JavaScript qui s'exécute dans les navigateurs). Node et Python sont des exemples de langages qui ne fonctionnent pas vraiment dans les navigateurs Web ; ils sont conçus pour fonctionner sur des serveurs Web (euh, des ordinateurs).

Restez dans ce domaine pendant un certain temps et vous verrez ces bibliothèques, ces langages, ces processus de construction et même des philosophies entières sur la meilleure façon de créer des sites Web aller et venir comme une marée lente.

Vous pourriez voir un ancien agiter le poing de temps en temps, criant que nous devrions apprendre des erreurs du passé. Vous pourriez également voir des jeunes particulièrement bruyants agiter leurs poings tout aussi haut, prononçant le passé comme un contexte non pertinent et non plus un sujet de discussion utile.

Ils ont tous les deux raison, probablement. Tant que personne n'est méchant, tout cela fait partie du flux.

Les choses changent. Je trouve qu'il est vrai que de nombreux sites Web d'aujourd'hui sont plus complexes que les sites Web du passé. Surtout les grands. Les réseaux sociaux et les lecteurs multimédias. Les sites de réservation de voyages. Les vitrines de commerce électronique. Les outils d'ingénierie. Ces sites ont commencé grand et n'ont fait que grossir. Ce sont des économies sur eux-mêmes avec des équipes massives qui les soutiennent. Cette complexité est une cause de changement dans la technologie Web et une cause de friction entre la nouvelle et l'ancienne école (si nous pouvons la décrire aussi simplement).

De nombreuses personnes qui travaillent dans la technologie travaillent essentiellement pour un gros site Web. Et donc nous entendons parler de ces personnes le plus souvent. Ces personnes construisent des outils. Ils écrivent des articles de blog, ils vont sur des podcasts, ils donnent des conférences. Ils aident à changer la technologie elle-même, pour répondre à leurs besoins.

Pendant tout ce temps, le "front-end" n'est toujours que le navigateur. Les langages des navigateurs, HTML, CSS et JavaScript sont toujours les technologies de base en jeu. Ces langages évoluent, ainsi que les navigateurs eux-mêmes, mais plus lentement. Ils font tout le contraire du slogan préféré de la Silicon Valley : aller vite et casser les choses . Ils se déplacent lentement et cassent très rarement quoi que ce soit.

​​Être un développeur frontal, c'est toujours se soucier des utilisateurs qui utilisent ces navigateurs sur ces appareils. Leur expérience est notre métier. L'outillage nous aide juste à le faire, espérons-le.

Alors que fais -tu en tant que développeur front-end ?

• ​​Vous exécutez le design de manière à ce qu'il soit beau sur n'importe quel écran
• ​​Vous appliquez la sémantique au contenu
• Vous construisez l'interface utilisateur de manière abstraite de manière à pouvoir réutiliser efficacement les pièces et les styles
• Vous envisagez l'accessibilité de ce qui s'affiche dans le navigateur
• Vous êtes préoccupé par les performances du site, ce qui signifie que vous avez affaire à la taille et au nombre de ressources utilisées par le navigateur.

Ces choses ont toujours été vraies et le seront toujours, car ce sont fondamentalement des problèmes au niveau du navigateur et c'est ce qu'est le front-end.

​​Ce qui change, c'est que le navigateur est capable de travailler de plus en plus. Il y a toutes sortes de raisons à cela, comme les API de navigateur qui deviennent plus performantes, les bibliothèques qui deviennent plus sophistiquées et les ordinateurs qui s'améliorent en général. Le déchargement du travail du serveur vers le navigateur a pris de plus en plus de sens au fil des ans (applications à page unique !). Bien qu'il soit intéressant de regarder le pendule revenir en arrière (sites pré-rendus !) et de trouver un terrain d'entente (JAMstack !).

De nos jours, le développement front-end peut également inclure :

• ​​Architecture de l'ensemble du site, du plus petit composant aux pages entières jusqu'au niveau de l'URL
• ​​Récupérer vos propres données à partir des API et manipuler les données selon les besoins pour l'affichage
• Gérer seul l'état du site
• ​​Muter/modifier les données via l'interaction et la saisie de l'utilisateur et conserver ces données dans l'état et les renvoyer aux serveurs via des API

Ce sont toutes des choses qui peuvent être faites dans le navigateur maintenant, au grand dam de cet ancien développeur. C'est une sacrée botte de foin de responsabilité quand on considère que c'est en plus de tout ce que vous avez déjà à faire.

Bien que cette pile de foin ait tendance à croître au fil des ans, la lumière qui nous guide en tant que développeurs front-end n'a pas beaucoup changé. Notre principale responsabilité est toujours de prendre soin des utilisateurs qui utilisent des navigateurs Web sur des appareils. Nous devons donc récupérer des données. C'est cool, nous le faisons pour créer une page rapide, sémantique et accessible pour répondre aux besoins de nos utilisateurs. Nous devons donc construire un système de conception. C'est cool, nous le faisons pour construire une interface compréhensible pour nos utilisateurs capable d'évoluer sans créer de désordre incohérent. Nous devons donc apprendre une nouvelle technologie inconnue. Eh bien, c'est notre travail de garder un œil vigilant et de nous assurer que cette nouvelle chose est finalement là pour améliorer notre site pour les utilisateurs.

Bonne chance !

Et ensuite : pourquoi Chris Coyier choisit Local et Flywheel pour alimenter ses sites Web

Découvrez comment Chris utilise Local et Flywheel pour faire passer ses sites au niveau supérieur. Découvrez quelles sont ses fonctionnalités préférées, comment il s'appuie sur Flywheel pour migrer ses sites (gratuitement !) et bien plus encore ! Cliquez ici pour en savoir plus.