DEV Community: Manan Pujara

Understanding Event Bubbling and Capturing in JavaScript

Manan Pujara — Thu, 04 Jul 2024 14:11:45 +0000

Imagine you're at a concert, and someone in the front row shouts a question. The message travels back through the crowd, row by row, until it reaches the back. This is similar to how event bubbling works in JavaScript. Conversely, if the question starts from the back and moves to the front, that's event capturing. Let's dive into these concepts!

Event Bubbling
Event bubbling is like the message moving from the child element up to its parents. When an event is triggered on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Event Capturing
Event capturing, on the other hand, is the reverse process. The event is first captured by the outermost element and propagated to the inner elements. Think of it as the message moving from the back of the concert hall to the front.

Here's a simple HTML example to illustrate these concepts:

<!DOCTYPE html>
<html>
<body>
  <div id="grandparent">Grandparent
    <div id="parent">Parent
      <div id="child">Child</div>
    </div>
  </div>

  <script>
    document.getElementById('grandparent').addEventListener('click', () => alert('Grandparent clicked!'), true); // Capturing
    document.getElementById('parent').addEventListener('click', () => alert('Parent clicked!'));
    document.getElementById('child').addEventListener('click', () => alert('Child clicked!'));
  </script>
</body>
</html>

In this example, clicking on "Child" will first print "Grandparent clicked!" (due to capturing) and then "Child clicked!" and "Parent clicked!" (due to bubbling).

Preventing Event Bubbling and Capturing

Stopping Event Bubbling
To stop an event from bubbling up the DOM tree, use event.stopPropagation():

Copy code
document.getElementById('child').addEventListener('click', (event) => {
  alert('Child clicked!');
  event.stopPropagation(); // Stops the event from bubbling up
});

Stopping Event Capturing
To stop an event from capturing, you can use event.stopPropagation() in the capturing phase as well:

Copy code
document.getElementById('grandparent').addEventListener('click', (event) => {
  alert('Grandparent clicked!');
  event.stopPropagation(); // Stops the event from capturing down
}, true); // Capturing phase

Use Cases

Form Validation

Prevent form submission when validation fails using event capturing.

Event Delegation

Handle events on dynamically added elements more efficiently using event bubbling.

Here are some common mistakes developers make when dealing with events:

Forgetting to Remove Event Listeners:Always clean up event listeners to avoid memory leaks.

Incorrect Use of stopPropagation
Using event.stopPropagation() incorrectly can prevent other important event handlers from executing.

Conclusion

Event bubbling and capturing are fundamental concepts for handling events in JavaScript. Experiment with these examples to better understand how they work!

Got questions or examples? Leave a comment below and let's discuss!

MobX vs. Redux: Why MobX Might Be the Better Choice for Your Next Project

Manan Pujara — Thu, 20 Jun 2024 07:32:51 +0000

State management can be a scary concept, especially for those new to coding. But fear not, because MobX is here to make things a whole lot easier! With its straightforward approach and effortless optimal rendering, MobX simplifies state management in ways you never thought possible.

What is MobX?
MobX is a state management library that makes state management simple and scalable by using reactive programming. It allows you to create observable state that automatically updates the UI whenever the state changes. MobX is known for its minimal boilerplate and ease of use, which can significantly speed up development time.

What is Redux?
Redux is another popular state management library, particularly well-known in the React ecosystem. It uses a unidirectional data flow and requires actions, reducers, and a central store to manage the state. Redux is praised for its predictability and the way it structures state updates, but it can involve a lot of boilerplate code and a steeper learning curve.

Key Differences Between MobX and Redux

Boilerplate Code One of the most significant differences between MobX and Redux is the amount of boilerplate code required.

Learning Curve Redux has a steeper learning curve due to its strict structure and the need to understand concepts like actions, reducers, and middleware. MobX, on the other hand, is more intuitive and easier to learn, especially for developers new to state management.

Flexibility vs. Predictability MobX: Offers more flexibility and less boilerplate. It allows you to write code in a way that feels natural without enforcing strict patterns. This can lead to faster development times and less frustration for developers. Redux: Provides predictability and a clear structure that can be beneficial for large teams and complex applications. The unidirectional data flow and strict patterns help maintain consistency, but at the cost of increased complexity.

Redux Example
In Redux, you need to define actions, reducers, and a store:

Actions (actions.js):

export const increment = () => ({
    type: 'INCREMENT'
});

Reducer (reducer.js):

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 };
        default:
            return state;
    }
};

export default counterReducer;

Store (store.js):

import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Component:

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment } from './actions';

const Counter = () => {
    const dispatch = useDispatch();
    const count = useSelector(state => state.count);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch(increment())}>Increment</button>
        </div>
    );
};

export default Counter;

MobX Example
In contrast, MobX requires much less boilerplate:

Store (CounterStore.js):

import { makeAutoObservable } from "mobx";

class CounterStore {
    count = 0;

    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count += 1;
    }
}

const counterStore = new CounterStore();
export default counterStore;

Component:

import React from "react";
import { observer } from "mobx-react-lite";
import counterStore from "./CounterStore";

const Counter = observer(() => (
    <div>
        <p>Count: {counterStore.count}</p>
        <button onClick={() => counterStore.increment()}>Increment</button>
    </div>
));

export default Counter;

Breaking down MobX step-by-step
Now that we've covered the basics, let's dive deeper into MobX and unpack this powerful state management tool bit by bit. Think of it like a step-by-step guide to mastering the art of keeping your app data in top-notch shape without breaking a sweat. No need for a Ph.D. in computer science here – MobX is all about simplicity and user-friendliness. I promise you'll be a pro at this in no time. So grab your favorite snack, cozy up in your favorite spot, and let's unravel the mysteries of MobX together!🚀🔥

Making state management fun (yes, it's possible!)
Alright, guys and gals, let's dive into how we can make state management a blast! Who said handling app data couldn't be exciting? Fear not, because with MobX, we're turning the tables on boring old state management. Let's inject some fun into our coding journey and see how we can flex our skills with a smile. Get ready to groove with MobX and spruce up your app like never before. Trust me, once you start enjoying managing your state, there's no looking back. So buckle up and get set for a wild ride of state management fun! 🎉💻

Why Choose MobX?

Ease of Use: MobX's simplicity and minimal boilerplate make it easy to get started and maintain.

Reactivity: The automatic updates of the UI in response to state changes reduce the need for manual updates and prevent bugs.

Flexibility: MobX allows you to write code in a way that feels more natural, without enforcing strict patterns.

Conclusion
While both MobX and Redux have their merits, MobX stands out for its simplicity, ease of use, and flexibility. If you're looking for a state management solution that minimizes boilerplate and accelerates your development process, MobX is a strong candidate. Give MobX a try in your next project, and experience the benefits of reactive state management firsthand. Happy coding!

Bun: The New Kid on the Block - Can This Speedy Upstart Really Replace Node.js?

Manan Pujara — Fri, 17 May 2024 10:17:25 +0000

Bun is a super fast all-in-one toolkit for JavaScript and TypeScript apps. The beauty of Bun lies in its ability to streamline the development process, making it smoother and more efficient than ever.

The inception of Node.js in 2009 was groundbreaking. However, as with many technologies, as it grew, so did its complexity. Think of it like a city. As a city expands, traffic congestion can become a problem.

Bun is design for faster, leaner and morden replacement of node.js

We can see here the difference in syntax and it's 4x faster than node

But How??

Bun's startup time is significantly faster than Node.js due to its Rust-based architecture.
Rust's efficient memory management and low-level control allow Bun to initialize the runtime and load the application code more quickly.

// Bun version
import { serve } from "bun";

serve((req) => {
  return new Response("Hello, Bun!");
});

In this example, the Bun version uses the built-in serve function to create a simple HTTP server that responds with "Hello, Bun!".

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, Node.js!');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

The Node.js version uses the core http module to create a similar server that responds with "Hello, Node.js!".

Bun's integrated web server can handle incoming requests more efficiently than the separate web server implementations used in Node.js.
Bun Reduced BoilerPlate by simplified API and built-in functionality (e.g., the **serve **function) result in less boilerplate code compared to the Node.js version

But The King Is King For A Reason

Node.js has been a reliable companion for developers everywhere because it works seamlessly across different operating systems, including Windows, macOS, and Linux. You can take your project from a Mac to a PC without missing a beat.
Bun, on the other hand, is still growing up. Right now, it plays nicely with macOS and Linux, but it's working hard to learn how to be friends with Windows too.
When it comes to speed, Bun is like a sports car compared to Node.js's dependable family sedan. Thanks to its sleek, Rust-based design, Bun takes the lead in several areas
Node.js has been the go-to choice for developers for over a decade. Its widespread adoption means there's a wealth of knowledge, community support, and proven best practices to lean on.
Bun is the fresh-faced newcomer in the JavaScript world. It's making waves and showing a lot of promise, but it's still carving out its place in the industry.

In short, while Node.js is the trusted, all-terrain vehicle that has been around for years, Bun is the new, speedy roadster, zipping ahead in terms of raw performance and integrated features.