Skip to content

Commit e836224

Browse files
shawn111shawn111
committed
add example
1 parent 66fe57f commit e836224

File tree

3 files changed

+240
-18
lines changed

3 files changed

+240
-18
lines changed

‎frontend/alpine-data.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<head>
3+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
4+
<script>
5+
document.addEventListener('alpine:init', () => {
6+
Alpine.data('dropdown', () => ({
7+
open: false,
8+
9+
toggle() {
10+
this.open = ! this.open
11+
}
12+
}))
13+
})
14+
</script>
15+
</head>
16+
<body>
17+
<div x-data="dropdown">
18+
<button @click="toggle">...</button>
19+
<div x-show="open">...</div>
20+
</div>
21+
22+
<div x-data="{
23+
open: false,
24+
toggle() { this.open = ! this.open }
25+
}">
26+
<button @click="toggle()">Toggle</button>
27+
<div x-show="open">
28+
Content...
29+
</div>
30+
</div>
31+
</body>
32+
</html>

‎frontend/alpine-hello.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<html>
2+
<head>
3+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
4+
</head>
5+
<body>
6+
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
7+
<div x-data="{ open: false }">
8+
<button @click="open = true">
9+
Expand
10+
</button>
11+
12+
<span x-show="open">
13+
Content...
14+
</span>
15+
</div>
16+
17+
<div class="flex items-center justify-between px-3">
18+
<div class="flex items-center">
19+
hello
20+
<span class="ml-1">Label</span>
21+
</div>
22+
</div>
23+
24+
</body>
25+
</html>

‎frontend/alpine.md

Lines changed: 183 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,158 @@
1-
# Alpine.js
1+
# Alpine.js - Your new, lightweight, JavaScript framework.
22

3-
- Don't need bundle or build tooling
4-
- simple - 15 attributes, 6 properties, and 2 methods.
5-
- lightweight - cdn
6-
- Vue reactivity system
7-
- extensions / plugins / components
8-
- https://alpinejs.dev/components / https://www.alpinetoolbox.com/ / https://js.hyperui.dev/
3+
<!-- column_layout: [1, 1] -->
94

10-
https://www.codemotion.com/magazine/frontend/ten-reasons-why-i-think-alpine-js-can-do-magic/
11-
https://medium.com/@jogarcia/alpinejs-for-the-vuejs-developer-5b39fd21c2c1
5+
<!-- column: 0 -->
126

13-
```
14-
<script src="//unpkg.com/alpinejs" defer></script>
15-
7+
```html
8+
<script src="alpine.js" defer>
9+
</script>
1610
<div x-data="{ open: false }">
17-
<button @click="open = true">Expand</button>
11+
<button @click="open = true">
12+
Expand
13+
</button>
1814

1915
<span x-show="open">
2016
Content...
2117
</span>
2218
</div>
2319
```
2420

21+
<!-- column: 1 -->
22+
23+
<!-- pause -->
24+
- Don't need bundle or build tooling
25+
<!-- pause -->
26+
- `defer`: parallel downloading & executed after the page has finished parsing.
27+
<!-- pause -->
28+
29+
- simple - js version TailwindCSS
30+
<!-- pause -->
31+
- 18 directives / attributes
32+
- 9 magics / properties
33+
- 3 globals / methods.
34+
<!-- pause -->
35+
- lightweight - cdn 43k/16k(gz)
36+
<!-- pause -->
37+
- Vue reactivity system
38+
- extensions / plugins / components
39+
40+
<!-- reset_layout -->
41+
42+
43+
44+
<!--end_slide-->
45+
46+
## Doc & Components
47+
48+
Doc:
49+
- [Alpine](https://alpinejs.dev/start-here)
50+
- [Alpine.js 繁體中文文件](https://hackmd.io/@monkenWu/S14j-NqsU) 中文文件v2
51+
- [10_reasons](https://www.codemotion.com/magazine/frontend/ten-reasons-why-i-think-alpine-js-can-do-magic/)
52+
- [from_vue](https://medium.com/@jogarcia/alpinejs-for-the-vuejs-developer-5b39fd21c2c1)
53+
54+
---
55+
56+
Components:
57+
- [Alpine UI Components](https://alpinejs.dev/components)
58+
- [Toolbox](https://www.alpinetoolbox.com/)
59+
- [HyperUI](https://js.hyperui.dev/)
60+
61+
62+
<!-- end_slide -->
63+
64+
### x-data - defines reactive data for that component to reference.
65+
66+
<!-- column_layout: [1, 1] -->
67+
68+
<!-- column: 0 -->
69+
70+
```html
71+
<div x-data="{
72+
foo: 'bar',
73+
open: false,
74+
get isOpen() { return this.open },
75+
toggle() {
76+
this.open = ! this.open
77+
}
78+
}">
79+
<span x-text="foo"></span>
80+
<div x-data="{ bar: 'baz' }">
81+
<span x-text="foo"></span>
82+
<div x-data="{ foo: 'bob' }">
83+
<span x-text="foo"></span>
84+
</div>
85+
</div>
86+
<button @click="toggle()">Toggle</button>
87+
<div x-show="isOpen">
88+
Content...
89+
</div>
90+
</div>
91+
```
92+
<!-- column: 1 -->
93+
94+
- Scope - available to all element children (even nested)
95+
- Single-element components
96+
- Methods
97+
- x-data is evaluated as a normal JavaScript object
98+
- Getters
99+
- ```get isOpen() { return this.open }```
100+
- Data-less components
101+
- ```<div x-data>```
102+
103+
104+
105+
<!--end_slide-->
106+
107+
108+
109+
110+
111+
25112
## compare to other frameworks
26113

27-
- vs React:
28-
- vs Vue:
29-
- vs htmx:
30-
- vs astrojs/nextjs:
31-
- old school is back / TALL stack
114+
- vs React - (-) JSX (-) VDOM (-) SPA
115+
- vs Vue - (-) VDOM (-) SPA
116+
- (=) template-wise (=) MPA (=) Reactivity
117+
- (*) component scope
118+
- vs htmx(*) - (-) make HTTP requests/response (=) MPA
119+
- vs astrojs(*)/nextjs - (-) SSG/SSR (=) MPA
32120

33121

122+
<!--end_slide-->
123+
34124
### vs React
35125

36126
```
37127
const root = ReactDOM.createRoot(document.getElementById('root'));
38128
root.render(<h1>Hello, world!</h1>);
129+
130+
function MyButton() {
131+
return (
132+
<button>I'm a button</button>
133+
);
134+
}
135+
```
136+
137+
<!-- column_layout: [1, 1] -->
138+
139+
<!-- column: 0 -->
140+
141+
```
142+
<div>
143+
{isLoggedIn ? (
144+
<AdminPanel />
145+
) : (
146+
<LoginForm />
147+
)}
148+
</div>
39149
```
150+
<!-- column: 1 -->
151+
- JSX
152+
153+
<!-- reset_layout -->
154+
155+
<!--end_slide-->
40156

41157
### vs Vue
42158

@@ -56,10 +172,59 @@ const msg = ref('Hello World!')
56172
</template>
57173
```
58174

175+
<!--end_slide-->
176+
59177
### vs htmx
60178

179+
```
180+
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
181+
<!-- have a button POST a click via AJAX -->
182+
<button hx-post="/clicked" hx-swap="outerHTML">
183+
Click Me
184+
</button>
185+
```
186+
187+
- to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes
188+
- simplicity and power of hypertext
189+
190+
<!--end_slide-->
61191

62192
### vs astrojs
63193

194+
<!-- column_layout: [1, 1] -->
195+
196+
<!-- column: 0 -->
197+
- Component Islands
198+
- Zero JavaScript - Input JS Output Html
199+
- Highly customizable
200+
- UI- agnostic (meaning it is interoperable with a lot of UI frameworks)
201+
- Server-first API (SSR/SSG)
202+
- Server Side Rendering
203+
- Static Site Generator
204+
- Edge ready
205+
206+
<!-- column: 1 -->
207+
```
208+
---
209+
const pageTitle = "About Me";
210+
---
211+
<html lang="en">
212+
<head>
213+
<meta charset="utf-8" />
214+
<title>{pageTitle}</title>
215+
</head>
216+
<body>
217+
...
218+
</body>
219+
</html>
220+
```
221+
222+
<!-- reset_layout -->
223+
224+
<!--end_slide-->
225+
64226

227+
old school is coming back...
228+
<!-- pause -->
229+
TALL stack - Tailwind CSS / AlpineJS / Laravel / Livewire
65230

0 commit comments

Comments
 (0)