Curso de tecnologías Javascript para frontend de Laravel

En esta clase vemos qué es Laravel UI y cómo iniciar un proyecto de Laravel, configurar la parte del frontend y hacer un poco de limpieza para sustituir el preset entregado de manera predeterminada con Laravel por uno en el que no existan dependencias de Javascript, más allá de las necesarias.

Hacemos el proceso desde cero, en un proyecto nuevo, viendo todos los comandos y los cambios en los archivos que debemos de realizar para poder ponerlo a nuestro gusto, con la intención de comenzar a desarrollar sobre Laravel basando el código de frontend en el estándar Javascript de los Web Components, para lo que no nos hace falta ninguna librería en particular.

Vemos que conseguimos optimizar bastante Laravel para que se quede con un tamaño de bundle Javascript muy reducido, a partir del cual iremos colocando nuestro propio código frontend, usando realmente lo que nos hace falta.

Durante la clase también explicamos las distintas partes que tiene la parte de frontend de un proyecto de Laravel y configuramos el sistema de live-reload para que el navegador se actualice directamente cuando hacemos cambios en el proyecto.

Para que quede como referencia, este es el conjunto de los comandos y acciones que hemos ido realizando durante el vídeo.

• Instalar Laravel

  • laravel new laravel_demo
  • cd laravel_demo
  • php artisan key:generate

• Git init

  • Instalar larvel ui
  • composer require laravel/ui
  • php artisan ui vue --auth

• Instalar BBDD

  • Editar .env
  • php artisan migrate

• npm

  • npm install
  • npm run watch

• BrowserSync (webpack.config.js)

  • .browserSync("http://127.0.0.1:8000/");
  • 2X reiniciar watch

• Valet

  • laravel link
  • Cambiar browserSync

Posteriormente nos ponemos a hacer limpieza en las vistas que nos entrega Laravel para el proceso de login, que tiene mucho código basado en Bootstrap y que no nos resulta de interés, ya que no vamos a usar Bootstrap en nuestro proyecto, sino que nos vamos a basar en componentes Web Components creados por nosotros mismos, o por otros desarrolladores por medio de packages npm que iremos instalando bajo demanda.

La limpieza que realizaremos será sobre los siguientes ficheros:

• resources/js
• resources/sass

Veremos que después de esta limpieza el código de Javascript y CSS ha bajado extremadamente, ya que no tenemos todas las dependencias que realmente no se van a usar, y luego las dependencias que instalaremos para Web Components son de muy poco peso.

Además estas son las plantillas y archivos que se van a limpiar.

• blade
  • app.blade.php
  • imagen
  • common/header
  • auth/login.blade.php
  • auth/register.blade.php
  • wellcome.blade.php

En la siguiente clase veremos cómo todavía el código de las vistas va a mejorar muchísimo, puesto que vamos a usar los componentes de Laravel, que han sido completamente reformulados en Laravel 7. Esta parte no será todavía con Javascript, pero es muy interesante, porque nos permite crear elementos como campos de texto o checkboxes inteligentes y encapsulados, capaces de realizar ellos solos a todas las comprobaciones derivadas de las validaciones y presentar de los errores de validación, personalización de estilos, etc. Así obtendremos vistas realmente compactas y mantenibles.

Cómo la declaración de rutas en Laravel 8 ha cambiado. Estos cambios impactan en la creación de las rutas en el archivo de rutas en este curso. Aclaraciones que debes saber.

En esta clase vamos a ver una de las novedades de Laravel 7 que son los componentes de Blade.

Los componentes (no confundir con Web Components que veremos más adelante) son herramientas que tenemos en Laravel para crear código reutilizable en las vistas, que puede ser tan complejo como queramos y encapsular ciertas áreas de las vistas que se repiten constantemente.

Os enseñaremos las bases para crear componentes de Laravel y luego veremos un par de componentes medianamente complejos, para crear campos de formulario que responden por ellos solos a todas las comprobaciones del sistema de validación de Laravel. Gracias a estos componentes crear formularios en Laravel será "coser y cantar"!!

En esta clase veremos las bases de Web Components y LitElement. Explicando sus ventajas y por qué los elegimos como una de las bases para desarrollar el Javascript para proyectos Laravel en este curso.

Veremos qué es Web Components, qué es LitElement, cuáles son las partes fundamentales de los componentes LitElement y haremos un ejemplo sencillo para ir aprendiendo a crear componentes, con sus vistas, interacción, etc.

En este vídeo te explicamos cómo crear un componente checkbox para integrar en formularios. Es un Web Component que puedes sustituir perfectamente por un checkbox y que funciona de la misma manera, pero que permite una personalización completa del estilo. Es además accesible, ya que permite el control por medio del teclado. Es un buen ejemplo de Web Component creado con LitElement que te permitirá seguir aprendiendo a desarrollar tus componentes y beneficiarte de las posibilidades del estándar Javascript y LitElement.

En esta clase vamos a ver una serie de web components de interfaces de usuario útiles para usar en aplicaciones web, que integraremos dentro de Laravel, para resolver asuntos tan importantes como lanzar mensajes de feedback, mostrar iconos de nuestra propia biblioteca de iconos personalizada o hacer cajas de mensajes dinámicas e interactivas.

Primeros pasos con VueJS en aplicaciones Laravel. Veremos cómo hacer diversos componentes VueJS integrados en un sitio web Laravel.

Haremos una serie de componentes para modificar el sistema de login de Laravel, mostrando la caja de login en un modal y realizando la autenticación mediante Ajax.

En este vídeo vamos a componer de una manera más atractiva y versátil el menú del usuario autenticado.

Ese menú debe hacer dos cosas típicas en las aplicaciones:

• Mostrar el avatar del usuario
• Abrir en una capa superpuesta el típico menú del usuario, desde donde se podría cerrar sesión y acceder a enlaces habituales, como el panel de control y esas cosas.

Lo vamos a componer de manera rápida y simple, usando web components disponibles en Internet, que ya nos ofrecen la mayoría del trabajo complejo sin tener que invertir tiempo en desarrollarlos.

Usar Redux en aplicaciones Laravel, para manejar el estado de la aplicación de manera global y facilitar la interoperabilidad entre componentes de la página.

Aprende a usar el asombroso framework fullstack Livewire para desarrollar componentes de UI avanzados sin necesidad de escribir Javascript. Veremos cómo integrar Livewire en una aplicación Laravel y cómo hacer diversos comportamientos dinámicos avanzados con mínimo esfuerzo.

En este vídeo veremos cómo crear un menú adaptable en un sitio Laravel, con el típico icono de la hamburguesa y diversas animaciones CSS para hacerlo más atractivo.

En el vídeo veremos cómo hacer para que se pueda mostrar el icono de la hamburguesa cuando no hay espacio para todos los los enlaces de la cabecera. Al pulsar el icono abriremos un menú dinámico con una animación, donde aparezcan todos los enlaces del sitio disponibles para usuarios que acceden con móvil.

Realizaremos todo esto basando nuestro trabajo en componentes ya listos, para poder ser más productivos y facilitarnos el desarrollo. Veremos cómo personalizar estos componentes para que nuestro diseño sea adecuado al look & feel propuesto.