前端框架的新星-Hyperapp 1.0簡介

原文連接:https://hackernoon.com/introducing-hyperapp-1-0-dbf4229abfefhtml

image

在這個React, Vue, Angular三足鼎立的前端框架圈(其實React, Vue也不能算是框架),其實也出現了很是不錯的庫,由於被前三者的光芒所掩蓋,因此並不太爲人知。今天就要向大家介紹其中一個:Hyperapp。前端

歷時了將近一年的時間,Hyperapp1.0終於發佈,這也標誌着它已經趨於穩定了,API也趨於成熟。git

什麼是Hyperapp?

若是你尚未據說過Hyperapp,那我今天很榮幸成爲第一個想你介紹這個庫的人。Hyperapp是一個爲了搭建快速又有着豐富功能的網頁應用而生的現代JS庫。它的大小僅有1.3kB,而且很是容易上手。github

Hyperapp的架構借鑑了React、Redux以及Elm,一樣也包含了做者和社區其餘代碼貢獻者的思想精髓。下面就是一個很是精簡的例子:小程序

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

export const main = app(state, actions, view, document.body)
複製代碼

對於Hyperapp來講,JSX並非必須的。可是鑑於你們都很熟悉,因此在例子和文檔中咱們始終都用到JSX。bash

Hyperapp也提供了一些JSX的替代方案,好比h函數(Hyperapp的首字母)、hyperapp/htmlhyperxt7前端框架

Hyperapp的初衷就是以儘可能少的代碼作儘可能多的事。做者也一直在嘗試使用更少的依賴,我想他這樣的願望終究能達成。另外值得一提的是,Hyperapp雖小,可是仍然包含了狀態管理、虛擬DOM引擎,全部這些都是無依賴的。架構

Hyperapp的下一步?

做者以及計劃了不少要作的事,其中就包括提交一個Hacker News PWA到hnpwa.com,也包括往RealWorld添加一個案例實現。app

另外做者也打算花更多時間在Hyperapp生態和工具的建設上,包括:腳手架、構建、開發工具的集成等等。若是大家有任何的建議,歡迎隨時反饋。框架

若是你們感興趣,能夠去Hyperapp的Github上看看教程。

以後若是有時間的話,我會爲你們詳細講解源碼,在三大框架以外也學習一些新的東西。

硬廣

這是本人的前端技術小程序,基本上全部的文章都會同步更新在小程序中。歡迎你們來湊熱鬧。

image
image
相關文章
相關標籤/搜索