Have you ever wondered how the popular frameworks such as Vue work under the hood? Building your own simple Javascript framework can help you understand the basics and deepen your Javascript knowledge.
This guide covers the most important features, implements them step by step and compares them to existing Vue functionalities.
Setting up the basics – Creating a render function
Before diving into advanced features, let’s start with the foundation: rendering elements to the DOM. The framework needs a function that mounts elements to the DOM with replacing the innerHTML of a given root element with a provided template string.
const render = (root, template) => {
if (!root) {
throw new Error("Root element not found.");
}
root.innerHTML = template;
}
const app = document.getElementById("app");
render(app, "<h1>Hello!</h1>");
Vue comparison: Vue uses a virtual DOM to update only the necessary parts of the UI, while this approach directly replaces the content of the root element.
Reactivity and state management
A basic form of reactivity can be achieved using Javascript’s Proxy. A Proxy is an object that allows you to intercept and customize operations performed on another object, such as reading and writing properties. It is useful for implementing reactivity by detecting changes to state and triggering updates dynamically.
const reactive = (obj) => {
return new Proxy(obj, {
set(target, key, value) {
target[key] = value;
update();
console.log(`State updated: ${key} = ${value}`);
return true;
}
});
}
const state = reactive({ message: "Hello message!"});
const update = () => {
render(app, `<h1>${state.message}</h1>`);
}
update();
setTimeout(() => {
state.message = "Updated message!"
}, 2000);
Vue comparison: Vue’s reactive system is more optimized, ensuring efficient updates to the DOM, whereas this basic implementation re-renders the entire root element whenever a state change occurs. In the Full example section there is a more complex solution which solves this issue.
Handling events and updates
Event handling is crucial for interactivity. This can be achieved by adding event listeners to a specific element and changing the state accordingly.
const renderWithEvents = (root, template) => {
root.innerHTML = template;
document.getElementById("btn").addEventListener("click", () => {
state.message = "Button clicked!";
});
}
renderWithEvents(app, `<h1>${state.message}</h1><button id='btn'>Update</button>`);
Vue comparison: Vue automatically binds events with v-on, while this implementation requires manually attaching event listeners.
Component based architecture
Modern frontend frameworks use a component based architecture. We will define a base Component class and allow instances to be rendered dynamically. Each class needs to extend the base Component class and implement their own render method. This allows to call the render method for each component, without worrying about the individual component logic.
Components should allow reusable structures, similar to Vue’s single-file components. With this approach, the entire component logic can be encapsulated and reused multiple times. For example, we can easily add multiple counter buttons and if there is a need for a change in the implementation, it will be reflected in all the instances of the Counter component.
const render = (root, template) => {
if (!root) {
throw new Error("Root element not found.");
}
root.innerHTML = template;
}
class Component {
constructor(props) {
this.props = props;
}
render() {
throw new Error("Render method must be implemented.");
}
}
class HelloWorld extends Component {
render() {
return `<h1>Hello, ${this.props.name}</h1>`;
}
}
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment() {
this.state.count++;
mountComponent(this, this.props.root);
}
render() {
return `
<div>
<p>Count: ${this.state.count}</p>
<button id='increment-btn'>Increment</button>
</div>
`;
}
}
const mountComponent = (component, root) => {
if (!(component instanceof Component)) {
throw new Error("Invalid component");
}
root.innerHTML = component.render();
addEventListeners(component);
}
const addEventListeners = (component) => {
const btn = document.getElementById("increment-btn");
if (btn && component instanceof Counter) {
btn.addEventListener("click", () => component.increment());
}
}
const app = document.getElementById("app");
render(app, `
<div id="hello"></div>
<div id="counter"></div>
`);
const helloElement = document.getElementById("hello");
const counterElement = document.getElementById("counter");
const hello = new HelloWorld({ name: "Framework" });
const counter = new Counter({ root: counterElement });
mountComponent(hello, helloElement);
mountComponent(counter, counterElement);
Full example
To consolidate everything from the previous examples and connect all the dots, this is a complete example that demonstrates rendering, reactivity, components and event handling.
Additionally this example covers the two way data binding (real time bridge between the component state and the visual element) and optimized re-rendering whenever the state changes.
// framework.js
const render = (root, template) => {
if (!root) {
throw new Error("Root element not found.");
}
root.innerHTML = template;
}
const update = (value, selector) => {
// re-render only the element that has a changed state
const stateElement = document.getElementById(selector);
if (stateElement) {
stateElement.innerHTML = value;
}
// implement two way data binding
if (currentComponent instanceof InputHandler) {
const textInput = document.getElementById(`text-input-${currentComponent.props.id}`);
textInput.value = currentComponent.state.text;
}
}
const reactive = (obj, selector) => {
return new Proxy(obj, {
set(target, key, value) {
target[key] = value;
update(value, selector[key]);
console.log(`State updated: ${key} = ${value}`);
return true;
}
});
}
class Component {
constructor(props) {
this.props = props;
}
render() {
throw new Error("Render method must be implemented.");
}
}
const mountComponent = (component, root) => {
if (!(component instanceof Component)) {
throw new Error("Invalid component");
}
root.innerHTML = component.render();
addEventListeners(component);
}
// index.js
class HelloWorld extends Component {
render() {
return `<h1>Hello, ${this.props.name}</h1>`;
}
}
class Counter extends Component {
constructor(props) {
super(props);
this.state = reactive({ count: 0 }, { count: `count-${this.props.id}`} );
}
increment() {
this.state.count++;
}
render() {
return `
<div>
<h3>Count: <span id="count-${this.props.id}">${this.state.count}</span></h3>
<button id="btn-increment-${this.props.id}">Increment</button>
</div>
`;
}
}
class InputHandler extends Component {
constructor(props) {
super(props);
this.state = reactive({ text: "" }, { text: `text-${this.props.id}`});
}
changeMessage(e) {
this.state.text = e.target.value;
}
render() {
return `
<h3 id="text-${this.props.id}">${this.state.text}</h3>
<input id="text-input-${this.props.id}" type='text' />
`;
}
}
const addEventListeners = (component) => {
if (component instanceof Counter) {
const btn = document.getElementById(`btn-increment-${component.props.id}`);
if (btn) {
btn.addEventListener("click", () => {
currentComponent = component;
component.increment();
});
}
}
if (component instanceof InputHandler) {
const textInput = document.getElementById(`text-input-${component.props.id}`);
if (textInput) {
textInput.addEventListener("input", (e) => {
currentComponent = component;
component.changeMessage(e);
});
}
}
}
const app = document.getElementById("app");
render(app, `
<div id="hello"></div>
<div id="counter"></div>
<div id="second-counter"></div>
<div id="input"></div>
`);
let currentComponent;
const helloElement = document.getElementById("hello");
const counterElement = document.getElementById("counter");
const secondCounterElement = document.getElementById("second-counter");
const inputElement = document.getElementById("input");
const hello = new HelloWorld({ name: "Framework" });
const counter = new Counter({ root: counterElement, id: '1' });
const secondCounter = new Counter({ root: secondCounterElement, id: '2' });
const inputHandler = new InputHandler({ root: inputElement, id: '3' });
mountComponent(hello, helloElement);
mountComponent(counter, counterElement);
mountComponent(secondCounter, secondCounterElement);
mountComponent(inputHandler, inputElement);
Conclusion
While this implementation is pretty simple, it emulates the existing core Vue concepts. It can always be extended to mimic some more advanced features. Should you use a custom framework in production? Probably not. But understanding how frameworks work can make you a better developer when it comes to using an existing one.
