Une entrevue avec Phil Hawskworth

Certains d'entre vous ont peut-être entendu parler de JAMstack, et peut-être même de savoir comment passer de WordPress to Hugo mais JAMstack est-il une option viable pour tout type de projet?

J'ai parlé à Phil Hawksworth, un ingénieur front-end qui (après 9 ans de travail dans des agences est retourné à travailler sur un produit autonome ) se concentre maintenant sur le développement de stratégies pour les technologies JAMstack afin de rendre la création Web plus simple, plus rapide et plus sécurisée. Phil organisera également JAM_stack ldn une conférence consacrée aux générateurs de sites statiques, serverless et JAMstack à Londres, du 9 au 10 juillet.

Vitaly: Bonjour et bienvenue à l'un d'entre eux. de nos conversations avec nos conférenciers à Smashing Conf et des gens généralement sympathiques. Vous vous souviendrez peut-être de ces moments où le FTP était un gros problème et peut-être même que vous déployez toujours pourquoi FTP est un espace parfaitement sécurisé, vous n'avez donc pas à vous en préoccuper. Toutefois, il y a beaucoup de changements pour que vous n'utilisiez plus FTP et que vous passiez plutôt aux flux de travail basés sur Git, et probablement à un déploiement continu. Tous ces sifflets et cloches de fantaisie. C’est pourquoi, aujourd’hui, je suis très heureux d’accueillir Phil Hawksworth, qui travaille actuellement pour Netlify, les relations avec les développeurs [inaudible 00:10:00]. Bonjour Phil. Comment allez-vous aujourd'hui?

Phil: Je suis génial, comment allez-vous Vitaly? C’est un plaisir de vous voir.

Vitaly: Aw, je vais très bien. C’est toujours un plaisir de vous voir. Vous êtes comme un rayon de soleil diffusant Netlify, Jump Stack et tout le reste.

Phil: J'essaie. Je ne suis même pas surpris, quelle occasion manquée.

Vitaly: Ça va, ça va. Mais tu dois me dire, alors ce bijou ou jen ou jeet, comme, jem? Est-ce que c'est jem?

Phil: Jam. C'est de la confiture. C’est la confiture.

Vitaly: C’est la confiture. Donc le JAMstack. Pour les développeurs ou les concepteurs, en réalité, jamais entendu le terme auparavant. Si vous vouliez peut-être résumer ce que c’est et pourquoi c’est bon et quels en sont les avantages. Pourquoi voudriez-vous jamais passer de votre bon vieux stack à JAMstack. Peut-être pourriez-vous résumer brièvement.

Phil: Laissez-moi voir si je peux essayer car il est tentant de dire, JAMstack, le JAM représente Javascript, les API et la maquette. Mais cela en soi n’explique pas grand chose, il suffit de savoir ce que cela représente. Donc vraiment, JAMstack est une façon de déployer et de servir des sites Web qui ne reposent pas sur un serveur d'origine, ils ne s'appuient pas sur des requêtes frappant un serveur actif tout le temps.

Phil: Ainsi, vous connaissez peut-être des piles telles que la pile LAMP (Linux, Apache, MySQL et PHP), qui était le type de pile qui servait votre site là-bas. Avec JAMstack, la situation est un peu différente, car nous avons progressé d'un niveau, du serveur vers le navigateur et nous nous sommes rapprochés du navigateur. Nous pensons donc beaucoup à la possibilité de créer un navigateur aussi rapidement que possible, puis d'utiliser les technologies du navigateur pour: améliorer et augmenter plus tard. Ainsi, JAMstack consiste à pré-rendre des sites, à les insérer dans le navigateur, puis à les améliorer, à les enrichir, à l’expérience de l’exécution de Javascript dans votre navigateur, éventuellement à des requêtes auprès d’API, et ainsi de suite.

Phil: C'est donc le modèle qui consiste à éviter d'avoir un serveur à entretenir, car je sais que l'entretien d'un serveur est difficile. Je ne sais pas vous mais j’ai de nombreux sites qui ont disparu lorsque je leur ai tourné le dos pendant quelques années. J'avais besoin de mettre à jour PHP, ce qui signifiait que je devais mettre à jour la version de Linux que j'avais déjà faite une fois dans une lune bleue. Il est donc difficile de maintenir les serveurs. L’idée de JAMstack est donc de simplifier au maximum la tâche, de servir les sites en tant qu’actifs statiques, puis de tirer le meilleur parti de toutes les API et de toutes les incapacités du navigateur pour procéder à des augmentations et faire davantage de choses avec. eux là-bas.

Vitaly: Bien, cela a du sens. En fait, nous avons déménagé à JAMstack il y a environ 2 ans maintenant.

Phil: Deux ans?

Vitaly: Ouais, ce fut tout un voyage pour nous . Et bien sûr, nous avons appris quelques leçons en cours de route. Mais je me demandais, diriez-vous qu’en gros, chaque projet pourrait bénéficier d’un transfert de certains de ses éléments vers JAMstack ou similaires, où voyez-vous ses limites? Est-ce que c'est quelque chose que chaque développeur peut potentiellement utiliser dans un projet ou est-ce que c'est quelque chose de dédié à un groupe particulier de sites Web ou à un groupe de projets?

Phil: Ouais, je veux dire, c'est tentant de dire, ah oui, vous pouvez l'utiliser pour tout mais je pense que vous devriez être prudent en disant cela à propos de toute technologie. Vous savez, vous devez vraiment choisir les cas d'utilisation et vous assurer qu'ils sont bien adaptés. Je dirais le premier réflexe lorsque vous pensez à un site JAMstack et pensez peut-être à quelque chose qui sert d’actif statique, peut-être directement à partir d’un CDN. Vous pensez peut-être que ce n’est bon que pour les sites qui ne changent pas très souvent, ils citent entre guillemets, statiques, ils ne changent pas. Mais en réalité, ce n’est pas vraiment le cas car il existe actuellement de nombreux outils permettant de réduire les frictions lors du déploiement d’objets.

Phil: Vous pouvez vous déployer plusieurs fois par jour ou plusieurs fois par heure. si vous voulez vraiment faire en sorte que les choses se sentent beaucoup plus dynamiques qu'auparavant. Donc, certains cas d’utilisation où vous pensez qu’ils ne seraient pas appropriés; ceux qui entrent dans le giron aussi. Cependant, il est peut-être difficile de créer des sites comportant de nombreuses pages, des centaines de milliers ou des millions de pages, car le modèle JAMstack est tout à fait logique lorsque vous pouvez pré-générer votre site. vous pouvez donc utiliser un générateur de site statique. Ceux-ci sont vraiment en vogue en ce moment. ce sont vraiment très populaires.

Phil: Mais bien sûr, ils doivent faire un travail chaque fois qu'ils déploient une mise à jour, donc si vous avez un site, peut-être comme un site de journal, cela a plusieurs millions de pages, le travail nécessaire à la régénération peuvent être assez, vous savez, cela peut prendre beaucoup de temps et c'est à ce moment-là que vous commencez à bousculer certaines des limites de l'endroit où JAMstack peut être, en quelque sorte, simplement utilisé . Vous pouvez commencer à être un peu malin et à contourner ce problème si, vous savez, vous êtes très très malin, mais cela pose certainement des problèmes.

Phil: L'une des choses que je suis commencer à voir à partir d’une variété de différents générateurs de sites statiques comme Gatsby par exemple ou React Static, ainsi que Hugo. Les équipes derrière ces générateurs de sites statiques commencent à explorer différentes manières de générer la génération progressive des pages. En d'autres termes, vous ne redéployez pas l'intégralité du site ni ne le régénérez chaque fois que quelque chose change, mais essayez de trouver des solutions. faire des constructions incrémentielles. C’est un peu un problème difficile à résoudre, mais des travaux sont en cours dans ce domaine, ce qui aidera également à éliminer cet obstacle. Mais, pour le moment, trouver un moyen d'utiliser un site JAMstack pour un site Web comptant plusieurs millions de pages ou plusieurs centaines de milliers de pages est un défi pour le moment.

Vitaly : Oh, c'est intéressant. Donc, en réalité, l’idée de servir une division de votre État et essentiellement de faire en sorte que tout ce que vous devez construire, comme un nouveau portail, doit être un peu paginée, c’est intéressant de voir cela se produire. Parce que vous aussi, récemment, je pense il y a deux semaines, un article de Jason Pamental a été publié dans lequel l'idée était en réalité très similaire de charger les polices, puis vous chargiez la première page dont vous avez besoin, puis chargez le second et vous les fusionnez pour créer une nouvelle police, comme le chargement incrémental de polices.

Phil: Intéressant.

Vitaly: être vraiment intéressant à explorer.

Phil: Ouais, et ce n’est pas tant le chargement, c’est la génération

Vitaly: La génération, la construction

Phil: Ouais, exactement.

Vitaly: Je comprends. Mais quels sont selon vous les types de défis communs à la plupart des développeurs? Eh bien, je veux dire, laissez-moi revenir en premier. Si vous n'avez jamais travaillé sur JAMstack auparavant et que vous êtes très à l'aise et heureux avec votre pile LAMP, vous souhaitiez peut-être explorer les possibilités et les avantages tels que la sécurité et les performances de JAMstack. Comment commencerais-tu réellement?

Phil: Les modifications apportées au flux de travail peuvent en réalité être assez profondes, car vous supprimez une grande partie de l'infrastructure dont vous disposiez. dépendons normalement de dire que nous pouvons en finir avec cela et commencer à déployer des choses directement sur un CDN. Mais pour ce qui est de savoir comment quelqu'un pourrait commencer à expérimenter cela, il est probable qu'il en utilise déjà certains aspects. Vous savez, même sur des méthodes traditionnelles de création d’objets pour le Web.

Phil: Si vous songez à construire quelque chose sur la pile LAMP, il y a de fortes chances que votre PHP y soit, ' Réalisez des tâches telles que l’écriture d’un modèle qui récupère les données d’une source de données, dans ce cas-ci, la base de données MySQL ou une sorte de base de données, puis restituez ces éléments pour les afficher. Et cela ressemble un peu au fonctionnement des générateurs de sites statiques. Ils ont des modèles, ils récupèrent des données quelque part qui pourraient être des types de données structurées dans des fichiers ou une base de données ou une API de contenu. Quoi qu’il en soit, il s’agit de saisir des données, de les combiner avec des modèles, de générer des vues. La seule différence est qu’il ne le fait pas à la demande, mais bien à l’avance. Ainsi, certaines des étapes logiques de ce type d’étapes cognitives pour un développeur ne sont peut-être pas aussi énormes.

Phil: Le changement le plus important concerne la manière dont vous déployez les choses. Parce que ce que vous déployez réellement, c’est vos actifs générés et rendus complets à chaque fois que vous souhaitez effectuer un déploiement. Cela commence à amener des choses comme la gestion du contenu et la gestion du code au même endroit afin que des choses comme le contrôle de la vision sur tout cela ensemble. Cela commence donc à être une façon légèrement différente de penser à la manière dont vous pourriez développer et gérer les sites et leur contenu. Donc, il y a quelques changements ici. Mais la bonne chose est que beaucoup de générateurs de sites statiques peuvent être assez simples pour commencer à expérimenter et la bonne chose est que vous n’avez pas besoin de beaucoup d’infrastructures pour le faire. La bonne chose est donc que vous pouvez vraiment commencer à créer des choses directement sur votre ordinateur local. Vous utilisez un générateur de site statique directement sur votre machine et vous pouvez vraiment avoir une idée précise du résultat sans avoir à vous appuyer sur de nombreuses autres infrastructures.

Phil: ce genre de première étape, la rampe d'accès, peut être assez peu profonde pour que vous commenciez à dire: «Eh bien, je vais essayer cet ensemble particulier d'outils. Je peux les exécuter localement. »Et vous aurez l’assurance que, lorsque vous déploierez la sortie de celui-ci quelque part, ce sera exactement la même chose à l’emplacement où vous le déploierez. C’est l’une des choses que j’aime dans la restitution d’éléments statiques, car vous ne dépendez pas de beaucoup d’infrastructures et de pièces mobiles pour les servir. Vous pouvez les regarder sur le serveur statique de votre propre machine et penser: «Ouais, c'est comme ça que ça fonctionnera quand ça ira sur un CDN".

Vitaly: Mm-hmm (affirmatif Et aussi l’infrastructure lorsque nous examinons, par exemple, la façon dont nous construisons single [inaudible 00:10:07]et il existe un très grand nombre d’options possibles. Pour le serveur, pour le client et tout le reste.

Phil: Ouais.

Vitaly: Et je pense, dans notre cas, parce que nous sommes gentils de construire un squelette et de le servir tout au long de CDI avec le contenu et tout et améliorer avec Javascript. C’était en fait tout à fait raisonnable et tout à fait, je ne dirais pas facile, mais il était logique de passer à ce type d’installation. En fin de compte, il ne reste que le contenu qui reste sur la page. C’est juste du HTML avec quelques zones de commentaires, un champ de recherche et quelques autres choses. Mais si vous vous dirigez vers des applications vraiment autonomes, peut-être même des applications financières, des services bancaires en ligne, ce genre de choses. Pensez-vous toujours que JAMstack serait une bonne option à envisager si vous avez quelque chose qui demande beaucoup de logique? A-t-il besoin d'un serveur ou non?

Phil: Eh bien, je n'aime pas perdre la vieille phrase: «ça dépend», mais ça dépend un peu. Cela dit, de nombreuses applications fonctionnent aussi bien comme une application Javascript que comme un composant côté service. Je dis cela avec une certaine prudence, car je suis un peu à l’école en matière de développement Web et j’aime vraiment faire entrer le plus de choses possible dans le navigateur, puis avoir un filigrane très élevé à partir duquel vous améliorez progressivement de. Donc, personnellement, je n’aime pas tout faire en Javascript et simplement envoyer une balise body vide puis tout courir en Javascript.

Phil: Cela dit, il est parfois parfaitement acceptable. Si vous pensez à un certain type d’application qui, bien entendu, dépendra beaucoup de Javascript et de votre public. Cela peut être complètement raisonnable. Il y a des choses qui ont été expédiées récemment. Je pense en fait à quelque chose qui a été envoyé à Google IO car, par exemple, l’équipe Chrome a conçu un jeu utilisant beaucoup le langage Javascript et fonctionnant magnifiquement de manière statique.

Phil: Pour revenir à votre exemple financier, j’avais travaillé, mon tout premier travail en fait, consistait à afficher des chiffres sur des écrans pour que les commerçants puissent les échanger. en utilisant les technologies Web et c'était avant les sockets Web, c'était avant Ajax, c'était avant tout ce qui était vraiment utile pour vous aider à le faire et c'est un peu difficile, mais plus récemment, vous feriez beaucoup de ce genre de chose en Javascript et c'est parfaitement logique. Vous pouvez commencer à faire des demandes sécurisées aux API directement à partir du navigateur. Il existe maintenant de nombreux modèles pour l'authentification et l'autorisation directement à partir de votre navigateur. Donc, à bien des égards, cela peut simplifier la pile pour les institutions financières qui souhaitent construire certaines de ces choses, car la manière dont elles peuvent découpler certaines de ces choses peut les rendre beaucoup plus gérables. Donc, je pense certainement que le modèle JAMstack pourrait parfaitement fonctionner dans ce scénario également.

Vitaly: OK, alors revenez peut-être maintenant pour explorer ce monde de JAMstack et de front-end. Qu'est-ce qui vous enthousiasme le plus ces jours-ci, Phil? Si vous regardez JAMstack et front end en général, est-ce que cela vous empêche vraiment de dormir la nuit et de vous réveiller le matin en espérant que oui, je vais y travailler un jour? Un jour, je vais le faire. Avez-vous [crosstalk 00:13:33]

Phil: Ouais, et c’est le genre de chose où votre réponse peut être différente jour après jour car on a l’impression que le monde évolue si rapidement. Et c’est en soi l’une des choses qui me passionne le plus. Maintenant que nous commençons à voir les API du navigateur commencer à vraiment progresser et le genre de choses que nous pouvons faire directement dans le navigateur sans avoir à les implémenter nous-mêmes. C’est un peu excitant pour moi. Je suis toujours très duffer en matière de SVG. Je devrais expliquer le mot duffer, si quelqu'un qui n'est pas anglais et qui regarde ça, ça veut dire un imbécile. Cela signifie que je suis loin derrière la courbe.

Phil: Mais je me trouve vraiment désireux de faire plus avec les SVG et les animations sont des sortes de choses que je suis juste en retard et que je veux jouer. avec ça. Mais des éléments tels que les API de navigateur, qu’il s’agisse d’opérations hors connexion ou d’amélioration des performances, et en particulier du moment où le chargement des polices semble devenir de plus en plus accessible, nous permettent de commencer à créer des éléments visuellement très riches et plus proches. ce que nous pourrions vouloir faire avec la typographie. Je suis un peu un nerd pour ce genre de choses, j'aime ce genre de choses, donc je veux jouer de plus en plus avec cela.

Vitaly: Alors Phil, parle de la conférence JAMstack à Londres. Pouvez-vous également expliquer en quelques mots: de quoi s’agit-il, quel est le centre d’intérêt, à qui s'adresse-t-il et quel est votre rôle? Juste dans les coulisses, en prenant soin du contenu et tout. Quel est votre rôle là-bas?

Phil: J'ai donc eu la partie amusante de mon travail. J'ai donc eu l'occasion de sortir et de trouver des conférenciers et de trouver un contenu intéressant. Je suis donc vraiment excité par la manière dont les programmes sont conçus. Des personnes comme Chris Coia vont parler de l'autonomisation des développeurs front-end et de tout ce que nous pouvons faire avec les technologies front-end basées sur ce modèle de JAMstack. Nous avons des personnes comme Jake Archibald et Surma de l'équipe Google Chrome qui vont parler de la performance dès le départ et des moyens de générer de véritables expériences de performance avec un hébergement statique, une infrastructure ou un code qui fonctionne parfaitement le navigateur.

Phil: Nous allons également demander à Yuna Kravitz de parler de choses à faire avec CSS et Houdini, entre autres choses du même genre. Et bien plus encore. Nous parlerons également de choses liées au changement culturel qu'un modèle JAMstack peut avoir sur votre organisation et sur vos projets, de manière à ce qu'il soit réellement accessible à tous. Donc, je suis un peu excité à ce sujet. Je vais également avoir la possibilité de présenter toutes ces personnes, car elles m’ont laissé faire et devenir le MC, ce qui signifie que j’ai le droit de parler à ces personnes et de leur poser quelques questions et ce genre de choses. Je pense donc que cela devrait être très intéressant pour quiconque est intéressé par le développement front-end et les nouveaux modèles de diffusion efficace de projets sur le Web.

Vitaly: Oh, alors vous aimez bien. les projecteurs sur la scène, hein?

Phil: Je suis un chercheur d'attention. Tu devrais le savoir maintenant, Vitaly.

Vitaly: Oh, en fait, j'ai toujours pensé que tu étais une personne très humble et gentille et gentille, apparemment

Phil: C'est un acte, c'est un acte.

Vitaly: D'accord, c'est bon. Phil, nous nous reverrons dans quelques-uns, oh, en fait, demain.

Phil: Je te vois bientôt pour un autre événement, mais sinon, on se revoit en juillet, les neuvième et dixième. .

Vitaly: [inaudible 00:16:52] Alors dans cet esprit, merci Phil et merci. Au revoir tout le monde.

Phil: À bientôt.

C'est une conclusion

Nous sommes impatients d'accueillir Phil à SmashingConf Toronto 2019 avec un session en direct sur JAMstack. Nous aimerions vous y voir également!

Merci de nous faire savoir si cette série d’interviews vous est utile et avec qui vous aimeriez que nous interviewions, ou quels sujets vous aimeriez que nous couvrions et nous J'y arriverai!

(ra, il)