Alpine.js

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

Transcript

1. View Slide

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

   View Slide

3. 3/23
   

   View Slide

4. 4/23
   

   View Slide

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

   View Slide

6. 6/23
   

   View Slide

7. 7/23
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 12/23
    

    View Slide

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

    View Slide

14. 14/23
    

    View Slide

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

    View Slide

16. 16/23
    

    View Slide

17. $ 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
    

    View Slide

18. 18/23
    

    View Slide

19. DEMO
    19/23
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide