@srfnstack/fntags
v0.5.1
Published
<p align="center"> <img alt="fntags header" src="https://raw.githubusercontent.com/SRFNStack/fntags/master/docs/fntags_header.gif"> </p>
Downloads
39
Maintainers
narcoleptic_snowmanReadme
What the f?
fntags primary goal is to make the developer experience pleasant while providing high performance and neato features.
No dependencies and no build tools - Import the framework directly from your favorite cdn and start building.
Everything is javascript - There's no special templating language to learn, and you won't be writing html. - This removes the template+functionality duality and helps keep you focused by removing context switching.
Real DOM elements - Every element is a real dom element, there's no virtual dom and no wrapper objects.
It's familiar - fntags was inspired by React, and the state management is similar to react hooks.
State binding is explicit and granular - Bind only the text of an element, an attribute, or a style. You control the binding, replace as much or as little as you want.
State exists without components - This allows app wide states to be maintained using export/import and removes the need for complex state management like redux.
Dynamic routing - The modRouter only loads the files required by each route and doesn't require bundling. - Bye bye fat bundles, hello highly cacheable routes.
Async Rendering - fntags will resolve promises that are passed to element functions, no special handling required.
Documentation
Check out the documentation to learn more!
f'n examples
Start a new app with one file
<html><body>
<script type="module">
import { div } from 'https://cdn.jsdelivr.net/npm/@srfnstack/[email protected]/src/fnelements.min.mjs'
document.body.append(div('Hello World!'))
</script>
</body></html>Make re-usable, customizable components using plain js functions
const hello = name => div('Hello ', name)
document.body.append( hello('world!') )Explicit two-way state binding
import { fnstate } from 'https://cdn.jsdelivr.net/npm/@srfnstack/[email protected]/src/fntags.min.mjs'
import { div, input, br } from 'https://cdn.jsdelivr.net/npm/@srfnstack/[email protected]/src/fnelements.min.mjs'
const helloInput = () => {
const name = fnstate('World')
const nameInput = input({
value: name.bindAttr(),
oninput (){ name(nameInput.value) }
})
return div(
div('Hello ', name.bindAs(), '!'),
br(),
nameInput
)
}
document.body.append(helloInput())Benchmark
Check the latest benchmark results in the widely used JS Web Frameworks Benchmark!