Conception et construction d'une application Web progressive sans cadre (première partie)

Comment une application Web fonctionne-t-elle réellement? Je ne parle pas du point de vue de l’utilisateur final. Je veux dire dans le sens technique. Comment fonctionne une application Web? Qu'est-ce qui lance les choses? Sans code passe-partout, quelle est la bonne façon de structurer une application? En particulier une application côté client où toute la logique est exécutée sur le périphérique de l'utilisateur final. Comment les données sont-elles gérées et manipulées? Comment faites-vous réagir à l’évolution des données dans l’interface?

C’est le genre de questions simples à contourner ou à ignorer complètement avec un cadre. Les développeurs utilisent quelque chose comme React, Vue, Ember ou Angular, suivent la documentation pour se mettre en route et s'en aller. Ces problèmes sont traités dans la boîte à malice du framework.

C’est peut-être exactement ce que vous voulez. On peut dire que c’est la chose intelligente à faire si vous voulez construire quelque chose à un niveau professionnel. Cependant, avec la magie abstraite, vous ne pouvez jamais apprendre comment les tours sont réellement exécutés.

Vous ne voulez pas savoir comment les tours sont faites?

Je l’ai fait. J'ai donc décidé d'essayer de créer une application basique côté client, sans-framework, pour comprendre ces problèmes par moi-même.

Mais, je suis un peu en avance sur moi-même; un peu de contexte d'abord.

Avant de commencer ce voyage, je me considérais très compétent en HTML et CSS, mais pas en JavaScript. Comme je sentais que j'avais résolu à ma satisfaction les plus grandes questions que j'avais concernant CSS le prochain défi que je me posais était de comprendre un langage de programmation.

Le fait était que j'étais relativement débutant avec JavaScript. Et, mis à part le piratage du code PHP de WordPress, je n’avais aucune connaissance ni aucune formation dans un autre langage de programmation.

Permettez-moi de qualifier cette assertion de «niveau débutant». Bien sûr, je pouvais faire en sorte que l'interactivité fonctionne sur une page. Basculer les classes, créer des noeuds DOM, les ajouter et les déplacer, etc. Je n’étais pas confiant de construire quoi que ce soit approchant d’une application. Je ne savais pas comment définir un ensemble de données dans JavaScipt, et encore moins le manipuler avec des fonctions.

Je ne comprenais pas les «modèles de conception» de JavaScript, approches bien établies pour la résolution de problèmes de code souvent rencontrés. Je ne savais certainement pas comment aborder les décisions fondamentales en matière de conception d’applications.

Avez-vous déjà joué à “Top Trumps”? Dans l’édition destinée aux développeurs Web, ma carte ressemblerait à quelque chose comme ceci (sur 100):

• CSS: 95
• Copier et coller: 90
• Hairline: 4
• HTML: 90 [19659014] JavaSript: 13

En plus de vouloir me mettre au défi sur le plan technique, je manquais également de règles de conception.

En codant presque exclusivement pour les conceptions des autres peuples au cours de la dernière décennie, mes compétences en conception visuelle n'avaient pas été dépassées. aucun défi réel depuis la fin des années 2000. En réfléchissant à cela et à mes faibles compétences en JavaScript, j'ai développé un sentiment croissant d'insuffisance professionnelle.

Un défi personnel a pris forme dans mon esprit: concevoir et créer une application Web JavaScript côté client

On Learning

Il n'y a jamais eu autant de ressources formidables pour apprendre l'informatique. langues. En particulier JavaScript. Cependant, il m'a fallu un certain temps pour trouver des ressources expliquant les choses d'une manière qui cliquait. «Vous ne connaissez pas JS» de Kyle Simpson et «Eloquent JavaScript» de Marijn Haverbeke ont été d’une grande aide.

Si vous commencez à apprendre le JavaScript, vous devrez sûrement trouver vos propres gourous. personnes dont la méthode d’explication vous convient.

La première chose que j’ai apprise, c’est qu’il est inutile d’essayer d’apprendre avec un enseignant / une ressource qui n’explique pas les choses d’une manière que vous comprenez. Certaines personnes regardent des exemples de fonctions avec foo et bar dans et instantanément la signification. Je ne suis pas une de ces personnes. Si vous ne le faites pas non plus, ne supposez pas que les langages de programmation ne sont pas faits pour vous. Essayez simplement une autre ressource et continuez d’appliquer les compétences que vous apprenez.

Vous n’apprécierez pas non plus que vous profitiez d’une sorte de moment d’Eureka où tout «clique» soudainement; comme l’équivalent codant du coup de foudre. Il est plus probable que pour être confiant, il vous faudra beaucoup de persévérance et une mise en oeuvre considérable de vos apprentissages.

Dès que vous vous sentirez un peu compétent, essayer de l'appliquer vous en apprendra encore plus.

ressources que j’ai trouvées utiles en cours de route:

Bien, c’est à peu près tout ce que vous avez besoin de savoir sur les raisons pour lesquelles je suis arrivé à ce point. Pourquoi ne pas utiliser un cadre?

Pourquoi ne pas réagir, Ember, Angular, Vue Et Al

Bien que la réponse ait été évoquée au début, je pense que la raison pour laquelle un cadre a été

Il existe une abondance de cadres JavaScript de haute qualité, bien pris en charge. Chacune est spécialement conçue pour la création d'applications Web côté client. Exactement le genre de chose que je cherchais à construire. Je vous pardonne de vous interroger sur l’évidence: comme, euh, pourquoi ne pas en utiliser une?

Voici ma position à ce sujet. Lorsque vous apprenez à utiliser une abstraction, c’est principalement ce que vous apprenez – l’abstraction. Je voulais apprendre la chose, pas son abstraction.

Je me souviens d'avoir appris du jQuery à l'époque. Tandis que la belle API me permettait de rendre les manipulations DOM plus faciles que jamais, je devenais impuissant sans elle. Je ne pouvais même pas changer de classe sur un élément sans avoir besoin de jQuery. Donnez-moi une certaine interactivité de base sur une page sans jQuery, et je suis tombé sur mon éditeur comme un Samson craintif.

Plus récemment, alors que j’essayais d’améliorer ma compréhension de JavaScript, j’essayais de me faire comprendre. autour de Vue et réagis un peu. Mais en fin de compte, je n’étais jamais sûr de la fin de JavaScript standard et du début de React ou de Vue. Mon opinion est que ces abstractions sont bien plus utiles lorsque vous comprenez ce qu’elles font pour vous.

Par conséquent, si j’apprisais quelque chose, je voulais comprendre les parties fondamentales du langage. De cette façon, j'avais des compétences transférables. Je voulais conserver quelque chose lorsque le cadre actuel du mois avait été mis de côté pour la prochaine "nouvelle nouveauté".

Nous savons maintenant pourquoi cette application a été créée et comment, non plus, de quelle manière elle serait créée.

Passons à ce que cela allait devenir.

Une idée d'application

J'avais besoin d'une idée d'application. Rien de trop ambitieux; Je n'avais aucune illusion de créer une entreprise ou d'apparaître sur Dragon's Den – mon objectif principal était d'apprendre le JavaScript et les bases de l'application.

L'application devait être quelque chose que j'avais une chance de réussir techniquement et de faire. un travail de conception à peu près décent.

À l'heure de la tangente

En dehors du travail, j'organise et joue au football en salle dès que je peux. En tant qu’organisateur, c’est pénible de noter mentalement qui m’a envoyé un message pour dire qu’ils jouent et qui ne l’a pas fait. Il faut généralement 10 personnes pour un jeu, 8 au même moment. Il y a une liste d'environ 20 personnes qui peuvent ou non être capables de jouer à chaque jeu.

L'idée de l'application que j'ai choisie est celle qui m'a permis de choisir des joueurs dans une liste, ce qui m'a donné le nombre de joueurs qui ont confirmé leur capacité. Le jeu.

En y réfléchissant plus, j’ai le sentiment d’élargir un peu plus le champ d’application pour pouvoir l’organiser dans le cadre d’une simple activité en équipe.

Certes, j’avais à peine imaginé Google Earth. Cependant, tous les défis étaient essentiels: conception, gestion des données, interactivité, stockage des données, organisation du code.

En ce qui concerne la conception, je ne me préoccuperais pas d’autre chose que d’une version qui pourrait fonctionner correctement. une fenêtre de téléphone. Je limiterais les difficultés de conception à la résolution des problèmes uniquement sur de petits écrans.

L’idée de base s’appuyait certainement sur des applications de style «à faire», pour lesquelles il existait une foule d’exemples existants à rechercher pour s’inspirer tout en ayant juste assez de différence pour fournir des défis uniques en matière de conception et de codage.

Fonctionnalités recherchées

La liste initiale de fonctionnalités que je souhaitais concevoir et coder ressemblait à ceci:

• Une zone de saisie permettant d'ajouter des personnes à la liste.
• La possibilité de définir chaque personne pour "entrer" ou "sortir";
• Un outil qui divise les personnes en équipes, par défaut de 2 équipes;
• La possibilité de supprimer une personne de la liste; 19659014] Quelques interfaces pour les 'outils'. Outre le fractionnement, les outils disponibles devraient inclure la possibilité de télécharger les données saisies sous forme de fichier, de télécharger des données précédemment sauvegardées et de supprimer tous les lecteurs en une seule fois
• . L’application doit indiquer le nombre actuel de personnes en 'In';
• S'il n'y a aucune personne sélectionnée pour un jeu, le séparateur d'équipe doit être masqué;
• Mode payant. Une bascule dans les paramètres qui permet aux utilisateurs "in" d'avoir une bascule supplémentaire pour montrer s'ils ont payé ou non.

Au départ, c'est ce que j'ai considéré comme les caractéristiques d'un produit minimum viable.

Design [19659039] Les dessins ont commencé sur des bouts de papier. C'était éclairant (lire: écrasant) de découvrir combien d'idées incroyables dans ma tête se révélaient ridicules lorsqu'elles étaient soumises au moindre examen minutieux que permettait un dessin au crayon.

Beaucoup d'idées furent donc rapidement écartées, mais le revers de la médaille était que, en esquissant quelques idées, cela aboutissait invariablement à d'autres idées que je n'aurais jamais envisagées autrement.

Maintenant, les concepteurs qui liront ceci ressembleront probablement à «Duh, bien sûr», mais ce fut une véritable révélation. pour moi. Les développeurs sont habitués à voir les conceptions des phases ultérieures, rarement toutes les étapes abandonnées le long du chemin.

Une fois heureux avec un dessin au crayon, j'essayais de le recréer dans le package de conception, Sketch. . Juste au moment où les idées tombaient au stade du papier et du crayon, un nombre égal d’échecs n’arrivaient pas à passer au stade de fidélité suivant de Sketch. Ceux qui semblaient tenir pour artboards dans Sketch ont ensuite été choisis comme candidats à coder.

J’ai découvert à mon tour que lorsque ces candidats étaient du code intégré, un pourcentage ne fonctionnait pas non plus pour des raisons diverses. Chaque étape de la fidélité exposait de nouveaux défis pour que la conception réussisse ou échoue. Et un échec me ramènerait littéralement et figurativement à la planche à dessin.

En tant que tel, finalement, le design que j'ai fini par être assez différent de celui que j'avais à l'origine dans Sketch. Voici les premières maquettes Sketch:

Même à ce moment-là, je n'étais pas dans le délire; c'était une conception de base. Cependant, à ce stade, j’avais quelque chose qui, j’étais assez confiant, pouvait fonctionner et j’étais impatient d’essayer de le construire.

Spécifications techniques

Avec quelques exigences initiales en termes de fonctionnalités et une direction visuelle de base, il était temps de Considérez ce qui devrait être réalisé avec le code.

Bien que la sagesse reçue dicte que la manière de créer des applications pour les appareils iOS ou Android est avec du code natif, nous avons déjà établi que mon intention était de créer l'application avec JavaScript.

Je souhaitais également que l'application réponde à toutes les cases nécessaires pour être qualifiée de Progressive Web Application ou PWA, comme on l'appelle plus communément.

À tout hasard, vous ne savez pas ce qu'est un progressif. L'application Web est, voici le «pitch pitch». Sur le plan conceptuel, imaginez une application Web standard mais répondant à certains critères. Le respect de cet ensemble d’exigences particulières signifie qu’un dispositif de prise en charge (think mobile) accorde des privilèges spéciaux à l’application Web, ce qui rend l’application Web supérieure à la somme de ses parties.

Sur Android, en particulier, elle peut être proche de impossible de distinguer un PWA, construit avec seulement HTML, CSS et JavaScript, d'une application construite avec du code natif.

Voici la liste de contrôle Google d'exigences pour qu'une application soit considérée comme une application Web progressive:

• Le site est desservi par HTTPS;
• Les pages sont réactives sur les tablettes et les appareils mobiles;
• Toutes les URL de l'application se chargent en mode hors connexion;
• Les métadonnées fournies pour Ajouter à l'écran d'accueil;
• Premier chargement rapide, même sur
• Le site fonctionne sur plusieurs navigateurs;
• Les transitions de page ne semblent pas bloquer sur le réseau;
• Chaque page a une URL.

Désormais, si vous voulez vraiment être le animal de compagnie du professeur et avoir votre demande considérée comme un 'Exemp lary Progressive Web App ', elle devrait également répondre aux exigences suivantes:

• Le contenu du site est indexé par Google;
• Les métadonnées Schema.org sont fournies le cas échéant;
• Les métadonnées sociales sont fournies le cas échéant;
• Des URL canoniques sont fournies si nécessaire;
• Les pages utilisent l'historique API;
• Le contenu ne saute pas lors du chargement de la page;
• Un appui arrière d'une page de détail conserve la position de défilement de la page de liste précédente;
• Lorsque vous appuyez sur cette touche, les entrées ne sont pas masquées par le clavier à l'écran;
• Le contenu peut être facilement partagé à partir du mode autonome ou en mode plein écran;
• Le site est réactif selon les tailles d'écran de téléphone, de tablette et de bureau;
• Toutes les applications les invites d'installation ne sont pas utilisées de manière excessive;
• L'invite Ajouter à l'écran d'accueil est interceptée;
• Le premier chargement est très rapide, même en 3G;
• Le site utilise la mise en réseau avec cache-first;
• Le site informe l'utilisateur de manière appropriée quand êtes hors ligne;
• Fournissez le contexte à la Utilisateur sur la manière dont les notifications seront utilisées;
• L'interface utilisateur encourageant les utilisateurs à activer les notifications Push ne doit pas être trop agressive;
• Le site assombrit l'écran lorsque la demande d'autorisation est affichée.
• Les notifications push doivent être précises et à temps
• Fournit des commandes pour activer et désactiver les notifications;
• L'utilisateur est connecté à plusieurs appareils via l'API Credential Management;
• L'utilisateur peut facilement payer via l'interface utilisateur native de l'API de demande de paiement.

Crikey! Je ne sais pas pour vous, mais cette deuxième série de tâches semble représenter beaucoup de travail pour une application de base! Il se trouve qu’il ya beaucoup d’articles qui ne correspondent pas à ce que j’avais prévu de toute façon. Malgré cela, je n’ai pas honte de dire que j’ai baissé la visée pour ne réussir que les tests initiaux.

Pour toute une partie des types d’applications, je pense qu’un PWA est une solution plus applicable que l’application native. Là où les jeux et le SaaS ont plus de sens dans un magasin d'applications, les petits utilitaires peuvent vivre plus facilement et avec plus de succès sur le Web en tant qu'applications Web progressives.

Bien que pour éviter de travailler dur, un autre choix fut fait très tôt: essayez de stocker toutes les données de l'application sur le propre appareil de l'utilisateur. De cette façon, il ne serait pas nécessaire de vous connecter avec des services de données et des serveurs et de gérer des connexions et des authentifications. En ce qui concerne mes compétences, déterminer l'authentification et stocker les données des utilisateurs semblaient être certainement plus pénibles que ce que je pouvais mâcher et surcharger pour l'application de la demande!

Technology Choices

Avec une idée assez claire

J'ai très tôt décidé d'utiliser TypeScript, décrit sur son site Web comme “… un sur-ensemble typé de JavaScript. cela compile en clair JavaScript. ”Ce que j'avais vu et lu dans la langue qui m'avait plu, en particulier le fait qu'elle se soit si bien appris à l'analyse statique.

L'analyse statique signifie simplement qu'un programme peut examiner votre code avant de l'exécuter ( par exemple quand il est statique) et soulignez les problèmes. Il ne peut pas nécessairement signaler des problèmes logiques, mais il peut indiquer un code non conforme par rapport à un ensemble de règles.

Tout ce qui pouvait signaler mes erreurs (sûrement nombreuses) au fur et à mesure devait être une bonne chose. , n'est-ce pas?

Si vous n'êtes pas familier avec TypeScript, considérez le code suivant en JavaScript: le code vanille:

 console.log (`$ {count} players`);
laisser compter = 0;

Exécutez ce code et vous obtiendrez une erreur du type:

 ReferenceError: impossible d'accéder à une variable non initialisée.

Pour ceux qui ont même une petite prouesse JavaScript, pour cet exemple élémentaire, ils n'ont pas besoin d'un outil pour leur dire que les choses vont mal se terminer.

Toutefois, si vous écrivez le même code dans TypeScript, cela se produit dans l'éditeur:

Je reçois des commentaires sur mon idiotie avant même de lancer le code! C’est la beauté de l’analyse statique. Ce commentaire ressemblait souvent à ce qu’un développeur plus expérimenté m’attrape les erreurs au fur et à mesure.

TypeScript principalement, comme son nom l’indique, spécifions le «type» attendu pour chaque élément du code. Cela vous empêche de "forcer" par inadvertance un type à un autre. Ou essayez d’exécuter une méthode sur une donnée qui n’est pas applicable – une méthode tableau sur un objet par exemple. Ce n’est pas le genre de chose qui entraîne nécessairement une erreur lorsque le code est exécuté, mais cela peut certainement compliquer le suivi des bogues. Grâce à TypeScript, vous obtenez des informations dans l'éditeur avant même d'essayer d'exécuter le code.

TypeScript n'était certainement pas essentiel dans cette aventure de découverte et je n'encouragerais jamais personne à utiliser des outils de cette nature, à moins d'un avantage évident. La mise en place et la configuration des outils peuvent en premier lieu prendre du temps, aussi considérez leur applicabilité avant de plonger.

Le TypeScript offre d’autres avantages, dont nous parlerons dans le prochain article de cette série, mais les capacités d’analyse statique étaient assez seuls pour que je veuille adopter TypeScript.

Les choix que je faisais ont été corrélés. Si je souhaitais créer l’application en tant qu’application Web progressive, j’aurais besoin, dans une certaine mesure, de comprendre les prestataires de services. L'utilisation de TypeScript impliquerait l'introduction d'outils de construction. Comment pourrais-je gérer ces outils? Historiquement, j’utilisais NPM en tant que gestionnaire de paquets, mais qu’en est-il de Yarn? Cela valait-il la peine d'utiliser Yarn? Être axé sur la performance reviendrait à envisager des outils de minification ou de groupement; des outils tels que webpack devenaient de plus en plus populaires et nécessitaient une évaluation.

Résumé

J'avais reconnu la nécessité de se lancer dans cette quête. Mes pouvoirs JavaScript étaient faibles et rien ne gêne les reins autant que de tenter de mettre la théorie en pratique. Décider de créer une application Web avec JavaScript en mode vanille était mon baptême du feu.

J’avais passé un peu de temps à rechercher et à examiner les options permettant de créer cette application et j’avais décidé que faire de cette application une application Web progressive était tout à fait logique. mes compétences et la relative simplicité de l'idée.

J'aurais besoin d'outils de construction, d'un gestionnaire de paquets et, par la suite, de beaucoup de patience.

En fin de compte, la question fondamentale restait la suivante: était-ce quelque chose que je pourrais réellement gérer?

J'espère que vous vous joindrez à moi dans la deuxième partie pour en savoir plus sur les outils de création, les modèles de conception JavaScript et sur la manière de créer quelque chose de plus semblable à une application.

(dm, yk, il)