Phoenix LiveView: quando o código javascript é divertido *

* devido a sua ausência

Continuação do artigo sobre o Phoenix Live View . Hoje vou descrever a configuração básica para um trabalho confortável com a tecnologia e criar um novo aplicativo.

Instalar elixir e phoenix

Precisamos de elixir (o processo de instalação é por referência). Mas, no Windows, é melhor colocar uma janela de encaixe ou um vagabundo. Assumirei que você já conhece essas tecnologias. Se ignorarmos os bancos de dados, é melhor considerar trabalhar com eles em outro projeto.

Após a instalação do elixir, instale o phoenix (link para referência doméstica). De fato, precisamos garantir que a versão necessária do elixir

elixir -v 

Deve emitir 1.8.2 como relevante para hoje. E inicie a instalação da própria Phoenix

 mix archive.install hex phx_new 1.4.6 

1.4.6 é relevante para hoje, você pode ver a versão atual aqui. O projeto usará o webpack, ele sai da caixa em Phoenix e, portanto, precisamos do nodejs .

IDE

Escolher um IDE é uma dor de cabeça, mas, por mim, decidi que desenvolvia com rubimina, existe um excelente plugin chamado elixir. O esquema de cores destacáveis ​​fica claro com o tempo e não quero mais voltar ao vscode, mas quero dizer que o suporte ao elixir também é muito bem implementado por meio do plug-in correspondente, recomendo para os amantes do código.

Criação de projeto

Crie uma pasta conveniente para armazenar projetos no elixir e acesse o console:

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

A compilação levará algum tempo

 cd fire mix phx.server 

Se todas as dependências tiverem sido instaladas com sucesso e algo como [info] Access FireWeb.Endpoint at http://localhost:4000 vá [info] Access FireWeb.Endpoint at http://localhost:4000 para o navegador http: // localhost: 4000 . Recarregue a página várias vezes e retorne ao terminal. Lá você encontrará um log interessante, onde µs é um microssegundo e FireWeb.PageController.index é o nome da função que processou sua solicitação. Vamos abrir o código no IDE e continuar.

Como trabalhar com isso?

Todo o código principal estará na pasta lib. Localize o arquivo lib / fire_web / templates / page / index.html.eex, exclua a segunda seção, salve e retorne ao navegador. Você não precisa recarregar a página, a Phoenix fará isso por você. O mecanismo de modelo para inserir código executável com a saída do resultado requer a entrada dos caracteres <%= e %> . Na parte inferior do modelo, insira <%= "Fire man" %> e observe o resultado no navegador. Para que o servidor pare de funcionar, clique duas vezes em ctrl + c no console

Sumário

Nesta fase, você deve ter um ambiente pronto para experimentação. Sinta-se livre para criar outros projetos. Observe a diferença no código do projeto se você o criar sem --no-ecto ou sem adicionar --umbrella (criando uma arquitetura de microsserviço). Para mais trabalho, você precisará conhecer os tipos de dados básicos. É aconselhável familiarizar-se com duas fontes de lições em russo e documentação oficial em inglês. O Elixirschool é parcialmente traduzido para o russo e eu recomendo começar a aprender o idioma com este recurso. Se você realmente deseja criar um aplicativo na visualização ao vivo, aqui está um artigo no qual iremos desenvolver no futuro.

Participe da comunidade de telegrama de língua russa @proelixir e assista às últimas notícias e vagas no canal @proelixir_news.