DEV Community

mehan
mehan

Posted on

Tired from react ? What about this library ?

React is perfect for beginners because you can write JSX in that and the magic happens . you don't even need to refresh browser ! .
but although it's good for beginners , It becomes to big problem for intermediates and advances , because You should install a lot of dependencies and It isn't fast enough .
So that's why that I made Panix.js .

rendering

panix can render a simple h1 that contains "hello world" in 7-18 ms . so the syntax is like this:

mount(node(tag , attributes , children) , parent)
Enter fullscreen mode Exit fullscreen mode

node function , is a function that returns an object contains tag and etc.
tag : should be an string like "h1" or "div"
attribute: should be an object like {id:"main"}
children : can be string or an array that contains more nodes like [node("h1",null,"hello"), node("h1",null,"goodbye")
parent : the html element that the new element is going to insert in it .

unmounting

you can unmount with unmount function :

let el = mount(node("h1" , null , "hello"),document.body)
unmount(el)
Enter fullscreen mode Exit fullscreen mode

updating

sometimes you need to update something in an element . update function is here for this :

let el = mount(node("h1" , null , "hello"),document.body)
update(el , node("h1" , null , "goodbye"))
Enter fullscreen mode Exit fullscreen mode

interesting thing that update function will automatically insert new node inside the old node parent .
this is how does update works:
Untitled Document

last words

this articles helped me a lot to understand virtual dom and code them . also the github repo is available here please star it and if you contribute

Top comments (0)