So here is Space.js :
Framework We All Deserve!
This is how a Lightway framework is really looking like!
There are many frameworks that are called ligh and small but here is how really a tiny framework looking like:
Vue.js - 165kb Angular.js - 196kb Space.js - 6.7 kB!
Here is what you can do with Space.js
How to start using Space.js:
<head>
<script src=".../space.min.js.min"></script>
</head>
<body>
<h2>{name}</h2>
<script>
new Space({name: "John"})
</script>
</body>
To bind to specific dom element:
<script>
new Space({name: "John"},el: '#container')
</script>
Here is standard way to bind element:
<p>
My friend is in the room: {name}
</p>
Just use 'i' for to loop, dont loose your time!
<p s-each="cats" >
Meet my Cat: {i.name}
</p>
Or you can use 'c - from cats' automatically and stay happy:
<p s-each="cats" >
Meet my Cat: {c.name}
</p>
Or even just use field name:
<p s-each="cats" >
Meet my Cat: {:name}
</p>
Here is how you can use input to update data:
<input type="text" s-bind="name" value="Tomas"></input>
His name is: {name}
Result:
His name is: Tomas
Run Random Code directly!:
<div s-eval>
let a = 33
let b = 66
a + b
</div>
Result:
<div>
99
</div>
Run expression:
<div>
${ console.log('it works!'); }
</div>
Result:
'it works!'
Use you data within expression:
<div s-eval>
b = #name + " " + #age;
console.log(b);
</div>
Result:
'John 33'
Do you want to generate HTML based on your data ?
<div s-eval>
title ='<h>' + #name.toUpperCase() + '</h>'
title
</div>
Do you want to show or hide an item based on condition ?
<div s-show="true">
This will be visible
</div>
<div s-show="false">
This will not be visible
</div>
<div s-show="!#user.active?">
This is an active user
</div>
How it works:
Data fields will automatically get double direction binding . So if you run:
space.data.name = "New Name"
// It will automatically trigger re-rendering of that specific dom element(s).
Data arrays will also trigger render action in case you change specific item like:
space.cars[3] = {name: "Tesla", model: 'Model S'}
To trigger array re-render on new or deleted items please use array.push or array.pop function.
space.cars.push({name: "Tesla", model: 'Model S'})
space.cats.pop()
Does space.js have to render things constantly by using a timer ? No rendering will happen at initialization time and if some data was changed. Only elements that are related to updated data will be rendered.
Do you want to try it? Please feel free to test it: Download - Space.min.js - Version(0.02) (6.7kB)