Part 2 A basic framework

Get ready, because the real excitement begins now! You’ve already dabbled in the creation of a TODO application, using nothing but HTML and vanilla JavaScript. Part 1 gave you a glimpse of the challenges involved in developing large, complex web applications that require manual Document Object Model (DOM) manipulation and real-time synchronization between the view and the model as users interact with the app.

But don’t worry; frontend frameworks were designed to make your life easier! We’ll start by abstracting away the nitty-gritty DOM manipulation code required for view creation. Enter the concept of the virtual DOM. With a virtual DOM tree, you can define how a view should appear and let the framework handle the heavy lifting, using the DOM API to create its representation in the browser.

In chapter 5, you’ll dive into crafting a state management system that communicates changes to your framework whenever the application state is altered. By bringing together the function responsible for rendering the virtual DOM and the state management system, you’ll have the initial version of your own framework.

Chapter 6 takes you one step further as you publish your framework on NPM and use it to enhance your TODO application. That’s exciting!