DEV Community: Omher

Intro to Nest.js 🪺

Omher — Sun, 26 Feb 2023 18:04:58 +0000

Nest.js is a NodeJS framework for building scalable server-side applications with TypeScript, it provides a suite of tools that leverage either fastify or express to facilitate rapid development and predictable readable code.

It supports REST and GraphQL APIs out of the box, or you might use it to build a Full Stack application using the model view controller pattern, aka MVC), similar to frameworks like Laravel or ruby on rails, and it contains a ton of built-in modules to work with databases, handle security, implement streaming and anything else you can imagine doing in a
server side application.

Nest.js has it's own very powerful command line tool and you can scaffold out a new project with the nest new command that provides a code base pre-configured with Jest for testing and set up with TypeScript to help us write more readable and reliable code.

To start just use the cli command:

nest new <Project Name>

🧠 Controller

In the source directory you'll notice a controller, which is a fundamental building block of the framework, it's responsible for handling incoming HTTP requests and returning responses back to the client.

In order to implement a controller simply add the controller decorator to class, then inside the class you can implement methods and decorate them with HTTP verbs like: GET, POST, PATCH, PUT and more.

By default this will create an HTTPS endpoint on the root URL , but you can pass a string to the decorator to change the route or implement dynamic route parameters. In addition Nest.js provides other decorators to control things like the status code and headers and more.

In addition in the method itself parameter decorators can be used to access the request parameters or body and finally the return value from the method is the response body that gets sent back down to the client.

What's awesome about Nest.js is that you can use the cli to automatically generate more controllers to keep your code organized as it grows in complexity.

Result

💉 Provider

A provider is a class that contains shared logic throughout the entire application and can be injected as a dependency where needed any class with the injectable decorator, can be injected in the constructor of another class, for example a provider can be implemented as a guard to handle role-based user authentication or it might be implemented as a pipe to efficiently validate and transform values in a controller.

Similar to controller you can use the cli to automatically generate more providers to keep your code organized as it grows in complexity.

🗄️ Module

Each application has at least one module, a root module. The root module is the starting point Nest uses to build the application graph.
The module decorator allows code to be organized into
smaller chunks where it can be lazy loaded to run faster in serverless environments and more

Again, like controllers and providers you can use the CLI to create a module:

Thanks for reading

Resources

Repo in Github used in this post
Nest.js documentation

Intro to SolidJS: How to Create Fast, Reactive Web Apps

Omher — Sun, 08 Jan 2023 09:37:08 +0000

Intro

SolidJS is a lightweight JavaScript library for building web applications with a focus on performance and ease of use. It was designed to provide a smooth and seamless developer experience, with a simple and intuitive API that makes it easy to get started building web apps right away. Whether you're a seasoned developer or just getting started with web development, SolidJS is an excellent choice for building fast, scalable, and reliable web applications. In this post, we'll be exploring the various features and capabilities of SolidJS in this powerful framework.

So let's start

SolidJS is a declarative JavaScript framework for building fast UI with maximum control over reactivity. It was created by Ryan Carniato in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface it shares many similarities with react, components are JavaScript functions that return JSX for the UI, however unlike react there's no virtual dom, it uses a compiler more like Svelte that converts your code into vanilla JavaScript to brings you as close to the DOM as possible.

But what it's more important here it's that it's truly reactive, a function component is only called once which means you can do unheard things, for example you can set intervals predictably at the top level, and data that changes or state is managed with the create signal primitive which returns a getter and setter, the framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re-rendering the entire component, again it's truly reactive.

To get started just run the command:
npx degit solidjs/templates/js my-app

Uses Vite as the build tool and should look very familiar if you've ever used react.

You can define a component as a plain JavaScript function, when defining the UI with JSX you get a real DOM element instead of some weird framework abstraction.

To add a reactive state to a component you can use the createSignal function that provides a getter and setter, also notice how the getter is a function, this allows the framework to observe the current value reactively.

We can easily create a derived state by simply defining another function based on the original signal.

It also provides a function to memonize the return value or expensive computations, in some cases you may want to run code when your data changes, for that createEffect allows you to run side effects on any signals referenced in the body of the function, it will automatically be subscribed to re-run the side effect whenever the value changes.

Also provides onMount and onCleanup functions that tap into the beginning and end of the component lifecycle.

The framework also goes out of it's way to make JSX more developer friendly here, we have some example with this special components:

Show component to handle conditional logic

For component to simplify loops over a collection of items

Directives it supports custom directives with a use keyword which is a highly efficient way to attach custom behaviors to different elements.

Thank you for joining me, and I hope you enjoy reading about SolidJS as much as I enjoyed working with it!

Resources

SolidJS App used in post

What is TurboPack?

Omher — Fri, 02 Dec 2022 08:59:46 +0000

Did you heard about TurboPack?
TurboPack it’s the hot new thing Vercel has released lately.
Vercel has taken on the bold task of rethinking the Webpack and bundler experience for web applications: they come with a new bundler and write it in Rust.

Say what again? Yes, in Rust, that’s right, we’re rewriting all of our build tools in Rust from scratch to see if we can eke out some performance wins.
Wait, haven’t we done this a few times before with examples like Rome, SWC, and all the tools that are claiming to be speeding our build time.

There are tools in the community that already are in some kind of progress in changing our build time, so why TurboPack differ from these?

Let me dive into you in a nutshell why TurboPack matters.

It’s led by the creator of webpack, so they have a huge of experience in how build tools work.
It’s created by the same team as the turbo repo. If you’re not already familiar with turbo repo, it is a mono repo tool focused on TypeScript applications that are very, very fast, written in Golang
It takes a lot of advantage of caching.

Turbo repo hashes all the pack packages and all the build steps you create inside your repository, so when you make changes in the future it can just grab the outputted result rather than having to re-run the entire build for every chunk of your code base in every package in your mono repo. This means you can have a much faster experience building, re-running, making changes, filing Pull Requests, and all the other things that you have to do as a developer working on these big projects.

But the most important piece here, though, is that that this cache is not something that is just store on your machine; it is, for now, hosted remotely on Vercel.

If you choose, and you can link your account to your CLI, and then everybody who builds the project doesn’t matter whether they’re building it on GitHub or they’re building locally or any other platform, they will just grab the result, as it fetches a cached entity rather than having to do everything yourself and wait for those builds to pass.

We need to pay attention here because this is only happening at a package level. If you have a project with many packages, and you’ve chosen to break up your application in that way, individual packages can be cached by packages; they depend on changing would break that cash and a fresh build, you might still find a single change busting a lot of your cache because it’s in a dependency that a lot of things have.

The true magic of Turbo pack: It is in it's caching layer and how that enables your performance to scale as your applications get more extensive and not that they wrote really fast code and magically run faster.

Here’s a simplified example of what this might look like in Turbo:

We start with calling readFile on two files, file1.ts and file2.ts. We then bundle those files, concat them together, and end up with the fullBundle at the end. The results of all of those function calls get saved in the cache for later.

Now, let’s say we save the file2.ts file on your machine. Turbopack receives the file system event, and knows it needs to recompute file2.ts:

Since the result of file2.ts has changed, we need to bundle it again, which then needs to be concatenated again.

Crucially, file1.ts hasn’t changed. We read its result from the cache and pass that to concat instead. So we save time by not reading it and re-bundling it again.

Another important thing we need to notice is that currently, at the time of writing this post, TurboPack is unstable, and we’re nowhere near shipping TurboPack in production yet.

Resources:

Turbo

Thanks for reading.

A quick look at Qwik

Omher — Sun, 02 Oct 2022 06:33:14 +0000

I just got curious about Qwik, so I just started to read and research this new framework, so let's take a first look at it.

Qwik brings an entirely new rendering paradigm to the table called "resumability", which eliminates the need for Hydration.

Hydration is the technique used by almost every framework in the community to make server-rendered websites fully interactive.

To understand what makes Qwik special, we need to understand the current problem of existing frameworks, the key to a performance lighthouse score is to use less JavaScript, but the problem with web development is that to implement the features your customers want you need more JavaScript but to make your site fast you need less JavaScript. This reminds me the "The chicken or the egg causality dilemma".

In almost every existing framework, you start with a big amount of kilobytes of JavaScript out of the box, let's take for example a react app application, you will need react and also react-dom and then you start adding your code, and this size starts to increment, the size will scale of based on how much your application code you have in the page.

Another reason for this slowness is because on the initial page load the frameworks need to hydrate the DOM and rebuild/bootstrap the entire component tree from the ground up, it's like watching a movie that can't be paused, if you need to restart the application by hitting the refresh button in the browser, it needs to re-execute all the JavaScript from the beginning to get back to where it was.

Frameworks like Astro.js has recognized this problem and use a technique called "Partial Hydration", to selectively hydrate the DOM, but Qwik cuts out hydration altogether, like is not even necessary, it delivers instantly interactive HTML, which means in theory you should be able to get a perfect lighthouse performance score, no matter how big and complex your JavaScript code base is.

That sounds too good to be true, but how Qwik solve it 🤔?

The key innovation here is that a Qwik app can be fully serialized as HTML, in other words at any moment you can hit the pause button and capture all the data and closure in the application and represent it all as an HTML string, that's huge for server-side rendering because by the time that HTML gets to the browser, it's just pick up where the server left off without needing to execute any JavaScript at all and that's what they coined the term "resumability".

Another thing that makes this magic possible is lazy loading which is built in as a primitive part of the framework. To understand it, let's look at some code, at first looks like a react app that uses functional components and JSX, but what's the deal with this dollar sign? It represents a lazy loaded boundary and what you will find is that everything is lazy loaded and that even includes things like event handlers that are close over the state of the application, that's kind of crazy because how does this chunk of JavaScript know the state of the application? if it's lazy loading.

You can see in the network, we will found zero JavaScript on the initial page load and the JavaScript will be loaded until we click the button and it contains the code we want to execute and also has access to the lexical environment to update state that might be share by other components, which itself comes from another lazy loaded chunk.

The takeaway here is that you don't need to load any JavaScript until the user interacts with the UI.

If we take a look at the build result of our application, you will notice a ton of tiny chunks, less that one kilobytes each, instead of a single large bundle and because of that, Qwik can scale infinitely and you can add more JavaScript to your app and it will create another tiny chunk.

This was my first look at Qwik and I have to say that I really like the approach and will like to try it more with more complex use-cases.

Resources

Thanks for reading.

🐱‍🚀 What is Astro.js 🐱‍🚀

Omher — Tue, 06 Sep 2022 11:49:50 +0000

Astro is a tool for building static websites with your favorite JavaScript framework.

But it will ship zero JavaScript to the browser 🤯.

End-users love fast-loading websites but developers love to build them with heavy JavaScript frameworks.

Astro allows you to build your website with your favorite framework and even multiple frameworks at the same time.
Astro renders them to static HTML at build time, this sounds like a static site generator, but what it's unique here its, when you have a component that needs to be interactive with full JavaScript, you have multiple strategies to render and hydrate the client side.

Welcome to Directives

Template directives are a special kind of HTML attribute available inside of any Astro component template (.astro files), and some can also be used in .mdx files.

Template directives are used to control an element or component’s behavior in some way

Here are some example for client directives.

client:load - Will be rendered with JavaScript on the initial the page load, it's like a normal JavaScript App.

client:idle - Will wait until the browser is idle to render it, this is used when the component is not a high priority.

client:visible - Will be rendered until its visible to the end-user.

For more about client-directives here

When using Atro we need to stop thinking that our website like SPA with JavaScript takes over everything, think like an archipelago, when the water is the static HTML and islands are self-contain components that ad interactivity when need it, the result is a fast website with the full interactive power of a framework.

Picture Resource: https://www.nationalgeographic.com/travel/slideshow/paid-content-the-philippines-an-archipelago-of-unique-scenery

Building your first Atro Project

npm create astro@latest

Inside the project, you will find the pages directory, here it's the router configuration of the website. Every page is defined as an Astro component, inside of it you can write static HTML or declare components that maybe be written in React/Vue or any framework.

On the top of the component, you will notice triple dashes, this is where you can execute JavaScript on the server at build time, here you can fetch data or local markdown data in your source code.

To add React to your website, follow the following steps from the official documentation here.

Resources:

A new "Fresh" web framework is out 🍋

Omher — Tue, 02 Aug 2022 08:53:36 +0000

Well, it's the time of the week again, a new fresh web framework has been released and I know exactly what are you thinking

What is Fresh?

It's a full-stack framework for server-side rendering, similar to Ruby on rails or Lavarel but you write your app on TypeScript, because it's built on top of Dino, so you get first-class Typescript support out of the box.
In addition, you can build and deploy your app without a build step.

Features according to it's documentation

🍋 - Just-in-time rendering on the edge.
🍋 - Island based client hydration for maximum interactivity.
🍋 - Zero runtime overhead: no JS is shipped to the client by default.
🍋 - No build step.
🍋 - No configuration necessary.
🍋 - TypeScript support out of the box.

Fresh can be deployed to the edge instantly with Deno deploy.
One drawback is that Deno has a much small ecosystem than when compared to Node.js and not all NPM packages are compatible.

The most interesting thing about fresh is that it's based on the island's architecture which is also known as "Partial Hydration".
The idea is that you build a website using a JavaScript framework, in this case, Fresh used Preact for the UI, but instead of sending JavaScript to the browser, you render everything static HTML on the server, which means by default the only thing the end-user gets is a static HTML, which is faster to the browser to load and render.

But you will think that a website will need more interactivity than static HTML and that's where islands come in.
When a website needs more interactivity than static HTML, it can opt into JavaScript on individual components, the way that works in Fresh is that any component kept in the islands directory, will also ship JavaScript to the browser, and all other components will be rendered as static HTML, but one drawback to being aware of is that every page is server-side rendering, not like next.js where the client-side router takes over after the initial page load then renders everything else client-side.

It can be harder for libraries to have authentication because you will have to move your authentication logic to the server, preserving state from one route to the next can get tricky.

Another cool thing worth mentioning is that it uses "remix" style form submissions, when submitting a regular HTML form, you can write TypeScript code that will handle that form submission directly in the component file for that page.

So, let's go and get a new "Fresh" start 🍋.

Resources

The bun is out 🥟

Omher — Mon, 11 Jul 2022 19:39:36 +0000

👋🏽 Meet Bun: the brand new, all-in-one JavaScript runtime that can install npm packages faster than yarn and faster than npm and claims to be 3x faster than both Deno and node.js. Oh, last small fact it was all built by one person Jarred Sumner.

So, what is Bun?
A new JavaScript runtime, so you don't need any longer node.js, or Deno, so ahead and uninstall them for your system now, just kidding we will still need them for a while.
Bun just announced it's beta release and makes the claims that it's significantly faster that node.js and Deno.

But before we continue let's clarify something.

What is a JavaScript Runtime?

Let's think for a moment JavaScript by itself it's not very useful and it's needs to run thru an engine to convert it to machine code for a CPU.

The most popular JavaScript engine is google's V8, which powers chrome, node.js and Deno and makes execution very fast with JIT (Just in time compilation).

Now JavaScript together with the engine it's not very useful, we still something else, the developers want that the engine will provide a user-friendly API(WebSockets, file system and more). So JavaScript Runtime it's all this together(JavaScript engine and APIs), that only what is missing for the developers is to write JavaScript and it will run on this platforms.

🍞 So what it's so special with `bun`?

First they are talking about better performance, but how they actually make it so fast 🤔?

It doesn't use V8 😱, but instead use JavaScript Core from Webkit, this engine it's consider faster but more difficult to work with.

It's written in a low level programing language called zig, a relative new language similar to C or Rust.
Is all-in-one run time:
- Native bundler to replace tools like webpack
- Native transpiler, so you can write TS code out of the box
- Will also transpile your JSX not supported yet?
- Support node core modules import {readFile| from node:fs
- Support node APIs, which allow to npm packages to also work in bun
- Implements node's module resolution algorithm, which means you can install packages from npm into bun and this packages install much faster, like magic 🪄.
- Automatically loads environment variables from .env files. No more require("dotenv").load()
- Own test runner, similar to Jest

🪄Installing npm packges feels like magic 🪄
This is a small/medium project example

Sounds amazing, but remember this project it's on it's early days and there will be bugs 🐛.

Resources

Bun

Thanks for reading

The JavaScript Time Machine

Omher — Sun, 10 Jul 2022 06:33:16 +0000

Past, Present, to infinity and beyond

When developing a web application or node.js application, we run a command something like this or something similar to it:

npm run start

We, developers, forgot that behind the scenes of this small command, it's an ecosystem, and it's running for us a lot of processes; this is what I call build tools.
It doesn't matter if you are running TS, JSX, or any language when writing your code; we also forget sometimes that the code we are developing in our local machine is not the same code we will deploy on production.
Take with me a time travel to the build tools history and see how we used to write an application and how these tools are evolving and changing the way we development our apps today

🍦 The vanilla way 🍦

In the past, when you were developing a web app, you wrote your code and added a script tag to your HTML file, and you were ready to deploy.
If you want to add a new library, you need to:

Go to the website of the library,
Download the library,
Copy the file to your folders assets
Add a new script tag to your HTML file

You have to repeat/redo the same steps for every new library/file you want to add, and in addition, sometime you will finish with an HTML file containing an extensive list of scripts tags, which is not very friendly way to do it

Add script Tag	Another script Tag	💩

🐉 2009 The rise of Node.js 🐉

Node.js was released to the community in 2009; this brought with it the first version of npm and an easier way to install and maintain packages and their versions, but all the issues for web development were solved?
Not quite, we have to remember that:

JS moduled uses syntax like:
"module.exports" and "require"
the browser did not support that

But also, at the time, a lot of tools started to pop around the community, I divided them into four types:

🚚 Package Manager 🚚

npm	yarn	pnpm	bower

Default package manager	by Facebook, fix scalability issues npm had	Install only one copy of the package on disk	First package manager for the web

📜 Script Loaders 📜

RequireJS

Was very popular. The idea was to provide an asynchronous module definition and build on top of that.
The most significant attraction was AMD. It introduced a "define" wrapper.
AMD : Asynchronous Module Definition
Now RequireJS seems more like a curiosity now

JSPM

JSPM provides a module CDN and package management

👟 Task Runners 👟

Why use a task runner?
In one word: automation. The less work you have to do
when performing repetitive tasks

GruntJS	GulpJS

The JavaScript Task Runner	The streaming build tool

📦 Bundlers 📦

🥜 In a nutshell: A bundler is a development tool that combines many JavaScript code files into a single one that is production-ready loadable in the browser.
Also, these tools have been evolving here, and we have so many tools to choose from; here is a list of the most relevant bundles in the community.
Browserify is an exception in the list; this bundler is not in use anymore but was the first released to the community.

Bundler	Comments
	Browserify lets you require('modules') in the browser by bundling up all of your dependencies
	Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS
	SWC is an extensible Rust-based platform for the next generation of fast developer tools.
	The zero configuration build tool
	Next Generation Frontend Tooling
	webpack is a static module bundler for modern JavaScript applications
	Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex
	???

The Future of JavaScript Tooling 🛠️

Is Rust 🦀 the future of JS Tooling ?

There is a lot of buzz around Rust in the web development community, and some tools have been developed using Rust.
I think we are still in the early steps to know if this will be the standard for developing JS tooling, it will depend on the adoption and if the web community is ready to learn a new language.
But here are some examples og tools using Rust:

Next.js 12 uses SWC and Rust
Deno's linter, code formatter, and docs generator are built using SWC
Parcel improved overall build performance by up to 10x with SWC Rome will be written in Rust dprint built on SWC, a replacement for Prettier?

Thanks for reading 🙏

Let's Dynamic Remote modules with Webpack Module Federation

Omher — Tue, 07 Jun 2022 08:36:27 +0000

Working on my latest post regarding module federation here and the work I am doing regarding Module Federation at work brought me to a situation where I was wondering if there is another way to load a remote module, not at build time but runtime; After researching and attending to talks about the subject, I found that this is supported out of the box with Webpack and module federation plug-in.
When I discovered functionality, I was amazed and surprised nobody had told me this before. Now I will share how you can: Dynamically remote modules using Webpack Module Federation at runtime, so for me, "This Is The Way".

Steps required for Dynamic Remote modules

Configuring the Host App
Load script from remote module dynamically
Load Component from webpack share scope
Consume remote component from host
Small peek of remote configuration
Result

Configuring the Host App

Use ModuleFederationPlugin in your webpack.config.js of the app that you wish to consume modules.

Pay attention that the remotes entry now it's an empty object; you can also omit the object.
This is the only change you need regarding configuration now you need some code.
If you are consuming all dynamically, you can remove the plugin from the configuration

const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
    // your original webpack.config.js configuration
    plugins: [
        new ModuleFederationPlugin({
            name: 'host_react_module',
            filename: 'remoteEntry.js',
            remotes: {
            },
            shared: {
                react: {
                    requiredVersion: false,
                    singleton: true,
            },
        },
    }),
],

Load script from remote module dynamically

I'm using here a simple hook in React
This hook will create a script element using the browser's native API
After the script element was created we set its properties

import React from "react";
const useDynamicScript = (args) => {
  const [ready, setReady] = React.useState(false);
  const [failed, setFailed] = React.useState(false);

  React.useEffect(() => {
    if (!args.url) {
      return;
    }

    const element = document.createElement("script");

    element.src = args.url;
    element.type = "text/javascript";
    element.async = true;

    setReady(false);
    setFailed(false);

    element.onload = () => {
      console.log(`Dynamic Script Loaded: ${args.url}`);
      setReady(true);
    };

    element.onerror = () => {
      console.error(`Dynamic Script Error: ${args.url}`);
      setReady(false);
      setFailed(true);
    };

    document.head.appendChild(element);

    return () => {
      console.log(`Dynamic Script Removed: ${args.url}`);
      document.head.removeChild(element);
    };
  }, [args.url]);

  return {
    ready,
    failed
  };
};

export default useDynamicScript;

Load Component from `webpack` share scope

Use the created hook for loading the script
Load the component using React.lazy API and webpack functionality

import React, { Suspense } from "react";
import useDynamicScript from './hooks/useDynamicScript';

function loadComponent(scope, module) {
  return async () => {
    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
    await __webpack_init_sharing__("default");
    const container = window[scope]; // or get the container somewhere else
    // Initialize the container, it may provide shared modules
    await container.init(__webpack_share_scopes__.default);
    const factory = await window[scope].get(module);
    const Module = factory();
    return Module;
  };
}

function ModuleLoader(props) {
  const { ready, failed } = useDynamicScript({
    url: props.module && props.url
  });

  if (!props.module) {
    return <h2>Not system specified</h2>;
  }

  if (!ready) {
    return <h2>Loading dynamic script: {props.url}</h2>;
  }

  if (failed) {
    return <h2>Failed to load dynamic script: {props.url}</h2>;
  }

  const Component = React.lazy(
    loadComponent(props.scope, props.module)
  );

  return (
    <Suspense fallback="Loading Module">
      <Component />
    </Suspense>
  );
}

export default ModuleLoader;

Consume remote component from host

Now, after all the parts are set in place, its time to consume the component
I'm using passing the dynamic parameters thru the URL; this one approach, the easy one, but you can go crazy 🤪 with it and create your own implementation
Once the app it loaded I'm injecting the parameters from the remote module in the URL
I'm using a remote module that I already deployed at Vercel, so my URL will look like this:
- http://localhost:8080/?url=https://remote-react-module.vercel.app/RemoteEntry.js&scope=remote_react_module&module=./Kylo
- url: Address of remote module
- scope: name of the remote module set in its webpack config
- module: Component exposed in the remote module

import React, { Suspense, useEffect, useState } from 'react';
import ModuleLoader from './ModuleLoader';
function App() {
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const url = params.get('url');
    const scope = params.get('scope');
    const module = params.get('module');
    setRemote({ url, scope, module });
  }, []);
  const [remote, setRemote] = useState(null);
  return (
    <>
      <div className='Text'>
        This is the React container App hosted at localhost:8080
      </div>
      <div className='Host-Container'>
      <Suspense fallback={'Loading . . . '}>
        {
          remote && <ModuleLoader url={remote.url} scope={remote.scope} module={remote.module} />
        }
      </Suspense>

      </div>

    </>

  );
}

export default App;

Small peek of remote configuration

In the webpack config of the remote module:
- Name of the remote module: remote_react_module
- Expose a component called: ./Kylo
- These parameters MUST match when passing in the URL of the host app

    plugins: [
        new ModuleFederationPlugin({
            name: 'remote_react_module',
            filename: 'RemoteEntry.js',
            exposes: {
                './Kylo': './src/components/Kylo',
            },
    }),
    .
    .
    .

🤯 Result 🤯

Resources

Link to host react using this functionality

Building React App with Module Federation and NextJS/React

Omher — Mon, 23 May 2022 06:40:08 +0000

This document will take you step-by-step through the tasks required to set up a module federation module, with react app as host with NextJS and React Apps as remote apps. This document's how-to will show you the failing issues I encountered and how I solve them; I hope it will help others when they try to do the same.

* Disclaimer for NextJS apps you need the latest version of @module-federation/nextjs-mf that is a paid module, you can read more here

📦 Prerequisites

Knowledge in Module Federation Concepts and miro-frontends
NodeJS installed (preferable > 14)
2 Running React App with access to webpack.config.js
- Preferable not created using CRA(create react app)
- At least one React Component
- One will be the host app
- The other will a remote app
Running NextJS App
- At least one React Component
- This will be the remote app
Basic Knowledge in Webpack
License for @module-federation/nextjs-mf

Terminology

⬇️ Host: It is a top-level app that depends on modules exposed from a remote app
⬆️ Remote: Exposes components to another app called a host.

⬆️ Configuring Remote App - NextJS

Use withFederatedSidecar in your next.config.js of the app that you wish to expose modules from. We'll call this "remote_nextjs_module".

    const { withFederatedSidecar } = require("@module federation/nextjs-mf");
    module.exports = withFederatedSidecar({
        name: "remote_nextjs_module",
        filename: "static/chunks/remoteEntry.js",
        exposes: {
            "./BB8": "./components/BB8.js",
        },
        shared: {
        },
    })({
        // your original next.config.js export
        reactStrictMode: true,
    });

⬆️ Configuring Remote App - React

Use ModuleFederationPlugin in your webpack.config.js of the app that you wish to expose modules from. We'll call this "remote_react_module".
I'm demonstrating here only the implementation of ModuleFederationPlugin and not adding all the configuration of webpack.config.js of the app

    const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
    plugins: [
        new ModuleFederationPlugin({
            name: 'remote_react_module',
            filename: 'RemoteEntry.js',
            exposes: {
                './Kylo': './src/components/Kylo',
            },
            shared: {
            },
        }),

⬇️ Configuring Host App Host - React

Use ModuleFederationPlugin in your webpack.config.js of the app that you wish to consume modules. We'll call this "host_react_module".
I'm demonstrating here only the implementation of ModuleFederationPlugin and not adding all the configuration of webpack.config.js of the app

    const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
    // your original webpack.config.js configuration
    plugins: [
        new ModuleFederationPlugin({
            name: 'host_react_module',
            filename: 'remoteEntry.js',
            remotes: {
                remote_nextjs_module: 'remote_nextjs_module@http://localhost:8081/_next/static/chunks/remoteEntry.js',
                remote_react_module: 'remote_react_module@http://localhost:8082/remoteEntry.js',
            },
        shared: {
            react: {
            // Notice shared are NOT eager here.
               requiredVersion: false,
               singleton: true,
        },
    },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

📝 Configure HTML
- Go to your HTML file and add the following
```
    <noscript id="__next_css__DO_NOT_USE__"></noscript>
```
- By default NextJS adds a meta tag in its HTML called: __next_css__DO_NOT_USE__ to their HTML files
- We need this tag on our non next apps so the injector can find and load css below that tag
Go to your component in the React Host App where you want to consume the remote components
Use React.lazy or low level api to import remotes.

    import React, { Suspense } from 'react';
    const Kylo = React.lazy(() => import('remote_react_module/Kylo'));
    const BB8 = React.lazy(() => import('remote_nextjs_module/BB8'));
    function App() {
        return (
            <>
                <Suspense fallback={'loading...'}>
                    <BB8 />
                    <Kylo />
                </Suspense>
            </>
            );
    }

export default App;

🎉 Result

I have a React Host App that consumes two remote components and one local component, here
One component from a NextJS Remote App, here
One component from a React Remote App, here
One component from the host App

⛑️ Troubleshooting

- Uncaught Error: Shared module is not available for eager consumption

Solution

For example, your entry looked like this:

index.js

    import App from './App';
    import React from 'react';
    import { createRoot } from 'react-dom/client';
    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(<App />);

Let's create bootstrap.js file and move contents of the entry into it, and import that bootstrap into the entry:
index.js

    import('./bootstrap');

bootstrap.js

    import App from './App';
    import React from 'react';
    import { createRoot } from 'react-dom/client';
    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(<App />);

More in here

- Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

Solution

By default NextJS adds a meta tag in its HTML called: __next_css__DO_NOT_USE__ to their HTML files
We need that tag on our non next apps so the injector can find and load css below that tag
index.html - non next app

    <!DOCTYPE html>
    <html lang="en">
        <head> </head>
        <noscript id="__next_css__DO_NOT_USE__"></noscript>
        <body>
            <div id="root"></div>
        </body>
    </html>

- Getting 404 for remotes Components

Solution

webpack thinks public path is / which is wrong. You want it to calculate the path based on document.currentScript.src
Set publicPath:auto in your webpack.config.js
Not adding all the configuration of webpack.config.js of the app

    output: {
        publicPath: 'auto',
    },

🔗 Resources

Github repo link
App
- Host: Link for React App Hosted at Vercel
- Remote: For NextJS App Hosted at Vercel
- Remote App: For React App Hosted at Vercel
Module Federation Examples

From Desktop 3d Apps to Web 3d Apps using Blender and React

Omher — Mon, 18 Apr 2022 08:43:55 +0000

In this tutorial, I will walk you thru the steps to create a 3d react application with some interactivity so in the final you will have something like this

What is Blender? - Simply Explained
Create React App
Install dependencies
Export blender asset
Compress asset
Convert asset to JSX component
Integrate new component
Enhanced component and functionality
- Adding some style
- Install dependency
- Edit React Components
Resources
Appendix

Before you start

You will need to have the following installed or configured and know at least the basics of using them before proceeding.

NodeJS installed (preferable > 12)
Basic Knowledge in React
Previous use of create-react-app
Not mandatory, but some basic knowledge of using blender 3d app to understand the concept of mesh and material

What is Blender? Simply Explained

This tutorial is not a blender tutorial, so that it will be a short explanation.
Blender is a free, open-source 3D creation suite. With a strong foundation of modeling capabilities, there's also robustly texturing, rigging, animation, lighting, and other tools for complete 3D creation.

Source: Spring - Blender Open Movie Blender, Animation Studio via YouTube

Create React App

npx create-react-app cra-fiber-threejs
npm run start

If everything works successfully, you can navigate to: http://localhost:3000/, and you will see a React App

Install dependencies

Install gltf-pipeline; this will help you to optimize our glTF, meaning smaller for the web; this is installed globally

npm install -g gltf-pipeline

Install @react-three dependencies for our project, navigate to cra-fiber-threejs folder and run

npm i @react-three/drei
npm i @react-three/fiber

Export blender asset

Open blender program with you're created, 3d model
if you have installed blender and created a 3d modeling, in case you didn't, take a look in the optional step

Optional

If you have installed blender but didn't create any model, here you have the one I'm using in the tutorial
If you didn't install blender and want the compressed glb file here, you can download it.

Compress asset

The file we exported from the previous step, some times are significant, and they are not optimized for the web, so we need to compress it
Navigate where you saved the .glb file (from the previous step) and run the following command:

gltf-pipeline -i <input file glb> -o <output glb> --draco.compressionLevel=10
e.g:
gltf-pipeline -i shoe.glb -o ShoeModelDraco.glb --draco.compressionLevel=10

Convert asset to `JSX` component

To start interacting with our 3d model, we need to convert it to a JSX component using gltfjsx. You can read more here. gltfjsx - Turns GLTFs into JSX components)

Navigate where you saved the .glb file from the previous step and run the following command:

npx gltfjsx <outputed glb from previus step>
e.g. npx gltfjsx ShoeModelDraco.glb

The output will be a js file with content similar to:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/ShoeModelDraco.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.shoe.geometry} material={materials.laces} />
      <mesh geometry={nodes.shoe_1.geometry} material={materials.mesh} />
      <mesh geometry={nodes.shoe_2.geometry} material={materials.caps} />
      <mesh geometry={nodes.shoe_3.geometry} material={materials.inner} />
      <mesh geometry={nodes.shoe_4.geometry} material={materials.sole} />
      <mesh geometry={nodes.shoe_5.geometry} material={materials.stripes} />
      <mesh geometry={nodes.shoe_6.geometry} material={materials.band} />
      <mesh geometry={nodes.shoe_7.geometry} material={materials.patch} />
    </group>
  )
}

useGLTF.preload('/ShoeModelDraco.glb')

The output It's a React component with all the meshed/materials mapped ready to work
If you worked with blender, you can see that it has mapped all its meshes objects and all its materials
This component can now be dropped into your scene. It is asynchronous and, therefore, must be wrapped into <Suspense> which gives you complete control over intermediary loading-fallbacks and error handling.

Integrate new component

Go the project you created using create-react-app
Copy your new file created in step "Convert asset to JSX component" e.g. ShoeModelDraco.js to src/ folder
Create a new file for your new component and called it BlenderScene.js, this file will include for the simplicity also some logic and the Scene components, in a real application you will want to separate them in different files/components, copy the following code:

import React, { Suspense } from 'react';
import { Canvas } from "@react-three/fiber"
import { ContactShadows, Environment, OrbitControls } from "@react-three/drei"
import Model from './ShoeModelDraco'
function Scene() {
  return (
    <div className='scene'>
      <Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 50 }}>
        <ambientLight intensity={0.3} />
        <spotLight intensity={0.5} angle={0.1} penumbra={1} position={[10, 15, 10]} castShadow />
        <Suspense fallback={null}>
          <Model />
          <Environment preset="city" />
        <ContactShadows rotateX={Math.PI / 2} position={[0, -0.8, 0]} opacity={0.25} width={10} />
        </Suspense>
        <OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} enableZoom={false} enablePan={false} />
      </Canvas>
    </div>
  )
}
function BlenderScene() {
  return (
    <>
      <Scene />
    </>

  );
}

export default BlenderScene;

Copy into the public folder the .glb output file from step "Export blender asset," in my case: ShoeModelDraco.glb
Use the BlenderScene component you just created, open the App.js file, and import it something like:

import './App.css';
import BlenderScene from './BlenderScene';

function App() {
  return (
    <BlenderScene /> 
  );
}

export default App;

If everything runs successfully, you should see your 3d model in the browser, something like this:

The only interactivity that you have it's that you can spin the 3d model, and that's it,
In the following steps, we will:
- Add more fun/complex interactivity
- Display nicer in the browser
- In the resources part, you can find a link for the branch with the code until this step

Enhanced component and functionality

If you are reading here, kudos 💪🏼.
You are almost done 🥵; you have your 3d model in the browser 🎉, but you saw, it's not very interesting and boring; let's start adding cool stuff 😎.

Disclaimer: The following code it's not production-ready, and I did some hacks and also not best practices when writing the components

Adding some style

Open the App.css file and add in the end of it the following:

#root {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none;
  width: 100vw;
  height: 100vh;
}
.scene {
    height: 500px;
    padding: 100px;

}

Install dependency

We will install react-colorful, a tiny color picker component for React and Preact apps. We will use it for choosing colors

npm i react-colorful

Edit React Components

Open ShoeModelDraco.js file and copy the following code
We add functionality to work with the mouse when the user clicks on our model
We add state to know which part of the model was selected

    /*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
export default function Model({ props, currentState, setCurrentState, setHover }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/ShoeModelDraco.glb');
  // Animate model
  useFrame(() => {
    const t = performance.now() / 1000
    group.current.rotation.z = -0.2 - (1 + Math.sin(t / 1.5)) / 20
    group.current.rotation.x = Math.cos(t / 4) / 8
    group.current.rotation.y = Math.sin(t / 4) / 8
    group.current.position.y = (1 + Math.sin(t / 1.5)) / 10
  })
  return (
    <>
      <group
      ref={group} {...props}
      dispose={null}
      onPointerOver={(e) => {
        e.stopPropagation();
        setHover(e.object.material.name);
      }}
      onPointerOut={(e) => {
        e.intersections.length === 0 && setHover(null);
      }}
      onPointerMissed={() => {
        setCurrentState(null);
      }}
      onClick={(e) => {
        e.stopPropagation();
        setCurrentState(e.object.material.name);
      }}>
      <mesh receiveShadow castShadow geometry={nodes.shoe.geometry} material={materials.laces} material-color={currentState.items.laces} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_1.geometry} material={materials.mesh} material-color={currentState.items.mesh} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_2.geometry} material={materials.caps} material-color={currentState.items.caps} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_3.geometry} material={materials.inner} material-color={currentState.items.inner} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_4.geometry} material={materials.sole} material-color={currentState.items.sole} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_5.geometry} material={materials.stripes} material-color={currentState.items.stripes} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_6.geometry} material={materials.band} material-color={currentState.items.band} />
      <mesh receiveShadow castShadow geometry={nodes.shoe_7.geometry} material={materials.patch} material-color={currentState.items.patch} />
      </group>
    </>
  )
}

useGLTF.preload('/ShoeModelDraco.glb')

Open BlenderScene.js file and copy the following code
We add state in order to know which part of the model was selected
Added work with the picker component
Added animation to the model, floating illusion

import React, { useState, useEffect, Suspense } from 'react';
import { Canvas } from "@react-three/fiber"
import { ContactShadows, Environment, OrbitControls } from "@react-three/drei"
import { HexColorPicker } from 'react-colorful'
import Model from './ShoeModelDraco'
function Scene() {
  // Cursor showing current color
  const [state, setState] = useState({
    current: null,
    items: {
      laces: "#ffffff",
      mesh: "#ffffff",
      caps: "#ffffff",
      inner: "#ffffff",
      sole: "#ffffff",
      stripes: "#ffffff",
      band: "#ffffff",
      patch: "#ffffff",
    },
  });
  const [hovered, setHover] = useState(null)
  useEffect(() => {
    const cursor = `<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill="rgba(255, 255, 255, 0.5)" d="M29.5 54C43.031 54 54 43.031 54 29.5S43.031 5 29.5 5 5 15.969 5 29.5 15.969 54 29.5 54z" stroke="#000"/><g filter="url(#filter0_d)"><path d="M29.5 47C39.165 47 47 39.165 47 29.5S39.165 12 29.5 12 12 19.835 12 29.5 19.835 47 29.5 47z" fill="${state.items[hovered]}"/></g><path d="M2 2l11 2.947L4.947 13 2 2z" fill="#000"/><text fill="#000" style="white-space:pre" font-family="Inter var, sans-serif" font-size="10" letter-spacing="-.01em"><tspan x="35" y="63">${hovered}</tspan></text></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath><filter id="filter0_d" x="6" y="8" width="47" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2"/><feGaussianBlur stdDeviation="3"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>`
    const auto = `<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, 0.5)" d="M29.5 54C43.031 54 54 43.031 54 29.5S43.031 5 29.5 5 5 15.969 5 29.5 15.969 54 29.5 54z" stroke="#000"/><path d="M2 2l11 2.947L4.947 13 2 2z" fill="#000"/></svg>`
    if (hovered) {
      document.body.style.cursor = `url('data:image/svg+xml;base64,${btoa(cursor)}'), auto`
      return () => (document.body.style.cursor = `url('data:image/svg+xml;base64,${btoa(auto)}'), auto`)
    }
  }, [hovered])

  function Picker() {
    return (
      <div style={
        {
          display: state.current ? "block" : "none",
          position: "absolute",
          top: "50px",
          left: "50px",

       }
      }>
        <HexColorPicker
          className="picker"
          color={state.items[state.current]}
          onChange={(color) => {
            let items = state.items;
            items[state.current] =  color
          }}
        />
        <h1>{state.current}</h1>
      </div>
    )
  }
  return (
    <div className='scene'>
      <Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 50 }}>
        <ambientLight intensity={0.3} />
        <spotLight intensity={0.5} angle={0.1} penumbra={1} position={[10, 15, 10]} castShadow />
        <Suspense fallback={null}>
          <Model
            currentState={ state }
            setCurrentState={(curState) => {
              setState({
                ...state,
                current: curState
              })
            }}
            setHover={ setHover}
          />
          <Environment preset="city" />
        <ContactShadows rotateX={Math.PI / 2} position={[0, -0.8, 0]} opacity={0.25} width={10} />
        </Suspense>
        <OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} enableZoom={false} enablePan={false} />
      </Canvas>
      <Picker />
    </div>
  )
}
function BlenderScene() {
  return (
    <>
      <Scene />
    </>

  );
}

export default BlenderScene;

If everything works successfully, you should see something like this:
In the resources part, you can find a link for the branch with the code until this step
Live Working example here

Resources

Appendix

Blender
- Blender is the free and open-source 3D creation suite. It supports the entirety of the 3D pipeline—modeling, rigging, animation, simulation, rendering, compositing, and motion tracking, even video editing, and game creation; more in here
glTF files
- Graphics Language Transmission Format or GL Transmission Format, more here
gltf-pipeline
- Content pipeline tools for optimizing glTF, more here

How to start using React and Three.js in a few minutes ⏳

Omher — Sun, 03 Apr 2022 07:21:04 +0000

It’s probably that if you are reading this, you saw the amazing examples using Three.js and react together, but maybe didn’t found a simple and clear steps how to start, so this is for you 💙.

In this section we will:

Create React App
Install dependencies
Create React Component for Three.js
Import/Use React component with Three.js
Resources

Before you start

You will need to have the following installed or configured, and know at least the basics of using them, before proceeding

NodeJS installed (preferable > 12)
Basic Knowologe in React
Previous use of create-react-app

Create React App

npx create-react-app cra-threejs
npm run start

If everything woks as expected you can navigate to: http://localhost:3000/ and you will see a React App

Install dependencies

Install three.js package

npm i three

Create React Component for Three.js

Create a new file for your new component and called it Three.js under src folder
Copy the following in the created Three.js file
What we are doing here:
- import three.js into the app
- Use useEffect to render the scene for our three.js component
- We are using useRef because we want to mount our three.js component in the component we are creating and not in the body document, like it’s showed in the three.js documentation

import * as THREE from 'three';

import { useEffect, useRef } from "react";

function MyThree() {
  const refContainer = useRef(null);
  useEffect(() => {
    // === THREE.JS CODE START ===
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    refContainer.current && refContainer.current.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
    var animate = function () {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();
  }, []);
  return (
    <div ref={refContainer}></div>

  );
}

export default MyThree

Reference took from here with minor change to make it work with React

Import/Use React component with Three.js

In the open the file: /src/App.js
Import your created component adding inthe top pf your file
- import Three from './Three';
Use your componet inside App component:


<Three />

Boom, if every thing as expected you should see the following in your browser

Resources

Link to github repo for a working example
Create React App
threejs.

Thanks for reading

DEV Community: Omher

Intro to Nest.js 🪺

🧠 Controller

Result

💉 Provider

🗄️ Module

Resources

Intro to SolidJS: How to Create Fast, Reactive Web Apps

Intro

So let's start

Resources

What is TurboPack?

A quick look at Qwik

Resources

🐱‍🚀 What is Astro.js 🐱‍🚀

Welcome to Directives

Building your first Atro Project

A new "Fresh" web framework is out 🍋

What is Fresh?

Resources

The bun is out 🥟

What is a JavaScript Runtime?

🍞 So what it's so special with bun?

Resources

The JavaScript Time Machine

Past, Present, to infinity and beyond

🍦 The vanilla way 🍦

🐉 2009 The rise of Node.js 🐉

🚚 Package Manager 🚚

📜 Script Loaders 📜

RequireJS

JSPM

👟 Task Runners 👟

📦 Bundlers 📦

The Future of JavaScript Tooling 🛠️

Let's Dynamic Remote modules with Webpack Module Federation

Steps required for Dynamic Remote modules

Configuring the Host App

Load script from remote module dynamically

Load Component from webpack share scope

Consume remote component from host

Small peek of remote configuration

🤯 Result 🤯

Resources

Building React App with Module Federation and NextJS/React

📦 Prerequisites

Terminology

⬆️ Configuring Remote App - NextJS

⬆️ Configuring Remote App - React

⬇️ Configuring Host App Host - React

🎉 Result

⛑️ Troubleshooting

- Uncaught Error: Shared module is not available for eager consumption

Solution

- Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

Solution

- Getting 404 for remotes Components

Solution

🔗 Resources

From Desktop 3d Apps to Web 3d Apps using Blender and React

Before you start

What is Blender? Simply Explained

Create React App

Install dependencies

Export blender asset

Compress asset

Convert asset to JSX component

Integrate new component

Enhanced component and functionality

Adding some style

Install dependency

Edit React Components

Resources

Appendix

How to start using React and Three.js in a few minutes ⏳

Before you start

Create React App

Install dependencies

Create React Component for Three.js

Import/Use React component with Three.js

🍞 So what it's so special with `bun`?

Load Component from `webpack` share scope

Convert asset to `JSX` component