$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. ABOUT ME ▸ ! Christian Leo-Pernold ▸ "#$%&'()*⛰,-./ ▸ 0

    @mazedlx ▸ 1 @[email protected] ▸ ⭐ github.com/mazedlx ▸ 3 mazedlx.net 2/23
  2. 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
  3. I just want to to le a menu — probably

    you, somewhere in time 11/23
  4. <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
  5. <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
  6. $ 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
  7. 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