Alpine.js - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

ABOUT ME ▸ ! Christian Leo-Pernold ▸ "#$%&'()*⛰,-./ ▸ 0 @mazedlx ▸ 1 @[email protected] ▸ ⭐ github.com/mazedlx ▸ 3 mazedlx.net 2/23

Slide 3

Slide 3 text

3/23

Slide 4

Slide 4 text

4/23

Slide 5

Slide 5 text

1. Go to e.g. https://jquery.com/ 2. Hit download 3. Copy file to app directory 4. 5. Ship it! 5/23

Slide 6

Slide 6 text

6/23

Slide 7

Slide 7 text

7/23

Slide 8

Slide 8 text

▸ React ▸ Angular ▸ Vue.js ▸ Svelte ▸ Charizard ▸ Ember.js ▸ Meteor 8/23

Slide 9

Slide 9 text

▸ React ▸ Angular ▸ Vue.js ▸ Svelte ▸ Charizard ▸ ▸ Ember.js ▸ Meteor 9/23

Slide 10

Slide 10 text

▸ React ▸ Angular ▸ Vue.js ▸ Svelte ▸ Backbone.js ▸ Ember.js ▸ Meteor 10/23

Slide 11

Slide 11 text

I just want to to le a menu — probably you, somewhere in time 11/23

Slide 12

Slide 12 text

12/23

Slide 13

Slide 13 text

let btn = document.getElementById("btn"); let menu = document.getElementById("menu"); btn.addEventListener("click", () => menu.classList.toggle("hidden")); 13/23

Slide 14

Slide 14 text

14/23

Slide 15

Slide 15 text

export default { data() { return { open: false, }; }, methods: { toggle() { this.open = !this.open; }, }, }; 15/23

Slide 16

Slide 16 text

16/23

Slide 17

Slide 17 text

$ npm init vue@latest ✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./... Done. $ cd your-project-name $ npm install $ npm run dev ... $ npm run build 17/23

Slide 18

Slide 18 text

18/23

Slide 19

Slide 19 text

DEMO 19/23

Slide 20

Slide 20 text

RECAP ▸ fast (no really, it is, check out Matt Stauffers' talk https://youtu.be/yZv-7DWLMNA) ▸ lightweight JavaScript framework ▸ small footprint (15kb gzipped, v3.12.0, https://cdn.jsdelivr.net/npm/[email protected]/ dist/cdn.min.js) ▸ easy to learn ▸ no build steps, if you want to ▸ ideal for replacing heavy frameworks when doing UI stuff 20/23

Slide 21

Slide 21 text

CAVEATS ▸ SPAs/full page components are possible but I would not recommend it 21/23

Slide 22

Slide 22 text

WHERE TO GO FROM HERE? ▸ https://alpinejs.dev/ ▸ https://github.com/alpine-collective/awesome ▸ Using Vue instead of jQuery? Try Alpine.js! 22/23

Slide 23

Slide 23 text

THANKS! SLIDES CAN BE FOUND AT SPEAKERDECK.COM/MAZEDLX 23/23