$30 off During Our Annual Pro Sale. View Details »

Alpine.js

 Alpine.js

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

Christian Leo-Pernold

April 21, 2023
Tweet

More Decks by Christian Leo-Pernold

Other Decks in Technology

Transcript

  1. View Slide

  2. ABOUT ME

    !
    Christian Leo-Pernold

    "#$%&'()*⛰,-./

    0
    @mazedlx

    1
    @[email protected]


    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/[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

    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