hyperapp README

The project's README from github.com/hyperapp/hyperapp. As one markdown file: README.md.

Hyperapp

The tiny framework for building hypertext applications.

Here's the first example to get you started. Try it here—no build step required!

<script type="module">
  import { h, text, app } from "https://unpkg.com/hyperapp"

  const AddTodo = (state) => ({
    ...state,
    value: "",
    todos: state.todos.concat(state.value),
  })

  const NewValue = (state, event) => ({
    ...state,
    value: event.target.value,
  })

  app({
    init: { todos: [], value: "" },
    view: ({ todos, value }) =>
      h("main", {}, [
        h("h1", {}, text("To do list")),
        h("input", { type: "text", oninput: NewValue, value }),
        h("ul", {},
          todos.map((todo) => h("li", {}, text(todo)))
        ),
        h("button", { onclick: AddTodo }, text("New!")),
      ]),
    node: document.getElementById("app"),
  })
</script>

<main id="app"></main>

Check out more examples

The app starts by setting the initial state and rendering the view on the page. User input flows into actions, whose function is to update the state, causing Hyperapp to re-render the view.

When describing how a page looks in Hyperapp, we don't write markup. Instead, we use h() and text() to create a lightweight representation of the DOM (or virtual DOM for short), and Hyperapp takes care of updating the real DOM efficiently.

Installation

npm install hyperapp

Documentation

Learn the basics in the Tutorial, check out the Examples, or visit the Reference.

Packages

Official packages provide access to Web Platform APIs in a way that makes sense for Hyperapp. For third-party packages and real-world examples, browse the Hyperawesome collection.

Package Status About
@hyperapp/dom npm Inspect the DOM, focus and blur.
@hyperapp/svg npm Draw SVG with plain functions.
@hyperapp/html npm Write HTML with plain functions.
@hyperapp/time npm Subscribe to intervals, get the time now.
@hyperapp/events npm Subscribe to mouse, keyboard, window, and frame events.
@hyperapp/http npm Talk to servers, make HTTP requests (#1027).
@hyperapp/random npm Declarative random numbers and values.
@hyperapp/navigation npm Subscribe and manage the browser URL history.

Need to create your own effects and subscriptions? You can do that too.

Help, I'm stuck!

If you've hit a stumbling block, hop on our Discord server to get help, and if you remain stuck, please file an issue, and we'll help you figure it out.

Contributing

Hyperapp is free and open-source software. If you want to support Hyperapp, becoming a contributor or sponsoring is the best way to give back. Thank you to everyone who already contributed to Hyperapp! <3

License

MIT

hyperapp (hyperapp/hyperapp)

Searching Database…

19.2K ·GitHub
Hyperapp
Что это такое?Hyperapp — крошечный (около 1 КБ) JavaScript-фреймворк для создания браузерных «гипертекстовых приложений» в чисто функциональном стиле, с использованием представлений, действий, эффектов и подписок.
Это фреймворк или просто библиотека для виртуального DOM?Он объединяет в одном минималистичном фреймворке собственный виртуальный DOM, высокооптимизированный алгоритм сравнения (diff) и управление состоянием, поэтому не нужно собирать отдельные библиотеки для отрисовки и состояния.
Как начать работу с ним?Можно попробовать прямо в браузере без всякой сборки или установить npm-пакет в свой проект и начать писать представления с помощью h() и text().
Нужно ли сначала установить инструмент сборки или дополнительные зависимости?Нет, сам пакет поставляется без зависимостей времени выполнения, а примеры для быстрого старта работают прямо в браузере без сборщика и этапа сборки.
Нужно ли писать HTML/JSX-шаблоны, как в других фреймворках?Нет, у Hyperapp нет разметочного синтаксиса: страницу описывают вызовами функций h() и text(), которые строят облегчённое представление виртуального DOM; затем Hyperapp сравнивает его с настоящим DOM.
Есть ли встроенные HTTP-запросы или маршрутизация?Нет, они вынесены в отдельные официальные пакеты-дополнения, такие как @hyperapp/http, @hyperapp/navigation, @hyperapp/time и @hyperapp/events, которые устанавливаются только при необходимости.
Как на практике работает модель действий и эффектов?Пользовательский ввод передаётся в действия, задача которых — обновить состояние; это изменение состояния заставляет Hyperapp перерисовать представление, а эффекты и подписки обрабатывают всё, что выходит за рамки чистых обновлений состояния (таймеры, события, HTTP и т. д.).
Что такое Hyperawesome?Это поддерживаемая сообществом коллекция сторонних пакетов для Hyperapp и реальных примеров приложений; она отделена от официальных пакетов, перечисленных в README.
Могу ли я писать собственные эффекты и подписки?Да, в README прямо сказано, что создание собственных эффектов и подписок поддерживается помимо встроенных и тех, что входят в официальные пакеты.
What are similar projects?mithril.js, alpine, marko, riot, relay, inferno, jotai, backbone
Which topics is it in?minimalist, vdom, declarative, functional-programming, frontend-framework, state-management, lightweight, web-framework, javascript-library, browser, ui, web-development
Creator
hyperapp
Size
6.8 MB
Stars
19.2K
Updated
CommitMar 20Release2.0.0Jul 26
Age
9y
Commits · 90 Days