Skip to content

Latest commit

 

History

History
246 lines (184 loc) · 4.42 KB

alpine.md

File metadata and controls

246 lines (184 loc) · 4.42 KB
Raw
title author theme
Alpine.js - old school is coming back...
Shawn Wang
name override
dark
default footer
colors
foreground
beeeff
style center right
template
NCKU-CCS
🚀 {current_slide} / {total_slides}

Alpine.js - Your new, lightweight, JavaScript framework.

<script src="alpine.js" defer>
</script>
<div x-data="{ open: false }">
    <button @click="open = true">
      Expand
    </button>
 
    <span x-show="open">
        Content...
    </span>
</div>
  • Don't need to bundle or build tooling
  • defer: parallel downloading & executed after the page has finished parsing.
  • simple - js version TailwindCSS
  • 18 directives / attributes
  • 9 magics / properties
  • 3 globals / methods.
  • lightweight - cdn 43k/16k(gz)
  • Vue reactivity system
  • extensions / plugins / components

Doc & Components

Doc:

Components:

x-data - defines reactive data for that component to reference.

<div x-data="{
    foo: 'bar',
    open: false,
    get isOpen() { return this.open },
    toggle() {
      this.open = ! this.open
    }
  }">
  <span x-text="foo"></span>
  <div x-data="{ bar: 'baz' }">
    <span x-text="foo"></span>
    <div x-data="{ foo: 'bob' }">
      <span x-text="foo"></span>
    </div>
  </div>
  <button @click="toggle()">Toggle</button>
  <div x-show="isOpen">
    Content...
  </div>
</div>
  • Scope - available to all element children (even nested)
    • Single-element components
  • Methods
    • x-data is evaluated as a normal JavaScript object
    • Getters
      • get isOpen() { return this.open }
  • Data-less components
    • <div x-data>

compare to other frameworks

  • vs React - (-) JSX (-) VDOM (-) SPA
  • vs Vue - (-) VDOM (-) SPA
    • (=) template-wise (=) MPA (=) Reactivity
    • (*) component scope
  • vs htmx(*) - (-) make HTTP requests/response (=) MPA
  • vs astrojs(*)/nextjs - (-) SSG/SSR (=) MPA

vs React

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
  • JSX

vs Vue

  • 重新認識 Vue.js 008 天絕對看不完的 Vue.js 3.0 指南 https://book.vue.tw/
  • 簡化版 vue, petite-vue
<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

vs htmx

  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>
  • to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes
  • simplicity and power of hypertext

vs astrojs

  • Component Islands
  • Zero JavaScript - Input JS Output Html
  • Highly customizable
  • UI- agnostic (meaning it is interoperable with a lot of UI frameworks)
  • Server-first API (SSR/SSG)
    • Server Side Rendering
    • Static Site Generator
  • Edge ready
---
const pageTitle = "About Me";
---  
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{pageTitle}</title>
  </head>
  <body>
   ...
  </body>
</html>

old school is coming back...

TALL stack - Tailwind CSS / AlpineJS / Laravel / Livewire