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

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

Продолжение статьи про 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.

Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 4

    0
    1) На сколько использование liveview покрывает потребности в интерактивности работы (на сколько он замещает javscript?). Где та точка, когда мне всё же потребуется писать на js?
    2) На сколько реально и трудозатратно (если есть вообще необходимость (см вопр.1)) в такой код добавить свои js-компоненты?
      –1
      1) В первой статье я писал что js надо будет писать для анимаций, либо для вебсокетов. Его можно рассматривать как хорошую альтернативу фронт фрэймворкам, но при этом liveview вас не ограничивает в использовании старых подходов.
      2) Виджеты в стиле select2 не пробовал, но я сделал простой тест.
      Есть таблица данных, она обновляется через liveview, на первый элемент я повесил обработчик
      document.getElementsByTagName('tr')[0].addEventListener('click', function (e) {
          alert(123);
      });

      и оно всегда срабатывает именно на первом элементе даже когда данные изменились, похоже что обработчики заново вешаются на элементы. Может тест кривой)
        +1
        На сколько использование liveview покрывает потребности в интерактивности работы (на сколько он замещает javscript?)

        Определенно точно не покрывает сценарий полного веб-приложения со сверхсложной клиентской логикой, и точно покрывает отдельные интерактивные элементы на странице, вроде счетчиков на странице админки, показ suggestions в поиске, ошибок при заполнении форм. Отдельные умельцы пилят на LiveView игры (в т ч полноценный покер) но это явно не то для чего технология придумана

        0
        Спасибо за ссылку на плагин для VS Code!

        Only users with full accounts can post comments. Log in, please.