This new JS framework wants you to quit React…

Fireship · Beginner ·🌐 Frontend Engineering ·8mo ago

Key Takeaways

The video introduces RippleJS, a new TypeScript UI framework that combines features from React, Solid, and Svelte, and explores its capabilities, while also showcasing Kiro, an AI IDE for larger projects.

Full Transcript

Remember back in the good old days of 2019, when life was so good we could do things like raid Area 51 for fun and cosplay as soldiers when choosing a JavaScript framework? When you could go to a sketchy coding boot camp, learn a few days worth of Backbone.js, and immediately land a six-figure job? Back before murder hornets, NFTs, Morbius, and before AI killed the junior developer, the work-life balance, ping pong tables, and paychecks bigger than other real licensed engineers weren't enough. We also needed to act like we were so overwhelmed that if we had to learn one more thing, we would quit and take on a much more rewarding job like being a literal farmer. We even invented a new medical condition for the psychosis called a JavaScript fatigue. The idea was that there were so many free, open source, volunteer-led libraries and frameworks to choose from that it was too overwhelming to both learn them while also trying to unlock Fortnite's battle pass each season. Although things are a bit different today, there's one man crazy enough to think he can bring back the JavaScript fatigue. In today's video, we'll take a look at this new UI framework and decide whether it would be easier to learn it or just become a coal miner instead. It is November 6, 2025 and you're watching The Code Report. And nowadays, if someone tells you they made a new UI framework, you should ignore them and call McGruff the Crime Dog because they're probably on DMT conversing telepathically with machine elves about button hover states in the seventh dimension. The one exception though is if that person is Dominic Galloway. Dominic first became popular about a decade ago when he released Inferno, which you can think of like React if React were actually fast. No one really used it, but it was impressive enough to get him an offer at Facebook where he joined to work on the React core team in 2016. A few years later, he realized working on React kind of sucks, which led him to join Vercel to work on the Svelte core team in 2023. A few years after that, he realized he's actually a peacock who needed to fly. And his time on the React and Svelte core teams made him uniquely qualified to do it again. And that brings us to a new TypeScript framework called Ripple, a compiler-driven view library for the web based on a superset of JSX. As you can probably guess, it looks like the love child of Svelte and React with a hint of infidelity with Solid.js. You define a component with the component keyword, and you can use this JSX-like syntax to describe your UI. But unlike JSX, instead of writing expressions, you write statements, which means you can do some cool things like write an if statement or for loop directly within your template. And you can use the style element to get native CSS styling that's scoped and localized to the component where it's defined. But its best feature may be how it handles reactivity. You use the track function to create a value that can change over time and prepend it with the at sign whenever you need to read or write it. From there, with fine-grained rendering, Ripple will surgically apply any mutations it needs to the DOM. Although it's brand new, it already comes with prettier and ESLint support, a VS Code extension for syntax highlighting and IntelliSense, and of course, full TypeScript integration and type checking. Who knows if it'll catch on or not, but if it doesn't, you can at least keep having your AI write your React code with Kiro, the sponsor of today's video. It's a new AI IDE created by AWS that's built for larger, more complex projects using an approach called spec-driven development. Instead of diving straight into code, Kiro starts with a requirements.md file to define your user story and acceptance criteria. It then it creates a design doc to outline things like your architecture plan and testing strategy. Those specs then get merged into an implementation file where each task outlines what code the AI should write and lets you track progress along the way. It even lets you automate repetitive jobs by setting up agent hooks that trigger on specific events like updating your documentation whenever you save a file. But Kiro is especially useful when working on teams where design docs and consistent code quality matter. And you can try it out for free using the link below. Or join the Kiroweens hackathon to access all their pro tier features and see if it actually lives up to the hype. This has been The Code Report. Thanks for watching and I will see you in the next one.

Original Description

Test drive the Kiro AI IDE for free - https://fandf.co/3IG1vCK RippleJS is a TypeScript UI framework that combines the best parts of React, Solid, and Svelte into one package. Let's run it... #coding #programming #webdevelopment 💬 Chat with Me on Discord https://discord.gg/fireship 🔗 Resources - https://www.ripplejs.com/ 📚 Chapters 🔥 Get More Content - Upgrade to PRO Upgrade at https://fireship.io/pro Use code YT25 for 25% off PRO access 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font 🔖 Topics Covered - Who is Dominic Gannaway? - What is RippleJS? - Ripple key features - Typescript
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

RippleJS is a new UI framework that combines the best parts of React, Solid, and Svelte, and Kiro is an AI IDE that helps with spec-driven development. The video explores the features and capabilities of both tools.

Key Takeaways
  1. Define a component with the component keyword in RippleJS
  2. Use JSX-like syntax to describe UI
  3. Create a value that can change over time with the track function
  4. Use the style element for native CSS styling
  5. Try out Kiro for spec-driven development
  6. Use Kiro to automate repetitive jobs
  7. Explore the features of RippleJS and Kiro
💡 RippleJS offers a unique approach to UI development with its compiler-driven view library and fine-grained rendering, while Kiro provides a spec-driven development approach that can improve code quality and consistency.

Related Reads

Up next
How to Use Semrush Keyword Magic Tool with ChatGPT to Make Money
Grow with Will - SEO, Sales & Entrepreneurship
Watch →