DEV Community

Stephen Firecrow Silvernight
Stephen Firecrow Silvernight

Posted on • Updated on

Introducing TempLang - an abbreviated FE framework

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.

https://templang.org

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.

It's still in development and getting cleaner with every generation.

Top comments (0)