How to burn $30m on a JavaScript framework...

Fireship · Intermediate ·🏗️ Systems Design & Architecture ·3mo ago

Key Takeaways

The video discusses the story of Famo.us, a JavaScript framework that raised $30m but failed to deliver, and explores the reasons behind its failure, including the evolution of browser technology and the rise of alternative frameworks like React and Three.js.

Full Transcript

Every once in a while, a technology comes around that changes the course of history. The transistor, cloud computing, AI. But even more often, a technology comes along that has no impact on the course of history whatsoever. It's easy to celebrate the winners of tech history. But today, we're going to do the opposite and honor one of the great technological face plants that's been forgotten to time. The year was 2012. Everyone was doing the Gangdom Style dance while writing copycript code in Sublime Text. And if you were a developer during this time, I'd like to take a moment to remind you that it's time to go get your prostate checked. Now, believe it or not, at the time, there was one programming language that everyone was talking about, HTML 5. Its goal was to expand the web as a platform that developers could build on to better compete with native apps without plugins like Flash or Silver Light. Unfortunately, it didn't really work out that way. Even Zuck, despite an ongoing battle with the FTC over privacy issues, it claimed Facebook's biggest mistake was betting too much on HTML 5. At the same time, another team in Silicon Valley was working on a reputation system for people startup called Bench Rank, which you can kind of think of like if LinkedIn and Hot or Not had a baby. While building their web app, they also ran into the same HTML 5 limitations that plagued Facebook. But while trying to get around those limitations, they discovered a cool parlor trick with the browser. Instead of letting the browser's layout engine control everything as it normally does by essentially hacking the native Matrix 3D CSS property, they could push as much work as possible to the GPU, which solved some of their rendering performance issues. Then after realizing that working on a startup that could be described as if LinkedIn and Hot or not had a baby was a terrible waste of time, they pivoted to creating a rendering engine based on that parlor trick. Now, I know what you're thinking. There's no way in hell a company could raise $30 million from a single GPU accelerated CSS property. Well, sure enough, they raised $30 million. And in hindsight, it's easy to laugh at. But at the time, the idea of throwing out the traditional CSS model in favor of a cartisian coordinate system where all the elements are absolutely positioned with 3D transforms was kind of cool. The famous would literally output a 4x4 matrix that would then get interpreted by the browser as a matrix 3D CSS property with every element's layout, size, and animation determined by these matrices. It was the good old days of linear algebra in the browser before it was used to decimate our entire industry. And take a shot if you've heard this before, but because most devices have access to a GPU, the Famous could target all of them, allowing you to write a single app that would work mostly anywhere. So why aren't we all using Famous today? and why is their website currently for sale? Because reality is often disappointing. The Famous was first announced at TechCrunch Disrupt in September of 2012, but it took them until June of 2014 to release something that developers could actually play with, and a lot happened during that period. At first, browsers got faster thanks to improvements in GPU compositing and animation scheduling. This meant that many of the performance tricks Famous relied on like bypassing layout and animating purely with transforms became common browser practices which shrink the advantage of Famous's custom rendering engine. The second how we built UIs changed. If you really needed a complex 3D GPU interface, 3JS became a solid option. And if you had a more normal interface, you could describe it declaratively with React. Third, when it did get released, Famous wasn't the easiest API to work with. Despite their best efforts, it still required a deep understanding of math, physics, and JavaScript to work well. And if there are three things UI developers aren't good at, it's math, physics, and JavaScript. And finally, the economics of creating a new layout engine in the browser never really made sense. At their peak, Famous had 25 employees, and their founder was quoted as saying he didn't believe in running a lean startup. This led to them trying out a few different ways to make money, like hosting and monitoring. But when that also didn't pan out and the hype for the rendering engine died down, they had to lay off their entire engineering team and did one final hard pivot to a CMS for marketing sites, which also eventually failed. But I don't think that means Famous was all failure. They tried to ship the future early by building around the limitations of the browser instead of waiting for the standards to evolve. That's what made it so promising yet so brittle. Sure, it failed, but for a moment, it made developers believe the web could feel truly native, and it helped push the industry's expectations of performance and UI ambition forward. And for that, it should be commended. And another technology that's pushing the industry forward right now is Railway, the sponsor of today's video. It's an all-in-one intelligent cloud provider that lets you deploy anything in a few clicks. So, instead of drowning in YAML, you can just connect your repo to Railway and it automatically sets up the right config for you. Or you can use the Railway CLI with their new agent skills to let Claude Code, Codeex, or any of your other agent minions to do all the dirty work. Developers love how easy it is to spin up any service you want, and how Railaway only charges you for the resources you actually use and not what you provision, which can save over 65% on cloud costs. Sign up for free today with the link below and you'll get $20 in free credits when you upgrade. Thanks for watching.

Original Description

Railway is the easiest way to deploy anything. Get $20 in free credits - https://railway.com/?referralCode=fireship The famo.us rendering engine was supposed to change web dev forever back in 2012. But after raising $30m, that never happened. Let's take a look back in time to understand why. #coding #javascript #opensource 🗞️ Newsletter: https://bytes.dev 🧠 Courses: https://fireship.dev
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Fireship · Fireship · 0 of 60

← Previous Next →
1 Angular 4 Development and Production Environments with Firebase
Angular 4 Development and Production Environments with Firebase
Fireship
2 OAuth with Angular and Firebase Tutorial
OAuth with Angular and Firebase Tutorial
Fireship
3 Anonymous Authentication with Angular and Firebase - Lazy Registration
Anonymous Authentication with Angular and Firebase - Lazy Registration
Fireship
4 Angular Router Guards for Firebase Users
Angular Router Guards for Firebase Users
Fireship
5 Angular Firebase CRUD App with NoSQL Database Tutorial
Angular Firebase CRUD App with NoSQL Database Tutorial
Fireship
6 Upload Files from Angular to Firebase Storage
Upload Files from Angular to Firebase Storage
Fireship
7 How to Deploy an Angular App to Firebase Hosting
How to Deploy an Angular App to Firebase Hosting
Fireship
8 Sharing Data between Components in Angular
Sharing Data between Components in Angular
Fireship
9 Loading Spinners for Asynchronous Firebase Data
Loading Spinners for Asynchronous Firebase Data
Fireship
10 Angular 4 Transactional Email with Google Firebase Cloud Functions
Angular 4 Transactional Email with Google Firebase Cloud Functions
Fireship
11 Firebase Database Rules Tutorial
Firebase Database Rules Tutorial
Fireship
12 Autocomplete Search with Angular4 and Firebase
Autocomplete Search with Angular4 and Firebase
Fireship
13 Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Fireship
14 Angular Drag-and-Drop File Uploads to Firebase Storage
Angular Drag-and-Drop File Uploads to Firebase Storage
Fireship
15 Text Translation with Firebase Cloud Functions onWrite and Angular 4
Text Translation with Firebase Cloud Functions onWrite and Angular 4
Fireship
16 Custom Usernames with Firebase Authentication
Custom Usernames with Firebase Authentication
Fireship
17 Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Fireship
18 Simple Pagination with Firebase and Angular 4
Simple Pagination with Firebase and Angular 4
Fireship
19 How to Connect Firebase Users to their Data - 3 Methods
How to Connect Firebase Users to their Data - 3 Methods
Fireship
20 Add Toast Message Notifications to your Angular App
Add Toast Message Notifications to your Angular App
Fireship
21 Facebook-Inspired Reactions System with Angular and Firebase
Facebook-Inspired Reactions System with Angular and Firebase
Fireship
22 Learn NgModule in Angular with Examples
Learn NgModule in Angular with Examples
Fireship
23 Lazy Loading Components in Angular 4
Lazy Loading Components in Angular 4
Fireship
24 Stripe Checkout Payments with Angular and Firebase - Part 1
Stripe Checkout Payments with Angular and Firebase - Part 1
Fireship
25 Process Stripe Payments with Firebase Cloud Functions - Part 2
Process Stripe Payments with Firebase Cloud Functions - Part 2
Fireship
26 Selling Digital Content in Angular with Stripe Payments - Part 3
Selling Digital Content in Angular with Stripe Payments - Part 3
Fireship
27 Angular 4 Full Text Search with Algolia - Part 1
Angular 4 Full Text Search with Algolia - Part 1
Fireship
28 Algolia with Firebase Cloud Functions - Part 2
Algolia with Firebase Cloud Functions - Part 2
Fireship
29 Firebase Phone Authentication in Angular 4
Firebase Phone Authentication in Angular 4
Fireship
30 Top 7 RxJS Concepts for Angular Developers
Top 7 RxJS Concepts for Angular Developers
Fireship
31 Learn Angular Animations with 5 Examples
Learn Angular Animations with 5 Examples
Fireship
32 Advanced Firebase Data Filtering (Multi-Property)
Advanced Firebase Data Filtering (Multi-Property)
Fireship
33 Realtime Maps with Mapbox + Firebase + Angular
Realtime Maps with Mapbox + Firebase + Angular
Fireship
34 Angular Reactive Forms with Firebase Database Backend
Angular Reactive Forms with Firebase Database Backend
Fireship
35 Send Push Notifications in Angular with Firebase Cloud Messaging
Send Push Notifications in Angular with Firebase Cloud Messaging
Fireship
36 Top 7 Ways to Debug Angular 4 Apps
Top 7 Ways to Debug Angular 4 Apps
Fireship
37 Infinite Scroll with Angular and Firebase
Infinite Scroll with Angular and Firebase
Fireship
38 Use TypeScript with Firebase Cloud Functions
Use TypeScript with Firebase Cloud Functions
Fireship
39 Realtime Graphs and Charts with Plotly and Firebase
Realtime Graphs and Charts with Plotly and Firebase
Fireship
40 Role-Based User Permissions in Firebase
Role-Based User Permissions in Firebase
Fireship
41 User Presence System in Realtime - Online, Offline, Away
User Presence System in Realtime - Online, Offline, Away
Fireship
42 Location-based Queries with GeoFire and Angular Google Maps
Location-based Queries with GeoFire and Angular Google Maps
Fireship
43 Angular ngrx Redux Quick Start Tutorial
Angular ngrx Redux Quick Start Tutorial
Fireship
44 Angular Ngrx Effects with Firebase Database
Angular Ngrx Effects with Firebase Database
Fireship
45 Progressive Web Apps with Angular
Progressive Web Apps with Angular
Fireship
46 Angular Ngrx with Firebase Google OAuth User Authentication
Angular Ngrx with Firebase Google OAuth User Authentication
Fireship
47 RxJS Quick Start with Practical Examples
RxJS Quick Start with Practical Examples
Fireship
48 Send SMS Text Messages with Twilio and Firebase
Send SMS Text Messages with Twilio and Firebase
Fireship
49 Firebase Database Performance Profiling
Firebase Database Performance Profiling
Fireship
50 Native Desktop Apps with Angular and Electron
Native Desktop Apps with Angular and Electron
Fireship
51 Subscription Payments with Stripe, Angular, and Firebase
Subscription Payments with Stripe, Angular, and Firebase
Fireship
52 Firestore with AngularFire5 Quick Start Tutorial
Firestore with AngularFire5 Quick Start Tutorial
Fireship
53 Angular HTTP Client Quick Start Tutorial
Angular HTTP Client Quick Start Tutorial
Fireship
54 Google Sign-In with Firestore Custom User Data
Google Sign-In with Firestore Custom User Data
Fireship
55 Star Review System from Scratch with Firestore + Angular
Star Review System from Scratch with Firestore + Angular
Fireship
56 Angular Chatbot with Dialogflow (API.ai)
Angular Chatbot with Dialogflow (API.ai)
Fireship
57 Learn @ngrx/entity and Feature Modules
Learn @ngrx/entity and Feature Modules
Fireship
58 Infinite Scroll Pagination with Firestore
Infinite Scroll Pagination with Firestore
Fireship
59 Faster Firestore via Data Aggregation
Faster Firestore via Data Aggregation
Fireship
60 Contentful - CMS for Angular Progressive Web Apps
Contentful - CMS for Angular Progressive Web Apps
Fireship

The video teaches the story of Famo.us, a JavaScript framework that failed to deliver, and explores the reasons behind its failure, including the evolution of browser technology and the rise of alternative frameworks. It also introduces Railway, a cloud provider that allows easy deployment of services.

Key Takeaways
  1. Understand the concept of GPU acceleration and its application in browser technology
  2. Evaluate the limitations of Famo.us and its failure to deliver
  3. Explore alternative frameworks like React and Three.js
  4. Use Railway to deploy services and reduce cloud costs
  5. Design systems and APIs with consideration of browser technology and cloud computing
💡 The failure of Famo.us was due to a combination of factors, including the evolution of browser technology and the rise of alternative frameworks, highlighting the importance of evaluating technology and designing systems with consideration of these factors.

Related AI Lessons

What OOP Actually Buys You (And Why “Real World Modeling” Is a Lie)
Learn the actual benefits of Object-Oriented Programming (OOP) and why 'real world modeling' is a misconception
Medium · Programming
Data Partitioning in System Design: Why Every Scalable Application Depends on It
Learn how data partitioning enables scalable applications to handle growth without failing
Medium · Programming
Why Realtime Collaboration Is Harder Than It Looks?
Realtime collaboration is a complex distributed systems problem that requires careful engineering, not just a simple UI feature
Medium · JavaScript
Podcast: Architectural Patterns: Moving Beyond Cloud-Native to Local-First - Insights from Adam Wiggins
Learn how to design local-first architectures that combine cloud-based collaboration with local software performance and data ownership
InfoQ AI/ML
Up next
Retracing It All With My Son
Ginny Clarke
Watch →