Power of webpack in 2 hours
What you will learn
Viewers will learn the use of webpack
Use of webpack with Micro front end
Viewers will learn how to parse Typescript using loaders
Viewers will learn how to compile the SCSS files
Viewers will learn will be able to create 2 different micro front ends and connect them
Description
Learn how to optimize your React JS application using Webpack and implement a scalable Micro-Frontend UI Architecture. In this comprehensive Udemy course, you will gain hands-on experience and practical knowledge to enhance your development skills.
Files Minification
Bundling
Compressing Images
Parsing SCSS files
Parsing React Code using babel loader to plain javascript
Implementing micro front ends using different front end programming languages
Webpack Configuration
Eslinting using webpack
Course Highlights:
- Introduction to Webpack:
- Understand the role of Webpack as a module bundler for JavaScript applications.
- Explore Webpack configuration files, loaders, and plugins to optimize your development workflow.
- Learn how to bundle and optimize your React JS application using Webpack.
- React JS Fundamentals must be already aquired by viewer :
- Gain a solid foundation in React JS concepts and syntax.
- Learn how to build reusable components and manage state using React Hooks.
- Understand the React component lifecycle and how to handle events and data flow.
- Micro-Frontend UI Architecture:
- Discover the benefits and principles of Micro-Frontend UI Architecture.
- Learn how to break down your React JS application into micro-applications for better modularity and scalability.
- Implement communication and sharing of data between micro-applications using shared libraries or frameworks.
- Integrating Webpack with React JS:
- Explore the integration of Webpack with React JS for efficient module bundling.
- Configure Webpack to optimize your React JS application’s performance and loading speed.
- Apply code splitting techniques to lazy load components and improve initial load times.
- Implementing Micro-Frontends with React JS:
- Dive into the practical implementation of Micro-Frontends using React JS.
- Learn how to create independent micro-applications and integrate them into a single cohesive user interface.
- Explore techniques to handle routing, state management, and cross-micro-application communication.
- Testing and Deployment:
- Discover strategies for testing your React JS application and micro-applications.
- Understand best practices for deployment and hosting of Micro-Frontend UI Architecture.
- Learn about continuous integration and continuous deployment (CI/CD) pipelines for efficient development workflows.
- Real-World Projects and Examples:
- Apply your knowledge to real-world projects and work on hands-on exercises.
- Gain practical experience in building scalable React JS applications with Micro-Frontend UI Architecture.
- Get guidance and insights from the instructor through detailed explanations and code demonstrations.
By the end of this course, you will have a strong foundation in using Webpack with React JS and be able to implement a Micro-Frontend UI Architecture for scalable and modular web applications. Enroll now and take your React JS skills to the next level!
English
language
Content
Use of Webpack with Micro Frontend
Intro-Use of Webpack with Micro Frontend
Understand the problem Statement
Definition of webpack
Things Before Webpack
Bundle less Representation (before webpack)
Webpack
World after webpack
World After Webpack (About Bundling)
Webpack possibilities- Key Features
Webpack possibilities- Key Features Continuation
Webpack possibilities- Key Features Continuation
What Monolithic, Micro service and Micro Front end architecture
Monolithic and micro service architecture – Part 2
Key Characteristics – Micro Frontend
Definition – Micro Frontend
Key Characteristics of Micro Frontend
Monolithic architecture
02-Webpack Config file
02-Webpack Config file
Webpack Entry Point
03-Webpack Output Bundles
04-Webpack single entry points
05-Webpack multiple entry points
06-Webpack modules support
07-Difference Between Common JS and ESM
Webpack Entry Points
01-Loaders and Plugins
01-Loaders and Plugins
02-What is Loader
03-Webpack modules support
04-Plugins
06-Plugins Usage
07-Plugins Installation using npm
04-Micro Front ends
04-Micro Front ends
02-Micro Front end Components
03-Micro Front end Examples
04-The real connector – Module Federation Plugin
Plugin for micro front end implementation
05-Configuring Webpack for Micro-Frontends
05-Configuring Webpack for Micro-Frontends
05-Configuring Webpack for Micro-Frontends part 2
06-Real Code – 2 different Micro front end samples
06-Real Code – 2 different Micro front end samples
06-Real Code – 2 different Micro front end samples part 2
Exposing a component is allowed in webpack module federation plugin ?
07-Deployment Strategies
07-Deployment Strategies
Deployment strategies
Deployment strategies
08-Optimizations and Performance
Code Splitting
Lazy Loading
Lazy Loading
09-Minification
09-Minification
Minification in webpack
Bundling
Bundling
02-Run Webpack Command
Bundling
Related tools
Related tools
12-Integration with React JS
12-Integration with React JS
Integration of Webpack Micro front end with other technologies
13-Challenges faced
13-Challenges faced
Part 2
Debugging & Deployment in micro front end