I wrote some old JS code and NodeJS hydrated UI for the Simulation

I had a presentation today, I built a Distributed Priority Queue using NodeJS for that. It required me to write Stored Procedures and NodeJs backend.

Then the UI came up! Presentation without a nice UI, naah!!!

Should I use React, Vue, Svelte, SolidJS, or something else?

• I had 2-3 hours left and had to build Simulator very fast.
• React was the fastest to start with using create-react-app or parcel or vite.
• Vue etc. were slightly more involved.
• I know OLD JS well enough and browsers still support it.

I went after vanilla JS

Let's write some snippets and see how cool it is/was:

Singelton was my first choice for the presentation

let ClientPresenter = (function(){
    let clientResultArea = document.querySelector('#result-inner-client');
    
    return {
        render: function(packet){
            let div = createCell(packet.message.data.content, packet.message.data.processBy);
            clientResultArea.appendChild(div);
        }
    }
})();

let ServerPresenter = (function(){
    let serverResultArea = document.querySelector('#result-inner-client');
    
    return {
        render: function(packet){
            let div = createCell2(packet.id, packet.acquiredAt);
            serverResultArea.appendChild(div);
        }
    }
})();        

It was really a breeze, working with OLD fashinoed JS. Does it look lesser than a React component? No, when presentation is in front of you!

I separated the Communicator

Moved all WebSocket and Fetch calls to it and reactively provided the I/O result to observers to present the UI

Created a WebSocket client

Believe me it is easier to use "ws" apis then "socket js"

Created a centralized event registrar for UI and observation

It was half the React or Vue code and NO WebPack or Parcel was requirted to wire your head around.

I used the old module pattern

let Communicator = (function () {
	let privateMember = 'something';

	function somePrivateFunc() {
		// .....
	}

	return {
		myPublicApi: function () {
			// Use Private Members Here
		},
	};
})();
        

Summary

Today, I was able to deliver using the basic skills. None, of the advanced framework could have helped me that fast. So, keep learning, tomorrow you might be presenting.