Alpine.js

A talk about Alpine.js. What is it, and where would you use it?

Transcript

2. ABOUT ME ▸ ! Christian Leo-Pernold ▸ "#$%&'()*⛰,-./ ▸ 0 @mazedlx ▸ 1 @mazedlx@wien.rocks ▸ ⭐ github.com/mazedlx ▸ 3 mazedlx.net 2/23
3. 3/23
4. 4/23
5. 1. Go to e.g. https://jquery.com/ 2. Hit download 3. Copy file to app directory 4. <script src="path/to/file"></script> 5. Ship it! 5/23
6. 6/23
7. 7/23
8. ▸ React ▸ Angular ▸ Vue.js ▸ Svelte ▸ Charizard ▸ Ember.js ▸ Meteor 8/23
9. ▸ React ▸ Angular ▸ Vue.js ▸ Svelte ▸ Charizard ▸ ▸ Ember.js ▸ Meteor 9/23
10. ▸ React ▸ Angular ▸ Vue.js ▸ Svelte ▸ Backbone.js ▸ Ember.js ▸ Meteor 10/23
11. I just want to to le a menu — probably you, somewhere in time 11/23
12. 12/23
13. <div> <button id="btn"> ! </button> <div id="menu" class="hidden"> <ul> <li>...</li> </ul> </div> </div> <script> let btn = document.getElementById("btn"); let menu = document.getElementById("menu"); btn.addEventListener("click", () => menu.classList.toggle("hidden")); </script> 13/23
14. 14/23
15. <template> <button @click="toggle"> ! </button> <div v-show="open"> <ul> <li>...</li> </ul> </div> </template> <script> export default { data() { return { open: false, }; }, methods: { toggle() { this.open = !this.open; }, }, }; </script> 15/23
16. 16/23
17. $ npm init vue@latest ✔ Project name: … <your-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 ./<your-project-name>... Done. $ cd your-project-name $ npm install $ npm run dev ... $ npm run build 17/23
18. 18/23
19. DEMO 19/23
20. 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/alpinejs@3.12.0/ 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
21. CAVEATS ▸ SPAs/full page components are possible but I would not recommend it 21/23
22. WHERE TO GO FROM HERE? ▸ https://alpinejs.dev/ ▸ https://github.com/alpine-collective/awesome ▸ Using Vue instead of jQuery? Try Alpine.js! 22/23
23. THANKS! SLIDES CAN BE FOUND AT SPEAKERDECK.COM/MAZEDLX 23/23