Phoenix LiveView: quand le code javascript est amusant *

* en raison de son absence

Suite de l'article sur Phoenix Live View . Aujourd'hui, je vais décrire la configuration de base pour un travail confortable avec la technologie et créer une nouvelle application.

Installer l'élixir et le phénix

Nous avons besoin d' élixir (le processus d'installation est par référence). Mais sur les fenêtres, il est préférable de mettre un docker ou un vagabond. Je suppose que vous connaissez déjà ces technologies. Nous ignorons les bases de données, il est préférable d'envisager de travailler avec elles dans un autre projet.

Après avoir installé elixir, installez phoenix (lien pour référence à la maison). En fait, nous devons nous assurer que la version nécessaire de l'élixir

elixir -v 

Devrait émettre 1.8.2 comme pertinent pour aujourd'hui. Et commencez l'installation du phénix lui-même

 mix archive.install hex phx_new 1.4.6 

1.4.6 est pertinent pour aujourd'hui, vous pouvez voir la version actuelle ici. Le projet utilisera webpack, il sort de la boîte à phoenix et nous avons donc besoin de nodejs .

IDE

Choisir un IDE est un casse-tête, mais pour moi, j'ai décidé de développer sur la rubymine, il y a un excellent plugin appelé elixir. Le jeu de couleurs détachable devient clair au fil du temps et je ne veux plus revenir à vscode, mais je tiens à dire que la prise en charge des élixirs est également très bien implémentée via le plug-in correspondant, je le recommande aux amateurs de code.

Création de projet

Créez un dossier pratique pour stocker des projets sur elixir et accédez à la console:

 cd ~/ElixirProjects/ mix help #    mix help phx.new #           mix phx.new fire --no-ecto #   fire           Fetch and install dependencies? [Yn] #   

La compilation prendra du temps

 cd fire mix phx.server 

Si toutes les dépendances ont été installées avec succès et que quelque chose comme [info] Access FireWeb.Endpoint at http://localhost:4000 alors nous allons hardiment sur le navigateur http: // localhost: 4000 . Rechargez la page plusieurs fois et revenez au terminal. Vous y trouverez un journal intéressant, où µs est une microseconde et FireWeb.PageController.index est le nom de la fonction qui a traité votre demande. Ouvrons le code dans l'EDI et continuons.

Comment travailler avec?

Tout le code principal sera dans le dossier lib. Localisez le fichier lib / fire_web / templates / page / index.html.eex, supprimez la deuxième section, enregistrez et revenez au navigateur. Vous n'avez pas besoin de recharger la page, le phénix le fera pour vous. Le moteur de modèle pour insérer du code exécutable avec la sortie du résultat nécessite la saisie de caractères <%= et %> . Au bas du modèle, entrez <%= "Fire man" %> et regardez le résultat dans le navigateur. Pour que le serveur cesse de fonctionner, double-cliquez sur ctrl + c dans la console

Résumé

À ce stade, vous devez disposer d'un environnement prêt à l'emploi pour l'expérimentation. N'hésitez pas à créer d'autres projets. Regardez la différence dans le code du projet si vous le créez sans --no-ecto ou en ajoutant --umbrella (création d'une architecture de microservice). Pour d'autres travaux, vous devrez connaître les types de données de base. Il est conseillé de vous familiariser avec deux sources de leçons en russe et la documentation officielle en anglais. Elixirschool est partiellement traduit en russe et je recommanderais de commencer à apprendre la langue à partir de cette ressource. Si vous voulez vraiment créer une application sur liveview alors voici un article sur lequel nous allons nous appuyer à l'avenir.

Rejoignez la communauté des télégrammes russophones @proelixir et regardez les dernières nouvelles et offres d'emploi sur la chaîne @proelixir_news.