Recently, the Microsoft Edge Team wrote an article on how Microsoft is improving Edge to become faster. However, Microsoft took shots at React and announced they are not going to use it for Edge anymore.
After their article, developers questioned whether React is worth learning anymore.
I will explain their entire article and how it affects React, JavaScript Developers, and what are the true intentions of the Microsoft Edge Team.
History
Microsoft Edge is built using Chromium, an Open-Source web browser project by Google. The default UI of Microsoft Edge is derived from Chromium.
Microsoft doesn't want Edge to look like Chrome (obviously). Therefore, Edge has UI components and elements designed by Microsoft. However, these components are made using React.
Many small components throughout Edge are created using React which collectively builds the entire browser.
The entire Edge browser isn't a React application. It combines multiple components in the form of HTML pages with React in them. The menu, dropdown, and the favourites tab are mini React apps.
That's not efficient, right? Especially for UI data that never changes dynamically. Its inefficiency has caused Microsoft to doubt React.
But this story is half-baked. We'll soon unveil whether React was at fault or Microsoft had a manufactured flaw.
Prepping for an interview? Leetcode is key. I built a Notion Dashboard to help you ace those DSA rounds. Store solutions, track progress, log problems — all in one place for $10.
Plus, get bonus resources for TypeScript, Python, and JavaScript, free lifetime access to a $4.99 exclusive community, and 25% off upcoming products. Grab it now and ace your prep!
CodeNexus - Crack Your Dream Tech Job Interview
Frankly, I don't care about your money. You want to ace your interviews because I already have. Think for yourself. The return on this investment will be 100 times over.Picture yourself dominating your coding interview, smoothly walking the interviewer through your solutions because you've meticulously organized everything. It's a win for you, but it's not easy without this dashboard. Here's how you can win easily.How will this Dashboard help you? 💵Ace your coding interviews and land your dream job. You cannot afford to make mistakes.Prepare for your coding interviews faster and focus on the bigger picture.Outpace other candidates. Many neglect the power of logging and organizing.Get closer to becoming an organised and experienced engineer.Spend less time memorizing and more time-solving questions and sharpening your skills.Log your progress to iterate and improve. Help others by sharing your logged solutions.Identify your weak spots and focus on them.Let me break it down for you.The Problem❓Picture this: You're grinding through data structures and algorithms on LeetCode, knocking out five questions in a couple of hours. But then, the inevitable hits - you forget the solution, the approach, and the algorithmic details.Here’s the truth:Recruiters don’t care about memorization: They want to see how you think under pressure, how you solve problems, and your logical approach.The only way to ace DSA rounds is to solve the questions and walk the recruiter through your thought process. Break down your code and explain every line if needed.But what if you can’t recall your approach from just hours ago? It's frustrating, but it’s not your fault. Our brains have limits, which is why notes are essential.That's where my template swoops in, tailored just for you.The Solution 〰️First off, you can stash all those questions from LeetCode, HackerRank, CodeSignal - you name it, in one tidy spot.Next up, this template acts as your personal database for each question. You can log everything: the solution, your approach, the problem itself, constraints, and examples, and dive into complexities like time and space.Organize by difficulty or language: Easily sort and filter based on difficulty or programming languages.Tag with topics: Use tags like Radix Sort or Breadth-First Algorithm for easy filtering.Your personal library: Have thoughtful solutions at your fingertips, anytime.The cost of becoming a proficient engineer far exceeds the price of this dashboard. See how it helps you.Bonus 🎁CodeNexus isn't just about questions and solutions. It's packed with resources to level up your JavaScript, Python, or TypeScript game. I've handpicked the best Udemy courses, podcasts, and must-read books, all vetted by top developers.You'll get free access to my exclusive Discord community and other perks worth $4.99 a month. Upgrade to the pro version and you'll get all the bonus gifts, including lifetime access to the membership. This deal saves you over $50.Snag CodeNexus now and get a sweet 25% discount (up to $7) on my upcoming eBook. It's all there waiting for you inside the template.Afan Khan LLC - 502 W 7th St, STE 100, Erie, Pennsylvania, USA.
store.afankhan.com
The Problems
Microsoft claims that React isn’t efficient, so they made improvements and announced it in an article published on May 28th, 2024.
Microsoft observed that the bundles of code shared between multiple components were too large and that caused the browser to slow down.
They weren’t supposed to share a bundle with different components, but as they claim it is a problem, here are their reasons:
There was a modularity issue with the UI code. The teams working on different components shared common bundles, files, etc. It resulted in one part of the UI slowing down another part by sharing things that weren’t necessary.
Microsoft used a framework that relied on JavaScript to render the UI using the client-side rendering technique. Microsoft claims this is the second reason to slow their browser down.
As I explained earlier, Edge shared multiple React applications.
They didn’t initiate multiple React projects but used a single JavaScript Bundle in various places and mounted the Bundle to multiple props in many components.
A JavaScript Bundle is an optimization technique that combines multiple JavaScript files into a single line to reduce and process the server requests efficiently.
And the second reason is why I am writing this article. Indirectly, Microsoft addressed React as the framework that caused the bundle problem for them.
Microsoft addressed React indirectly because they are working on React-based projects, like React Native for Windows, MacOS, and Xbox. However, they still loathe it for Edge.
Even though Microsoft is building React Native, they still don’t use it for Edge. Edge is a native desktop application and React Native would be an ideal solution, but Microsoft begs to differ.
It is because using HTML, CSS, and JavaScript, or React for menus, dropdowns, etc., is a common pattern or technique, or it was in the olden days. There’s a reason why they are switching, right?
In the ancient days, Menus and their options were individual HTML files. Every button or link to perform a specific action would redirect to an HTML file.
However, that old pattern was only used for components like a Menu. But Microsoft clearly didn’t understand that.
They used an HTML file with React for every simple component. Every HTML file required JavaScript. And they shared this JavaScript code with every team as bundles of code.
Microsoft embedded multiple HTML pages (in React apps) into their browser to control their entire UI. And now, they are looking for a solution to both problems.
If you’re gearing up for an interview, I’ve got you covered. I’ve put together a killer list of must-know 102 JavaScript topics, 200+ JavaScript Interview questions, and 102 resources to learn them in a Notion Template. Grab it for just $5. Don’t miss out.
200+ Key JavaScript Interview Questions & Topics
Finally, a one-stop collection of key interview questions and concepts, each paired with resources.207 JavaScript Interview Questions.102 Unique Concepts Asked in JavaScript Interviews.102 Resources from across the Internet to help you learn.😵 Understanding the ProblemWhat’s the most valuable asset for someone prepping for an interview? Time. If you can't manage your time right, you won't get through everything. And if that happens, your dream job? Gone with the wind.It's about the effort too. Why spend an entire day digging through fifteen websites for interview questions, only to find they're all repetitive? Each site has the same questions, just jumbled up. It's a waste of time and effort.What’s more important? Your dream job. You can't bet $1 against $300,000+, right?🧰 Presenting the SolutionI’ve put together a list of questions, concepts, and resources based on their difficulty to help you prep for your JavaScript interview. These are hand-picked from around the globe with real recruiting experience.🎁 BonusAnd as a bonus, snag this list now and get a sweet 25% discount on my upcoming eBook. It's all there waiting for you inside the Notion list.It's for $1. What's more important?
store.afankhan.com
The Solution
For starters, React wasn’t the problem. Microsoft implemented it incorrectly.
A bundle should work for a specific webpage and serve its purpose independently. Each page could have an individual bundle or collection.
However, when you share the same bundle or files across the work of different teams, you must expect chaos. Every team accesses and modifies the same bundles.
The outcome was expected. React wasn’t meant for what they were doing with it. React isn’t slow. But you cannot expect it to be blazing fast when you create dozens of instances.
Microsoft came up with a solution to a problem they created. They created a custom framework.
Microsoft announced WebUI 2.0 (not Web 2.0). A markup-first architecture. It solves the problem of large code bundles by minimizing their size and the amount of JavaScript that runs during the initialization path.
Microsoft has started using this new architecture to solve both problems I stated earlier. They used React for the wrong purpose, forgot that React Native exists, and solved a manufactured problem.
First, they used individual HTML files for each component with React inside them. Then, they offloaded the JavaScript code required by each HTML file into one bundle shared by ten other teams.
And now, they don’t use React anymore. What do you think about this?
If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at director@afankhan.com (Afan Khan LLC). Otherwise, Twitter (X) is the easiest way to reach out — @whyafan.
Top comments (0)