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!

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/alpinejs@2.8.2/dist/alpine.min.js
    1 https://cdn.jsdelivr.net/npm/vue@2.6.12/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