7 Popular Frontend Web Development tools You Must Know

In this Frontend article, we will learn about 7 popular Frontend web development tools that you must know. As a front-end web development, It's very important to know about the useful tools which can make the work more efficient, faster in less time.

In this article, I am going to list a few very common front-end tools a front-end web developer should familiar with.

 

1. Chrome Developer tools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Rapid Debugging - the built in console will direct you to errors with your code. For quick style changes, you don't even need to use a text editor. You can inspect the particular element on the page to determine which styles are being applied. Chrome Developer Tools creates virtual mobile devices, enabling you to experience a mobile user journey on almost any mobile device, without having to physically have one with you.

 

2. GRUNT

It is one of the useful front-end development tool which comes for task automation related task. It can perform repetitive task very easily, such as unit testing, running tests, minifying files etc. Grunt comes with built-in tasks that extends functionality of plugin and scripts.It's ecosystem is huge, you can automate anything with less effort.

 

3. Shareable & Runnable Code Editors

Below are list of some environments of web development for front-end developers and designers.

  • Codepen
  • Code Sandbox
  • jsbin
  • jsfiddle
  • Plunker

 

4. Grid Guide 

It is another useful front end development tool. It allows creating perfect pixel grids within designs. It adds guide based on the canvas, artboard, and selected layers. It allows creating duplicate guides to other artboards and documents.

 

5. Git Extensions

Git Extensions, which is a graphical user interface for Git, not only does it allow you to control Git without using the CLI, but you can view the commit history in a graph structure, view the history of files, use a rebase workflow, and much more. That makes it one of the top front-end development tools.

 

6. Offline Tools

  • Hoodie: A fast, simple and self-hosted backend as a service for your (web) apps, Open Source and free. No need to write server-side code or database schemas. 
  • Offline.js: Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail.
  • PouchDB: PouchDB was created to help web developers build applications that work as well offline as they do online.
  • upup: a tiny script that makes sure your site is always there for your users

7. CSS Tools

Base: Spend less time overriding styles and focus more time on creating beautiful website applications.

Bootstrap: Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Foundation: The most advanced responsive front-end framework in the world.

Material Design Lite (MDL): Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.

Conclusion

In this article, We go through the different front-end development tools which a front-end developer should use to improve his work from all the dimensions.

Original article sourced at: https://jsonworld.com

#FrontEnd 

7 Popular Frontend Web Development tools You Must Know
Mireille  Von

Mireille Von

1670332320

Top 3 Frontend Frameworks You Must Know

In this article, we will learn about the top 3 Frontend Frameworks that you must know. It is that time of the year to revisit what’s going on in the JavaScript frontend frameworks world. It is a constantly changing world with new frameworks showing up very often. But the last few years have been consistent with frameworks like React, Vue and Angular. Let’s dive into what’s going on now and the future of JavaScript frontend frameworks.

Svelte – The Surprising Serious Contender

Svelte the new kid on the block, has sure shaken things up! The State of JS 2020 survey results are out and Svelte ranks as #1 this year in both the category of satisfaction among developers and interest in learning.

89% of developers are satisfied with Svelte making it to the top of the list, followed very closely by React at 88%.

Svelte is still not largely adopted by many companies. We may have to wait a year to see its impact when there is a larger adoption. But as of now, developers are super interested in learning Svelte and those who have used it are highly satisfied.

I have personally not used Svelte yet, but do plan to learn it sometime this year.

Svelte is a component framework similar to React and Vue. Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This is the unique feature of Svelte. I am quite excited about Svelte. I am looking forward to see what is in store for Svelte in 2021, and hope to learn it along with you folks.

#1 React – Tops the Charts

React Native Logo

React has continued to rise in popularity over the years and has been consistently ranked as the most used and favorite JavaScript library for building frontend applications. For the fifth year in a row in the State of JS survey, React has ranked as the most used JavaScript library for building frontend applications.

Over 80% of the respondents voted for React as the most used library.

This shows a steady increase in the adoption of React over the years!

Latest React Features and Road ahead

  • React Hooks – This is the biggest addition to React in the past year. Many development teams have adopted hooks in their codebase now. Hooks have made learning React easier, and helps in writing functional React components, without the use of classes. If you haven’t heard of hooks or used them yet, make sure to go over our blog posts and learn all about React Hooks:
  • React Dev Tools – The react dev tools are awesome and super useful during development and debugging. React recently released a new and upgraded version of the react dev tools. With this release it is available across Chrome, Firefox and Edge. This new version has significant performance gains and an improved navigation experience.
  • React Concurrent Mode and Suspense – This is still an experimental release, and we hope it will be a stable release sometime in 2021. Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

If you are a React developer, your job prospects are going to be highest in the frontend developer market. With the rising popularity of React, many enterprise companies are also moving toward re-writing their frontend using React. This is going to create plenty of jobs for React developers. In the mobile world also, React is trending with the availability of React Native. The benefits of knowing React can be translated to both web development and mobile development jobs.

#2 Vue – A Close Second

Vue

Vue has been making an impact in the frontend development world, ever since it was released. It has all the good aspects of both React and Angular, making it a unique framework.

The adoption of Vue has been steadily increasing over the years.

41.7% of developers have said that they have used Vue and would use it again, with another 31.3% interested in learning it.

The use of Vue as a mainstream frontend framework has been steadily increasing and developers also like using it.

It is ranked #2 today, next to only React!

Furthermore, the learning curve with Vue is a lot lesser than some of the other frameworks and libraries. If you already know JavaScript, HTML and CSS, it is very easy to start building Vue apps. Vue apps

Latest Vue Features

The Vue 3 core was officially released in September 2020. This is a stable release with the following updates:

  • Vue 3 Release: It is faster, smaller, maintainable and easier to target native. This is a big win for Vue last year.
  • Functional Components like React Hooks: Vue is also inspired by the React hooks concept, and allowed their own way to encapsulate logic into functional components and reuse the components across the code. This provides higher flexibility and scalability to Vue apps.

If you are a React developer looking to learn Vue, you can get started with learning the difference between React and Vue from our blog post below:

React vs. Vue – A Wholesome Comparison

#3 Angular – Declining Trend

Angular

Angular is still one of the top frontend JavaScript frameworks and is used by plenty of companies. But every year, the interest and satisfaction among developers using Angular has been on a decline. Take a look at the satisfaction parameter of Angular on the State of JS survey of 2020 below:

The satisfaction levels of Angular has been on a steady decline year after year. It still happens to be used widely across the world. But if the developers are not satisfied, they may start switching to other developer friendly frameworks in the future.

From the graph below, we see that 32.6% of developers have said they would not use Angular again, and 34.8% of developers are not interested in learning Angular.

You may ask why is it then ranked as #3? Well, although developers have declining interest in Angular, it has been widely adopted in the last few years. Angular is the #2 most used frontend framework in the world and you can still find plenty of jobs if you are an Angular developer.

The hope is that the Angular framework, moves towards flexibility and better developer experience to retain their market share in the frontend framework scene.

Conclusion

Well that’s a wrap! I like to drive home a point that frameworks/libraries and tools are continuously evolving. What maybe trending today, maybe obsolete in a few years. Your expertise as a developer should not be just based on mastering a single framework. It comes with strong foundations.

If you are aiming to be a frontend developer, learn JavaScript, HTML and CSS first.

All these frameworks are built on top of JavaScript. In addition to the programming languages and its mastery, design and architecture plays a very important role. Learn the skills that won’t ever lose its value. Learn design principles, algorithms, architectural patterns, clean coding methods, and general coding practices. These will come a long way in your career,


Original article sourced at: https://programmingwithmosh.com

#FrontEnd #vue #react #svelte 

Top 3 Frontend Frameworks You Must Know

Tutorial: Dynamic syntax highlighting in editor.js using prism.js (Nex

Prism.js is a very simple syntax highlighting tool that provides amazing results. It's very light, extensible (with currently 290+ supported programming languages), intuitive, blazing fast, and easy styling.

Today, I'll show you how to use this tool how to use this app on a next.js project if your cms data comes from editor.js. Check out the link below!

https://reacthustle.com/blog/tutorial-dynamic-syntax-highlighting-in-editorjs-using-prismjs-nextjs-app 

#nextjs  #prismjs  #react  #frontenddevelopment  #FrontEnd 

How to Speed Up your NextJS App with Preact.

As developers we want our app to be lean, and fast. One way to do that is by swtiching from react to preact.  I also discuss how to fix possible errors when switching to #preact .

https://reacthustle.com/blog/how-to-speed-up-your-nextjs-app-with-preact 

 

#nextjs #FrontEnd  #frontenddev 

Beginner Guide: How to call REST api using Hooks in React | ReactHustle

Beginner Guide: How to call REST api using Hooks in React 
- Let's learn how to call rest APIs in React from beginner to advanced.
https://reacthustle.com/blog/how-to-call-rest-api-using-hooks-in-react

#rest  #react  #FrontEnd  #frontenddev 

Beginner Guide: How to call REST api using Hooks in React | ReactHustle
Sefali Warner

Sefali Warner

1666356824

The Most Used Front-End Frameworks for Web Development

In this article, we'll discuss the most popular frontend frameworks and how to choose the best one for your project. We'll go over the different features and benefits of each framework, and help you decide which one is right for you.

So if you're looking to improve your web development skills, this article is for you.
 

https://www.zupyak.com/p/3322704/t/the-most-used-front-end-frameworks-for-web-development


 

#FrontEnd  #frameworks  #webdevelopement  #webframeworks 

5 Next.js Routing Best Practices

Today I'm going to share with you next.js routing 5 best practices. These will be useful for a production grade application and try optimize the performance score on lighthouse. This article assumes that you have a basic understanding of next.js routing. This article touches on a few points that will sure come in handy! 

useRouter hook is a pretty straight forward react hook in next.js but sometimes it can cause performance issues and unwanted behavior when we fail to notice minor details when implementing a component.  

Checkout the link below: 👇

https://reacthustle.com/blog/5-nextjs-routing-best-practices

 

#nextjs  #react  #FrontEnd  #frontend #fullstack 

Sefali Warner

Sefali Warner

1663854067

Most used front-end languages and frameworks.

In this blog, we take a look at the most popular front-end web development frameworks and languages. We explore what each one is used for and some of their pros and cons. By the end of this video, you'll have a good idea of which framework or language might be best for you to learn.

 

#FrontEnd #frameworks #webdev #programming #language 

Most used front-end languages and frameworks.
Trung  Nguyen

Trung Nguyen

1659825000

Giao Diện Người Dùng Vi Mô Với React Và Next.js

 Làm việc trên một dự án quy mô lớn và quản lý cơ sở mã của nó có thể là một thách thức lớn đối với các nhóm. Mặc dù giao diện người dùng vi mô đã xuất hiện được một thời gian, nhưng chúng đang ngày càng trở nên phổ biến vì các tính năng độc đáo và khả năng sử dụng của chúng.

Giao thức vi mô đặc biệt hữu ích vì nhiều nhóm có thể làm việc trên các mô-đun riêng lẻ của cùng một dự án mà không cần lo lắng về các mô-đun khác. Với giao diện người dùng vi mô, không quan trọng bao nhiêu mô-đun sẽ được thêm vào hệ thống hiện tại.

Trong bài viết này, chúng tôi sẽ trình bày những kiến ​​thức cơ bản về giao diện người dùng vi mô là gì và cách triển khai nó bằng Next.js. Chúng tôi cũng sẽ thảo luận về những lợi ích của việc sử dụng giao diện người dùng vi mô trong các ứng dụng của bạn.

Giới thiệu về giao diện người dùng vi mô

Đối với người mới bắt đầu, giao diện người dùng vi mô không tuân theo bất kỳ cấu trúc cụ thể nào và không có ranh giới cố định.

Vậy một micro-frontend nhỏ như thế nào? Điều này vẫn chưa được giải đáp. Điểm mấu chốt là bạn nên chia nhỏ dự án của mình để trải nghiệm người dùng không bị xáo trộn. Quá trình này có thể khó khăn vì nó có thể sẽ bao gồm nhiều bản sửa đổi bảng trắng.

Dự án của bạn có thể sẽ phát triển khi thời gian trôi qua và bạn có thể cần phải sửa đổi giao diện người dùng vi mô của mình khi tiếp tục.

Cấu trúc giao diện người dùng vi mô

Nguồn ảnh: https://microfrontends.com/ .

React là một công nghệ frontend phổ biến được biết đến với tính hữu dụng và các tính năng của nó. Sử dụng giao diện người dùng vi mô với React là một điều tuyệt vời! Và đó là nơi Next.js xuất hiện.

Next.js có rất nhiều lợi ích, bao gồm:

  • Hỗ trợ bộ định tuyến sẵn có. Không cần gói bổ sung
  • Hỗ trợ CSS và TypeScript có sẵn
  • Tự động đặt các tuyến đường dựa trên trang
  • Dễ dàng xây dựng để sản xuất
  • Tối ưu hóa hình ảnh và SDK quốc tế hóa
  • Các hàm không máy chủ có sẵn (các tuyến API)

Vì vậy, bây giờ chúng ta hãy xem cách tạo một giao diện người dùng vi mô với Next.js!

Triển khai giao diện người dùng vi mô với Next.js

Chúng tôi sẽ sử dụng liên kết mô-đun , về mặt kỹ thuật là một tính năng của webpack v5 . Nó cho phép nhiều bản dựng của một ứng dụng duy nhất và chạy như một khối nguyên khối.

Một số người có thể nghĩ rằng liên kết mô-đun là một tính năng JavaScript mới, nhưng thực ra nó chỉ là một nguyên tắc kiến ​​trúc tải động mã từ các trình xây dựng khác. Điều này thật tuyệt nếu bạn muốn thêm một giao diện người dùng vi mô mới vào hệ thống hiện có; bạn có thể làm như vậy một cách nhanh chóng mà không ảnh hưởng đến những gì hiện có ở đó.

Điều kiện tiên quyết

Giả sử bạn đã cài đặt Node trên máy của mình, chúng tôi sẽ xây dựng ba giao diện người dùng vi mô Next.js. Chúng tôi sẽ hiển thị một thành phần trong giao diện người dùng vi mô đầu tiên và hiển thị một chức năng phổ biến trong giao diện thứ hai. Sau đó, chúng tôi sẽ sử dụng các mục tiếp xúc đó trong giao diện người dùng vi mô thứ ba của chúng tôi, về cơ bản biến nó trở thành người tiêu dùng của mỗi mô-đun được xuất.

Ứng dụng Next.js của bạn phải là phiên bản v10.2 trở lên để hỗ trợ webpack 5 . Nếu không, bạn cần sử dụng gói bên ngoài để hỗ trợ liên kết mô-đun. Đối với hướng dẫn này, tôi đang sử dụng Next.js v12.2.0.

Thiết lập giao diện người dùng vi mô

Đầu tiên, tạo ba giao diện người dùng trong một thư mục bằng cách chạy lệnh đã cho:

> mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3

Trong giao diện người dùng đầu tiên, hoặc fe1, chúng tôi sẽ tạo một Headerthành phần sẽ được hiển thị. Chúng tôi sẽ thực hiện việc này trong tệp src/component/Header.jsx:

import * as React from 'react'

const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};

export default Header;

Bây giờ, để làm cho nó hoạt động, chúng ta cần thêm nó vào index.jstrang:

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}

Nếu bạn muốn xem đầu ra, hãy chạy npm run devvà truy cập http://localhost:3000/. Nó sẽ giống như thế này:

Đầu ra thiết lập Micro Frontend

Bây giờ, chúng tôi phải giới thiệu thành phần của mình để cung cấp nó trên toàn cầu cho một giao diện người dùng vi mô khác. Để làm như vậy, chúng ta cần thay đổi next.config.jsnhư sau:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Khi chúng tôi tạo fe1, bạn có thể tìm thấy tệp JavaScript được sử dụng trong một giao diện người dùng vi mô khác tại vị trí http://localhost:%5BPORT%5D/build/remoteEntry.js.

Tuyệt vời, chúng tôi đã tạo ra các thành phần trong fe1và ngoài fe2! Bây giờ chúng ta sẽ tạo một hàm chung để hiển thị.

Hãy tạo một hàm trong fe2:

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}

export default squareRoot;

Bây giờ chúng ta hãy cấu hình next.config.jscho giống nhau:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Sau khi chúng tôi xây dựng nó, nó http://localhost:%5BPORT%5D/build/remoteEntry_2.jssẽ sẵn sàng để sử dụng.

Hãy đối xử fe3với tư cách là một người tiêu dùng. Chúng tôi sẽ sử dụng thành phần đã xuất của fe1và chức năng của fe2.

Đầu tiên, hãy cấu hình next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Ở đây, bạn có thể thấy rằng chúng tôi đã xác định remotetrong cấu hình webpack. Công việc của remotelà sử dụng từ URL đã cho và cung cấp nội dung cho ứng dụng đó. Nó sẽ chấp nhận các phụ thuộc từ xa hoặc cục bộ dựa trên điều kiện mà chúng tôi đã chỉ định.

Để sử dụng tệp đó, chúng tôi cần cập nhật _document.jstệp được liệt kê bên dưới pages:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Hãy nhập mô-đun đó vào index.jstệp và sử dụng nó.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}

Thực hiện và kết quả

Bây giờ là lúc để kiểm tra xem nó có hoạt động hay không. Đầu tiên, xây dựng và bắt đầu fe1fe2. Bắt đầu fe3bằng cách chạy npm start devvà truy cập URL tương ứng của nó để kiểm tra đầu ra.

Kết quả thực thi

Chà! Chúng tôi vừa sử dụng nội dung của hai mã giao diện người dùng vào giao diện người dùng chính của chúng tôi!

🚀Hãy làm một số phép thuật.

Chuyển đến fe1 → src → componentvà thay đổi giá trị từ namethành name updated. Sau đó, chạy lại f2.

Bạn có thể xem mã mới được cập nhật fe1mà không cần làm gì cả. Thật tuyệt vời, phải không?

Ưu điểm của giao diện người dùng vi mô

Nói một cách đơn giản, giao diện người dùng vi mô làm cho các ứng dụng web dễ bảo trì hơn. Nếu bạn đã từng là một phần của một ứng dụng lớn, bạn biết việc quản lý mọi thứ sẽ rất tẻ nhạt.

Các mặt trước vi mô hoạt động tương tự như quy tắc phân chia và chinh phục . Bây giờ, chúng ta hãy hiểu các khía cạnh quan trọng và có giá trị nhất của việc làm việc với các giao thức vi mô.

Triển khai và bảo mật

Một lợi thế đáng kể của kiến ​​trúc micro-frontend là bạn có thể tách một phần thân đơn lẻ thành các phần riêng lẻ có thể được triển khai độc lập. Khi triển khai một mình, bạn có thể duy trì và xây dựng mà không cần làm việc trên các phần khác.

Varcel hỗ trợ một repo riêng lẻ của các giao diện người dùng khác nhau, không phân biệt ngôn ngữ và khuôn khổ để triển khai chúng cùng nhau. Ngoài ra, bạn có thể sử dụng các dịch vụ triển khai như Netlify . Sau khi nó được triển khai, bạn chỉ có thể sử dụng nó như một giao diện người dùng riêng lẻ.

Khi giao diện người dùng được nhiều người sử dụng, giao diện người dùng cần phải an toàn và mạnh mẽ. Để đảm bảo an toàn, bạn có thể sử dụng chứng chỉ SSL như Wildcard hoặc chứng chỉ SSL của một miền, đa miền hoặc SAN . Một Chứng chỉ SSL SAN hoặc đa miền có thể bảo mật nhiều trang web và miền phụ.

Khả năng mở rộng

Có nhiều khung công tác được xây dựng bằng JavaScript, nhưng nếu bạn muốn sắp xếp các nhà phát triển với các nền tảng khác nhau trên cùng một dự án, liệu có thể thực hiện được không? Câu trả lời là có với giao diện người dùng vi mô!

Bạn có thể kết hợp React, Vue và Angular trên một dự án duy nhất bằng cách tận dụng kiến ​​trúc micro-frontend. Theo ý kiến ​​của tôi, nó tạo ra kết quả tốt nhất.

Phát triển nhanh hơn

Bây giờ bạn biết rằng nhóm của bạn có thể làm việc độc lập. Tuyệt vời, không còn sự hỗn loạn không cần thiết nữa!

Nhóm của bạn có thể phát triển và triển khai giao diện người dùng của họ bất cứ khi nào họ muốn. Việc phát hành có thể được thực hiện nhanh chóng vì không có sự phụ thuộc nào được liên kết với các mô-đun riêng lẻ.

Mục tiêu chính của việc xác định giao diện người dùng vi mô là các lần lặp lại nhanh hơn.

Kiểm tra dễ dàng

Tốt hơn là bạn nên kiểm tra các phần riêng lẻ của một ứng dụng trước khi chuyển sang thử nghiệm tích hợp. Điều đó có thể đạt được ở đây!

Các nhóm sẽ kiểm tra giao diện người dùng vi mô trước khi kiểm tra ứng dụng, do đó giảm nguy cơ lỗi xâm nhập vào hệ thống thực.

Ngoài ra, những lợi thế khác là một cơ sở mã nhỏ dễ bảo trì và khả năng nhanh chóng thêm hoặc xóa bất kỳ mô-đun nào khỏi hệ thống.

Sự kết luận

Trong bài viết này, chúng tôi đã thảo luận về khái niệm vi mô và đưa ra các ví dụ. Hy vọng rằng bây giờ bạn biết rằng nó dễ dàng áp dụng và có một số tính năng tuyệt vời!

Next.js khá rõ ràng và tuân theo kiến ​​trúc vi giao diện người dùng đơn giản. Tôi rất vui khi thấy Next mang lại những gì trong tương lai liên quan đến vi kiến ​​trúc và kết xuất phía máy chủ với giao diện người dùng vi mô.

Cá nhân tôi thích phong cách mã hóa giao diện người dùng vi mô vì nó dễ dàng duy trì giữa các nhóm. Ngoài ra, tòa nhà phía trước và an ninh cũng được quản lý khá trang nhã. Đây là một cơ hội rất thú vị cho một đội vì trong tương lai, khái niệm này có thể sẽ phát triển vượt mức giới hạn!

Sau đó, bạn sẽ không tìm thấy bất kỳ sự khác biệt nào giữa giao diện người dùng vi mô và hệ thống xương đơn. 

Nguồn: https://blog.logrocket.com/micro-frontend-react-next-js/

#react-native #nextjs #micro #FrontEnd 

Giao Diện Người Dùng Vi Mô Với React Và Next.js

Microfrontend com React e Next.js

 Trabalhar em um projeto de grande escala e gerenciar sua base de código pode ser um grande desafio para as equipes. Embora os micro-frontends estejam em cena há algum tempo, eles estão se tornando cada vez mais populares por causa de seus recursos e usabilidade exclusivos.

Micro-frontends são particularmente úteis porque várias equipes podem trabalhar em módulos individuais do mesmo projeto sem se preocupar com outros módulos. Com micro-frontends, não importa quantos módulos serão adicionados a um sistema atual.

Neste artigo, abordaremos o básico do que é um microfront-end e como implementá-lo usando o Next.js. Também discutiremos as vantagens de usar microfrontends em seus aplicativos.

Introdução aos microfrontends

Para começar, os micro-frontends não seguem nenhuma estrutura específica e não possuem limites fixos.

Então, quão pequeno é um micro-frontend? Isso ainda está sem resposta. A linha inferior é que você deve dividir seu projeto para que a experiência do usuário não seja perturbada. Esse processo pode ser doloroso porque provavelmente incluirá várias revisões do quadro branco.

Seu projeto provavelmente evoluirá com o passar do tempo e talvez você precise revisar seu micro-frontend à medida que avança.

Estrutura Micro Front-end

Fonte da imagem: https://microfrontends.com/ .

React é uma pilha de tecnologia de front-end popular conhecida por sua utilidade e recursos. Usar micro-frontends com React é uma cereja no topo! E é aí que entra o Next.js.

Next.js tem vários benefícios, incluindo:

  • Suporte de roteador embutido. Nenhum pacote extra necessário
  • Suporte embutido a CSS e TypeScript
  • Rotas baseadas em página definidas automaticamente
  • Facilmente construído para produção
  • Otimização de imagem e SDKs internacionalizados
  • Funções sem servidor incorporadas (rotas de API)

Então agora vamos ver como criar um micro-frontend com Next.js!

Implementando um microfront-end com Next.js

Usaremos federação de módulos , que é tecnicamente um recurso do webpack v5 . Ele permite várias compilações de um único aplicativo e é executado como um monólito.

Algumas pessoas podem pensar que a federação de módulos é um novo recurso JavaScript, mas na verdade é apenas um princípio de arquitetura que carrega dinamicamente o código de outros construtores. Isso é ótimo se você quiser adicionar um novo micro-frontend ao sistema existente; você pode fazer isso rapidamente sem afetar o que está lá no momento.

Pré-requisitos

Supondo que você já tenha o Node instalado em sua máquina, vamos construir três microfrontends Next.js. Vamos expor um componente no primeiro micro-frontend e expor uma função comum no segundo. Em seguida, usaremos esses itens expostos em nosso terceiro micro-frontend, tornando-o essencialmente o consumidor de cada módulo exportado.

Seu aplicativo Next.js deve ser v10.2 ou posterior para oferecer suporte ao webpack 5 . Caso contrário, você precisa usar um pacote externo para dar suporte à federação de módulos. Para este tutorial, estou usando o Next.js v12.2.0.

Configurando os microfrontends

Primeiro, crie três frontends em um único diretório executando o comando fornecido:

> mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3

No primeiro frontend, ou fe1, criaremos um Headercomponente que será exposto. Faremos isso no arquivo src/component/Header.jsx:

import * as React from 'react'

const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};

export default Header;

Agora, para fazê-lo funcionar, precisamos adicioná-lo à index.jspágina:

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}

Se você quiser ver uma saída, execute npm run deve visite http://localhost:3000/. Deve ficar assim:

Saída de configuração de micro front-end

Agora, temos que expor nosso componente para torná-lo disponível globalmente para outro micro-frontend. Para isso, precisamos alterar next.config.jsda seguinte forma:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Quando construímos fe1, você pode encontrar o arquivo JavaScript usado em outro micro-frontend no local http://localhost:%5BPORT%5D/build/remoteEntry.js.

Ótimo, criamos componentes em fe1e em fe2! Agora vamos criar uma função comum para expor.

Vamos criar uma função em fe2:

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}

export default squareRoot;

Agora vamos configurar next.config.jspara o mesmo:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Assim que construí-lo, http://localhost:%5BPORT%5D/build/remoteEntry_2.jsestará pronto para uso.

Vamos tratar fe3como consumidor. Usaremos o componente exportado de fe1e a função de fe2.

Primeiro vamos configurar next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Aqui, você pode ver que definimos remotena configuração do webpack. O trabalho de remoteé consumir a partir da URL fornecida e disponibilizar conteúdo para esse aplicativo. Ele aceitará dependências remotas ou locais com base na condição que especificamos.

Para usar esse arquivo, precisamos atualizar o _document.jsarquivo listado em pages:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Vamos importar esse módulo para o index.jsarquivo e usá-lo.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}

Execução e resultados

Agora é hora de verificar se está funcionando ou não. Primeiro, construa e inicie fe1e fe2. Comece fe3executando npm start deve vá para sua respectiva URL para verificar a saída.

Resultados de execução

Uau! Acabamos de consumir o conteúdo de dois códigos frontend em nosso frontend principal!

🚀Vamos fazer uma mágica.

Vá para fe1 → src → componente altere o valor de namepara name updated. Em seguida, execute novamente f2.

Você pode ver o novo código que foi atualizado fe1sem fazer nada. Incrível, certo?

Vantagens dos micro frontends

Simplificando, os micro-frontends tornam os aplicativos da Web mais fáceis de manter. Se você já fez parte de um grande aplicativo, sabe que é muito tedioso gerenciar tudo.

Micro-frontends funcionam de forma semelhante à regra de dividir e conquistar . Agora, vamos entender os aspectos mais importantes e valiosos de trabalhar com microfrontends.

Implantação e segurança

Uma vantagem significativa da arquitetura micro-frontend é que você pode separar um único corpo em partes individuais que podem ser implantadas independentemente. Ao implantar sozinho, você pode manter e construir sem trabalhar em outras partes.

O Varcel suporta um repositório individual de diferentes frontends, independentemente da linguagem e estrutura para implantá-los juntos. Além disso, você pode usar serviços de implantação como Netlify . Depois de implantado, você pode usá-lo apenas como um frontend individual.

Quando o frontend é usado por um grande público, ele precisa ser seguro e robusto. Para torná-lo seguro, você pode usar um certificado SSL como Wildcard ou um único domínio, vários domínios ou certificado SAN SSL . Um certificado SSL SAN ou multidomínio pode proteger vários sites e subdomínios.

Escalabilidade

Existem vários frameworks construídos com JavaScript, mas se você quiser alinhar desenvolvedores com diferentes origens no mesmo projeto, será possível? A resposta é sim com micro-frontends!

Você pode combinar React, Vue e Angular em um único projeto aproveitando a arquitetura micro-frontend. Gera o melhor resultado no final, na minha opinião.

Desenvolvimento mais rápido

Agora você sabe que sua equipe pode trabalhar de forma independente. Ótimo, chega de caos desnecessário!

Sua equipe pode desenvolver e implantar seu frontend sempre que quiser. Os lançamentos podem ser feitos rapidamente porque não há dependências associadas a módulos individuais.

O principal objetivo de definir o micro-frontend é iterações mais rápidas.

Teste fácil

É melhor testar partes individuais de um aplicativo antes de passar para o teste de integração. Isso pode ser alcançado aqui!

As equipes testarão o micro-frontend antes de testar o aplicativo, diminuindo assim as chances de bugs entrarem no sistema real.

Além disso, outras vantagens são uma pequena base de código de fácil manutenção e a capacidade de adicionar ou remover rapidamente qualquer módulo do sistema.

Conclusão

Neste artigo, discutimos o conceito de micro-frontends e demos exemplos. Espero que agora você saiba que é fácil de adotar e tem ótimos recursos!

O Next.js é bastante limpo e segue uma arquitetura micro-frontend simples. Estou animado para ver o que o Next traz no futuro em relação à microarquitetura e renderização do lado do servidor com microfrontend.

Pessoalmente, gosto do estilo de codificação micro-frontend porque é facilmente mantido entre as equipes. Além disso, a construção de front-end e a segurança também são gerenciadas de maneira bastante elegante. É uma oportunidade muito empolgante para uma equipe porque, no futuro, esse conceito provavelmente crescerá além das limitações!

Mais tarde, você não encontrará nenhuma diferença entre um micro-frontend e um sistema esquelético único. 

Fonte: https://blog.logrocket.com/micro-frontend-react-next-js/

#react-native #nextjs #micro #FrontEnd 

Microfrontend com React e Next.js
坂本  篤司

坂本 篤司

1659821400

React と Next.js を使用したマイクロフロントエンド

 大規模なプロジェクトに取り組み、そのコードベースを管理することは、チームにとって大きな課題になる可能性があります。マイクロフロントエンドはしばらく前から注目されていましたが、そのユニークな機能と使いやすさからますます人気が高まっています.

複数のチームが他のモジュールを気にせずに同じプロジェクトの個々のモジュールに取り組むことができるため、マイクロフロントエンドは特に役立ちます。マイクロ フロントエンドでは、現在のシステムに追加されるモジュールの数は問題ではありません。

この記事では、マイクロ フロントエンドの基本と、Next.js を使用してそれを実装する方法について説明します。また、アプリケーションでマイクロ フロントエンドを使用する利点についても説明します。

マイクロフロントエンドの紹介

まず第一に、マイクロフロントエンドは特定の構造には従わず、固定された境界もありません。

では、マイクロフロントエンドはどれくらい小さいのでしょうか? これはまだ答えが出ていません。肝心なのは、ユーザー エクスペリエンスが妨げられないように、プロジェクトを分割する必要があるということです。このプロセスにはホワイトボードの複数の改訂が含まれる可能性が高いため、骨の折れる作業になる可能性があります。

プロジェクトは時間の経過とともに進化する可能性が高く、進行に合わせてマイクロフロントエンドを修正する必要がある場合があります。

マイクロフロントエンド構造

画像ソース: https://microfrontends.com/ .

React は、その有用性と機能で知られる人気のあるフロントエンド技術スタックです。React でマイクロ フロントエンドを使用するのは最高です! そこで Next.js の出番です。

Next.js には、次のようなさまざまな利点があります。

  • 内蔵ルーターのサポート。余分なパッケージは必要ありません
  • 組み込みの CSS と TypeScript のサポート
  • ページベースのルートを自動的に設定
  • 本番用に簡単に構築
  • 画像の最適化と国際化された SDK
  • 組み込みのサーバーレス関数 (API ルート)

それでは、Next.js を使用してマイクロ フロントエンドを作成する方法を見てみましょう。

Next.js を使用したマイクロ フロントエンドの実装

技術的にはwebpack v5 の機能であるモジュール フェデレーションを使用します。単一のアプリケーションの複数のビルドを許可し、モノリスとして実行します。

モジュール フェデレーションは JavaScript の新しい機能だと考える人もいるかもしれませんが、実際には、他のビルダーからコードを動的にロードするアーキテクチャの原則にすぎません。これは、既存のシステムに新しいマイクロ フロントエンドを追加する場合に最適です。現在そこにあるものに影響を与えることなく、すばやく行うことができます。

前提条件

Node がすでにマシンにインストールされていると仮定して、3 つの Next.js マイクロ フロントエンドを構築します。最初のマイクロ フロントエンドでコンポーネントを公開し、2 番目のマイクロ フロントエンドで共通機能を公開します。次に、これらの公開されたアイテムを 3 番目のマイクロ フロントエンドで使用し、基本的にエクスポートされた各モジュールのコンシューマーにします。

webpack 5 をサポートするには、Next.js アプリが v10.2 以降である必要があります。それ以外の場合は、モジュール フェデレーションをサポートするために外部パッケージを使用する必要があります。このチュートリアルでは、Next.js v12.2.0 を使用しています。

マイクロフロントエンドのセットアップ

まず、次のコマンドを実行して、1 つのディレクトリに 3 つのフロントエンドを作成します。

> mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3

最初のフロントエンド (または) では、公開されるコンポーネントをfe1作成します。Headerファイルでこれを行いますsrc/component/Header.jsx

import * as React from 'react'

const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};

export default Header;

index.jsこれを機能させるには、ページに追加する必要があります。

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}

出力を確認したい場合は、 を実行npm run devしてアクセスしてくださいhttp://localhost:3000/。次のようになります。

マイクロ フロントエンド セットアップの出力

ここで、コンポーネントを公開して、別のマイクロフロントエンドでグローバルに利用できるようにする必要があります。そのためには、next.config.js次のように変更する必要があります。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

をビルドするfe1と、別のマイクロ フロントエンドで使用される JavaScript ファイルが の場所にありますhttp://localhost:%5BPORT%5D/build/remoteEntry.js

fe1と でコンポーネントを作成しましたfe2。次に、公開する共通関数を作成します。

で 1 つの関数を作成しましょうfe2:

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}

export default squareRoot;

next.config.js次に、同じように構成しましょう。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

ビルドしたら、http://localhost:%5BPORT%5D/build/remoteEntry_2.jsすぐに使用できます。

fe3消費者として扱いましょう。のエクスポートされたコンポーネントfe1と の関数を使用しfe2ます。

まず、構成しましょうnext.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

remoteここで、webpack 構成で定義したことがわかります。の仕事はremote、指定された URL から消費し、そのアプリでコンテンツを利用できるようにすることです。指定した条件に基づいて、リモートまたはローカルの依存関係を受け入れます。

_document.jsそのファイルを使用するには、以下にリストされているファイルを更新する必要がありpagesます。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

index.jsそのモジュールをファイルにインポートして使用しましょう。

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}

実行と結果

ここで、機能しているかどうかを確認します。まず、ビルドして起動fe1fe2ます。fe3実行して開始npm start devし、それぞれの URL に移動して出力を確認します。

実行結果

うわー!2 つのフロントエンド コードのコンテンツをメイン フロントエンドで使用しました。

🚀魔法をかけましょう。

に移動してfe1 → src → component、値を からnameに変更しますname updated。その後、再実行しf2ます。

fe1何もせずに更新された新しいコードを見ることができます。すごいですよね?

マイクロフロントエンドの利点

簡単に言えば、マイクロフロントエンドは Web アプリケーションをより保守しやすくします。大規模なアプリケーションに参加したことがある方なら、すべてを管理するのは非常に面倒だとお分かりでしょう。

マイクロフロントエンドは、分割統治法と同様に機能します。それでは、マイクロフロントエンドを操作する上で最も重要で価値のある側面を理解しましょう。

展開とセキュリティ

マイクロ フロントエンド アーキテクチャの大きな利点は、単一の本体を個別にデプロイできる個々の部分に分割できることです。単独でデプロイする場合は、他の部分に手を加えることなく維持および構築できます。

Varcelは、言語やフレームワークに関係なく、さまざまなフロントエンドの個別のレポをサポートして、それらを一緒にデプロイします。それとは別に、Netlifyなどの展開サービスを使用できます。展開後は、個別のフロントエンドとしてのみ使用できます。

フロントエンドが大勢の利用者によって使用される場合、安全で堅牢である必要があります。安全にするために、ワイルドカードなどの SSL 証明書、または単一ドメイン、マルチドメイン、またはSAN SSL 証明書を使用できます。1 つの SAN またはマルチドメイン SSL 証明書で、複数のサイトとサブドメインを保護できます。

スケーラビリティ

JavaScript で構築されたフレームワークは複数ありますが、バックグラウンドの異なる開発者を同じプロジェクトで連携させたい場合、それは可能でしょうか? 答えはイエスです。

マイクロ フロントエンド アーキテクチャを利用することで、React、Vue、および Angular を 1 つのプロジェクトに組み合わせることができます。私の意見では、それは最終的に最良の結果を生み出します。

より迅速な開発

これで、チームが独立して作業できることがわかりました。不要な混乱はもうありません。

チームはいつでもフロントエンドを開発してデプロイできます。個々のモジュールに関連する依存関係がないため、リリースを迅速に行うことができます。

マイクロ フロントエンドを定義する主な目標は、イテレーションを高速化することです。

簡単なテスト

統合テストに入る前に、アプリケーションの個々の部分をテストすることをお勧めします。それがここで実現できます!

チームはアプリケーションをテストする前にマイクロフロントエンドをテストするため、バグが実際のシステムに侵入する可能性が減少します。

それとは別に、その他の利点は、保守が容易な小さなコード ベースと、システムから任意のモジュールをすばやく追加または削除できることです。

結論

この記事では、マイクロフロントエンドの概念について説明し、例を挙げました。導入が簡単で、優れた機能がいくつかあることがお分かりいただけたと思います。

Next.js は非常にクリーンで、シンプルなマイクロ フロントエンド アーキテクチャに従っています。マイクロ アーキテクチャとマイクロ フロントエンドを使用したサーバー側のレンダリングに関して、Next が将来にもたらすものを見るのが楽しみです。

個人的には、チーム間でメンテナンスしやすいマイクロ フロントエンドのコーディング スタイルが好きです。それとは別に、フロントエンドの構築とセキュリティも非常にエレガントに管理されています。将来、このコンセプトは限界を超えて成長する可能性が高いため、チームにとって非常にエキサイティングな機会です!

後で、マイクロ フロントエンドと単一の骨格システムの違いはわかりません。 

ソース: https://blog.logrocket.com/micro-frontend-react-next-js/

#react-native #nextjs #micro #FrontEnd 

React と Next.js を使用したマイクロフロントエンド
Saul  Alaniz

Saul Alaniz

1659819600

Micro-frontend con React y Next.js

Trabajar en un proyecto a gran escala y administrar su base de código puede ser un gran desafío para los equipos. Aunque las micro-frontends han estado en la imagen desde hace un tiempo, se están volviendo cada vez más populares debido a sus características y facilidad de uso únicas.

Los micro-frontends son particularmente útiles porque varios equipos pueden trabajar en módulos individuales del mismo proyecto sin preocuparse por otros módulos. Con micro-frontends, no importa cuántos módulos se agregarán a un sistema actual.

En este artículo, cubriremos los conceptos básicos de lo que es un micro-frontend y cómo implementarlo usando Next.js. También discutiremos las ventajas de usar micro-frontends en sus aplicaciones.

Introducción a las microfrontends

Para empezar, las micro-frontends no siguen ninguna estructura en particular y no tienen límites fijos.

Entonces, ¿qué tan pequeño es un micro-frontend? Esto aún no tiene respuesta. La conclusión es que debe dividir su proyecto para que la experiencia del usuario no se vea afectada. Este proceso puede ser complicado porque probablemente incluirá varias revisiones de la pizarra.

Es probable que su proyecto evolucione a medida que pasa el tiempo y es posible que deba revisar su micro-frontend a medida que avanza.

Estructura de micro interfaz

Fuente de la imagen: https://microfrontends.com/ .

React es una pila de tecnología frontend popular conocida por su utilidad y características. ¡Usar micro-frontends con React es una guinda del pastel! Y ahí es donde entra Next.js.

Next.js tiene una gran cantidad de beneficios, que incluyen:

  • Soporte de enrutador incorporado. No se necesita paquete adicional
  • Compatibilidad con CSS y TypeScript incorporados
  • Rutas basadas en páginas configuradas automáticamente
  • Construido fácilmente para la producción
  • Optimización de imágenes y SDK internacionalizados
  • Funciones sin servidor incorporadas (rutas API)

¡Así que ahora veamos cómo crear una micro-frontend con Next.js!

Implementando una micro-frontend con Next.js

Usaremos la federación de módulos , que técnicamente es una característica de webpack v5 . Permite múltiples compilaciones de una sola aplicación y se ejecuta como un monolito.

Algunas personas pueden pensar que la federación de módulos es una nueva característica de JavaScript, pero en realidad es solo un principio de arquitectura que carga dinámicamente el código de otros constructores. Esto es excelente si desea agregar una nueva micro interfaz al sistema existente; puede hacerlo rápidamente sin afectar lo que hay actualmente.

requisitos previos

Suponiendo que ya tiene Node instalado en su máquina, vamos a construir tres micro-frontends Next.js. Expondremos un componente en el primer micro-frontend y expondremos una función común en el segundo. Luego usaremos esos elementos expuestos en nuestro tercer micro-frontend, convirtiéndolo esencialmente en el consumidor de cada módulo exportado.

Su aplicación Next.js debe ser v10.2 o posterior para admitir el paquete web 5 . De lo contrario, debe usar un paquete externo para admitir la federación de módulos. Para este tutorial, estoy usando Next.js v12.2.0.

Configurando las micro-frontends

Primero, cree tres interfaces en un solo directorio ejecutando el comando dado:

> mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3

En la primera interfaz, o fe1, crearemos un Headercomponente que estará expuesto. Haremos esto en el archivo src/component/Header.jsx:

import * as React from 'react'

const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};

export default Header;

Ahora, para que funcione, necesitamos agregarlo a la index.jspágina:

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}

Si desea ver una salida, ejecute npm run devy visite http://localhost:3000/. Debe tener un aspecto como este:

Salida de configuración de micro frontend

Ahora, tenemos que exponer nuestro componente para que esté disponible globalmente para otra micro-interfaz. Para hacerlo, necesitamos cambiar next.config.jsde la siguiente manera:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Cuando construimos fe1, puede encontrar el archivo JavaScript utilizado en otra micro-interfaz en la ubicación http://localhost:%5BPORT%5D/build/remoteEntry.js.

Genial, ¡hemos creado componentes en fe1y en fe2! Ahora crearemos una función común para exponer.

Vamos a crear una función en fe2:

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}

export default squareRoot;

Ahora configuremos next.config.jspara lo mismo:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Una vez que lo construyamos, http://localhost:%5BPORT%5D/build/remoteEntry_2.jsestará listo para usar.

Vamos a tratar fe3como un consumidor. Usaremos el componente exportado de fe1y la función de fe2.

Primero, configuremos next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Aquí puede ver que definimos remoteen la configuración del paquete web. El trabajo de remotees consumir desde la URL dada y hacer que el contenido esté disponible para esa aplicación. Aceptará dependencias remotas o locales según la condición que especifiquemos.

Para usar ese archivo, necesitamos actualizar el _document.jsarchivo que se encuentra debajo pages:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Importemos ese módulo al index.jsarchivo y usémoslo.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}

Ejecución y resultados

Ahora es el momento de comprobar si funciona o no. Primero, compila e inicia fe1y fe2. Comience fe3ejecutando npm start devy vaya a su URL respectiva para verificar la salida.

Resultados de ejecución

¡Guau! ¡Acabamos de consumir el contenido de dos códigos de interfaz en nuestra interfaz principal!

🚀Hagamos un poco de magia.

Vaya a fe1 → src → componenty cambie el valor de namea name updated. Luego, vuelva a ejecutar f2.

Puede ver el nuevo código que se actualizó fe1sin hacer nada. Increíble, ¿verdad?

Ventajas de las micro-frontends

En pocas palabras, las micro-frontends hacen que las aplicaciones web sean más fáciles de mantener. Si alguna vez ha sido parte de una aplicación grande, sabe que es muy tedioso administrarlo todo.

Las micro-frontends funcionan de manera similar a la regla divide y vencerás . Ahora, comprendamos los aspectos más importantes y valiosos de trabajar con micro-frontends.

Despliegue y seguridad

Una ventaja significativa de la arquitectura de micro-frontend es que puede separar un solo cuerpo en piezas individuales que se pueden implementar de forma independiente. Al implementar solo, puede mantener y construir sin trabajar en otras piezas.

Varcel admite un repositorio individual de diferentes interfaces, independientemente del idioma y el marco para implementarlos juntos. Aparte de eso, puedes usar servicios de implementación como Netlify . Una vez que se implementa, puede usarlo solo como una interfaz individual.

Cuando la interfaz es utilizada por una gran audiencia, debe ser segura y robusta. Para que sea seguro, puede utilizar un certificado SSL como Wildcard o un certificado SSL de dominio único, multidominio o SAN . Un certificado SSL de SAN o multidominio puede proteger varios sitios y subdominios.

Escalabilidad

Hay varios marcos creados con JavaScript, pero si desea alinear a los desarrolladores con diferentes antecedentes en el mismo proyecto, ¿será posible? ¡La respuesta es sí con micro-frontends!

Puede combinar React, Vue y Angular en un solo proyecto aprovechando la arquitectura de micro-frontend. Genera el mejor resultado al final en mi opinión.

Desarrollo más rápido

Ahora ya sabes que tu equipo puede trabajar de forma independiente. ¡Genial, no más caos innecesario!

Su equipo puede desarrollar e implementar su interfaz cuando lo desee. Los lanzamientos se pueden realizar rápidamente porque no hay dependencias asociadas con módulos individuales.

El objetivo principal de definir el micro-frontend es iteraciones más rápidas.

Pruebas fáciles

Es mejor probar piezas individuales de una aplicación antes de pasar a la prueba de integración. ¡Eso se puede lograr aquí!

Los equipos probarán la micro interfaz antes de probar la aplicación, lo que disminuirá las posibilidades de que se produzcan errores en el sistema real.

Aparte de eso, otras ventajas son una pequeña base de código que es fácil de mantener y la capacidad de agregar o eliminar rápidamente cualquier módulo del sistema.

Conclusión

En este artículo, discutimos el concepto de micro-frontends y dimos ejemplos. ¡Con suerte, ahora sabe que es fácil de adoptar y tiene algunas funciones excelentes!

Next.js es bastante limpio y sigue una arquitectura simple de micro-frontend. Estoy emocionado de ver lo que Next trae en el futuro con respecto a la microarquitectura y la representación del lado del servidor con micro-frontend.

Personalmente, me gusta el estilo de codificación micro-frontend porque es fácil de mantener entre equipos. Aparte de eso, la construcción de frontend y la seguridad también se administran de manera bastante elegante. ¡Es una oportunidad muy emocionante para un equipo porque en el futuro, este concepto probablemente crecerá más allá de las limitaciones!

Más adelante, no encontrará ninguna diferencia entre un micro-frontend y un sistema de esqueleto único. 

Fuente: https://blog.logrocket.com/micro-frontend-react-next-js/

#react-native #nextjs #micro #FrontEnd 

Micro-frontend con React y Next.js

Micro-interface avec React et Next.js

Travailler sur un projet à grande échelle et gérer sa base de code peut être un grand défi pour les équipes. Bien que les micro-interfaces soient présentes depuis un certain temps déjà, elles deviennent de plus en plus populaires en raison de leurs fonctionnalités uniques et de leur convivialité.

Les micro-interfaces sont particulièrement utiles car plusieurs équipes peuvent travailler sur des modules individuels du même projet sans se soucier des autres modules. Avec les micro-interfaces, peu importe le nombre de modules qui seront ajoutés à un système actuel.

Dans cet article, nous aborderons les bases de ce qu'est un micro-frontend et comment l'implémenter à l'aide de Next.js. Nous discuterons également des avantages de l'utilisation de micro-interfaces dans vos applications.

Introduction aux micro-interfaces

Pour commencer, les micro-interfaces ne suivent aucune structure particulière et n'ont pas de limites fixes.

Alors, quelle est la taille d'un micro-frontend ? Ceci est toujours sans réponse. L'essentiel est que vous devez diviser votre projet afin que l'expérience utilisateur ne soit pas perturbée. Ce processus peut être pénible car il inclura probablement plusieurs révisions du tableau blanc.

Votre projet évoluera probablement au fil du temps et vous devrez peut-être réviser votre micro-interface au fur et à mesure.

Structure micro frontale

Source de l'image : https://microfrontends.com/ .

React est une pile technologique frontale populaire connue pour son utilité et ses fonctionnalités. L'utilisation de micro-interfaces avec React est une cerise sur le gâteau ! Et c'est là qu'intervient Next.js.

Next.js présente un grand nombre d'avantages, notamment :

  • Prise en charge du routeur intégré. Aucun paquet supplémentaire nécessaire
  • Prise en charge CSS et TypeScript intégrée
  • Définissez automatiquement des itinéraires basés sur des pages
  • Facilement construit pour la production
  • Optimisation des images et SDK internationalisés
  • Fonctions sans serveur intégrées (routes API)

Voyons maintenant comment créer un micro-frontend avec Next.js !

Implémentation d'un micro-frontend avec Next.js

Nous utiliserons la fédération de modules , qui est techniquement une fonctionnalité webpack v5 . Il permet plusieurs versions d'une seule application et s'exécute comme un monolithe.

Certaines personnes peuvent penser que la fédération de modules est une nouvelle fonctionnalité JavaScript, mais il ne s'agit en fait que d'un principe d'architecture qui charge dynamiquement le code d'autres constructeurs. C'est très bien si vous souhaitez ajouter une nouvelle micro-interface au système existant ; vous pouvez le faire rapidement sans affecter ce qui est actuellement là.

Conditions préalables

En supposant que Node soit déjà installé sur votre machine, nous allons créer trois micro-interfaces Next.js. Nous allons exposer un composant dans le premier micro-frontend et exposer une fonction commune dans le second. Nous utiliserons ensuite ces éléments exposés dans notre troisième micro-frontend, ce qui en fera essentiellement le consommateur de chaque module exporté.

Votre application Next.js doit être v10.2 ou ultérieure afin de prendre en charge Webpack 5 . Sinon, vous devez utiliser un package externe afin de prendre en charge la fédération de modules. Pour ce tutoriel, j'utilise Next.js v12.2.0.

Mise en place des micro-frontends

Tout d'abord, créez trois interfaces dans un seul répertoire en exécutant la commande indiquée :

> mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3

Dans la première interface, ou fe1, nous allons créer un Headercomposant qui sera exposé. On va faire ça dans le fichier src/component/Header.jsx:

import * as React from 'react'

const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};

export default Header;

Maintenant, pour que cela fonctionne, nous devons l'ajouter à la index.jspage :

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}

Si vous voulez voir une sortie, exécutez npm run devet visitez http://localhost:3000/. Ça devrait ressembler à ça:

Sortie de configuration micro frontale

Maintenant, nous devons exposer notre composant pour le rendre globalement disponible pour un autre micro-frontend. Pour ce faire, nous devons changer next.config.jscomme suit :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Lorsque nous construisons fe1, vous pouvez trouver le fichier JavaScript utilisé dans une autre micro-interface à l'emplacement http://localhost:%5BPORT%5D/build/remoteEntry.js.

Super, nous avons créé des composants dans fe1et dans fe2! Nous allons maintenant créer une fonction commune à exposer.

Créons une fonction dans fe2:

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}

export default squareRoot;

Maintenant, configurons next.config.jspour le même :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Une fois que nous l'aurons construit, il http://localhost:%5BPORT%5D/build/remoteEntry_2.jssera prêt à l'emploi.

Traitons fe3comme un consommateur. Nous utiliserons le composant exporté de fe1et la fonction de fe2.

Tout d'abord, configurons next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}

module.exports = nextConfig

Ici, vous pouvez voir que nous avons défini remotedans la configuration du webpack. Le travail de remoteconsiste à consommer à partir de l'URL donnée et à rendre le contenu disponible pour cette application. Il acceptera les dépendances distantes ou locales en fonction de la condition que nous avons spécifiée.

Pour utiliser ce fichier, nous devons mettre à jour le _document.jsfichier répertorié souspages :

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Importons ce module dans le index.jsfichier et utilisons-le.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}

Exécution et résultats

Il est maintenant temps de vérifier si cela fonctionne ou non. Tout d'abord, créez et démarrez fe1et fe2. Commencez fe3par exécuter npm start devet accédez à son URL respective pour vérifier la sortie.

Résultats d'exécution

Waouh ! Nous venons de consommer le contenu de deux codes frontend dans notre frontend principal !

🚀Faisons un peu de magie.

Accédez à fe1 → src → componentet modifiez la valeur de nameà name updated. Ensuite, relancez f2.

Vous pouvez voir le nouveau code qui a été mis à jour fe1sans rien faire. Incroyable, non ?

Avantages des micro-interfaces

En termes simples, les micro-interfaces rendent les applications Web plus maintenables. Si vous avez déjà fait partie d'une grande application, vous savez qu'il est très fastidieux de tout gérer.

Les micro-interfaces fonctionnent de la même manière que la règle diviser pour mieux régner . Maintenant, comprenons les aspects les plus importants et les plus précieux du travail avec les micro-interfaces.

Déploiement et sécurité

Un avantage significatif de l'architecture micro-frontend est que vous pouvez séparer un seul corps en éléments individuels qui peuvent être déployés indépendamment. Lorsque vous vous déployez seul, vous pouvez entretenir et construire sans travailler sur d'autres pièces.

Varcel prend en charge un référentiel individuel de différentes interfaces, quels que soient le langage et le framework pour les déployer ensemble. En dehors de cela, vous pouvez utiliser des services de déploiement comme Netlify . Une fois déployé, vous ne pouvez l'utiliser que comme interface individuelle.

Lorsque le frontend est utilisé par un large public, il doit être sécurisé et robuste. Pour le rendre sûr, vous pouvez utiliser un certificat SSL comme Wildcard ou un certificat SSL mono-domaine, multi-domaine ou SAN . Un certificat SSL SAN ou multi-domaines peut sécuriser plusieurs sites et sous-domaines.

Évolutivité

Il existe plusieurs frameworks construits avec JavaScript, mais si vous souhaitez aligner des développeurs d'horizons différents sur le même projet, cela sera-t-il même possible ? La réponse est oui avec les micro-frontends !

Vous pouvez combiner React, Vue et Angular sur un seul projet en tirant parti de l'architecture micro-frontend. Il génère le meilleur résultat à la fin à mon avis.

Développement plus rapide

Vous savez maintenant que votre équipe peut travailler de manière autonome. Génial, fini le chaos inutile !

Votre équipe peut développer et déployer son interface quand elle le souhaite. Les versions peuvent être effectuées rapidement car il n'y a aucune dépendance associée aux modules individuels.

L'objectif principal de la définition du micro-frontend est des itérations plus rapides.

Test facile

Il est préférable de tester des éléments individuels d'une application avant de se lancer dans les tests d'intégration. Cela peut être réalisé ici!

Les équipes testeront le micro-frontend avant de tester l'application, réduisant ainsi les risques de bogues entrant dans le système réel.

En dehors de cela, d'autres avantages sont une petite base de code facilement maintenable et la possibilité d'ajouter ou de supprimer rapidement n'importe quel module du système.

Conclusion

Dans cet article, nous avons discuté du concept de micro-interfaces et donné des exemples. J'espère que vous savez maintenant qu'il est facile à adopter et qu'il possède des fonctionnalités intéressantes !

Next.js est assez propre et suit une architecture micro-frontend simple. Je suis ravi de voir ce que Next apportera à l'avenir en ce qui concerne la microarchitecture et le rendu côté serveur avec micro-frontend.

Personnellement, j'aime le style de codage micro-frontend car il est facilement maintenu entre les équipes. En dehors de cela, la construction frontale et la sécurité sont également gérées de manière assez élégante. C'est une opportunité très excitante pour une équipe car à l'avenir, ce concept se développera probablement au-delà des limites !

Plus tard, vous ne trouverez aucune différence entre un système micro-frontend et un système à squelette unique. 

Source : https://blog.logrocket.com/micro-frontend-react-next-js/

#react-native #nextjs #micro #FrontEnd 

Micro-interface avec React et Next.js