New formatting concept for JSON based virtual DOM
When I first dived into Javascript back in 2001 (pre jQuery → 2006), there was the concept:
“Do not mix html with Javascript”
Examples like jQuery or Wordpress have shown us how bad code can get in case you push mixing it to a limit.
The combination of React and JSX has shown us that it can be done in a way which is ok, so the concept no longer applies today.
However, the meaning of the concept was a different one:
“Do not mix logic with your markup”
In my opinion, this is something most frontend developers have forgotten these days and it is time for a wake up call.
Content
- Problem 1: Logic within markup
- Problem 2: Scoping
- Advantages of using JSON based vdom
- What is the problem with JSON based vdom?
- The new formatting concept
- A more complex formatting change example
- Experience the benefits in action!
Problem 1: Logic within markup
Looking at the React homepage:
You could argue that this is not really XML, so let’s use the term markup.
if / else statements do not belong here. The same goes for loops.
Javascript is not good for editing “Strings”. Dynamically changing templates at runtime can be tricky, especially the more complex your components become.
2. Problem 2: Scoping
Probably every frontend developer has run into “this”, quite literally. You use a class fn inside your markup and it is not always clear where your scope is.
Looking at the React homepage again:
Public class fields do get applied inside the constructor. In case you abuse them to define functions, each instance will get their own copy. This is expensive and has little to do with how classes should work: applying methods on the prototype level.
Definitely better, but still a wrapper fn just to get your scope in place.
These problems do not exist in case you go for JSON based vdom.
3. Advantages of using JSON based vdom
This would leave the scope of this article.
(sorry, but just had to phrase it this way)
In case you use nested Javascript objects and arrays, Javascript is just perfect for dynamically manipulating them at run time.
I wrote an article to cover this in depth (e.g. infinite scrolling):
4. What is the problem with JSON based vdom?
The biggest concern was that it can be hard to read.
An example of a complex component:
The code is not really compact and it can be tricky to see the DOM structure.
5. The new formatting concept
Since we can format JSON differently, I thought about a concept to make it look more like html, without changing the content itself.
The DOM structure is more clear.
[Side note] An object with no tag property is a div .
You could easily add or remove list items by either directly accessing an ul node or by using a flag.
6. A more complex formatting change example
old:
new:
7. Experience the benefits in action!
neo.mjs is most likely the first Javascript UI framework which embraces JSON to the fullest. There is no XML, there are no templates.
Since the main actor of the framework is a web worker, there is no direct access to the real DOM. This makes virtual dom in general mandatory.
Except of the multithreading aspect, JSON based vdom plays a key role to get this performance. Parsing a nested objects & arrays structure for delta updates is just blazing fast.
I hope the new vdom formatting makes getting up to speed a bit easier.
Best regards & happy coding,
Tobias
Article preview image:
