Phoenix LiveView: when javascript code is fun *

* thanks to his absence

Continuing the article about Phoenix Live View . Today I will describe the basic configuration for comfortable work with technology and create a new application.

Install elixir and phoenix

We will need elixir (installation process by reference). But on windows it is better to put either a docker or a vagary. I will assume that you are already aware of these technologies. We ignore databases, work with them is better to consider in another project.

After installing elixir, install phoenix (home reference). In fact, we need to verify the required version of elixir
')

elixir -v 

Should issue 1.8.2 as relevant for today. And run the very installation of the phoenix

 mix archive.install hex phx_new 1.4.6 

1.4.6 is relevant for today, you can view the current version of the link. The project will use a webpack, it goes out of the box in phoenix and therefore we need nodejs .

IDE

Choosing an IDE is a headache, but for myself I decided that I would develop rubymine, there is a great plugin called elixir. The color scheme “tear out the eye” becomes clear over time and I don’t want to return to vscode anymore, but I want to say that elixir support is also very well implemented through the appropriate plug-in , I recommend code for fans.

Creating a project

Create a convenient folder for storing projects on elixir and go to the console:

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

Compilation will take some time.

 cd fire mix phx.server 

If all the dependencies have been successfully installed and you have something like [info] Access FireWeb.Endpoint at http://localhost:4000 then feel free to go to the browser http: // localhost: 4000 . Reload the page several times and return to the terminal. There you will find an interesting log, where µs is a microsecond, and FireWeb.PageController.index is the name of the function that processed your request. Let's open the code in the IDE and continue.

How to work with it?

All the main code will be in the lib folder. Find the file lib / fire_web / templates / page / index.html.eex, delete the second section, save and return to the browser. You do not need to reload the page, phoenix will do it for you. A template for inserting executable code with output results requires the input of <%= and %> characters. At the bottom of the template, enter <%= "Fire man" %> and look at the result in the browser. In order for the server to stop working, in the console double-click ctrl + c

Total

At this stage you should have a ready environment for experiments. Feel free to create other projects. Look at the difference in the project code if you create it without --no-ecto or by adding - umbrella (creating microservice architecture). For further work you will need to know the basic data types. It is advisable to familiarize yourself with two sources. Lessons in Russian and Official Documentation in English. Elixirschool is partially translated into Russian and I would recommend to start learning the language from this resource. If you really want to create an application on liveview, here is an article on which we will rely on.

Join the Russian-language telegram community @proelixir and watch the latest news and vacancies on the @proelixir_news channel.