Giới thiệu nhanh về Hyperapp
Hyperapp là một micro-framework rất nhỏ được sử dụng để xây dựng các ứng dụng web khai báo. Nó chỉ có kích thước 1kB và API tương tự như của React, hoàn hảo, phải không ?! Ta sẽ xây dựng một ứng dụng truy cập nhỏ để chứng minh cách hoạt động của Hyperapp.
Dự án Hyper mới
Để bắt đầu, ta có thể tạo một ứng dụng Node mới và cài đặt hyperapp . Sau đó, ta sẽ cung cấp ứng dụng này bằng cách sử dụng bưu kiện :
# New directory, here we call it `hyper` $ mkdir hyper && cd hyper # Initialise Node project $ npm init -y # Install Hyperapp $ npm i hyperapp # Create index.html and app.js $ touch index.html $ touch app.js # Install `parcel` globally $ npm i parcel -g # Serve our application in the browser $ parcel index.html Sau đó, ta có thể soạn thảo một trang index.html chuẩn bao gồm app.js , trang này sẽ chứa mã hyperapp của ta .
<!DOCTYPE html> <html lang="en"> <head> <title>🎉 Hyperapp</title> </head> <body> <div id="app"></div> <script src="app.js"></script> </body> </html> Xây dựng quầy
Các ứng dụng hướng trạng thái luôn bắt đầu bằng ví dụ Bộ đếm. Điều này cho phép ta làm quen với cách dữ liệu chảy trong ứng dụng của ta . Hãy bắt đầu bằng cách xác định một số state :
const state = { count: 0 } Sau đó, ta có thể xác định một view dựa trên state đó. Điều này có thể được hiển thị bằng cách sử dụng cú pháp mẫu chuẩn:
// ... const view = state => ( <div> <h1>{state.count}</h1> </div> ); Cuối cùng, ta có thể đính kèm nó vào một phần tử cụ thể bên trong DOM. Tôi đã chọn thêm điều này vào div với id của app :
// ... const el = document.getElementById('app'); const main = app(state, {}, view, el); Đây là ứng dụng đơn giản của ta trông như thế nào:
Vì state là bất biến và không nên được cập nhật trực tiếp, giờ đây ta có thể thêm actions để thao tác state như sau:
// ... const actions = { increment: () => state => ({ count: (state.count += 1) }), decrement: () => state => ({ count: (state.count -= 1) }) }; Điều này có thể được kết nối bên trong main của ta và view để cấp cho nó quyền truy cập vào các actions của ta :
// ... const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={() => actions.increment()}>Increment</button> <button onclick={() => actions.decrement()}>Decrement</button> </div> ); const main = app(state, actions, view, el); Bây giờ, nếu ta chọn Tăng hoặc Giảm, ta sẽ thấy tổng số tăng hoặc giảm.
Điều gì sẽ xảy ra nếu ta muốn làm cho điều này tăng hoặc giảm theo một số cụ thể? Hãy thêm chức năng này.
Đầu tiên, ta có thể thêm một mục mới vào đối tượng state của ta . Tôi đã chọn gọi điều này là diff , vì điều này thể hiện sự khác biệt giữa được thêm vào hoặc bị trừ:
const state = { count: 1, diff: 1 }; Sau đó, ta có thể cập nhật các actions của actions thành tăng hoặc giảm dựa trên:
const actions = { updateCount: diff => state => ({ diff: diff }), increment: diff => state => ({ count: (state.count += Number(diff)) }), decrement: diff => state => ({ count: (state.count -= Number(diff)) }) }; Và cuối cùng, ta có thể cập nhật view :
const view = (state, actions) => ( <div> <input value={state.diff} oninput={e => actions.updateCount(e.target.value)} /> <h1>{state.count}</h1> <button onclick={() => actions.increment(state.diff)}>Increment</button> <button onclick={() => actions.decrement(state.diff)}>Decrement</button> </div> ); Bây giờ ta có khả năng tận dụng dữ liệu đầu vào để cập nhật trạng thái của ta .
Các thành phần
Bây giờ ta hãy xem cách ta có thể tạo ra các thành phần từ dự án Hyperapp của ta . Ta sẽ tạo thành phần Counter và xem xét cách ta có thể nhúng phần này vào bên trong Trang và tuyến đường.
Tạo một file mới tại components/Count.js và thêm bộ đếm lấy count từ các props :
import { h } from 'hyperapp'; const Count = ({ count }) => <h1>{count}</h1>; export default Count; Sau đó, ta có thể import này vào bên trong app.js :
import Count from './components/Count'; // ... Sau đó, ta có thể chuyển count dưới dạng đạo cụ cho Count của ta trong view :
// ... const view = () => (state, actions) => ( <div> <Count count={state.count} /> <button onclick={actions.increment}>Increment</button> <button onclick={actions.decrement}>Decrement</button> </div> ); Tôi cũng đã cập nhật state và actions của ta để có thể increment và decrement count đơn giản:
const state = { count: 0 }; const actions = { increment: () => ({ count: (state.count += 1) }), decrement: () => ({ count: (state.count -= 1) }) }; định tuyến
Ta cũng có thể tận dụng lợi thế của việc định tuyến trong Hyperapp. Hãy cài đặt gói bộ định tuyến ( @hyperapp/router ) như sau:
$ npm i @hyperapp/router Sau đó, ta có thể import các thành phần định tuyến bên trong app.js :
import { Link, Route, location } from '@hyperapp/router'; Bây giờ ta có thể tạo hai trang khác nhau, Home và Blog :
// ... const Home = () => (state, actions) => ( <div> <Count count={state.count} /> <button onclick={actions.increment}>Increment</button> <button onclick={actions.decrement}>Decrement</button> </div> ); const Blog = () => <h1>Blog!</h1>; Home chứa ví dụ về bộ đếm của ta trước đây và trang Blog chỉ đơn giản là một số văn bản. Hãy chỉ định chúng dưới dạng một Route và Link và bên trong view :
// ... const view = state => ( <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/blog">Blog</Link> </li> </ul> <Route path="/" render={Home} /> <Route path="/blog" render={Blog} /> </div> ); Tiếp theo, ta cần cấp cho bộ định tuyến quyền truy cập vào location , vì nó dựa trên API Lịch sử. Thêm thông tin sau vào state và actions của bạn:
const state = { location: location.state, count: 0 }; const actions = { location: location.actions, increment: () => state => ({ count: (state.count += 1) }), decrement: diff => state => ({ count: (state.count -= 1) }) }; Cuối cùng, ta cần đăng ký chính location đó:
// ... const unsubscribe = location.subscribe(main.location); Bây giờ ta có thể chọn giữa các trang khác nhau bên trong ứng dụng của bạn !
Đây là mã đầy đủ cho ví dụ định tuyến:
import { h, app } from 'hyperapp'; import { Link, location } from '@hyperapp/router'; import Count from './components/Count'; const state = { location: location.state, count: 0 }; const actions = { location: location.actions, increment: () => state => ({ count: (state.count += 1) }), decrement: diff => state => ({ count: (state.count -= 1) }) }; const Home = () => (state, actions) => ( <div> <Count count={state.count} /> <button onclick={actions.increment}>Increment</button> <button onclick={actions.decrement}>Decrement</button> </div> ); const Blog = () => <h1>Blog!</h1>; const view = state => ( <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/blog">Blog</Link> </li> </ul> <Route path="/" render={Home} /> <Route path="/blog" render={Blog} /> </div> ); const main = app(state, actions, view, document.body); const unsubscribe = location.subscribe(main.location); Kết luận
Với điều này, bạn nên bắt đầu cuộc đua! 🏇 Ngoài ra, hãy theo dõi Hyperapp 2.0 , version này sẽ sớm ra mắt.
Các tin liên quan
