Components - Stack

Reny Ramos • December 2, 2020

laravel components layout programming

Continuando con el post anterior, la idea de tener una plantilla general es que tenga solo el código y librerías JS que serán necesarias en todas las vistas, y que desde cada vista se puedan incluir las librerías o código extra necesario, esto es muy importante para mantener las vistas lo mas ligeras y limpias posibles.

La idea aquí sera, que a partir de una vista principal que llama a los demás componentes podamos incluir librerías y código JS, ademas de hojas de estilo, utilizando para ellos componentes, para así poder administrar esto de una forma mucho mas cómoda, sencilla y visual.

Para crear cada uno de estos componentes lo primero es visitar la pagina oficial y comprobar en la documentación que código JS y estilos necesita para funcionar, ya con esto se crea el archivo el cual hará push a los stack correspondientes y estará listo para su uso.

Ya que realmente no es muy complicado iré directo a mostrar 2 ejemplos: Laravel Livewire y Select2, y como quedaría la vista que los incluye:

Funcionalidades (views/components/layouts/partials)

addSelect2.blade.php

@push('style') 
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> 
@endpush
@push('scripts') 
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> 
@endpush

addLivewire.blade.php

@push('style') @livewireStyles @endpush @prepend('scripts') @livewireScripts @endprepend

Vista (views/search)

index.blade.php

<x-layouts.app title='Busqueda sencilla'>
    <x-slot name="body">
        <div class="d-flex justify-content-center">
            <div class="card col-6">
                <div class="card-title">Busqueda sencilla</div>
                <div class="card-body">
                    <livewire:digimons.search>
                </div>
            </div>
        </div>
    </x-slot>
    <x-layouts.partials.addLivewire/>
    <x-layouts.partials.addSelect2/>
</x-app>

En teoría suena algo muy simple y quizás no se le ve mucho el uso, pero en la practica es cuando realmente se puede ver como mejora el código, haciéndolo mas corto y entendible, para ver esto en efecto pueden ir al repositorio de DigiSearch, donde aplique lo aquí mostrado.