Dans un article précédent nous avons rencontré Hyperapp, une petite bibliothèque qui peut être utilisée pour créer des applications Web dynamiques à une seule page, de la même manière que React ou Vue

. Je vais changer les choses d'un cran. Nous allons créer l'application localement (nous travaillions auparavant sur CodePen), apprendre à la regrouper en utilisant Parcel (un bundler de modules similaire à webpack ou Rollup) et le déployer sur le web en utilisant Pages GitHub .

Ne vous inquiétez pas si vous n'avez pas terminé le projet à partir du premier message. Tout le code est fourni ici (bien que je ne vais pas entrer dans le détail expliquant ce qu'il fait) et les principes décrits peuvent être appliqués à la plupart des autres projets JavaScript.

Si vous voulez voir ce que nous allons finir avec, vous pouvez voir le projet fini ici ou télécharger le code de notre repo GitHub .

Configuration de base

Pour suivre, vous devez avoir les deux Node.js et npm installés (ils sont livrés ensemble). Je vous recommande d'utiliser un gestionnaire de versions tel que nvm pour gérer votre installation de nœud ( voici comment ), et si vous souhaitez obtenir de l'aide pour vous familiariser avec npm, consultez notre tutoriel npm pour les débutants .

Nous allons utiliser les commandes du terminal pour créer des fichiers et des dossiers, mais n'hésitez pas à le faire en pointant et en cliquant dessus si c'est votre truc.

Pour commencer, créez un nouveau dossier appelé hyperliste :

 mkdir hyperliste

Passez maintenant à ce répertoire et initialisez un nouveau projet en utilisant npm:

 cd hyperlien /
npm init

Cela vous demandera de répondre à quelques questions sur l'application. Il suffit d'appuyer sur pour entrer pour accepter la valeur par défaut, mais n'hésitez pas à ajouter votre nom en tant qu'auteur et à ajouter une description de l'application.

Cela devrait créer un fichier appelé package.json dans le répertoire hyperliste qui ressemble à ceci:

 {
  "nom": "hyperliste",
  "version": "1.0.0",
  "description": "Une liste de choses à faire avec Hyperapp",
  "main": "http://www.sitepoint.com/index.js",
  "scripts": {
    "test": "echo " Erreur: aucun test spécifié  "&& exit 1"
  },
  "auteur": "DAZ",
  "licence": "MIT"
}

Maintenant, nous devons installer la bibliothèque Hyperapp. Ceci est fait en utilisant npm avec le drapeau - save ce qui signifie que le fichier package.json sera mis à jour pour l'inclure en tant que dépendance:

 npm install - enregistrer hyperapp

Cela pourrait donner des avertissements sur le fait de ne pas avoir de champ de dépôt. Ne vous inquiétez pas à ce sujet, car nous allons le réparer plus tard. Il doit mettre à jour le fichier package.json pour inclure l'entrée suivante (il peut y avoir une légère différence dans le numéro de version):

 "dependencies": {
  "hyperapp": "^ 1.2.5"
}

Il créera également un répertoire appelé node_modules où sont stockés tous les fichiers Hyperapp, ainsi qu'un fichier appelé package-lock.json . Ceci est utilisé pour garder une trace de l'arbre de dépendances pour tous les paquets qui ont été installés en utilisant npm.

Maintenant nous sommes prêts à commencer à créer l'application!

Structure des dossiers

C'est une convention commune de mettre tout de votre code source dans un dossier appelé src . Dans ce dossier, nous allons mettre tous nos fichiers JavaScript dans un répertoire appelé js . Créons les deux maintenant:

 mkdir -p src / js

Dans le post précédent nous avons appris que les applications sont construites dans Hyperapp en utilisant trois parties principales: l'état, les actions et la vue. Dans l'intérêt de l'organisation de code, nous allons placer le code de chaque partie dans un fichier séparé, nous devons donc créer ces fichiers dans le répertoire js :

 cd src / js
appuyez sur state.js actions.js view.js

Ne vous inquiétez pas, ils sont tous vides. Nous allons ajouter le code bientôt!

Enfin, nous retournerons dans le répertoire src et créerons nos fichiers "point d'entrée". Ce sont les fichiers qui seront liés à tous les autres. Le premier est index.html qui contiendra du HTML de base, et l'autre est index.js qui liera à tous nos autres fichiers JavaScript et à nos fichiers SCSS: [19659009] cd ..
touchez index.html index.js

Maintenant que notre structure de dossiers est en place, nous pouvons commencer à ajouter du code et à câbler tous les fichiers ensemble.

Un peu de HTML de base

Nous allons commencer par ajouter du code HTML de base au fichier index.html . Hyperapp prend soin de créer le HTML et peut le rendre directement dans la balise . Cela signifie que nous n'avons qu'à configurer les méta-informations contenues dans la balise . À l'exception de la valeur de la balise              

Il est maintenant temps d'ajouter du code JavaScript

Modules ES6

Les modules JavaScript natifs ont été introduits dans ES6 (alias ES2015). Malheureusement, les navigateurs ont été lents à adopter nativement l'utilisation des modules ES6, bien que commencent maintenant à s'améliorer . Heureusement, nous pouvons toujours les utiliser pour organiser notre code, et Parcel va trier les assembler tous ensemble.

Commençons par ajouter le code de l'état initial dans le fichier state.js :

 ] const state = {
  articles: [],
  contribution: '',
  espace réservé: 'Faire une liste ..'
}

état par défaut d'exportation;

C'est la même chose que l'objet que nous avons utilisé dans l'article précédent mais avec la déclaration d'exportation à la fin. Cela rendra l'objet disponible pour tout autre fichier qui l'importe. En en faisant l'exportation par défaut, nous n'avons pas à le nommer explicitement quand nous l'importons plus tard.

Ensuite, nous ajouterons les actions à actions.js :

 const actions = {
  ajouter: () => état => ({
    contribution: '',
    éléments: state.items.concat ({
      valeur: state.input,
      complété: faux,
      id: Date.now ()
    })
  }),
  entrée: ({valeur}) => ({entrée: valeur}),
  bascule: id => état => ({
    éléments: state.items.map (item => (
      id === item.id? Object.assign ({}, item, {completed:! Item.completed}): item
    ))
  }),
  destroy: id => état => ({
    éléments: state.items.filter (item => item.id! == id)
  }),
  clearAllCompleted: ({items}) => ({
    items: items.filter (item =>! item.completed)
  })
}

exporter les actions par défaut;

Encore une fois, c'est la même chose que l'objet que nous avons utilisé dans l'article précédent, avec l'ajout de la déclaration d'exportation à la fin.

Enfin, nous allons ajouter le code de vue à view.js :

 import {h} à partir de 'hyperapp'

const AddItem = ({ajouter, entrée, valeur, espace réservé}) => (
  

      (e.keyCode === 13? Add (): null)}
      oninput = {e => input ({value: e.target.value})}
      valeur = {valeur}
      espace réservé = {espace réservé}
    />
     + 
  
);

const ListItem = ({valeur, id, complété, bascule, détruire}) => (
  
 bascule (id)}>
    {valeur}  destroy (id)}> x 
  
);

const view = (état, actions) => (
  

    
 Hyper  Liste 
    
    

       {state.items.map (item => (
        
      ))}
    
      actions.clearAllCompleted ({items: state.items})}>
      Effacer les éléments terminés
    
  
 s
)

exporter la vue par défaut;

Tout d'abord, ce fichier utilise la déclaration import pour importer le module h de la bibliothèque Hyperapp que nous avons installée en utilisant npm plus tôt. C'est la fonction que Hyperapp utilise pour créer les nœuds DOM virtuels qui composent la vue.

Ce fichier contient deux composants: AddItem et ListItem . Ce ne sont que des fonctions qui renvoient du code JSX et sont utilisées pour abstraire différentes parties de la vue dans des blocs de construction distincts. Si vous constatez que vous utilisez un grand nombre de composants, il peut être utile de les déplacer dans un fichier components.js distinct, puis de les importer dans le fichier view.js .

Notez que seule la fonction view est exportée à la fin du fichier. Cela signifie que seule cette fonction peut être importée par d'autres fichiers, plutôt que par les composants séparés.

Maintenant nous avons ajouté tout notre code JavaScript, nous avons juste besoin de tout assembler dans l'index . ] fichier. Ceci est fait en utilisant la directive import . Ajoutez le code suivant à index.js :

 import {app} à partir de 'hyperapp'

importer l'état à partir de './js/state.js'
importer des actions à partir de './js/actions.js'
importer la vue à partir de './js/view.js'

const main = app (état, actions, vue, document.body);

Cela importe la fonction app de la bibliothèque Hyperapp, puis importe les trois fichiers JavaScript que nous venons de créer. L'objet ou la fonction qui a été exporté de chacun de ces fichiers est affecté aux variables état actions et vue respectivement, de sorte qu'ils peuvent être référencés dans ce fichier

La dernière ligne de code appelle la fonction app qui démarre l'application en cours d'exécution. Il utilise chacune des variables créées à partir de nos fichiers importés comme les trois premiers arguments. Le dernier argument est l'élément HTML où l'application sera rendue - ce qui, par convention, est document.body .

Ajouter un style

Avant de continuer à construire notre application, nous devrions donnez-lui du style. Allons dans le répertoire src et créons un dossier pour notre SCSS:

 mkdir src / scss

Nous allons maintenant créer les deux fichiers qui contiendront le code SCSS que nous avons utilisé dans la partie 1:

 cd src / scss
touchez index.scss _settings.scss

Nous utilisons un fichier appelé _settings.scss pour stocker toutes les variables Sass pour les différentes polices et couleurs que notre application utilisera. Cela les rend plus faciles à trouver si vous décidez de mettre à jour l'une de ces valeurs à l'avenir. Ouvrez le fichier _settings.scss et ajoutez le code suivant:

 // polices
@import url ("https://fonts.googleapis.com/css?family=Racing+Sans+One");
$ base-fonts: Helvetica Neue, sans-serif;
$ heading-font: Racing Sans One, sans-serif;

// couleurs
$ primary-color: # 00caff;
$ secondary-color: hotpink;
$ bg-color: # 222;

Le CSS spécifique à l'application va dans index.scss mais nous devons nous assurer que nous importons le fichier _settings.scss au début, car les variables qu'il contient sont référencées plus tard dans le fichier. Ouvrez index.scss et ajoutez le code suivant:

 @import 'settings';

* {
  marge: 0;
  rembourrage: 0;
  taille de boîte: border-box;
}

corps {
  rembourrage-dessus: 50px;
  arrière-plan: $ bg-color;
  couleur: $ primary-color;
  affichage: flex;
  hauteur: 100vh;
  justify-content: centre;
  font-family: $ base-polices;
}

h1 {
  couleur: $ secondary-color;
  & strong {color: $ couleur primaire; }
  font-family: $ heading-font;
  font-weight: 100;
  taille de police: 4.2em;
  text-align: centre;
}

a {color: $ primaire-couleur; }

.fléchir{
  affichage: flex;
  align-items: top;
  marge: 20px 0;

  contribution {
    bordure: 1px solide $ couleur primaire;
    background-color: $ couleur primaire;
    taille de police: 1.5em;
    font-weight: 200;
    largeur: 50vw;
    hauteur: 62px;
    rembourrage: 15px 20px;
    marge: 0;
    contour: 0;

    & :: - webkit-input-placeholder {couleur: $ bg-color; }
    & :: - moz-placeholder {couleur: $ bg-color; }
    & :: - ms-input-placeholder {couleur: $ bg-color; }
    &: hover, &: focus, &: actif {background: $ primary-color; }
  }

  bouton {
    hauteur: 62px;
    taille de police: 1.8em;
    rembourrage: 5px 15px;
    marge: 0 3px;
  }
}

ul # liste {
  affichage: flex;
  flex-direction: colonne;
  rembourrage: 0;
  marge: 1.2em;
  largeur: 50vw;
  li {
    taille de police: 1.8em;
    alignement vertical: bas;
    &.terminé{
      couleur: $ secondary-color;
      text-decoration: interligne;
      bouton{
        couleur: $ primary-color;
      }
    }
    bouton {
      arrière-plan: aucun;
      border: aucun;
      couleur: $ secondary-color;
      contour: aucun;
      taille de police: 0.8em;
      font-weight: 50;
      rembourrage-dessus: 0.3em;
      marge gauche: 5px;
    }
  }
}

bouton {
  arrière-plan: $ bg-color;
  border-radius: 0px;
  bordure: 1px solide $ couleur primaire;
  couleur: $ primary-color;
  font-weight: 100;
  contour: aucun;
  rembourrage: 5px;
  marge: 0;

  &: hover, &: désactivé {
    arrière-plan: $ primary-color;
    couleur: # 111;
  }

  &: active {outline: 2px solide $ couleur primaire; }
  &: focus {border: 1px solide $ couleur primaire; }
}

Si votre SCSS commence à devenir plus compliqué, vous pouvez le décomposer en fichiers séparés et ensuite les importer tous dans index.scss .

Maintenant, nous devons lier ces fichiers à notre application. Nous ne plaçons pas le lien dans notre fichier HTML, comme vous le faites habituellement avec CSS. Au lieu de cela, nous le plaçons dans le fichier index.js . C'est parce que nous utilisons SCSS et qu'il doit être pré-traité en CSS. Parcel fera cela pour nous et triera aussi le lien entre le fichier HTML et le fichier CSS standard qu'il crée

Pour importer les fichiers SCSS, il suffit de mettre à jour notre fichier index.js pour inclure la ligne suivante:

 import './scss/index.scss'

Maintenant que tout notre code est terminé, il est temps de commencer à travailler sur le processus de construction!

Babel

Babel transporte le code JavaScript moderne en un code que la plupart des navigateurs peuvent utiliser. Il faudra aussi réécrire le code JSX en JavaScript pur.

Pour pouvoir utiliser Babel avec les transformations JSX, nous devons l'installer avec le plugin JSX:

 npm install --save babel- plugin-transformer-réagir-jsx babel-preset-env

Nous devons également créer un fichier .babel.rc qui est utilisé pour indiquer à Babel d'utiliser la fonction h d'Hyperapp lors du traitement de JSX. Le code suivant va créer le fichier avec les informations pertinentes:

 echo '{"plugins": [["transform-react-jsx", { "pragma": "h" }]]}'> .babelrc

Notez qu'il s'agit d'un fichier caché vous ne pourrez peut-être pas le voir après sa création!

Colis

Malheureusement, notre code ne fonctionnera pas dans tous les navigateurs tel qu'il est. Nous devons utiliser un processus de construction pour transmettre notre code ES6 + à ES5 et fusionner tous nos fichiers JS en un seul fichier. Utilisons Colis pour faire cela.

Colis est un bundler de modules, similaire à webpack ou Rollup, qui promet une configuration zéro et est incroyablement rapide. Il nous permet d'écrire du JavaScript moderne dans des fichiers séparés, puis de les regrouper en un seul fichier JavaScript minifié que la plupart des navigateurs pourront utiliser. Il prend également en charge plusieurs fichiers CSS, SCSS et PostCSS prêts à l'emploi.

Tout d'abord, installons Parcel:

 npm install --save parcel-bundler

Parcel est livré avec son propre serveur intégré. Cela signifie que vous pouvez continuer à développer et apporter des modifications à l'application et Colis le construira en arrière-plan, de sorte que toutes les modifications soient affichées instantanément!

Pour démarrer le serveur, entrez la commande suivante:

 ./ node_modules /.bin/parcel src / index.html --out-dir docs

Ceci spécifie que le point d'entrée est le fichier index.html . C'est tout ce que Parcel doit savoir, car il suivra le lien vers index.js qui se trouve dans ce fichier, puis suivra les directives import dans ce fichier.

spécifie qu'un dossier appelé docs doit être utilisé pour afficher tous les fichiers statiques. Par défaut, cela s'appelle habituellement dist - mais, comme vous le verrez plus tard, nous avons besoin qu'il soit appelé docs pour que nous puissions l'intégrer aux pages GitHub.

Vous devriez également voir un message indiquant que l'application est en cours de construction dans la fenêtre du terminal. Vous pourriez même remarquer que Colis installe le module npm node-sass pour vous car il remarque automatiquement que nous avons utilisé des fichiers SCSS, mais aussi que nous n'avons pas node-sass installée. Comment cool?

Après quelques secondes, vous devriez voir un message semblable au suivant:

 Serveur fonctionnant à http: // localhost: 1234
✨ Construit en 3.15s.

Le serveur est en cours d'exécution. Si vous ouvrez votre navigateur et accédez à http: // localhost: 1234 vous pourrez voir l'application s'exécuter. Cela se mettra à jour à la volée, de sorte que toutes les modifications que vous apportez dans votre code seront immédiatement répercutées sur la page (ou après une courte pause pour reconstruire le code). Il charge aussi les modules, donc il installe automatiquement tous les modules npm nécessaires, comme avec "node-sass". Génial!

Une fois que vous êtes satisfait de l'apparence du site, il est temps de construire le site statique. Tout d'abord, arrêtez le serveur en maintenant enfoncées Ctrl et c ensemble. Exécutez ensuite la commande suivante dans le terminal:

 ./ node_modules / .bin / parcel build src / index.html --out-dir docs --public-url ./

Cela va générer les fichiers statiques et les placer dans le dossier docs .

Si vous prenez un pic dans le dossier docs vous devriez trouver un fichier appelé ] index.html . Ouvrez-le dans votre navigateur et vous devriez voir le site en cours d'exécution, en utilisant uniquement les fichiers statiques dans le dossier docs . Parcel a regroupé tout le code pertinent et a utilisé Babel pour transposer notre JavaScript moderne en un seul fichier JavaScript et a utilisé node-sass pour pré-traiter nos fichiers SCSS dans un seul fichier CSS. Ouvrez-les et vous pouvez voir que le code a également été minimisé!

npm Scripts

npm possède une fonctionnalité utile appelée scripts qui vous permet d'exécuter des morceaux de code spécifiques avec une seule commande. Nous pouvons l'utiliser pour créer un couple de scripts qui accélèreront l'utilisation de Parcel

Ajoutez ce qui suit à la section "scripts" du fichier package.json :

 "start" : "parcel src / index.html --out-dir docs",
"build": "parcel build src / index.html --out-dir docs --public-url ./"

Maintenant nous pouvons simplement lancer les commandes suivantes pour démarrer le serveur:

 npm start

Et la commande suivante lancera le processus de construction:

 npm run build

Si vous n'avez jamais utilisé de scripts npm, ou si vous souhaitez un rafraîchissement, vous pouvez consulter notre tutoriel pour débutants sur le sujet .

Déploiement sur des pages GitHub

GitHub est un excellent endroit pour héberger votre code, et il a également une grande fonctionnalité appelée GitHub Pages qui vous permet d'héberger des sites statiques sur GitHub. Pour commencer, vous devez vous assurer que vous avez un compte GitHub et que vous avez git installé sur votre machine locale.

Pour vous assurer que nous ne commettons pas de fichiers inutiles, ajoutons un Fichier gitignore vers le répertoire hyperliste :

 appuyez sur .gitignore

Comme son nom l'indique, ce fichier indique à git quels fichiers (ou patterns) il devrait ignorer. Il est généralement utilisé pour éviter de valider des fichiers qui ne sont pas utiles aux autres collaborateurs (comme les fichiers temporaires créés par les IDE, etc.).

Je vous recommande d'ajouter les éléments suivants pour vous assurer qu'ils ne sont pas suivis par git ( rappelez-vous que gitignore est un fichier caché!):

 # Logs
journaux
*.bûche
npm-debug.log *

# Données d'exécution
pids
* .pid
*.la graine

# Répertoire de dépendances
node_modules

# Répertoire de cache npm facultatif
.npm

# Historique REPL optionnel
.node_repl_history

# Cache pour Parcel
.cache

# Des trucs de pomme
.DS_Store

Nous sommes maintenant prêts à initialiser git dans le répertoire hyperliste :

 git init

Ensuite, nous ajoutons tous les fichiers que nous avons créés jusqu'à présent:

 git add.

Puis nous validons ces fichiers au contrôle de version:

 git commit -m 'Initial Commit'

Maintenant que nos fichiers importants sont suivis par git, nous devons créer un dépôt distant sur GitHub. Connectez-vous simplement à votre compte et cliquez sur le bouton Nouveau référentiel et suivez les instructions. Si vous êtes bloqué, vous pouvez consulter la documentation de GitHub ici: Créer un Repo .

Après avoir fait cela, vous devrez ajouter l'URL de votre dépôt GitHub distant sur votre machine locale:

 git distant ajouter l'origine https://github.com//.git

Veillez à remplacer et par les valeurs correctes. Si vous voulez vérifier que vous avez tout fait correctement, vous pouvez utiliser git remote -v .

Et enfin, nous devons pousser notre code vers GitHub:

 git push maître d'origine

Cela va pousser tout votre code dans votre dépôt GitHub, y compris les fichiers statiques dans le répertoire docs . Les pages GitHub peuvent maintenant être configurées pour utiliser les fichiers de ce répertoire. Pour ce faire, connectez-vous au dépôt sur GitHub et allez à la section Settings du dépôt et descendez jusqu'à la section GitHub Pages . Ensuite, sous Source sélectionnez l'option "master branch / docs folder", comme on peut le voir dans la capture d'écran ci-dessous:

Cela devrait signifier que vous pouvez maintenant accéder à l'application à l'adresse suivante: https://nomutilisateur.github.io/repo-name.

Par exemple, vous pouvez voir la nôtre at sitepoint-editors.github.io/hyperlist/ .

Workflow

Dorénavant, si vous apportez des modifications à votre application, vous pouvez suivre le workflow suivant:

1. start le serveur de développement: npm start
2. apporte des modifications
3. vérifie que les modifications fonctionnent sur le serveur de développement
4. ferme le serveur en maintenant Ctrl + c
5. reconstruire l'application: npm run build
6. mettre en scène les changements pour commit: git add.
7. valider tous les changements à git: git commit -m 'dernière mise à jour '
8. poussez les changements à GitHub: git push master d'origine .

Nous pouvons accélérer ce processus en créant un script npm pour prendre soin des trois dernières étapes en une fois. Ajoutez l'élément suivant à l'entrée "scripts" dans package.json :

 "deploy": "npm run build && git add. && git commit -a -m 'dernière génération' && git push origine maîtriser"

Maintenant, tout ce que vous devez faire si vous voulez déployer votre code après avoir apporté des modifications est d'exécuter la commande suivante:

 npm run deploy

C'est tout, les gars!

Et cela nous amène à la fin de ce tutoriel. J'ai utilisé l'application que nous avons créée dans la partie 1 de ce tutoriel, mais les principes restent les mêmes pour la plupart des projets JavaScript. J'espère avoir démontré à quel point il est facile d'utiliser Parcel pour créer un site JS statique et le déployer automatiquement sur les pages GitHub avec une seule commande!

DAZ est l'auteur de Jump Start Sinatra un Un petit livre qui vous aidera à vous familiariser avec Sinatra pendant un week-end. Il utilise Sinatra depuis 2009. DAZ vit à Manchester, au Royaume-Uni, où il enseigne les mathématiques et joue au water-polo.