DEV Community: Manuel Blanco

Scalable and Maintainable Frontends: A Deep Dive into Microfrontends and Webpack Module Federation - Part 1

Manuel Blanco — Thu, 26 Oct 2023 20:17:30 +0000

In this article we will explain the main concepts behind webpack module federation and then we will continue into implementing a series of exposable components (We will explain what that means later on), that will help us have a better frontend architecture.

Requisites:

Git, Github
Node, NPM
React, JavaScript ES6+
How to setup a minimal Webpack configuration

Considerations

Webpack Module Federation: it is a plugin; It is not included when you first install Webpack itself.
MF => Module Federation (not the other word haha - sweats in GenZ)
In order for to get the most out of MF Plugin you need to have your dependencies in sync. Otherwise Webpack is gonna complain about it (You can work around it, but the configuration changes a bit)
This is not a beginners friendly tutorial. Although, I'll explain everything some things may not be fully comprehensible unless you have prior experience in Front End Development.

Key Concepts

Configuration: You have to be specific about which modules of your application you want to share with other applications and either you want to consume from other applications or not. You'll have a webpack config for each different application.

Remote Entry Points: You've to create a remote entry point, this defines which modules you want to expose for remote use. These modules are packaged separately and made available as a remote entry point.

Consuming Remote Modules: The remote modules are fetched and executed at runtime. You can specify the remote entry points to be loaded asynchronously, and Webpack will take care of loading and managing them.

Runtime Integration: Webpack's runtime takes care of loading and integrating the remote modules. It handles various aspects like loading remote scripts, making remote modules available to the local application, and handling communication between the applications.

Versioning: Module Federation allows you to specify versions for shared modules. This helps ensure that the consuming application gets the correct version of a module and doesn't conflict with other versions used by different parts of your application.

Alright without anything more to add. Let's start coding!

Setting up the project

I have already created the starter projects we will be working with. You will see why we need two, in the following section.

You can find then here:

You will need to create your own repo since these are templates (name them: host_app and remote1 accordingly) and download the required dependencies, once you do that, come back, and we will start getting coding right away.

Hello world, w/ microfrontends

You know what is coming, yes! The mighty counter ;) ...

Let's create a button in remote1 that updates the state inside the host app. Nothing too fancy :)

Remote1 -- This one would be running in localhost:3000

-- Note: Is important to know where is running what. You'll see why later on :)

Let's start creating our Button.js in one of our folders inside remote1:

Button.js

export const Button = (props) =>
  <button type="button" onClick={props.onClick}> Click me! </button>

Then we need to expose this component inside our webpack.config.js as follow:

webpack.config.js

 ...
  plugins: [
    ...other_plugins,
    new ModuleFederationPlugin({
      name: "app_name", // Change this
      filename: "remoteEntry.js",
      exposes: {
        // your custom components, functions, you wanna expose
        "./Button.js": "./src/Button.js",
      },
      shared: [
        deps,
        {
          react: {
            eager: true,
            singleton: true,
            requiredVersion: deps.react,
          },
        },
        {
          "react-dom": {
            eager: true,
            singleton: true,
            requiredVersion: deps["react-dom"],
          },
        },
      ],
    }),
  ],
 ...

HOST_APP -- This would be running in localhost:8080

We switch over to our host_app, and inside the webpack.config.js, we read from remote1 at localhost:3000 the remoteEntry.js that exposes:

webpack.config.js

...
plugins: [
  ...other_plugins,
  new ModuleFederationPlugin({
      name: "host", // You can change this if you want :)
      remotes: {
        // Your known remotes
        "remote1": "app_name@http://localhost:3002/remoteEntry.js",
      },
      shared: [
        deps,
        {
          react: {
            eager: true,
            singleton: true,
            requiredVersion: deps.react,
          },
        },
        {
          "react-dom": {
            eager: true,
            singleton: true,
            requiredVersion: deps["react-dom"],
          },
        },
      ],
    }),
],

Finally, inside our App.js in the host_app we import the component from the remote1 app. I know it gets kinda confusing using the terms this app this other app, but please bear with me. I'll leave a .dio example file that better explains it (in the resources panel is the link to the extension that allows you read .dio files directly from VSCode)

App.js

import Button from 'remote1/Button';

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
    <div>
      <h5>Hello from HOST APP</h5>
      <p>HOST Counter: {counter}</p>
      <hr />
      <div class="border border-gray-200 rounded-md">
        <b>Container for remote components</b>
        <Button onClick={() => setCounter(counter+1)} />
      </div>
    </div>
  )
};

export default App;

Once we do all of that we can run: npm run dev inside each project and everything should be running as expected.

PD: If you run into issues please don't hesitate to message me or leave a comment :) I'll help as soon as I can

Conclusions

As recap, we created one relatively small component that is being exposed from remote1 and read from what we called the host application.

That's all for now. Let me know in the comments if this was helpful :).

In PART II we will explore more how to extend an customize the webpack configuration of Module Federation.

Resources:

List of great resources for your next Software Engineer Interview Prep - Front End Focused

Manuel Blanco — Thu, 05 Oct 2023 18:12:00 +0000

Front-end development and technical interviews can be challenging, but they're also incredibly rewarding. In this post, I've compiled a set of resources to help you navigate these challenges effectively. Whether you're a newcomer to front-end development or preparing for technical interviews, these resources will provide you with the knowledge and tools you need to succeed.

Front-End Development Resources List

Frontend Interview Handbook: A comprehensive guide to frontend development interview preparation.

Great Frontend: A collection of resources, articles, and tools for frontend developers.

Algorithm and Data Structures

LeetCode - 75 LeetCode Problems: A study plan on LeetCode that covers 75 essential coding problems.

JavaScript Interview Preparation

Google Tech Dev Guide - JavaScript: Google's technical interview preparation guide with a focus on JavaScript.

General Software Engineering Interviews

Tech Interview Handbook: A comprehensive handbook covering software engineering interview topics.

React Technical Interview

Prepare for React Technical Interviews: A guide to help you prepare for technical interviews focused on React.

Feel free to explore these resources to enhance your front-end development and interview preparation skills. Remember these resources are your companions on the exciting journey of front-end development and technical interview mastery. As you navigate through the code and algorithms, always keep in mind that every challenge you face is an opportunity to grow. Stay curious, stay persistent, and let your passion for learning light your way to success. The tech world is yours to conquer!

Cover Photo by ThisisEngineering RAEng on Unsplash¹.

Attribution: This photo is provided by ThisisEngineering RAEng on Unsplash. Used under the Unsplash License. ↩

Getting started with python

Manuel Blanco — Mon, 07 Oct 2019 19:52:09 +0000

When first started with python I noted some patterns that seem to have python and javascript although their syntaxis is quite not the same, you can relate writing python with javascript as a way to learn it way more efficiently. We will be creating a small terminal app so you can learn the basics of python

Goals:

Learn how to create variables
Define functions
Use While and For loops
Get input from the user using the terminal
Understand range() method
Interpolation
Use if/else statements

Requirements:

Python -v 3.7.4
Code editor - I'll be using VSCode
Terminal

Acknowledgments:

I'm a beginner in python so I'm just sharing what I recently learned. In this tutorial, I use a lot of escape characters in case you don't know what they are or you need to remember them:

Escape character	How it formats
\	New line in a multi-line string
\	Backslash
'	Apostrophe or single quote
"	Double quote
\n	Line break
\t	Tab (horizontal indentation)

Go ahead and open your editor of choice and without further, let's start!

We will imagine that we work at a coffee shop and several clients approach us at the same time, and they all want a cup of coffee so we as software developers need to configure out a bot to prepare them as soon as possible because making it ourselves would take much time, and configure it so it can remember each client name for they feel well attended :)

Create a python file and call it as you wish. I'll call it coffeePrepBot.py. We will need to:

Create a variable for storing clients name's
Have a way to know (like a Boolean) when we finished all the requests
Make the bot to ask each client for the type of coffee they want and give them the coffee

coffee_count = 0
is_done = False
clients = []

After you created these three variables in the next line copy/paste:

def get_client_name():
  return input('How\'s the client name? ')

What we did up there was to define a function that returns the name that the client gives up to make up his/her coffee. The input(string) method receives a text string for context about what we want.

def coffee_clients_listing():
    for coffees in range(0, coffee_count):
      clients.append(get_client_name())

After defining the coffee_clients_listing() function, we notice something new: range()

What the range() function does?

The range() function returns a series of numbers making it an iterable, and it has two sets of parameters, as follows: range([start], stop[, step])

start: Starting number of the sequence.
stop: Generate numbers up to, but not including this number.
step: Difference between each number in the sequence.

Example:

Let's say we want to print to the console the numbers from 1 to 5. We create the following variable

range_numbers = range(1, 6) # number 6 not included

If we do print(range_numbers) we get: range(1, 6) but if we use a for loop like so:

range_numbers = range(1, 6) # number 6 not included
for num in range_numbers:
  print(num)

# We get
-> 1
-> 2
-> 3
-> 4
-> 5

Ok, let's keep going. We were defining coffee_clients_listing():

def coffee_clients_listing():
    for coffees in range(0, coffee_count):
      clients.append(get_client_name())

What coffee_clients_listing() does is that it receives coffee_count which is the number of coffees we need to make, and add to the list (or array as you prefer to call them) the name of the client, calling the get_client_name() function.

In the next line copy/paste the following:

while not is_coffees_done:
  coffee_count = int(input('[BOT]: How many coffee\'s you need to make? '))

  print('\n[BOT]: Bip Bop Bup... Okay! we will create a list \nwith the name of the clients who asked for a coffee \nso we can start preparing them wink wink\n')
  coffee_clients_listing()

  print('\nWe have the list with all the clients who asked for coffee: ', clients)

  for client in clients:
    coffee = input(f'\n[BOT]: Hi {client}, we have \n- Expresso\n- Capuchino\n- Late\n-and American \nWhat type of coffee you want? ')
    print(f'\n[BOT]: Coming out a {coffee} for: {client} :) \n')

  is_coffees_done = input('[BOT]: You need to make more coffees? ')
  if is_coffees_done.lower() == 'yes': is_coffees_done = False
  else: is_coffees_done = True

print('That\'s all for me. Call me again when you need me :] bip bup shutting down...')

What we just did:

We defined a while loop that will run over and over until the variable is_coffees_done becomes True.
We're asking each client for their name and saluting then when giving them their coffee back

Interpolation it's done with the f property inside the print function. It's a feature of Python v3 print(f'String {variable} whatever follows...') You can learn more at the useful resources section.

The last three lines are important because if not the bot would make coffees infinitely, we're saying: hey! ask your supervisor (or whatever) I'm done? or there are more coffees to serve? If yes, we start from the top of the while loop and if not the bot shuts down itself

That's all for now folks! :)

Conclusion

We learned that in python:

Variables follow the pattern: variable_name = value
Functions are declared with : def myFunction()
Briefly that comments can be made with #
We can add items to a list(or array) with the method .append()
How to declare while loops and exit them
Use if/else statements

Useful resources:

#hacktoberfest progress 🐢

Manuel Blanco — Wed, 02 Oct 2019 14:59:26 +0000

Hi folks!

I have been quite busy at work so I haven't finished the #hacktoberfest yet, but here is my progress so far:

Both PRs made to module 2 of my friend's project

N0obCoding / Expanding-on-HTML-and-CSS

Noob Coding - Module 2

Noob Coding

Community Built Web Development Courses

Module 3: Expanding on HTML and CSS

This module aims to provide Noob Coders with a good understanding of HTML and CSS. The module guides a developer through the steps of building a simple static website, exploring the use of different HTML tags and styling techniques.

When completing the module, Noob Coders are expected to be able to build a replica of the sample website provided in this repo.

Pre-requisites

Estimated duration: ?? hours.
Computer
VS Code or similar Text Editor

Course Contents

HTML
- The anatomy of the HTML Element
- The anatomy of the HTML Document
- Semantic HTML
  - Why should we use it?
  - Accessibility from day one!
- Consuming external resources through links
Building the skeleton of our webpage.
Cascade style sheets (CSS)
- Why that name?
- CSS Syntax
- CSS basic selectors (with a note about specificity)
- The Box Model
Styling our Webpage
- Positioning…

View on GitHub

With only 2 PRs left, I think I'll be finishing by tomorrow night.

How is your progress going?... or I'm the only turtle who hasn't finished? >n<

PS: Is there a list of how many people have finished the event? If so, please link me

Hacktoberfest is ON!

Manuel Blanco — Mon, 30 Sep 2019 14:24:03 +0000

I'm very excited about the #hacktoberfest that's coming in the next 24 hours. It's my first time participating and will be helping a friend with one of his projects:

N0obCoding / Introduction-to-the-web

Noob Coding - Module 1

Noob Coding

Community Built Web Development Courses

Module 1: Introduction to the Web

This module presents an introduction to the web from a developer's perspective. It covers basic concepts that every aspiring Web Developer must understand in order to design and build web solutions.

After taking this course you will understand the client-server model, how data is transmited throught the web and how the browser interprets, draws and presents information to your users. You will learn the basics of the Hyper Text Transfer Protocol (HTTP) and how the browser will help you find and fix errors in your application.

Pre-requisites

Estimated duration: ?? hours.
Computer
Chrome (or similar modern browser)

Course Contents

View on GitHub

The idea behind all of his is to help newbies to have all the tools they need to build a complete web application successfully and with ease.

If you guys want to help us, just reach out, we will be glad to see those PRs :)

Also, have you guys participated before? and if so, how was your experience?

Type of music you listen to when coding?

Manuel Blanco — Mon, 23 Sep 2019 15:08:49 +0000

I have found that some types of music really gets me into the flow zone, but others just distract me easily.

I have made this playlist: Meta that I really enjoy listening when creating a feature.

While in other scenarios (fixing bugs), I rather listen to a more relaxin' ones for example: This is Joe Hisaishi

What do you guys listen to when coding?

Share me your playlists on the comments👨‍💻

Writing your first bash script

Manuel Blanco — Wed, 28 Aug 2019 01:07:51 +0000

Bash scripting is an extremely useful and powerful part of system administration and development. It might seem scary the first time you do it as it was for me but bear with me as this is not meant to be an extensive guide to bash scripting, but just a straightforward guide to getting started with making your first script and learning some basic bash syntax.

Bash is a Unix shell, which is a command-line interface (CLI) for interacting with an operating system (OS) is available by default on Linux and macOS operating systems but it can also be turned on as a feature on Windows 10. Any command that you can run from the command line can be used in a bash script and the other way around too.

Requirements

A basic command line knowledge is required. Although I'll be explaining what command does what, as I go.

Goals

In this tutorial, we're going to:

Create a bash script that can be run from any directory on the computer.
Learn about variables, conditions, looping, and user input with bash.

I'll be using /Users/mblanco for all examples, but it will be /Users/your_username for you. So without anything more to say let's get into it

1) Create a bin directory

The first step is to create a bin directory. bin is the standard naming convention of a subdirectory that contains executable programs.

You can make sure you're in the main user directory by navigating to ~ with cd ~ (cd stands for "change directory" and ~ is a shortcut for current user home directory, or /Users/mblanco). You can type pwd to confirm your current location, as well.

Create a bin folder.

cd ~      # this takes us to /Users/mblanco
mkdir bin # this creates /Users/mblanco/bin

2) Export your bin directory to the PATH

Open the file .bash_profile by typing .bash_profile, which will be located at /Users/mblanco/.bash_profile, and add this line to the file. If .bash_profile doesn't exist, create it.

export PATH=$PATH:/Users/mblanco/bin

3) Create a script file

Go to your bin folder located in /Users/mblanco.

cd bin

Create a file called hello-world with no extension.

touch hello-world

Open the file in your text editor of choice and type the following.

#!/bin/bash

A bash script must always begin with #!/bin/bash to signify that the script should run with bash as opposed to any other shell.

#!/bin/bash

echo Hello, World!

4) Execute the bash file

We can run the file in the terminal with hello-world. If it doesn't work we have to make it an executable file by changing the permissions chmod u+x hello-world. When you run the command, it will output whatever you put after the echo

mblanco@dev:~/bin

$ hello-world

Hello, World!

Congrats!! We just made our first bash file :)

Variables

A variable is declared without a $, but has a $ when invoked. Let's edit our hello-world file to use a variable

word = "world"
Hello, $word!

mblanco@dev:~/bin

$ hello-world

Hello, world!

Strings do not need to use single or double quotes by default. However, single and double quoted strings work as well. A single quoted string will not interpolate variables, but a double quoted string will

Taking user input

We declared a variable in the last example, but we can also have the user set the value of a variable dynamically using the read command so instead of having the script to say Hello, World!, we can ask the name of the person calling the script and output that name

#!/bin/bash

echo Who is this?

read who

echo Hello, $who!

mblanco@dev:~$ hello-world
Who is this?
Manuel
Hello, Manuel!

Conditionals

According to Wikipedia:

Conditionals are features of a programming language, which perform different computations or actions depending on whether a programmer-specified boolean condition evaluates to true or false

Although bash is not a programming language but a command-line interface (CLI), you can do conditionals with it too. Here you can use if statements with the following keywords: if, then, else, and fi. With the condition inside square brackets.

We can create another file or edit the previous example, as you prefer, and copy/paste the following:

#!/bin/bash

echo Are you sure you are allowed to drink kid? How older are you?

read age

if [ "$age" -ge 18 ]
then
    echo You are just fine. Drinks up! 🍻
else
    echo Get out of here! 🏃🏻
fi

mblanco@dev:~/bin

$ hello-world

Are you sure you are allowed to drink kid? How older are you?
20
You are just fine. Drinks up! 🍻

Here's a list of operators for you to try different things:

Bash Operators	Operator	Description
`-eq`	`==`	Equal
`-ne`	`!=`	Not equal
`-lt`	`<`	Less them
`-le`	`<=`	Less them or equal
`-gt`	`>`	Greater them
`-ge`	`>=`	Greater than or equal
`-z`	==null`	Is null

Looping

We'll create a version of the command ls (which makes a list of all the files and directories in your current address) but this one will only give us the names of the files.

!/bin/bash

FILES=/Users/mblanco/projects*

for file in $FILES
do
    echo $(basename $file)
done

Conclusion

I hope this article has been helpful for you guys to get started with bash and see you next time🤘👋

Which podcasts to listen to stay tune in programming?

Manuel Blanco — Mon, 03 Jun 2019 17:19:21 +0000

Hi, which podcast you guys would recommend me for learning more about javascript and increase my productivity or enhance my understanding more about programming

Thanks in advance! :D