Искали ли сте някога да направите малко приложение за интерфейс? или може би сте се почувствали като React, Angular или дори Vue като прекалени за това, което се опитвате да изградите? Ако трябва да създадете просто приложение, но все пак трябва да можете да работите със състояния по някакъв начин, тогава изборът на нещо като „Hyperapp“ може да бъде добър избор за вас.
Тази статия описва как можете да започнете, като създадете малко приложение за брояч с тази малка рамка.
Въведение
Hyperapp е малка рамка за изграждане на уеб приложения. И под малък имам предвид абсолютно малък (приблизително 1KB). Едно хиперприложение може да бъде разделено на три части:
- състояние
- Преглед
- Действия
Вкарвате тези три неща в машината за хиперприложения и излиза вашето прекрасно ново приложение.
Нека поясня по-подробно.
Изграждане на приложение за брояч с Hyperapp
Първо създаваме документ index.html със следните компоненти.
… и сте готови.
По принцип това е вашият стандартен HTML документ със скрипт таг. Основната магия се случва с функцията app(). Отнема три параметъра:
- Първоначално състояние: В нашия случай броячът е настроен на 1.
- Изглед:Използваме инструментите, предоставени от Hyperapp, за да създаваме DOM елементи като бутони и текстове.
- DOM възел:В нашия случай ние предаваме основния div с id приложение, където искаме приложението да бъде инжектирано.
Това, което се случва, е, че когато състоянието се промени, хиперприложението автоматично открива промените и опреснява DOM.
Заключение:
Вече направихме първото си приложение с Hyperapp. И това е само началото. Можете да започнете да създавате по-сложни приложения и също така лесно да въвеждате webpack или rollup, за да обедините приложението си, докато става все по-сложно.
