DEV Community: Parth Chovatiya

Exploring the World of Databases: From Relational to NoSQL and Beyond

Parth Chovatiya — Sun, 09 Feb 2025 07:23:21 +0000

Relational Databases

Relational databases store data in the tables consisting of rows & columns. They utilize Structured Query Language (SQL) for data manipulation and are known for their reliability and adherence to ACID (Atomicity, Consistency, Isolation, Durability_ properties. These databases are ideal for structured data and complex queries.
examples: Microsoft SQL Server, Oracle Database, MySQL, PostgreSQL

NoSQL Databases

NoSQL databases provide a flexible schema that allows for the storage of unstructured or semi-structured data. They do not rely on SQL for data access and are designed to scale horizontally, making them durable for large volumes of diverse data.

Types of NoSQL Databases:

Document-oriented Database: Store data in documents (usually JSON or XML) and are great for applications needing flexible data models Examples: MongoDB, CouchDB
Key-value Stores: Simplest form of NoSQL databases, storing data as key-value pairs. They are highly scalable and efficient for specific use cases. Examples: Redis, Amazon DynamoDB
Column-family Stores: Organize data in columns rather than rows, which enhances performance for analytical queries. Examples: Apache Cassandra, HBase
Graph Databases: Designed for data with complex relationships, these databases use graph structures to represent and query data efficiently. Examples: Neo4j, Amazon Neptune.

Cloud Databases

Cloud databases are hosted on cloud platforms, providing scalability, flexibility, and high availability. They can be relational or NoSQL and often come with low maintenance requirements due to managed services.
Examples: Amazon RDS, Microsoft Azure SQL Database, Oracle Autonomous Database.

Object-oriented Databases

These databases store data in the form of objects, similar to object-oriented programming. They are useful for applications that require complex data structures and relationships.
Examples: ObjectStore, db4o.

Hierarchical Databases

Hierarchical databases organize data in a tree-like structure, where each record has a single parent and potentially multiple children. This model is less flexible and scalable compared to other database types.
Examples: IBM Information Management System (IMS).

Network Databases

Network databases allow for more complex relationships by permitting records to have multiple parent and child relationships, forming a graph structure. This flexibility supports many-to-many relationships.
Examples: Integrated Data Store (IDS), CODASYL DBTG.

Time-Series Databases

These databases are optimized for handling time-stamped data, making them ideal for applications involving time-series analytics, such as IoT data and financial transactions.
Examples: InfluxDB, TimescaleDB

Vector Databases

Vector databases are designed for machine learning applications, efficiently storing and querying high-dimensional vectors. They are increasingly important for tasks like recommendation systems and natural language processing.
Examples: Pinecone, Weaviate

🚀 Understanding the V8 Engine: Optimizing JavaScript for Peak Performance

Parth Chovatiya — Wed, 26 Jun 2024 04:45:00 +0000

The V8 engine is the powerhouse behind JavaScript execution in Google Chrome and Node.js. Developed by Google, V8 compiles JavaScript directly to native machine code, providing high performance and efficiency. In this article, we'll explore the inner workings of the V8 engine and share advanced techniques to optimize your JavaScript code for peak performance.

🔍 How the V8 Engine Works

Before we dive into optimization techniques, it's crucial to understand how the V8 engine works. Here's a high-level overview of its architecture:

Parsing and Compilation

Parsing: V8 starts by parsing the JavaScript code into an Abstract Syntax Tree (AST).
Ignition: The AST is then fed to the Ignition interpreter, which generates bytecode.
Turbofan: Frequently executed (hot) code paths are identified and optimized by the Turbofan JIT (Just-In-Time) compiler, which compiles bytecode to highly optimized machine code.

Garbage Collection

V8 employs a generational garbage collection strategy, with a young generation for short-lived objects and an old generation for long-lived objects. The main components are:

Scavenge: Quickly reclaims memory from short-lived objects.
Mark-Sweep/Mark-Compact: Handles long-lived objects and compacts memory to reduce fragmentation.

🛠️ Optimizing JavaScript for V8

Understanding V8's internals helps in writing JavaScript code that performs efficiently. Here are some advanced optimization techniques:

Tip: Avoid Deoptimizing Code

V8 optimizes code based on assumptions made during execution. Certain patterns can deoptimize code, reverting it to slower execution paths.

Avoid: Hidden Classes and Inline Caches

Hidden classes are internal structures used by V8 to optimize property access. Changing an object's shape (i.e., adding or removing properties) can lead to deoptimizations.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

const p = new Point(1, 2);
p.z = 3; // Avoid adding properties after object creation

Tip: Inline Functions

V8 can inline small functions to reduce the overhead of function calls. Keep functions small and focused.

function add(a, b) {
    return a + b;
}

function calculate() {
    return add(1, 2) + add(3, 4);
}

Tip: Use Efficient Data Structures

Use Map and Set for collections, as they provide better performance for certain operations compared to plain objects and arrays.

const map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // Efficient key-value lookups

Tip: Optimize Loops

Optimize loop conditions and avoid redundant calculations within loops.

const items = [/* large array */];
for (let i = 0, len = items.length; i < len; i++) {
    // Process items[i]
}

📊 Profiling and Benchmarking

Use profiling tools to identify performance bottlenecks and measure the impact of optimizations.

Chrome DevTools

Chrome DevTools provides a powerful suite of tools for profiling JavaScript performance.

Open DevTools: F12 or Ctrl+Shift+I
Performance Tab: Record a performance profile while interacting with your application.
Heap Snapshot: Analyze memory usage and identify memory leaks.

Node.js Profiler

Use the built-in Node.js profiler to analyze performance in server-side applications.

node --prof app.js

Analyze the generated log file using the prof-process tool:

node --prof-process isolate-0xNNNNNNNNNN-v8.log > processed.txt

🧩 Advanced V8 Features

Explore advanced V8 features and APIs to further enhance performance.

Tip: Use Worker Threads

Offload CPU-intensive tasks to worker threads in Node.js to keep the main event loop responsive.

const { Worker } = require('worker_threads');

const worker = new Worker('./worker.js');
worker.postMessage('Start');

worker.on('message', (message) => {
    console.log('Message from worker:', message);
});

Tip: Leverage WebAssembly

For performance-critical tasks, compile code to WebAssembly and execute it in the V8 engine.

fetch('module.wasm').then(response =>
    response.arrayBuffer()
).then(bytes =>
    WebAssembly.instantiate(bytes, {})
).then(results => {
    const { add } = results.instance.exports;
    console.log(add(1, 2)); // Fast execution
});

Conclusion

Optimizing JavaScript for the V8 engine involves understanding its internal workings and using advanced techniques to write efficient code. By avoiding deoptimizations, using efficient data structures, optimizing loops, and leveraging profiling tools, you can significantly enhance the performance of your JavaScript applications. Dive deep into V8 and unlock the full potential of your code. Happy coding! 🚀

🔧 Advanced JavaScript Performance Optimization: Techniques and Patterns

Parth Chovatiya — Tue, 25 Jun 2024 03:30:00 +0000

As JavaScript applications become more complex, optimizing performance becomes increasingly critical. This post dives into advanced techniques and patterns to elevate your JavaScript performance and ensure your applications run smoothly even under heavy loads.

🛠️ Memory Management

Efficient memory management is key to maintaining performance in JavaScript applications. Poor memory management can lead to leaks and crashes.

Tip: Avoid Global Variables

Minimize the use of global variables to prevent memory leaks and ensure better encapsulation.

(function() {
    const localVariable = 'I am local';
    console.log(localVariable);
})();

Tip: Use WeakMap for Caching

WeakMaps allow you to cache objects without preventing garbage collection.

const cache = new WeakMap();

function process(data) {
    if (!cache.has(data)) {
        const result = expensiveComputation(data);
        cache.set(data, result);
    }
    return cache.get(data);
}

function expensiveComputation(data) {
    // Simulate expensive computation
    return data * 2;
}

🌐 Service Workers for Offline Caching

Service Workers can significantly enhance performance by caching assets and enabling offline functionality.

Tip: Implement Basic Service Worker

Set up a Service Worker to cache assets.

// sw.js
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/index.html',
                '/styles.css',
                '/script.js',
                '/image.png'
            ]);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

// Register the Service Worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Service Worker registered'))
    .catch(error => console.error('Service Worker registration failed', error));
}

📊 WebAssembly for Performance-Intensive Tasks

WebAssembly (Wasm) is a binary instruction format that allows high-performance code execution.

Tip: Use WebAssembly for Heavy Computation

Compile performance-critical parts of your application to WebAssembly.

// C code (example.c)
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

// Compile to WebAssembly
// emcc example.c -o example.js -s EXPORTED_FUNCTIONS="['_add']"

// JavaScript
fetch('example.wasm').then(response =>
    response.arrayBuffer()
).then(bytes =>
    WebAssembly.instantiate(bytes, {})
).then(results => {
    const add = results.instance.exports.add;
    console.log(add(2, 3)); // 5
});

🎛️ Web Workers for Multithreading

Web Workers allow you to run scripts in background threads, enabling multithreading in JavaScript.

Tip: Offload Intensive Tasks to Web Workers

Move heavy computations to a Web Worker to keep the main thread responsive.

// worker.js
self.onmessage = (event) => {
    const result = performHeavyComputation(event.data);
    self.postMessage(result);
};

function performHeavyComputation(data) {
    // Simulate heavy computation
    return data.split('').reverse().join('');
}

// main.js
const worker = new Worker('worker.js');

worker.postMessage('Hello, Web Worker!');

worker.onmessage = (event) => {
    console.log('Result from Worker:', event.data);
};

🚀 Optimizing React Applications

React is powerful, but it can become slow with large applications. Optimizing React performance is crucial for a seamless user experience.

Tip: Memoization with `React.memo` and `useMemo`

Use React.memo to prevent unnecessary re-renders of functional components.

const ExpensiveComponent = React.memo(({ data }) => {
    // Expensive operations here
    return <div>{data}</div>;
});

Use useMemo to memoize expensive calculations.

const MyComponent = ({ items }) => {
    const total = useMemo(() => {
        return items.reduce((sum, item) => sum + item.value, 0);
    }, [items]);

    return <div>Total: {total}</div>;
};

Tip: Code-Splitting with `React.lazy` and Suspense

Split your code to load components only when needed.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const MyComponent = () => (
    <React.Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
    </React.Suspense>
);

⚙️ Using Efficient Data Structures

Choosing the right data structures can have a significant impact on performance.

Tip: Use Maps for Fast Key-Value Lookups

Maps provide better performance for frequent additions and lookups compared to objects.

const map = new Map();
map.set('key1', 'value1');
console.log(map.get('key1')); // value1

Tip: Use Sets for Fast Unique Value Storage

Sets offer a performant way to store unique values.

const set = new Set([1, 2, 3, 4, 4]);
console.log(set.has(4)); // true
console.log(set.size); // 4

Conclusion

Advanced JavaScript performance optimization requires a deep understanding of the language and its ecosystem. By managing memory efficiently, leveraging Service Workers, using WebAssembly for computational tasks, offloading work to Web Workers, optimizing React applications, and selecting efficient data structures, you can build high-performance JavaScript applications that provide a superior user experience.

Keep exploring and experimenting with these techniques to unlock the full potential of JavaScript. Happy coding! 🚀

🚀 Boost Your JavaScript Performance: Tips and Best Practices

Parth Chovatiya — Mon, 24 Jun 2024 04:00:00 +0000

JavaScript is a powerful language, but as your application grows, so do the performance challenges. Ensuring your JavaScript code runs efficiently is crucial for delivering a smooth and responsive user experience. In this article, we’ll explore some essential tips and best practices to optimize your JavaScript performance.

Minimize DOM Access

Manipulating the DOM is one of the most performance-intensive operations in JavaScript. Reducing the frequency and complexity of DOM access can significantly improve performance.

Tip: Batch DOM Manipulations

Instead of modifying the DOM multiple times in a loop, accumulate changes and apply them in a single operation.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Optimize Loops

Loops are a fundamental part of JavaScript, but they can be optimized to run faster.

Tip: Cache Length in Loops

When looping through arrays, cache the length to avoid recalculating it in each iteration.

const items = [/* array elements */];
for (let i = 0, len = items.length; i < len; i++) {
    // Process items[i]
}

Use Efficient Event Handling

Event listeners can degrade performance if not handled properly, especially in applications with many interactive elements.

Tip: Event Delegation

Use event delegation to minimize the number of event listeners by taking advantage of event bubbling.

document.querySelector('#parentElement').addEventListener('click', (event) => {
    if (event.target.matches('.childElement')) {
        // Handle click event on childElement
    }
});

Debounce and Throttle

For events that fire rapidly (e.g., scroll, resize), use debounce and throttle techniques to limit the number of times your function is executed.

Tip: Debounce

Execute a function only after a certain amount of time has passed since the last time it was invoked.

function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

const handleResize = debounce(() => {
    console.log('Resized');
}, 300);

window.addEventListener('resize', handleResize);

Tip: Throttle

Ensure a function is executed at most once in a specified period.

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function (...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function () {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

const handleScroll = throttle(() => {
    console.log('Scrolled');
}, 300);

window.addEventListener('scroll', handleScroll);

Optimize JSON Handling

Handling large JSON objects can be slow. Optimize your JSON parsing and stringifying.

Tip: Stream JSON Parsing

For large JSON data, consider using streaming parsers like JSONStream.

const JSONStream = require('JSONStream');
const fs = require('fs');

fs.createReadStream('largeFile.json')
  .pipe(JSONStream.parse('*'))
  .on('data', (data) => {
    console.log(data);
  });

Use Web Workers

For computationally heavy tasks, offload work to Web Workers to keep the main thread responsive.

const worker = new Worker('worker.js');

worker.postMessage('Start');

worker.onmessage = (event) => {
    console.log('Message from Worker:', event.data);
};

// worker.js
self.onmessage = (event) => {
    // Perform heavy computation
    const result = performHeavyComputation(event.data);
    self.postMessage(result);
};

function performHeavyComputation(data) {
    // Simulate heavy computation
    return data + ' processed';
}

Lazy Load Images and Assets

Load images and other assets only when they are needed to reduce initial load time and save bandwidth.

Tip: Intersection Observer

Use the Intersection Observer API to lazy load images as they come into the viewport.

const lazyImages = document.querySelectorAll('.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
});

lazyImages.forEach(img => {
    imageObserver.observe(img);
});

Conclusion

Optimizing JavaScript performance is essential for creating fast and responsive web applications. By minimizing DOM access, optimizing loops, using efficient event handling, implementing debounce and throttle techniques, optimizing JSON handling, leveraging Web Workers, and lazy loading assets, you can significantly improve the performance of your JavaScript applications. Start implementing these tips and best practices today and notice the difference in your app’s performance.

Happy coding! 🚀

🎉 Building Interactive Web Applications with Vanilla JavaScript

Parth Chovatiya — Sun, 23 Jun 2024 03:35:00 +0000

Frameworks like React and Vue are popular, but there's a lot you can do with plain JavaScript. Let's explore some techniques for building interactive web applications without any frameworks.

DOM Manipulation

Directly manipulate the Document Object Model to create dynamic content.

document.getElementById('myButton').addEventListener('click', () => {
    const newElement = document.createElement('p');
    newElement.textContent = 'Hello, World!';
    document.body.appendChild(newElement);
});

Fetch API

Interact with server-side APIs using the Fetch API.

async function loadData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

document.getElementById('loadDataButton').addEventListener('click', loadData);

Local Storage

Store data locally in the user's browser.

function saveData() {
    localStorage.setItem('name', 'Alice');
}

function loadData() {
    const name = localStorage.getItem('name');
    console.log(name); // Alice
}

document.getElementById('saveButton').addEventListener('click', saveData);
document.getElementById('loadButton').addEventListener('click', loadData);

CSS Transitions and Animations

Enhance user experience with smooth transitions and animations.

.button {
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: blue;
}

Web Components

Create reusable custom elements with Web Components.

class MyElement extends HTMLElement {
    connectedCallback() {
        this.innerHTML = '<p>Hello, Web Component!</p>';
    }
}

customElements.define('my-element', MyElement);

Conclusion

Vanilla JavaScript is powerful and versatile. By mastering DOM manipulation, the Fetch API, local storage, CSS transitions, and Web Components, you can build fully-featured interactive web applications without relying on frameworks. Happy coding!

🌟 Unlocking the Magic of JavaScript: Beyond the Basics

Parth Chovatiya — Sat, 22 Jun 2024 15:17:16 +0000

JavaScript. The language that powers the web, runs on servers, and even controls drones! It’s a language that has evolved tremendously since its inception in 1995. If you're a web developer, chances are JavaScript is a significant part of your toolkit. But how well do you really know it?

In this post, we'll dive deep into some of the lesser-known features and powerful capabilities of JavaScript that will make you appreciate the language even more. Let's embark on this journey and explore the magic that makes JavaScript so unique and powerful.

1. 🎩 The Power of Closures

Closures are one of the most powerful features of JavaScript. They allow functions to access variables from an outer function’s scope even after the outer function has returned. This can lead to some incredibly powerful patterns.

function makeCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    }
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Understanding closures can open up a world of possibilities in your code, from data encapsulation to creating factory functions.

2. 🚀 Async/Await: Making Asynchronous Code Synchronous

Asynchronous JavaScript was once the bane of many developers' existence, with callbacks leading to the dreaded "callback hell." Enter async/await, a syntactic sugar built on Promises that allows us to write asynchronous code in a synchronous manner.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData();

This modern approach not only makes your code easier to read and maintain but also keeps it free from deeply nested callback structures.

3. 🌐 Proxies: Intercepting and Customizing Operations

Proxies are a lesser-known but incredibly powerful feature that allows you to intercept and customize operations performed on objects. This can be useful for various tasks, such as validation, formatting, or even implementing reactive programming.

const handler = {
    get: function(target, property) {
        return property in target ? target[property] : `Property ${property} not found`;
    }
};

const person = new Proxy({ name: 'Alice', age: 25 }, handler);

console.log(person.name); // Alice
console.log(person.gender); // Property gender not found

Proxies can be a game-changer when it comes to adding dynamic behavior to your objects.

4. 🧩 Generators and Iterators: Advanced Control Flow

Generators provide a powerful way to handle iteration in JavaScript, allowing you to define an iterative algorithm by writing a single function whose execution is not continuous.

function* idGenerator() {
    let id = 1;
    while (true) {
        yield id++;
    }
}

const gen = idGenerator();

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

Generators can pause and resume their execution, making them perfect for managing asynchronous workflows or large datasets.

5. 🌠 Tagged Template Literals: Custom String Interpolation

Tagged template literals give you more control over string interpolation, allowing you to create custom string processing functions. This feature can be particularly useful for things like internationalization, custom syntax parsing, or even creating domain-specific languages.

function highlight(strings, ...values) {
    return strings.reduce((acc, str, i) => `${acc}${str}<mark>${values[i] || ''}</mark>`, '');
}

const name = 'JavaScript';
const adjective = 'awesome';

console.log(highlight`Learning ${name} is ${adjective}!`);
// Learning <mark>JavaScript</mark> is <mark>awesome</mark>!

With tagged template literals, the sky's the limit for what you can achieve in terms of string manipulation.

🌟 Conclusion

JavaScript is a language with immense depth and versatility. By exploring these advanced features, you can take your coding skills to the next level and unlock new possibilities in your projects. Whether you're managing complex asynchronous operations with async/await, adding dynamic behavior with Proxies, or creating custom string templates, there's always something new to discover.

So, what are you waiting for? Dive into these features, experiment with them, and let the magic of JavaScript enhance your coding journey!

Happy coding! 🎉

DEV Community: Parth Chovatiya

Exploring the World of Databases: From Relational to NoSQL and Beyond

Relational Databases

NoSQL Databases

Types of NoSQL Databases:

Cloud Databases

Object-oriented Databases

Hierarchical Databases

Network Databases

Time-Series Databases

Vector Databases

🚀 Understanding the V8 Engine: Optimizing JavaScript for Peak Performance

🔍 How the V8 Engine Works

Parsing and Compilation

Garbage Collection

🛠️ Optimizing JavaScript for V8

Tip: Avoid Deoptimizing Code

Avoid: Hidden Classes and Inline Caches

Tip: Inline Functions

Tip: Use Efficient Data Structures

Tip: Optimize Loops

📊 Profiling and Benchmarking

Chrome DevTools

Node.js Profiler

🧩 Advanced V8 Features

Tip: Use Worker Threads

Tip: Leverage WebAssembly

Conclusion

🔧 Advanced JavaScript Performance Optimization: Techniques and Patterns

🛠️ Memory Management

Tip: Avoid Global Variables

Tip: Use WeakMap for Caching

🌐 Service Workers for Offline Caching

Tip: Implement Basic Service Worker

📊 WebAssembly for Performance-Intensive Tasks

Tip: Use WebAssembly for Heavy Computation

🎛️ Web Workers for Multithreading

Tip: Offload Intensive Tasks to Web Workers

🚀 Optimizing React Applications

Tip: Memoization with React.memo and useMemo

Tip: Code-Splitting with React.lazy and Suspense

⚙️ Using Efficient Data Structures

Tip: Use Maps for Fast Key-Value Lookups

Tip: Use Sets for Fast Unique Value Storage

Conclusion

🚀 Boost Your JavaScript Performance: Tips and Best Practices

Minimize DOM Access

Tip: Batch DOM Manipulations

Optimize Loops

Tip: Cache Length in Loops

Use Efficient Event Handling

Tip: Event Delegation

Debounce and Throttle

Tip: Debounce

Tip: Throttle

Optimize JSON Handling

Tip: Stream JSON Parsing

Use Web Workers

Lazy Load Images and Assets

Tip: Intersection Observer

Conclusion

🎉 Building Interactive Web Applications with Vanilla JavaScript

DOM Manipulation

Fetch API

Local Storage

CSS Transitions and Animations

Web Components

Conclusion

🌟 Unlocking the Magic of JavaScript: Beyond the Basics

1. 🎩 The Power of Closures

2. 🚀 Async/Await: Making Asynchronous Code Synchronous

3. 🌐 Proxies: Intercepting and Customizing Operations

4. 🧩 Generators and Iterators: Advanced Control Flow

5. 🌠 Tagged Template Literals: Custom String Interpolation

🌟 Conclusion

Tip: Memoization with `React.memo` and `useMemo`

Tip: Code-Splitting with `React.lazy` and Suspense