From Vue to Alpine: How & Why

Slide 1

Slide 1 text

From VUE to ALPINE: HOW & WHY

Slide 2

Slide 2 text

Back Story: THE JAVASCRIPT FRAMEWORKS FRAMEWORK

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

WHY WE BASICALLY NEVER CONVERT FRAMEWORKS ON AN EXISTING PROJECT

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Where does Alpine ﬁt for new builds?

Slide 7

Slide 7 text

Where does Alpine ﬁt for new builds? Story time!

Slide 8

Slide 8 text

The CORE WEB VITALS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

LARGEST CONTENTFUL PAINT

Slide 11

Slide 11 text

FIRST INPUT DELAY

Slide 12

Slide 12 text

CUMULATIVE LAYOUT SHIFT

Slide 13

Slide 13 text

A QUICK INTRO to LIGHTHOUSE

Slide 14

Slide 14 text

STORY TIME TIGHTEN.CO and the CORE WEB VITALS

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Alpine to the rescue!

Slide 21

Slide 21 text

ALPINE ❤ CORE WEB VITALS

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

PROCESSING TIME, NO ACTUAL CODE ON PAGE:

Slide 24

Slide 24 text

PROCESSING TIME, NO ACTUAL CODE ON PAGE:

Slide 25

Slide 25 text

PROCESSING TIME, SIMPLE HAMBURGER

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

EXAMPLES

Slide 28

Slide 28 text

CONVERTING A HAMBURGER MENU

Slide 29

Slide 29 text

HAMBURGER MENU IN VUE

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

HAMBURGER MENU IN ALPINE

Slide 32

Slide 32 text

Slide 33

Slide 33 text

CONVERTING A CONTACT MODAL

Slide 34

Slide 34 text

CONTACT MODAL IN VUE

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

CONTACT MODAL IN ALPINE

Slide 38

Slide 38 text

Basic modal

Open Modal

Content goes here

Slide 39

Slide 39 text

Extract...

...

function modal() { return { showModal: false, } }

Slide 40

Slide 40 text

Extract further...

...

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Apply both modal and contact modal

Name Email Submit

Slide 43

Slide 43 text

CONCLUSION

Slide 44

Slide 44 text

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”

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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