Hi All, I've created a new frontend framework. It's designed to make the most common front end task very fast to write.
I've found that during my time as a front end developer the amount of time spent wiring stuff in ways that could be automated was high enough to build something new.
here is the framework source code under an MIT licence:
https://github.com/comparebasic/templang
I'll start by introducing a few concepts that used to take a up a lot of my time.
Event Binding: you can now tag things with on:click="^update(color=key)" and it i will call the on:update handler of any parent node with the value of key as the property color.
Property Renaming: color=key is sending the value of key as the property color as the event propagates.
Access to the target and handler element: each event contains a target and dest prop so it's easy to do things with all the elements involved. vars contains any variables on either element to make it easy to do stuff!
Styles and Classes on the fly: Styles can be built per element, you'll notice in the example that
base-style="background-color: ${key}"creates a new style rule as.custom-element-6 { background-color: rgb(187, 0, 0);}from the data{name: "Red", key: "#B00"}for that element.
There is a load of other stuff too, but more to come. The code is messy to say the least. I think in loops and you will see quite a lot of them :). If you're on a phone you will notice that the menu sets to the first element on the first touch, I'm still working this out with the event handler stack.
If this is interesting, check back here and I'll update this with more, or get in touch!
Update: April 12 - I've added a github repo with files separated into features, and some comments/explanations, link above.
Top comments (0)