Front-end en Laravel

Manipular el Front-end en Laravel de nuestra página es una de las primeras cosas que queremos hacer de nuestra página, definir que librerías o frameworks voy a usar en el futuro proyecto que conformaran lo que es la fachada del mismo.

Esto en la página oficial no esta demasiado bien explicado, ya que la documentación de Laravel con respecto al front-end va cambiando con cada versión de Laravel. Esto no es un problema, ya que los diferentes métodos que nos da cada versión para manipularlo es compatible con la siguiente versión la mayoría de las veces.

Como ya sabrá yo no soy muy partidario de sobrecargar mi página con elementos JavaScript, siempre me ha parecido que deja pesada la página o sitio que estamos creando, pero de todos modos veremos como manipular los diferentes elementos que nos encontramos en el Font-end de laravel.

Seguro que en este tema voy a errar más de una vez conceptos o funcionalidades de alguna librería así pues si ves algo que esté mal por favor escribe a mi Twitter.

Lo que veremos en esta seccion funciona para laravel 8 y 7

Librerías que utiliza

Primero que nada debemos saber que Laravel utiliza Node.js, así pues tendremos módulos de node. Si no es enteramente PHP. Aunque no te debes de preocupar por esto.

Una de las cosas que debemos saber es que Laravel utiliza Webpack internamente, nosotros como usuario utilizaremos Laravel-mix que es más fácil de entender, este traducirá a Webpack lo que queremos que haga. así cuando ejecutemos laravel-mix, minifcara algun archivo o juntara archivos según lo que le digamos en el archivo webpack.mix.js.

Laravel-Mix

Bueno laravel-mix no se exactamente como definirlo con mis palabras así pues busque una definición oficial, pero solo dice «An elegant wrapper around Webpack for the 80% use case» lo cual no es muy convincente como definición asi que como es instalado con node fui a ver lo que decia en la pagina de npm.

Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS and JavaScript pre-processors.

https://www.npmjs.com/package/laravel-mix

El archivo que utilizaremos con Laravel-mix es webpack.mix.js

Lodash

Laravel también utiliza internamente lodash, esta librería nos permite hacer una gran cantidad de cosas de manera simple, manipulación de arrays objetos strings. Es conveniente que sepas que Laravel posee esta librería y la puedes usar cuando quieras.

Supongamos que tienes una lista de productos y quieres mostrar de a 3 productos con lodash puedes separar esa lista en varias con 3 productos sin problemas.

jQuery (no viene por defecto)

Laravel ha venido con jQuery con en muchas de sus versiones anteriores aunque no recuerdo si en las últimas fue quitado como librería que viene por defecto o hay que agregársela. Y como no encuentro si trae o no trae jQuery de fábrica lo probaremos aquí:

laravel new jqexample

Lo próximo que haré para chequear esto es correr npm para que cree app.js

npm install

npm run dev

En este momento verá que si yo agrego código simple como el siguiente en la vista welcome antes de </body> no funciona.

<script src="{{ asset('js/app.js') }}"></script>
<script>
   $(document).ready(function() {
      alert("jquery loaded");
   });
</script>

Esto nos deja en claro que jQuery no viene por defecto, ahora para usar jQuery debería de correr las siguientes líneas en consola estando posicionado en la carpeta del proyecto

Las siguientes líneas de código funcionan para Laravel 8,7 y 6. Estas características no estaban presentes en versiones anteriores a Laravel 6 y por tanto no deberías utilizarlo en proyectos con versiones anteriores a la 6.

composer require laravel/ui

php artisan ui bootstrap

Luego de correr estos comandos en consola deberemos correr npm install && npm run dev en mi caso debí correr nuevamente npm run dev nuevamente para que funcionara.

Aunque no entiendo muy bien por qué necesito él ui de bootstrap supongo que esto lo deberían mejorar en versiones futuras y separar bien las librerías de la parte gráfica. De hecho no debería tener que instalar lo que sería el scaffolding para usar jQuery.

Scaffolding 

El scaffolding es un tipo de estructura por donde manejarnos que nos da Laravel si es que queremos utilizarla. Para utilizarla debemos instalar el paquete laravel/ui

composer require laravel/ui

Una vez instalado el paquete debemos decidirnos ¿qué vamos a usar bootstrap, vue, react? ¿Una combinación de estos?

Por lo general nos decidimos por una de estas librerias o frameworks.

Bootstrap only

Si fuéramos con bootstrap solo podríamos generar lo básico para usar bootsrap y la parte que seria login y registro.

php artisan ui bootstrap

El siguiente comando en consola generará la parte de login y registro

php artisan ui bootstrap --auth

Recuerda correr npm install && npm run dev al final para actualizar el archivo app.js

Vue only

Puedes instalar este framework de la siguiente maneta

php artisan ui vue

En caso de necesitar generar un login y parte de registro

php artisan ui vue --auth

Deberás correr npm install && npm run dev luego.

React only

React se define como una biblioteca para construir interfaces gráficas, puedes instalar esta en Laravel con

php artisan ui react

Si hay necesidad de que el login /register sea creado con React

php artisan ui react --auth

Por último debe correr npm install && npm run dev

Opción nueva en Laravel 8

En Laravel 8 nos da la opción de instalar Laravel/Breeze un paquete que nos permite implementar las autenticaciones de Laravel como pueden ser login, registration, password reset, email verification, y password confirmation utilizando Tailwind CSS. Esto es bastante bueno, ya que Tailwind CSS parece ser bastante más ligero que bootstrap.

veamos el ejemplo que da la pagina oficial de laravel.

curl -s https://laravel.build/example-app | bash
cd example-app
php artisan migrate

Como podemos ver instala un ejemplo de sitio con curl y luego le corre migrate para crear la base de datos. Tenga en cuenta que usted no tiene que porque correr las líneas de curl, ya que eso es para instalar el ejemplo y probarlo de manera rápida.

Para instalar breeze:

composer require laravel/breeze --dev

Luego de esto corremos breeze:install para que cree todo lo de la autenticación dentro de ello rutas, controles y vistas abajo se encuentra el código

php artisan breeze:install

npm install
npm run dev
php artisan migrate

Por supuesto luego de esto corremos npm install y npm run dev (para crear los archivos CSS y JS) y por último una migración.

Las cosas que podemos realizar con breeze no terminan ahi, ya que puedes instalar Vue y React con él. Veamos un ejemplo de instalar Vue.

php artisan breeze:install vue

Puedes ver más sobre breeze en la página oficial https://laravel.com/docs/8.x/starter-kits

Procesando archivos con laravel Mix

En la página de Laravel esta parte la podemos encontrar como Compiling Assets. En programación le llaman assets a todo lo que es javascript, css, y otros archivos como pueden ser archivos SASS, LESS, react, vue y otros que pueden ser procesados antes de tenerlos en la carpeta public. Las órdenes o mejor dicho las reglas de como procesaremos estos archivos están en webpack.mix.js.

Echemosle un vistazo al archivo:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

Lo primero que vemos es que con mix llamaremos a laravel-mix, luego tenemos los diferentes métodos como pueden ser js, sass, sourceMaps(), otros.

Veamos como funcionan la mayoría de estas funciones o métodos, Los métodos que podemos usar de esta manera son.

• js
• sass(archivos SASS),
• ts(archivos typescript)
• coffee(archivos Coffescript),
• postCSS
• less(Archivos LESS)
• stylus(Archivos stylus)

.[nombre_de_metodo](source_file, destination_folder)

Esto funciona si es solo un archivo, de esta manera tomara el nombre de este en la carpeta de destino.

También puede ser destination file (archivo de destino).

.[nombre_de_metodo](source_file, destination_file)

Combinando archivos

Para que nuestra página sea lo más performante posible, es conveniente tanto minificar los archivos como combinarlos en esta sección veremos como hacer los segundo.

mix.combine(['one.js', 'two.js'], 'merged.js');

También podemos combinar con scripts

mix.scripts(['one.js', 'two.js'], 'merged.js');

Para archivos CSS varía un poco veamos como hacer esto:

mix.combine('path/to/dir/*.css', 'all-files.css');

La otra forma de hacerlo

 mix.combine('path/to/dir/*.css', 'all-files.css'); mix.styles('path/to/dir/*.css', 'all-files.css');

Antes de pasar al siguiente tema vea que en la parte de source tiene *.css esto combinara todos los archivos css en la carpeta.

Minificar archivos

Veamos como minificar los archivos, minificar archivos es algo muy común hoy en día, así que es conveniente que lo sepa hacer con Laravel.

mix.minify('path/to/file.js');

Compilando archivos de React o Vue

En caso de tener que compilar archivos que son de React o de Vue puede hacerlo agregando .vue() en caso de Vue o .react() en caso de React.

Vue Example:

mix.js('resources/js/app.js', 'public/js')
   .vue();

React Example:

mix.js('resources/js/app.jsx', 'public/js')
   .react();