Hey, TechFlixers!
Welcome to a new season of Techflix, with us pivoting into a daily newsletter. In this episode, we focus on the front-end aspects of software engineering. Before we start, riddle me: What is always in front of you but can’t be seen?
Find out at the end of the article :P
🔦 Spotlight
📢 Frontend at Reddit
It is largely a single (monolithic) git repo that used Rollup as the build tool, and it was SLOW! Talk about ~118 seconds for the initial build.
The goal: To bring it down to under 10 seconds. (Spoiler Alert: They brought it to under 1 second!)
Why was the build slow?
Running typechecking.
Large code size because it was a monorepo.
The Solution Adopted: Vite
Here’s a quick rundown of the Reddit team's key challenges and how they overcame them in their implementation.
Adjusting to Vite’s Stylesheet Handling:
Challenge: Vite automatically injects stylesheets into HTML, which conflicted with Reddit's custom approach using Lit (a lightweight framework for building web components).
Solution: To avoid this issue, Reddit developers appended
?inline
to stylesheet paths (e.g.,import styles from './top-button.less?inline'
). This change told Vite to inline the stylesheets as strings in the bundle, preserving Reddit's custom handling.
Ensuring ESM Compliance:
Challenge: Reddit's frontend packages were marked as ES Modules (ESM), but they missed “export maps,” which are necessary for fully adopting the ESM spec. This led to many unresolved module errors.
Solution: The team wrote a script to scan the codebase for imports, build the necessary export map entries, and update package.json files. This resolved most errors with a few manual fixes.
Addressing Typechecking Issues:
Challenge: Vite uses ESBuild, which doesn't support type checking as the previous Rollup setup did.
Interim Solution: Developers rely on their editors to type-check and run the legacy Rollup build in CI. Plans include adding a type-checking service to their development environment.
Results and Benefits
Significant Time Savings: Initial build times were reduced from about 118 seconds to less than a second, and incremental build times from about 40 seconds to less than a second.
Improved Developer Experience: The switch to Vite saved a total of 4.22 days of developer time in a week, reduced build-related complaints, and received positive feedback from the development team.
Read the full article here.
Other interesting reads
☕️ Tea Time
News you might have missed
Antler is launching a residency program in India for founders.
Microsoft launches AutoGen Studio: A low-code interface for building multi-agent workflows
Who’s Hiring?
When writing this episode, there were over 800+ job listings on LinkedIn for a “Frontend Engineer,” and companies like Microsoft are also hiring for frontend SDE 2 roles.
Some of the most common skills required for these roles are Typescript/Javascript and experience with one of frameworks like React, Angular, or Vue.
Salary trends (verified via Leetcode and other online sources)
A frontend SDE 2 at Uber can command a base salary of up to 45 LPA.
At mid-sized MNCs, you can expect a base salary in the range of 18-25 LPA.
Indian fintech startups (E.g., Angel One, Razorpay, Coinswitch) can offer from 30-35 LPA base for folks with 3-5 years of work experience.
🚀 Power Up
Since we focus on the frontend in this episode, let’s explore some concepts asked in interviews (most recently appearing in the Intuit process).
How can we improve web performance and vitals?
Web Performance
Reduce Requests: Combine files to lower the number of requests your site makes. Fewer requests = faster load times.
Optimize Images: Use modern formats like WebP, resize images properly, and load them only when needed (lazy loading).
Use a CDN: A Content Delivery Network (CDN) stores your content in multiple locations worldwide, making it quicker to load.
Enable Compression: Compress your files with Gzip or Brotli to make them smaller and faster to download.
Minify Code: Remove extra spaces and comments from your CSS and JavaScript to make the files smaller.
Async Loading: Load JavaScript and CSS files asynchronously to prevent them from blocking the page rendering.
Web Vitals
Largest Contentful Paint (LCP): Speed up your main content’s loading time by optimizing server response times and resource loading.
First Input Delay (FID): Make your site interactive faster by reducing the time JavaScript takes to execute.
Cumulative Layout Shift (CLS): Prevent unexpected layout shifts by reserving space for images and ads.
Some core concepts
Currying
Intuition: Imagine you’re in a sandwich shop where you can build a sandwich step-by-step. First, you choose the bread, then the meat, and finally the toppings. Currying works similarly in programming. Instead of giving the function all the ingredients (arguments) at once, you provide them one at a time.
Understanding: Currying transforms a function that takes multiple arguments into a sequence of functions, each taking a single argument. This allows for more flexibility and reusability. For example, you can partially apply arguments and create more specific functions based on the original.
Promises
Intuition: Think of a promise as ordering a new gadget online. You place your order (start an asynchronous operation) and receive a promise from the seller that you’ll get the gadget. While waiting, you can do other things. Once the gadget arrives, you get the fulfillment (resolve) or notification if there is an issue (reject).
Understanding: A promise is an object that represents the eventual completion (or failure) of an asynchronous operation. It allows you to handle that operation's result (success or error) at a future point in time.
Hoisting
Intuition: Imagine cleaning your room. You decide to list all the tasks you need to do first, like "put clothes away," "make bed," etc., even if you actually put the clothes away last. In JavaScript, variable and function declarations are like those tasks—they get moved (hoisted) to the top of their containing scope before the code runs.
Understanding: Hoisting means that JavaScript automatically moves declarations to the top of the current scope. However, only the declarations are hoisted, not the initializations. This can lead to unexpected behavior if you're not aware of it, like variables being
undefined
if accessed before their initialization.
Closures
Intuition: Imagine you’re in a kitchen with a recipe book. You read a recipe (a function) that tells you to mix ingredients (variables) in a specific way. Even after you close the book, you remember how to mix those ingredients. Closures in programming work similarly—they allow a function to remember the variables and the context in which it was created, even if it’s used outside that context.
Understanding: A closure is a feature where an inner function has access to its outer function’s variables, even after the outer function has finished executing. This is possible because the inner function retains a reference to its outer scope. Closures are powerful for creating private variables and functions and maintaining state in an asynchronous environment.
Understanding these concepts helps you write better JavaScript code, making your applications faster, safer, and easier to maintain.
📨 Post Credits
And yeah, the answer to the riddle—it’s the future!