Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Vue to Alpine: How & Why

From Vue to Alpine: How & Why

Every time we approach a new project at Tighten, we ask ourselves the question: Understanding the needs of this project, what’s the best frontend stack? Vue, React, Alpine? Livewire? SPA? Inertia?

However, we seldom change the tech stack on existing projects. In this talk I’ll cover how and why I’ve started converting some of our Vue sites to Alpine—and why you should consider it, too!

Matt Stauffer

June 10, 2021
Tweet

More Decks by Matt Stauffer

Other Decks in Technology

Transcript

  1. From VUE to ALPINE:
    HOW & WHY

    View full-size slide

  2. Back Story:
    THE
    JAVASCRIPT FRAMEWORKS
    FRAMEWORK

    View full-size slide

  3. TIGHTEN'S JAVASCRIPT DECISION MATRIX
    FRAMEWORK WHEN TO USE IT
    jQuery Never
    Vanilla JS Rudiments (simple toggles, hamburgers)
    Vue Single components, widgets, etc.
    Full page components & SPAs
    React SPAs, full page components

    View full-size slide

  4. WHY WE
    BASICALLY NEVER
    CONVERT FRAMEWORKS
    ON AN EXISTING PROJECT

    View full-size slide

  5. CAVEAT
    We'll always convert jQuery
    to something more modern
    if possible

    View full-size slide

  6. Where does Alpine fit for new builds?

    View full-size slide

  7. Where does Alpine fit for new builds?
    Story time!

    View full-size slide

  8. The CORE WEB VITALS

    View full-size slide

  9. LARGEST CONTENTFUL PAINT

    View full-size slide

  10. FIRST INPUT DELAY

    View full-size slide

  11. CUMULATIVE LAYOUT SHIFT

    View full-size slide

  12. A QUICK INTRO to LIGHTHOUSE

    View full-size slide

  13. STORY TIME
    TIGHTEN.CO and the CORE WEB VITALS

    View full-size slide

  14. SOURCES OF TROUBLE?
    ▸ Web Fonts
    ▸ Some old jQuery-based plugins
    ▸ A bit of other crap

    View full-size slide

  15. Alpine to the rescue!

    View full-size slide

  16. ALPINE

    CORE WEB VITALS

    View full-size slide

  17. DOWNLOAD SIZE
    Vue1
    33.7kB
    Alpine2
    8.9kB
    2 https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js
    1 https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js

    View full-size slide

  18. PROCESSING TIME, NO ACTUAL CODE ON PAGE:

    View full-size slide

  19. PROCESSING TIME, NO ACTUAL CODE ON PAGE:

    View full-size slide

  20. PROCESSING TIME, SIMPLE HAMBURGER

    View full-size slide

  21. NEW MATRIX
    Not just
    “what can each framework do”
    but
    “what can each do
    with the smallest payload”

    View full-size slide

  22. CONVERTING
    A HAMBURGER MENU

    View full-size slide

  23. HAMBURGER MENU IN VUE

    View full-size slide



  24. !


    ...


    <br/>export default {<br/>data: { show: false },<br/>methods: {<br/>toggle() {<br/>this.show ? this.close() : this.open();<br/>},<br/>open() {<br/>window.addEventListener('keydown', this.handleEscape);<br/>this.show = true;<br/>},<br/>close() {<br/>window.removeEventListener('keydown', this.handleEscape);<br/>this.show = false;<br/>},<br/>handleEscape(event) {<br/>if (event.code === 'Escape') this.close();<br/>},<br/>},<br/>};<br/>

    View full-size slide

  25. HAMBURGER MENU IN ALPINE

    View full-size slide

  26. CONVERTING
    A CONTACT MODAL

    View full-size slide

  27. CONTACT MODAL IN VUE

    View full-size slide




  28. ×



    <br/>export default {<br/>props: { show: {} },<br/>methods: {<br/>open() {<br/>window.addEventListener('keydown', this.handleEscape);<br/>},<br/>close() {<br/>window.removeEventListener('keydown', this.handleEscape);<br/>},<br/>handleEscape(event) {<br/>if (event.code === 'Escape') this.close();<br/>},<br/>},<br/>// A watch handler for "show"<br/>};<br/>

    View full-size slide





  29. Name
    Email
    Submit



    <br/>import Modal from "./modal.vue";<br/>export default {<br/>components: { Modal },<br/>data() {<br/>return { form: { name: null, email: null } };<br/>},<br/>methods: {<br/>formIsValid() { /* Validate */ },<br/>submitForm() {<br/>if (this.formIsValid()) axios(/* Post the form */);<br/>}<br/>}<br/>};<br/>

    View full-size slide

  30. CONTACT MODAL IN ALPINE

    View full-size slide

  31. Basic modal
    x-data="{ showModal: false }"
    @keydown.escape.window="showModal = false"
    >
    Open Modal


    X
    Content goes here



    View full-size slide

  32. Extract...
    x-data="modal()"
    @keydown.escape.window="showModal = false"
    >
    ...

    <br/>function modal() {<br/>return {<br/>showModal: false,<br/>}<br/>}<br/>

    View full-size slide

  33. Extract further...

    ...

    <br/>function modal() {<br/>return {<br/>showModal: false,<br/>modalSpread: {<br/>['x-on:keydown.escape.window']() {<br/>this.showModal = false;<br/>},<br/>},<br/>}<br/>}<br/>

    View full-size slide

  34. Contact modal script
    <br/>function contact_modal() {<br/>return {<br/>form: {<br/>name: null,<br/>email: null,<br/>},<br/>formIsValid() { /* Validate */ },<br/>submitForm() {<br/>if (this.formIsValid()) axios(/* Post the form */);<br/>},<br/>}<br/>}<br/>

    View full-size slide

  35. Apply both modal and contact modal
    x-data="{...modal(), ...contact_modal()}"
    x-spread="{...modalSpread, ...contactModalSpread}"
    >
    Name
    Email
    Submit

    View full-size slide

  36. WHEN I WOULD RECOMMEND
    MOVING FROM VUE to ALPINE
    ▸ Hamburgers and toggles
    ▸ Modals and accordions
    ▸ Widgets
    ▸ Simple AJAX/Axios calls & forms
    ▸ “We’re using Vue because this is too complex for vanilla JS”

    View full-size slide

  37. WHEN I WOULDN'T RECOMMEND
    MOVING FROM VUE to ALPINE
    CAVEAT: YOU CAN USE ALPINE FOR MOST OF THESE,
    I JUST WOULDN’T RECOMMEND REWRITING
    ▸ Full page components
    ▸ Significant component nesting
    ▸ SPAs
    ▸ Most major dashboards

    View full-size slide

  38. YOUR NEXT STEPS
    Using Vue for minor JS because
    at least it's better than jQuery?
    Run Lighthouse. Then try Alpine.

    View full-size slide