GreatFrontEnd

How Airbnb Front End is Built 🗺️ Most developers might know Airbnb for their popular JavaScript style guide—but apart from that, Airbnb also has multiple open source projects they utilize and contribute to the developer community. This list shows Airbnb's dedication to building robust, scalable solutions, often using innovative approaches that push the boundaries of front end development. In opening up many of these tools, Airbnb contributes to the broader developer community and fosters collaboration. Each technology plays a vital role in crafting a platform that empowers travelers and hosts alike, connecting people with unique experiences around the world. -- ➡️ Join 500,000+ engineers nailing front end interviews with Ex-FAANG Prep & practice > https://lnkd.in/gZXG_U_K -- #airbnb #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javaascript #react #css #UI #greatfrontend

👨🍳 "Explain rendering to a non-technical person"... Challenge accepted! 🍲 Client-side rendering is like eating at a hotpot restaurant. You (client) receive your ingredients quickly but have to do the cooking yourself. Cooking the first item takes time (slower initial load), but once the soup is boiling it's fast to cook the next item (fast subsequent page navigations). ️🍽️ Server-side rendering is like ordering dishes at a restaurant. You can order whatever you want (personalization) and a chef (server) cooks the dish on-demand. 🍱 Static site generation is like buffet catering. The food is already cooked somewhere else (built at deploy time) but everyone gets the same food (statically generated). 🥘 Incremental static site generation is like a buffet restaurant. A new batch of food is cooked every now and then (regenerated in background). 🥩 Streaming SSR is like having a BBQ / teppanyaki chef. You tell the chef what you want to eat, the chef cooks and serves each piece to you as it is cooked. #react #vercel #nextjs #ssr #csr #isr #ssg __________ I post regularly about software engineering, front end, memes, and more. Follow me Yangshun Tay and my company GreatFrontEnd

Partial Prerendering (PPR) in Next.js 15 🚀 No more slow SSR! Next.js 15 introduces Partial Prerendering (PPR), delivering dynamic pages instantly while keeping content fresh. ❌ The Problem: Traditional Dynamic Pages Are Slow 🚫 High TTFB – Slow server response 🚫 Blank screens – Users wait for content 🚫 Blocked rendering – Nothing appears until the server finishes How PPR Fixes This ✅ Static content loads instantly – Served from cache with <Suspense> fallback ✅ Dynamic content renders in the background – No delays for users ✅ Seamless streaming update – Progressive hydration over the same request Why PPR is a Game-Changer 🔹 No extra network requests – One streamed HTML response 🔹 True server-rendered dynamic content – No client-side work 🔹 Lower server load – Cached static content reduces processing -- Struggling with front end interviews? Learn from ex-Big Tech experts trusted by 500,000+ engineers. 👉 Start Your Prep Now > https://lnkd.in/g52XUMtn -- #nextjs #frontenddevelopment #website #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience

How does Atlassian render Confluence whiteboards? Collaboration is rarely linear—it’s dynamic, fast-paced, and sometimes messy. That’s why Atlassian built Confluence Whiteboards, an infinite digital canvas designed for seamless brainstorming and execution. But what makes it so smooth and responsive? The answer lies in Canvas, Atlassian’s custom rendering pipeline, inspired by game development. 💡 Canvas Rendering Pipeline The Canvas pipeline follows a uni-directional, multi-phase approach running within a persistent game loop, ensuring fast updates and high performance. 🔸 Phases of Execution 1️⃣ Capture – Understanding User Actions - Uses @canvas/input to collect events from the DOM. - Leverages @canvas/state-machine (a TypeScript-based Finite State Machine) to track and manage user interactions. - Determines what the user is doing in real time. 2️⃣ Update – Managing State Efficiently -Uses an Entity Component System (ECS) to handle state updates at scale. - Entity: A simple container for components. - Component: Defines specific behavior (e.g., position, size). - System: Processes entities based on their components and applies logic. 3️⃣ Render – High-Performance WebGL Rendering - Uses @canvas/gl, Atlassian’s custom WebGL engine, to render elements efficiently. - Converts ECS components into Rendering Primitives (RenderingPrimitive[]) for optimized rendering. - Ensures smooth performance even with complex whiteboard elements. 🔄 Persistent Game Loop – Keeping It Smooth The Canvas engine operates in a game loop running 60-120 times per second (depending on display refresh rate). This ensures: ✔ Real-time updates for instant feedback ✔ Efficient rendering without delays ✔ A seamless user experience, even with large, complex whiteboards By leveraging game development principles, Atlassian has created a fast, scalable, and responsive whiteboarding experience in Confluence. What do you think? Let us know in the comments! 🚀 -- Struggling with front end interviews? Learn from ex-Big Tech experts trusted by 500,000+ engineers. 👉 Start Your Prep Now > https://lnkd.in/gGwuP9N8 -- #atlassian #tech #frontenddevelopment #website #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience

One of the biggest regrets in my career was not being aware of engineering career levels early enough. Learn from my mistake, I don't want the same to happen to you. Understanding what is expected of each engineering level would have helped me make better decisions earlier in my career. I put together this mega engineering levels cheatsheet from junior levels up to staff level. If you are an engineer, go through it and see if you are due for a promotion, or identify gaps and work towards the next level. If you are a student, get a sense of what is expected of you as you progress in your career. Note: These are general guidelines for the standard tech company, using Meta and Google as reference. There can and will be deviations/exceptions depending on company culture and priorities (e.g. some high level engineers still write a lot of code). #softwareengineering #career #faang #meta #google __________ I post regularly about software engineering, front end, memes, and more. Follow me Yangshun Tay and my company GreatFrontEnd

10 Unspoken Rules in Software Engineering 🤫💻💀 1. There's nothing more permanent that a temporary fix. 2. Rewrites happen because I'm too lazy to read all your code. 3. We sometimes test only in production, but never admit it. 4. "Let's revisit this in future" is never revisited. 5. Many engineering decisions are based on emotions rather than merit. 6. Never deploy on a Friday evening. 7. Version 1 is garbage, version 2 is a rewrite, version 3 is just version 1 with better marketing. 8. Naming things is sometimes harder than coding. 9. "This should only take a few minutes" always takes way longer. 10. 10 lines PR -> 50 comments; 500 lines PR -> "LGTM!" #softwareengineering #tech #javascript __________ I post regularly about software engineering, front end, memes, and more. Follow me Yangshun Tay and my company GreatFrontEnd

If your boss’s pants looks like this, you won’t be upgrading to React 19 #frontend #frontenddeveloper #frontenddev #programming #programmer #coding #react #softwaredevelopment #computerscience

A Brief History of React ⚛️ Did you know React is more than ten years old now? Let's take a walk down memory lane and see how it has evolved over the years. • 2011 – Birth of React: Jordan Walke created React (originally "FaxJS") to solve performance issues in dynamic UIs like the News Feed. • 2013 – Open sourcing: React was open-sourced at JSConf US, initially met with skepticism but later appreciated for its Virtual DOM performance benefits. • 2015 – Flux & State management: Facebook introduced Flux for predictable state management, inspiring Redux as the dominant solution for handling complex app state. • 2016 – Functional components & Fiber: React introduced functional components and began work on Fiber, a major re-architecture that improved rendering performance. • 2018 – React hooks: React 16.8 introduced Hooks, allowing functional components to manage state and lifecycle logic without class components. • 2020 – Concurrent mode & Suspense: React 17 laid the groundwork for Concurrent Mode and Suspense, improving responsiveness and data fetching. • 2021 – React Forget: React previewed “React Forget,” a compiler that optimizes re-renders by auto-generating useMemo and useCallback. • 2022 – React 18 & RSC: React 18 introduced Server Components, automatic batching, and new hooks like useId and useTransition. • 2023 – react.dev: React launched react.dev, a revamped official website with better documentation and interactive coding exercises. • 2024 – React 19: React 19 improved Server Components, introduced Actions for simpler state updates, and announced an experimental React Compiler. P.S. This will be covered in more detail in the React Interview Playbook I'm currently writing. #react #javascript #frontend __________ I post regularly about software engineering, front end, memes, and more. Follow me Yangshun Tay and my company GreatFrontEnd

GreatFrontEnd is featured on Prisma's blog! 🌟 GreatFrontEnd has been using Prisma since its inception and Prisma recently did a case study on us: https://lnkd.in/gjPYCvhU In summary, Prisma is super valuable to us because: - Type safety: Nobody likes to wrestle with raw SQL. Why write raw SQL when you can use generated typesafe methods in JavaScript? - Syncing across environments: We needed a way to sync schema changes from dev -> staging -> production and Prisma schema was perfect for that - Minimal vendor lock-in: Prisma is an abstraction over the underlying database tech and we could away from PostgreSQL to something else in future if necessary Btw Prisma also hosts database now with a generous free tier, with connection pooling, caching, real-time subscriptions, and query optimization recommendations out-of-the-box. If you're interested, check out prisma.io/postgres 🔥 Thanks Ryan Chenkie, Marc Hess, and Nitin Gupta for writing this article

Top 5 JavaScript Design Patterns Every Front End Developer Must Know 🌟 As JavaScript developers, mastering design patterns is essential for writing clean, maintainable, and scalable code. These patterns help you solve common software design challenges and improve code readability and reusability. Here are the Top 5 JavaScript Design Patterns that will elevate your coding game: - Module Pattern - Keep your code organized by encapsulating functionality into reusable modules. It helps prevent global namespace pollution and keeps your code clean. - Singleton Pattern - Ensure a class has only one instance and provides a global point of access. Perfect for managing configurations or shared resources. - Factory Pattern - Create objects without specifying the exact class of object that will be created. It’s flexible and allows you to generate different types of objects. - Observer Pattern - Define a subscription mechanism to allow multiple objects to listen and react to events from a subject. Ideal for handling real-time updates. - Prototype Pattern - Create new objects based on a prototype object. It’s great for performance optimization when you need multiple similar objects. Are you familiar with these patterns? Which one is your favorite? 💬 Drop a comment below!👇 -- Struggling with front end interviews? Learn from ex-Big Tech experts trusted by 500,000+ engineers. 👉 Start Your Prep Now > https://lnkd.in/gBiWrMxQ -- #javascript #design #webdevelopment #interviews #frontend #website #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience