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 Slide

  2. Back Story:
    THE
    JAVASCRIPT FRAMEWORKS
    FRAMEWORK

    View 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 Slide

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

    View Slide

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

    View Slide

  6. Where does Alpine fit for new builds?

    View Slide

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

    View Slide

  8. The CORE WEB VITALS

    View Slide

  9. View Slide

  10. LARGEST CONTENTFUL PAINT

    View Slide

  11. FIRST INPUT DELAY

    View Slide

  12. CUMULATIVE LAYOUT SHIFT

    View Slide

  13. A QUICK INTRO to LIGHTHOUSE

    View Slide

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

    View Slide

  15. !

    View Slide

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

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Alpine to the rescue!

    View Slide

  21. ALPINE

    CORE WEB VITALS

    View Slide

  22. 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 Slide

  23. PROCESSING TIME, NO ACTUAL CODE ON PAGE:

    View Slide

  24. PROCESSING TIME, NO ACTUAL CODE ON PAGE:

    View Slide

  25. PROCESSING TIME, SIMPLE HAMBURGER

    View Slide

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

    View Slide

  27. EXAMPLES

    View Slide

  28. CONVERTING
    A HAMBURGER MENU

    View Slide

  29. HAMBURGER MENU IN VUE

    View Slide



  30. !


    ...


    <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 Slide

  31. HAMBURGER MENU IN ALPINE

    View Slide



  32. !


    ...


    View Slide

  33. CONVERTING
    A CONTACT MODAL

    View Slide

  34. CONTACT MODAL IN VUE

    View Slide




  35. ×



    <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 Slide





  36. 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 Slide

  37. CONTACT MODAL IN ALPINE

    View Slide

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


    X
    Content goes here



    View Slide

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

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

    View Slide

  40. 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 Slide

  41. 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 Slide

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

    View Slide

  43. CONCLUSION

    View Slide

  44. 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 Slide

  45. 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 Slide

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

    View Slide