Aprenda Alpine JS en este tutorial interactivo gratuito

Alpine.js es un marco mínimo y resistente para componer el comportamiento de Javascript en su marcado. ¡Eso es correcto, en su marcado!

Le permite escribir la mayor parte de su JS en línea en su HTML, lo que facilita la escritura de código declarativo (a diferencia del código de procedimiento). Según su creador Caleb Porzio, su objetivo es llenar el vacío entre Vanilla JS (o jQuery) y grandes marcos de v-dom como Vue / React.

En Scrimba definitivamente creemos que está a la altura de su promesa, ¡así que nos complace presentarle un curso gratuito de una hora!

Lanzamiento del curso. ¿Aprende Alpine JS?

Alpine JS es una biblioteca ordenada y mínima de @calebporzio que tiene como objetivo llenar el vacío entre Vanilla JS (o jQuery) y grandes marcos v-dom como Vue / React.

En esto ? Por supuesto, @drehimself te da una introducción de una hora.//t.co/podSDjMC4A pic.twitter.com/CvCDVFuMaM

- Scrimba (@scrimba) 24 de febrero de 2020

En él, encontrará un montón de tutoriales divertidos e interactivos que integran su aprendizaje y le brindan la memoria muscular que necesita para convertirse en un hotshot en Alpine.js.

¡Ahora echemos un vistazo a cómo está estructurado el curso!

¿Por qué aprender Alpine.js?

En la primera lección, el maestro Andre Madarang comienza explicando por qué debería aprender la biblioteca. En pocas palabras, Alpine.js funciona bien cuando necesita una pequeña cantidad de JS, por ejemplo, algunos menús desplegables o pestañas. Esto significa que obtiene una gran cantidad de potencia en un tamaño increíblemente pequeño sin necesidad de instalar NPM.

Andre también te presenta a sí mismo. Es un desarrollador full-stack y Youtuber que enseña conceptos de desarrollo web como Laravel, Vue y Tailwind CSS. ¡Estamos encantados de tenerlo a bordo como profesor de Scrimba!

Instalación y un componente básico de Alpine

Instalar Alpine.js es fácil: puede usar npm si lo desea, pero Andre también nos muestra cómo usar un cdn y agregarlo en una scriptetiqueta, ¡es tan simple como eso !:

¡Ahora es el momento de crear nuestro primer componente Alpine.js! Primero, definimos el estado usando el x-dataatributo. El estado está disponible dentro del alcance del en el que se define, por lo que en el ejemplo siguiente, tanto el como el

tener acceso al estado.

Para usar este estado, usamos la x-showdirectiva para mostrar u ocultar el elemento y activar y desactivar el elemento usando @.

 Toggle 

index.html

Desplegable

Ahora, usamos nuestro nuevo conocimiento del estado para implementar un menú desplegable.

Interfaz de usuario con un menú desplegable

Luego vemos cómo configurar eventos para cerrar el menú desplegable haciendo clic en el menú desplegable o presionando la tecla de escape, usando @click.awayen el

Original text


    o @keydown.escapeen el .

    Modales y x-ref

    En este elenco, Andre nos lleva a través de otro ejemplo de cómo usar el estado para abrir y cerrar un modal. A continuación, introduce referencias, que nos permiten agregar métodos a elementos particulares en el controlador de clics.

    En este caso, enfocamos el botón de cierre una vez que el modal está abierto agregando una referencia al botón de cierre con una x-refdirectiva y luego agregando un método al controlador de clic.

     $refs.modalCloseButton.focus()) " >

    Barra lateral

    Ahora es el momento de hacer algunas revisiones para ayudar a asimilar nuestros nuevos conocimientos. En este breve elenco, agregamos la funcionalidad para alternar la visibilidad de una barra lateral. Esta es una excelente manera de incorporar nuestro aprendizaje y nos muestra otra aplicación de lo que hemos aprendido.

    UI con barra lateral

    Pestañas

    A continuación, creamos un conjunto de pestañas. Esto es más complicado que nuestros ejemplos anteriores porque tenemos que mantener el estado de todas las pestañas, no solo un booleano.

    Como de costumbre, el estado se define usando la x-datadirectiva en un elemento HTML que encapsula todos los elementos requeridos. Luego establecemos el valor predeterminado tab1y establecemos un detector de eventos (que hace que la pestaña esté activa) para cada una de las pestañas.

  • Tab 1
  • Para cambiar la sección de contenido al contenido de la pestaña en la que se ha hecho clic, agregamos x-showdirectivas a la que scontiene el contenido:

    Finally, Andre shows us how to apply the active tab styles with conditional class rendering.

    :class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab1' }" ; 

    Image Selection

    In this cast, Andre shows us how the skills we learned in the previous cast can be applied to a different UI experience - an image selector. Image selectors work in the same way as tabs, but with images instead of text.

    Image selector

    Selector de imágenes

    Scroll Detection

    Now, Andre shows us how to build a scroll detector which changes the background color as the user scrolls. To do this, we define some state which keeps track of whether the user has scrolled.

    Now, we add a scroll event listener on the window and some conditional class rendering on the .

     40) ? false : true" > Top Nav goes here  

    Accordion Toggle and Loops

    In this section, we build an accordion toggle using loops. In our example, there are several FAQs with answers, and we want to toggle the visibility of the answers.

    A great way of doing this without repeating code is to use loops. To do this, we store all our questions and answers in an array, loop over them, and then set the event listener on each iteration of the loop.

    Note: For this to work, our elements need to be wrapped in a template tag.

    fetch and x-init

    Now, we see how we can make requests to an external API. This sounds intimidating but is easily broken down into four steps.

    • Add state to hold the quotes:
    x - data = "{ quote:'' }"; 
    • Give the app a quote to show upon initialization:
    x - init = "quote = 'Awesome quote'"; 
    • Set the text in the which displays the quote as the state:

    Use fetch to grab the quote from an external API:

    x-init=" fetch('//api.kanye.rest') .then(response => response.json()) .then(data => quote = data.quote) "

    Here's the full code block:

     response.json()) .then(data => quote = data.quote) " >

    The UI looks like this:

    Generador de código visto por el usuario final

    Todo App and x-model

    In this cast, we learn how to build a mini to-do app. We need three pieces of state for this; one for keeping the to-dos in an array (todos), one to keep track of whether the user types in a new to-do (todoTitle) and one to keep track of the new to-do ID (todoId).

    As we are using many pieces of state, we extract our function to a tag to make things cleaner. The function returns an object which contains our state and our functions:

     function todos() { return { todos: [ { id: 1, title: "Finish Alpine Screencast", isComplete: false } ], todoTitle: "", todoId: 2 }; }  

    Now we loop over our to-dos to display the title we have stored in the array and conditionally add a line-through if the to-do is completed.

  • ×
  • We now work on adding a to-do. First, we add an x-model directive to our which syncs the todoTitle with whatever is typed into the :

    The function we want to run when a user types a new to-do is then added to our tag.

    We also use an x-model on the checkbox to allow the user to mark a to-do as complete.

    Transitions: Dropdown

    Next up, Andre shows us some funky transitions which give our dropdown a crisp and professional finish using Tailwind CSS utility classes. These transitions give you fine-grained control over how your dropdown switches from hidden to visible, with options including opacity, duration, origin and others.

      Transitions: Modal

      Now it's time to put our new knowledge of transitions to the test by adding them to our modal. In the spirit of Scrimba, Andre gives us a chance to test out our new skills before showing us how he does it, so no spoilers here!

      Transitions: Sidebar

      Finalmente, agregamos una transición agradable y suave para la barra lateral que implementamos anteriormente. Nuevamente, no hay spoilers, así que puedes seguir adelante y dispararte tú mismo cuando veas el curso.

      Conclusión

      Ahora hemos echado un vistazo a algunos casos de uso de Alpine.js y hemos creado algunos ejemplos en los que podría ser una mejor opción que React o Vue. Esperamos que hayas aprendido algo nuevo sobre Alpine.js y que muy pronto pongas en práctica tus nuevas habilidades.

      Si aún no lo has hecho, no olvides consultar el curso en Scrimba.

      Mientras tanto, ¡feliz codificación alpina! :)