Phoenix LiveView: когда javascript код доставляет удовольствие*

* благодаря его отсутствию

Продолжение статьи про Phoenix Live View. Сегодня я опишу базовую конфигурацию для комфортной работы с технологией и создам новое приложение.

Устанавливаем elixir и phoenix

Нам потребуется elixir (процесс установки по ссылке). Но на windows лучше ставить либо докером либо вагрантом. Я предположу что вы уже в курсе этих технологий. Базы данных мы игнорируем, работу с ними лучше рассмотреть в другом проекте.

После установки elixir, устанавливаем phoenix (ссылка для домашнего ознакомления). По факту нам нужно удостовериться в необходимой версии elixir

elixir -v

должно выдать 1.8.2 как актуальную на сегодня. И запустить саму установку феникса

mix archive.install hex phx_new 1.4.6

1.4.6 актуальна на сегодня, можете посмотреть текущую версию по ссылке. В проекте будет использоваться webpack, он идет из коробки в phoenix и поэтому нам потребуется nodejs.

IDE

Выбор IDE — головная боль, но для себя я решил что буду разрабатывать на rubymine, там есть отличный плагин, который так и называется elixir. Цветовая схема «вырви глаз» со временем становится понятной и возвращаться к vscode больше не хочется, но хочу сказать что там тоже очень хорошо реализована поддержка elixir через соответствующий плагин, рекомендую для любителей code.

Создание проекта

Создавайте удобную папку для хранения проектов на elixir и поехали в консоль:

cd ~/ElixirProjects/
mix help # список всех команд
mix help phx.new # все что нужно знать про создание нового приложения на фениксе
mix phx.new fire --no-ecto # создаем проект fire в котором не будем использовать функционал по работе с бд
Fetch and install dependencies? [Yn] # отвечаем утвердительно

Компиляция займет некоторое время

cd fire
mix phx.server

Если все зависимости были успешно установлены и у вас высветилось что-то вроде [info] Access FireWeb.Endpoint at http://localhost:4000 то смело идем в браузер http://localhost:4000. Несколько раз перезагрузите страницу и возвращайтесь в терминал. Там вас ждет интересный лог, где µs это микросекунда, а FireWeb.PageController.index это имя функции которая обработала ваш запрос. Давайте откроем код в IDE и продолжим.

Как с этим работать?

Весь основной код будет лежать в папке lib. Найдите файл lib/fire_web/templates/page/index.html.eex, удалите второй section, сохраните и вернитесь в браузер. Перезагружать страницу не нужно, феникс сделает это за вас. Шаблонизатор для вставки исполняемого кода с выводом результата требует ввода символов <%= и %>. Внизу шаблона введите <%= "Fire man" %> и посмотрите на результат в браузере. Для того чтобы сервер перестал работать, в консоли дважды нажмите ctrl + c

Итог

На данном этапе у вас должно быть готовое окружение для экспериментов. Не стесняйтесь создавать другие проекты. Посмотрите разницу в коде проекта если его создать без --no-ecto или добавив --umbrella (создание микросервисной архитектуры). Для дальнейшей работы вам потребуется знать базовые типы данных. Желательно ознакомиться с двумя источниками Уроки на русском и Официальная документация на английском. Elixirschool частично переведен на русский и я бы рекомендовал начать изучение языка именно с этого ресурса. Если вам очень хочется создать приложение на liveview то вот статья на которую мы будем опираться в дальнейшем.

Присоединяйтесь к русскоязычному телеграмм сообществу @proelixir и смотрите свежие новости и вакансии на канале @proelixir_news.