Ever had this moment as a frontend engineer? 😅 You’re working across multiple apps and realize: App 1 already has the component you need App 2 now has a “slightly different” version of the same thing …and suddenly duplication becomes the default. I wrote a short Medium walkthrough on how Module Federation helps here: ✅ one app exposes a component ✅ another app loads it at runtime ✅ teams can ship independently without copy-paste or constantly republishing shared packages If you’re using Vite + React + TypeScript, I included a simple setup + example repo. https://lnkd.in/dkBEvA3V #frontend #reactjs #vite #typescript #modulefederation #webdevelopment #microfrontends
Frontend Engineers: Avoid Duplication with Module Federation
More Relevant Posts
-
Frontend Devs: “Why is my app slow?” 🤔 JavaScript Engine: Bro… you changed one object shape and I had to → de-opt → re-opt → fall back → rethink my life choices 😭 Your React state isn’t “just state”. It decides whether V8 uses: ✔️ Monomorphic (fast) ❌ Megamorphic (pain) Made a tiny slide deck explaining this chaos — JS compilation → Inline Caches → React optimization 🔥 #react #optimise
To view or add a comment, sign in
-
React Hook Form – a game changer for forms in React If you’re a React developer, chances are you’ve come across React Hook Form at some point. Yet I still see a lot of projects where: ▪️ every input has its own useState ▪️ validation logic is scattered everywhere ▪️ error handling becomes messy ▪️ form code gets unnecessarily long and hard to read That’s where React Hook Form really shines. It’s a library that makes form handling feel simple and natural. What I love about it: 1. Minimal re-renders (performance-friendly) 2. Built-in client-side validation 3. Clean error handling 4. watch() to react to form value changes 5. Simple handleSubmit instead of manual event juggling Instead of managing state manually for every input, React Hook Form lets you focus on what the form does, not how much code it takes. If you’re still handling forms the old way with tons of state and custom validation logic, give React Hook Form a try — your future self (and your codebase) will thank you. #softwareengineering #webdevelopment #reactjs
To view or add a comment, sign in
-
-
If you are building a React app in 2026 without TypeScript, you are building legacy code. 🚩 I often get asked: "Should I use JavaScript or TypeScript?" The answer used to be "it depends." Now, the answer is "TypeScript." Here is the reality check: JavaScript is fun. It’s fast. It’s flexible. But it’s also the "Wild West." 🤠 TypeScript is your insurance policy. ✅ It catches 15% of bugs before you even run the app. ✅ It acts as "self-documentation" for your team. ✅ It makes refactoring large codebases actually possible without breaking everything. The Golden Rule: 👉 Learning React? Stick to JavaScript. Focus on the concepts first. 👉 Building a Product? Use TypeScript. Your future self (and your team) will thank you. Stop fighting the compiler. Start letting it help you. . . . . . . . . . . . . . . . #ReactJS #TypeScript #JavaScript #WebDevelopment #SoftwareEngineering #CodingBestPractices #TechTrends2026
To view or add a comment, sign in
-
-
Frontend apps don’t break suddenly, they decay through small decisions. In this carousel, I share why React codebases become hard to maintain and what actually helped me fix them in real projects. If you’ve ever seen a file no one wants to touch, this will feel familiar. What was the first sign your codebase was getting messy? #ReactJS #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment #FrontendArchitecture #DeveloperExperience
To view or add a comment, sign in
-
React 19 / Next.js App Router introduces use() — a new way to handle async data. Before: useEffect + useState + boilerplate Now: use() + Suspense = clean & declarative #react #nextjs #javascript #frontend #webdevelopment
To view or add a comment, sign in
-
-
So, you're building an app in React. It's all about the components. But, how do they talk to each other? That's the million-dollar question. They need a way to share data, right? That's where Props come in - it's like passing arguments to a function. Simple. Props are key: they make components dynamic, reusable, and clean. You need them to share data, make components reusable, avoid hardcoding values, and keep things modular. In React, a parent component can pass data to a child component using Props - and the child component receives this data, no questions asked. It's read-only, though: a child component can't just modify Props willy-nilly. But, you can use destructuring with Props to make your code way cleaner and more readable - like this: function User({ name, role })... it's just better that way. And, let's be real, who doesn't love clean code? Check out this source for more info: https://lnkd.in/g-s7f_8a #React #JavaScript #WebDevelopment
To view or add a comment, sign in
-
If you don’t understand the event loop, Node.js will eventually hurt you. Simple explanation: - Execute JS - Offload async work - Register callback - Continue execution Blocking the event loop = slow app. Examples of blockers: - Large loops - Synchronous crypto - Heavy JSON parsing Good backend devs don’t just write code. They respect the event loop. Agree? #nodejs #eventloop #backend #javascript
To view or add a comment, sign in
-
-
🚀 Dynamic Imports (JavaScript) Dynamic imports allow you to load modules asynchronously using the `import()` function. This is useful for code splitting and loading modules on demand, improving initial page load time. Dynamic imports return a promise that resolves with the module's exports. They can be used anywhere in your code, not just at the top level. Dynamic imports enable more efficient loading of code and resources. Learn more on our app: https://lnkd.in/gefySfsc #JavaScript #WebDev #Frontend #JS #professional #career #development
To view or add a comment, sign in
-
-
🚀 Are you writing scalable React apps? Understanding SOLID principles can save your future self… a lot of headaches! Revisiting the SOLID principles provides a strong foundation for building clean, maintainable, and scalable software. These core guidelines extend beyond theory and play a critical role in structuring modern, high-quality applications. 🔹 S — Single Responsibility Principle (SRP) Each component, class, or module should focus on one responsibility. Clear separation of concerns leads to easier debugging, testing, and scaling. 🔹 O — Open/Closed Principle (OCP) Software entities should be open for extension but closed for modification. 🔹 L — Liskov Substitution Principle (LSP) Units that share the same contract should be interchangeable. Consistent interfaces and predictable behavior ensure flexibility and safer refactoring. 🔹 I — Interface Segregation Principle (ISP) Clients should not depend on methods or data they don’t use. Smaller, focused interfaces (or components) keep systems modular and easier to maintain. 🔹 D — Dependency Inversion Principle (DIP) High-level components shouldn’t depend directly on low-level logic. Use abstractions like context providers, hooks, or services to manage this. 💡 Which SOLID principle do you find the hardest to apply in React? Share your thoughts! #SOLID #ReactJS #JavaScript #CleanCode #FrontendDevelopment
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development