JSX was and still is a great way to build UI. But what a ceremony to achieve its goal.
You can not teach it to a junior without explaining all the mess it needs only for the setup.
What if you could declare your UI with plain objects ?
What if you could create elements in a declarative way ?
Look at this :
const juris = new Juris()
// This is your UI
const vnode = {
div: {
className: 'card',
style: { padding: '20px', background: '#f0f0f0' },
children: [
{ h2: { text: 'Hello World' } },
{ p: { text: 'Built with pure JavaScript objects' } },
{ button: {
text: 'Click me',
onclick: () => alert('No framework needed!, no messing with npm')
}}
]
}
};
// This creates real DOM
const element = juris.objectToHtml(vnode);
document.body.appendChild(element);
You can test it here Demo
No JSX, no template strings, only pure Javascript objects.
Let us see if Juris will grow in popularity, I hope it.