9

Fast reactive HTML compliant web pages

 1 year ago
source link: https://reken.dev/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Fast reactive HTML compliant web pages

Fast reactive HTML compliant web pages

without virtual DOM overhead or the need for build tools

Download Reken ↗ Download reken.min.js (5kb) ↗

Quick start Add this code near the bottom of your HTML file:

<script src="https://cdn.jsdelivr.net/gh/hbroek/reken/dist/reken.min.js"></script>

Simple but powerful attributes to turbo boost your HTML

Update the counter with the button

Counter: 0 <script>counter = 0</script>
<span data-text="Counter: ${counter}"></span>
<button data-action="counter++">Increase Counter</button>

Data driven HTML

Use javascript style templates to update text in your HTML

data-text, data-html, data-attr-[attribute]

Data driven styling

Dynamically set styles and classes on HTML elements

data-style, data-class

Conditional HTML

Hide and show HTML content

data-if

Repeat HTML content

Repeat elements based on iterators such as arrays

data-for

Implicit and explicit event handling

Input controls automatically update data. Or register explicit handlers

data-value, data-action, data-on-[eventname]

Timers and intervals

With timers and intervals it is now simple for the application to execute code automatically on a partical time or interval.

data-timer, data-interval

Automatically get and post REST data

Load JSON from REST APIs, automically triggers new fetches when the url updates

data-rest, data-rest-options

Components

Create and reuse components, pass arguments or bind to component attributes. Components can be referenced with tagnames, including the component attributes. You can infinitely nest components with the slot support.

data-component, data-arg-[argumentname], data-bind-[bindable argumentname]

Module support

Modules with reusable components can be imported.

data-include

"Simplicity is the soul of efficiency." - Austin Freeman

Getting started

No tooling needed, you don't even have to install anything. To get started first play with our demos to get a feel what power Reken provides, and more importantly, how you can unleash it. Once you get a feel for that, try out Reken for yourself in our REPL environment. If you need help with the functionality scan through our documentation to get an overview of the various features. When ready to start with a new or existing HTML document, add the link to our hosted library file (5kb) and sprinkle in some Reken goodness.

Demos

Checkout our demos to get a feel of what kind of functionality you can build with Reken

Ready to play with Reken? Use our REPL (Read, Evaluate, Print and Loop) interactive environment, choose an existing example and tweak it or try an example from scratch

the REPL environment is build with Reken

Documentation

More detailed information about the Reken functionality can be found in the documentation, including all the options and some more samples.

Hosted Reken library

Easiest way to start with your own Reken enabled HTML page is to link to our hosted javascrip library. Added the following tag at the bottom of your html page between the closing body and html tag.

Off course you can also host the library yourself.

  ...
 </body>
 <script src="https://cdn.jsdelivr.net/gh/hbroek/reken/dist/reken.min.js"></script>
</html>

"Make it work, make it right, make it fast." – Kent Beck

Rotate the logo with the slider

Logo

<script>degrees = 0</script>
<img alt="Logo" data-style="transform: rotate(${degrees}deg);" src="./assets/reken-logo.png"
<input type="range" min="0" max="1080" data-value="degrees">


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK