https://github.com/iainjreid/fui

A functional UI framework and rendering engine with an impossibly small footprint
https://github.com/iainjreid/fui

framework fui functional functional-programming interface user user-interface

Last synced: about 23 hours ago
JSON representation

A functional UI framework and rendering engine with an impossibly small footprint

• Host: GitHub
• URL: https://github.com/iainjreid/fui
• Owner: iainjreid
• License: mit
• Created: 2019-02-28T15:31:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T10:28:38.000Z (almost 2 years ago)
• Last Synced: 2024-09-18T20:53:13.171Z (about 2 months ago)
• Topics: framework, fui, functional, functional-programming, interface, user, user-interface
• Language: JavaScript
• Homepage:
• Size: 798 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


  

    

  





  

    

  

  

    

  

  

    

  

  

    

  



## What’s this all about?

Fui is a fresh take on the traditional frontend framework, it’s simple to use,

has a tiny footprint, and is blazingly fast!

Under the hood, Fui is built using functional concepts, elements you build are

referentially transparent, so wherever or however you create them they'll always

be the same.

Checkout [this repository](https://git.io/fjvBY) for a demo!

### Features

At its center, Fui plays host to a simple AST engine; a respectably lightweight

one, written in highly compressible and optimised code, weighing in at just 396

bytes.

Elements are composed using simple JavaScript functions, so there's no need for

JSX, or even HTML for that matter. Using elements is simply a case of importing

the composition, and then invoking it.

```javascript

const { div } = require("@emphori/fui/html");

// A possible component

const myWrapper = div.attr("class", "wrapper");

// Generate the DOM element

const elem = myWrapper();

// Append the element

document.body.appendChild(elem);

```

## FAQ

### Why is this not written in TypeScript?

There's rational behind not using TS for this project, simply put, the need to

easily document the possible values exposed by a Proxy isn't currently met by

the tooling provided.

## License

This project is released under the [MIT License](./LICENSE). Enjoy responsibly

✌️