Phoenix LiveView: cuando el código javascript es divertido *

* debido a su ausencia

Continuación del artículo sobre Phoenix Live View . Hoy describiré la configuración básica para trabajar cómodamente con la tecnología y crear una nueva aplicación.

Instalar elixir y fénix

Necesitamos elixir (el proceso de instalación es por referencia). Pero en Windows es mejor poner un acoplador o un vagabundo. Asumiré que ya conoce estas tecnologías. Ignoramos las bases de datos, es mejor considerar trabajar con ellas en otro proyecto.

Después de instalar elixir, instale Phoenix (enlace para referencia de inicio). De hecho, debemos asegurarnos de la versión necesaria de elixir

elixir -v 

Debería emitir 1.8.2 como relevante para hoy. Y comienza la instalación del fénix mismo

 mix archive.install hex phx_new 1.4.6 

1.4.6 es relevante para hoy, puede ver la versión actual aquí. El proyecto usará webpack, sale de la caja en Phoenix y por eso necesitamos nodejs .

IDE

Elegir un IDE es un dolor de cabeza, pero para mí, decidí que desarrollaría con rubymine, hay un excelente complemento llamado elixir. El esquema de color de corte se vuelve claro con el tiempo y ya no quiero volver a vscode, pero quiero decir que el soporte de elixir también está muy bien implementado a través del complemento correspondiente, lo recomiendo para los amantes del código.

Creación de proyectos

Cree una carpeta conveniente para almacenar proyectos en elixir y vaya a la consola:

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

La compilación llevará algún tiempo

 cd fire mix phx.server 

Si todas las dependencias se han instalado correctamente y [info] Access FireWeb.Endpoint at http://localhost:4000 algo como [info] Access FireWeb.Endpoint at http://localhost:4000 luego valientemente vaya al navegador http: // localhost: 4000 . Vuelva a cargar la página varias veces y regrese a la terminal. Allí encontrará un registro interesante, donde µs es un microsegundo, y FireWeb.PageController.index es el nombre de la función que procesó su solicitud. Abramos el código en el IDE y continuemos.

¿Cómo trabajar con eso?

Todo el código principal estará en la carpeta lib. Localice el archivo lib / fire_web / templates / page / index.html.eex, elimine la segunda sección, guárdelo y vuelva al navegador. No necesita volver a cargar la página, el fénix lo hará por usted. El motor de plantillas para insertar código ejecutable con la salida del resultado requiere la entrada de los caracteres <%= y %> . En la parte inferior de la plantilla, ingrese <%= "Fire man" %> y mire el resultado en el navegador. Para que el servidor deje de funcionar, haga doble clic en ctrl + c en la consola

Resumen

En esta etapa, debe tener un entorno listo para la experimentación. Siéntase libre de crear otros proyectos. Observe la diferencia en el código del proyecto si lo crea sin --no-ecto o agregando --umbrella (creando una arquitectura de microservicio). Para más trabajo, necesitará conocer los tipos de datos básicos. Es recomendable familiarizarse con dos fuentes de lecciones en ruso y documentación oficial en inglés. Elixirschool está parcialmente traducido al ruso y recomendaría comenzar a aprender el idioma de este recurso. Si realmente desea crear una aplicación en liveview, aquí hay un artículo sobre el que desarrollaremos en el futuro.

Únase a la comunidad de telegramas de habla rusa @proelixir y vea las últimas noticias y vacantes en el canal @proelixir_news.