1. Introduction to Micro Frontend Communications in Multi Repo Structure | Amar Kumar Ram

Summary

En este video se presenta la creación de una comunicación microfinanciada en un entorno de lista de reproducción desafiante. Se menciona la existencia de dos canales, uno con el etiqueta 'at the rate armor hyphen Kumar hyphen Ram' y otro dedicado a explorar y viajar con su esposa. Se detalla el proceso de creación de dos proyectos, 'host app' y 'remote app', utilizando el comando NG new con configuraciones específicas. Se destaca la diferencia entre el concepto de mono-repo y multi-repo en cuanto a la organización de los módulos. Además, se describe el inicio de los servidores para ambas aplicaciones y se menciona que en el próximo video se agregará la arquitectura micro-fundada en ambas aplicaciones.

Takeaways

• 📺 Se menciona la creación de dos proyectos diferentes: 'host app' y 'remote app'.
• 🛠️ Se utiliza el comando `NG new` para crear ambos proyectos con la configuración de routing habilitado y estilo SCSS.
• 📂 Existe una diferencia entre el concepto de mono-repo y multi-repo, donde en el multi-repo se tienen múltiples carpetas `node_modules` dedicadas a cada proyecto.
• 💻 Se inicia el servidor para cada aplicación individualmente para verificar que todo esté instalado correctamente.
• 🌐 El proyecto 'host app' se ejecuta en el puerto 4200 y muestra un mensaje confirmando su funcionamiento.
• 🔌 El proyecto 'remote app' también se inicia, pero al estar el puerto 4200 en uso, se le asigna un puerto diferente.
• 🔄 Se presiona 'Y' para aceptar el cambio de puerto y se visualiza la aplicación 'remote app' en el navegador.
• 📚 Se indica que en el próximo video se agregará la arquitectura micro-fundida dentro de las aplicaciones 'host' y 'remote'.
• 🔍 Se promove la exploración y el viaje a través de otro canal con un nombre específico que se puede buscar por una etiqueta.
• 📨 Se ofrece información sobre cómo suscribirse al canal para recibir notificaciones de nuevos contenidos.
• 🎉 Se invita al espectador a unirse a la próxima sesión de video para continuar aprendiendo sobre la arquitectura micro-fundida.

Q & A

¿Qué es una lista de reproducción microfinanciada?

Una lista de reproducción microfinanciada es un proyecto que se apoya en recursos financieros limitados y requiere una comunicación y colaboración detalladas entre los miembros del equipo.

¿Cómo se puede encontrar el canal del creador del vídeo?

Para encontrar el canal del creador, se puede buscar utilizando la etiqueta 'armor hyphen Kumar hyphen Ram'.

¿Cuál es el nombre del canal que explora y viaja a diferentes lugares?

El nombre del canal es el que el creador comparte junto con su esposa, y se dedica a proporcionar detalles sobre los lugares que visitan.

¿Qué comandos son necesarios para crear dos proyectos en Angular?

Para crear dos proyectos en Angular, se utilizan los comandos 'NG new host-app --routing --style=scss' y 'NG new remote-app --routing --style=scss'.

¿Qué es la diferencia entre un repositorio monolítico y uno multicapa en Angular?

En un repositorio monolítico, todos los proyectos comparten una carpeta de módulos común. En cambio, en un repositorio multicapa, cada proyecto tiene su propia carpeta de nodos modules dedicada.

¿Cómo se inicia el servidor para una aplicación individual en Angular?

Para iniciar el servidor en una aplicación individual de Angular, se navega dentro de la aplicación y se ejecuta el comando 'NG serve' seguido del nombre de la aplicación.

¿Por qué no se puede utilizar el puerto 4200 para la aplicación remota si ya está en uso por la aplicación host?

El puerto 4200 no puede ser utilizado por ambas aplicaciones al mismo tiempo porque ya está asignado a la aplicación host, lo que requiere que la aplicación remota utilice un puerto diferente.

¿Qué mensaje indica que la aplicación host está funcionando correctamente?

El mensaje que indica que la aplicación host está funcionando correctamente es 'Host app is running'.

¿Cómo se puede suscribirse para recibir notificaciones de un canal?

Para suscribirse y recibir notificaciones de un canal, se debe hacer clic en el botón de suscripción en la plataforma de video donde se encuentra el canal.

¿Qué arquitectura se implementará en las aplicaciones host y remote en el siguiente vídeo?

Se implementará una arquitectura de micro frente en las aplicaciones host y remote en el siguiente vídeo.

¿Cuál será el siguiente paso después de la creación de los proyectos en Angular?

El siguiente paso será agregar la arquitectura de micro frente en las aplicaciones host y remote y luego proceder con el desarrollo.

¿Qué se espera de los espectadores al final del vídeo?

Se espera que los espectadores se sientan motivados y se diviertan mientras esperan el próximo vídeo sobre la arquitectura de micro frente.

Outlines

00:00

📢 Anuncio y Creación de Proyectos

El primer párrafo comienza con un anuncio sobre cómo encontrar el canal de YouTube y explorar canales relacionados con viajes. Luego, se enfoca en la creación de dos proyectos, 'host app' y 'remote app', utilizando el comando NG new con configuraciones específicas para cada uno. Se menciona la diferencia entre el concepto de mono-repo y multi-repo en términos de la organización de las carpetas node modules. Finalmente, se inicia el servidor para cada aplicación para verificar que todo esté instalado correctamente, y se proporcionan detalles sobre cómo hacerlo.

Keywords

💡micro-funded

Este término se refiere a proyectos o iniciativas que cuentan con un financiamiento limitado o a pequeña escala. En el contexto del video, podría estar relacionado con la creación de contenido o aplicaciones con recursos financieros restringidos. Se menciona en la introducción como parte de las características de la lista de reproducción que se está discutiendo.

💡playlist

Una 'playlist' es una lista organizada de canciones o, en este caso, de videos que se reproducen en secuencia. En el video, la playlist es un conjunto de contenidos que abordan temas de comunicación y desarrollo de aplicaciones, y es descrita como 'demanding', lo que implica que es desafiante o requiere un esfuerzo significativo.

💡multi-level communication

Se trata de la comunicación que ocurre entre múltiples niveles o entidades dentro de una organización o sistema. En el tema del video, podría referirse a la interacción entre diferentes componentes de una aplicación o entre varias aplicaciones en una arquitectura de microservicios. Es un aspecto clave en la creación de la arquitectura de micro-frontends.

💡NG new

Este es un comando utilizado en Angular, un framework de desarrollo web, para crear nuevos proyectos. En el video, se utiliza para iniciar el proceso de desarrollo de dos proyectos diferentes: 'host app' y 'remote app', que son elementos fundamentales en la construcción de la arquitectura de micro-frontends.

💡routing

El 'routing' en el contexto de desarrollo web se refiere al proceso de definir las rutas o las URLs que los usuarios pueden seguir para acceder a diferentes vistas o componentes en una aplicación. En el script, se menciona que el enrutamiento está habilitado en la configuración de los proyectos creados, lo que es esencial para la navegación entre las diferentes secciones de la aplicación.

💡SCS (Styled Components)

Styled Components es una biblioteca de CSS-in-JS utilizada en el desarrollo de aplicaciones web para facilitar la creación de estilos reutilizables y componentes visualmente consistentes. En el video, se indica que se utiliza SCS como opción de estilo para los proyectos, lo que sugiere un enfoque moderno y eficiente en la estilización de la interfaz de usuario.

💡monorepo workspace

Un 'monorepo workspace' es una práctica de desarrollo de software en la que múltiples proyectos o componentes comparten una única base de código y un conjunto de dependencias. En el video, se contrasta con el concepto de 'multi-repo', donde cada proyecto tiene su propia carpeta de nodos y dependencias separadas.

💡multi-repo workspace

Este concepto es el opuesto de un 'monorepo workspace'. En un 'multi-repo workspace', cada proyecto tiene su propia estructura de carpetas y dependencias, lo que permite un mayor aislamiento y control sobre cada proyecto individual. Se menciona en el video como una diferencia clave con respecto a la arquitectura monorepo.

💡NG serve

El comando 'NG serve' es una instrucción en Angular que inicia un servidor de desarrollo para una aplicación. Se utiliza en el video para ejecutar y probar la aplicación 'host app' y 'remote app', permitiendo visualizar y verificar que la aplicación se esté ejecutando correctamente en el navegador.

💡micro front end architecture

La 'micro front end architecture' es un enfoque en el desarrollo de aplicaciones web donde la aplicación se compone de múltiples 'microfrontends', cada uno encargado de una funcionalidad específica y que puede ser desarrollado y desplegado de manera independiente. En el video, se indica que en un próximo episodio se implementará esta arquitectura en las aplicaciones 'host app' y 'remote app'.

💡port

Un 'puerto' en informática se refiere a un número de puerto que se utiliza para distinguir entre servicios diferentes en una misma máquina. En el script, se menciona que el puerto 4200 ya está en uso por la aplicación 'host app', lo que requiere que la aplicación 'remote app' utilice un puerto diferente para su servidor de desarrollo.

Highlights

Creating two different projects: host app and remote app for micro-funded communication

Using Angular CLI to create projects with routing and SCSS style

Difference between monorepo and multi-repo workspace concepts

Running the server for each individual app to check if everything is installed properly

Host app running on Port 4200 with message 'Host app is running'

Remote app running on a random assigned port with message 'Remote app is done'

Exploring the channel with the tag 'At the rate armor hyphen Kumar hyphen Ram'

Checking out the travel channel with the wife for detailed views of visited places

Subscribing to the channel for notifications on new travel videos

Micro-funded communication involves creating a host app and a remote app

Using the command 'NG new' to create the host and remote apps

Enabling routing and choosing SCSS as the style for the projects

In a monorepo workspace, there is a common 'node_modules' folder for all projects

In a multi-repo workspace, each project has its own dedicated 'node_modules' folder

Starting the server with the command 'NG serve' for the host app

If Port 4200 is already in use, the remote app will run on a different assigned port

Implementing micro-frontend architecture in the host and remote apps in the next video

Meeting in the next video to add micro-funded architecture and proceed further

Transcripts

foreign

I know this is one of the most demanding

playlists that is micro-funded

communication in multi-level before

proceeding further there is a quick

announcement like if you want to land on

my channel then you can search with the

tag that is at the rate armor hyphen

Kumar hyphen Ram similarly if you love

to explore and travel the places then

you can check out our another channel

that is with my wife the channel name is

so here you will find the detail view of

any place where we visit more details

will be provided in this Channel video

only so to get the notification you can

subscribe this channel as well now let's

start the develop to start with

microfunded communication video we need

to create two different projects say

host app and remote so let's quickly

create those two projects to create the

projects we'll run the command NG new

post tab with the configuration as

routing enabled and style will be SCS

so our host app project has been created

and now we'll create the remote to

create the remote app we need to run

command as NG new

remote iPhone app with routing enabled

and stylus scissors

as we can see both the projects have

been created like host app and remote

app and the difference between multi and

monorepo workspace concept is in mono

repo workspace we have a common non

modules folder whereas in this

multi-repo concept we have two different

node modules for two different projects

even if we have multi projects then

we'll have multi-node models folder

dedicated to that project only now we'll

start the server for this individual app

and see if everything installed properly

or not for that we'll go inside the

application for example we'll go first

inside host app

and we'll run the command NGS transpose

server hyphenol which will open this

project over the browser type our host

app is running fine over Port 4200 and

the message is displaying is host app is

running now we'll similarly run the

report app let's do that to run the

remote app we need to open a new

terminal

and we go inside Remote App application

and then run the command NG as transfer

server iPhone but 4200 Port is already

assigned to the host app so it will ask

that Port 4200 is already in use so

would you like to use a different port

of course yes and when we will implement

the micro front end architecture in this

Remote application and host application

then we will assign specific code to

both the applications for now let's

press Y and see the remote application

over the browser or an app port

so the random Port that is assigned to

the remote app is 49918 and our remote

application is also working fine the

message is displaying as remote app is

done now in the next video We'll add the

microfunded architecture inside these

applications that is full step and

remote and then we'll proceed

proceed so let's meet in the next video

till that be happy take cheers