Curso de tecnologías Javascript para frontend de Laravel
Frontend avanzado con Laravel y tecnologías Javascript como Vue, Web Components y Livewire.
En marcha
Intermedio
10 Clases 8 h (aprox.)
75€
59€
Precio en promoción
Laravel es el framework más popular de PHP, estupendo para la realización de sitios web avanzados con una elevada calidad de desarrollo. En EscuelaIT tenemos varios cursos de Laravel en los que abordamos diversos temas, pero por razones obvias nos centramos especialmente en la parte del backend.

Sin embargo, aunque Laravel se ocupa principalmente del desarrollo del lado del servidor, también podemos hacer aplicaciones web realmente asombrosas con Laravel, con una arquitectura de frontend avanzada y componentes de interfaces de usuario dinámicos que ofrezcan una experiencia de uso totalmente personalizada y muy atractiva. 

Qué aprenderé en el Curso de tecnologías Javascript para frontend de Laravel

  • Configurar y personalizar los componentes de frontend con Laravel
  • Crear componentes VueJS para interfaces de usuario
  • Integrar Web Components y LitElement en un proyecto Laravel
  • Configurar Webpack para personalizar la transpilación del código Javascript
  • Conocer el increíble framework de UI Livewire para desarrollo de componentes frontend avanzados, sin necesidad de escribir Javascript

Objetivos del curso

Explicar y ofrecer soluciones para incorporar componentes dinámicos con programación del lado del cliente en aplicaciones Laravel, de modo que sea sencillo crear experiencias de usuario e interfaces personalizadas, que mejoren sensiblemente las que nos ofrece la simple programación del lado del servidor.

Cómo integrar diversas tecnologías de frontend modernas en proyectos Laravel, tales como VueJS, Web Components estándar basados en LitElement y el asombroso frawework de UI Livewire.

Por qué debes aprender Tecnologías Javascript para desarrollo frontend de Laravel

Si ya trabajas con Laravel este curso te abrirá nuevas posibilidades para el desarrollo de tus proyectos, con las que integrar varias tecnologías frontend. Gracias a los conocimientos que aprenderás en este curso podrás crear experiencias de usuario personalizadas e interfaces de usuario avanzadas y escoger las tecnologías Javascript que más se adapten a tus gustos y necesidades.

Si no trabajas con Laravel podrás apreciar cómo este framework facilita mucho el trabajo de creación de sitios web. Podrás comprobar que usar una herramienta pensada principalmente para el desarrollo backend no está reñida con la incorporación de cualquier tecnología frontend que puedas necesitar para crear aplicaciones realmente asombrosas.

Qué tengo que saber

Este es un curso de especialización en el que damos por hecho que el estudiante tiene conocimientos básicos sobre diversas tecnologías:

  • Framework PHP Laravel
  • Lenguaje Javascript
  • Nociones sobre desarrollo basado en componentes con algún framework o librería de Javascript.
  • Manejo básico de npm

Si no dispones de alguno de estos conocimientos puedes hacer los correspondientes cursos de EscuelaIT para adquirirlos. En ese caso podrás ver cómo se realiza un desarrollo fullstack avanzado para sitios web con UI personalizada, pero probablemente te sentirás un poco perdido en algunos puntos.

Clases y contenidos

Laravel UI Gratis

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.

Blade Components de Laravel 7

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"!!

Iniciación a Web Components y LitElement en proyectos Laravel Gratis

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.

Web Component checkbox de formulario personalizado y accesible

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.

Ejemplos de Web Components útiles para aplicaciones Laravel

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.

Integrar VueJS en aplicaciones Laravel

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

Sistema de login personalizado con Ajax en 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.

Componentes para avatar y menú de usuario

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.

Integrar Redux en aplicaciones Laravel

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.

Framework de UI fullstack Livewire para Laravel

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.

Valoraciones

Carlos Manuel Abrisqueta Valcárcel

Curso muy interesante para los que nos centramos en el back-end con Laravel

Arturo Castro

Eugeni regi

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete