Share

cover art for Jatin Ramanathan: How Google.com is Rendered with Wiz (Fastest UI Framework)

ConTejas Code

Jatin Ramanathan: How Google.com is Rendered with Wiz (Fastest UI Framework)

Links

- Codecrafters (sponsor): https://tej.as/codecrafters

- Jatin on X: https://x.com/JatinRamanathan

- Tejas on X: https://x.com/tejaskumar_


Summary


Jatin Ramanathan, a software engineer at Google, discusses the Wiz framework and its use in Google products like search, photos, and payments. Wiz is a resumable web framework that focuses on loading minimal JavaScript and uses the concept of signals for reactive programming. Signals are reactive properties that reflect the state of an observable or reactive property at any given time.


The Wiz framework also incorporates JS Action, a library that listens to events and delivers them to event handlers only when necessary, reducing the amount of JavaScript that needs to be loaded. The conversation also touches on the merger of Wiz and Angular and the potential for unified APIs in the future. The conversation explores the concept of responsible JavaScript and web performance.


We dive into the use of signals and JS action in Wiz and Angular, and how they enable declarative behavior and interactivity on the client side. The discussion also touches on the challenges of using TSX in Angular and the potential for future improvements. The importance of measuring performance and understanding the user experience on different devices is emphasized, along with the use of feature flags and instrumentation to optimize the user funnel.


Takeaways


1. Wiz is a resumable web framework used in Google products like search, photos, and payments.

2. The framework focuses on loading minimal JavaScript and uses signals for reactive programming.

3. JSAction is a library that listens to events and delivers them to event handlers only when necessary, reducing the amount of JavaScript that needs to be loaded.

4. Wiz and Angular are merging to exchange ideas and potentially unify APIs in the future.

5. Signals and JSAction in Wiz and Angular enable declarative behavior and interactivity on the client side.


Chapters


00:00 Jatin Ramanathan

03:05 Welcome Jatin

06:15 Overview of Wiz and its Use in Google Products

13:00 Resumability and the Concept of Signals

36:03 Merger of Wiz and Angular: Unifying APIs

48:08 Signals and Interactivity

50:26 Declarative Behavior with Signals and JS Action

52:10 Performance of HTML and htmx

59:10 Responsible JavaScript as a Diet

01:09:26 Open Sourcing Wiz through Angular

01:13:34 Challenges of TSX in Angular

01:16:40 Declarative Behavior Composition in TSX

01:22:15 Contributing to Wiz through Angular

01:25:11 Checklist for Responsible JavaScript and Web Performance

More episodes

View all episodes

  • TC39: How signals work, adding signals to the JavaScript programming language

    01:48:27|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- TC39 Signals Proposal: https://github.com/tc39/proposal-signalsSummaryIn this conversation, Kristen Maevyn, and Daniel Ehrenberg discuss reactivity and its importance in JavaScript. They explore the concept of reactivity, its role in keeping applications deterministic, and the challenges of achieving consistency in modern rendering frameworks. They also compare signals to observables and explain why signals are being considered as a language-level feature. The conversation touches on the API for signals, the use of classes in JavaScript, and the benefits of functional programming. Signals are an evolution of the long-standing problem of managing state in JavaScript applications. They provide a solution to the issues with classes and functions by combining the benefits of both. Signals allow for encapsulation, testing in isolation, and pure functions while still being able to handle state. Chapters00:00:00 Intro00:09:57 What are signals?00:26:37 Classes and the `new` keyword00:41:31 State Management and Signals00:49:25 Push-based vs. Pull-based Reactivity01:04:43 Language-level vs. Framework-level Signals01:14:27 Server-side Signals01:25:06 Self-referencing Signals01:36:29 Audience Q&A01:47:07 Conclusion
  • Paul Klein IV: How to Build Browsers for AI Agents

    01:33:25|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- React Africa (partner): https://react-africa.com/- Browserbase: https://browserbase.com/- Browserbase Series A Announcement: https://www.kleinerperkins.com/perspectives/browserbase-AI-seriesa/- Paul on X: https://x.com/pk_ivSummaryIn this conversation, we talk to Paul Klein IV, the founder of BrowserBase. We discuss the concept of browser-based software and its potential to automate tasks on the web. Paul explains that the future of software is one where it does the work for us, and Browserbase is designed to power this future by providing a programmable web browser for AI applications. We also touch on the challenges of running browser automation frameworks in production and how Browserbase solves these challenges. Paul introduces Stagehand, an open-source SDK that helps developers automate web workflows, and emphasizes the importance of ethical use of browser automation tools. Customers are building various applications on Browserbase, including web scraping, testing, AI agents, B2B software, and professional services. The company has experienced rapid growth, with thousands of hours of browser sessions per week. To handle the scale, Browserbase had to make architectural changes, such as moving from Postgres to ClickHouse for better performance. They also had to address challenges like connection management, resource allocation, and debugging customer issues. The founder believes they have achieved product-market fit based on strong customer retention and repeatable growth strategies. Browserbase is a technical product, so the number one priority for hiring is that candidates are technical and understand what Browserbase does. The team is currently focused on growing the top of the funnel and the sales edge side. They have specific roles for growth engineers and customer-focused engineers. The company recently raised a Series A round of $27M, with the goal of becoming a category-defining infrastructure company. The pricing model for Browserbase includes a hobby plan, a startup plan, and a scale plan. The company offers 10 free sessions for users to try out the product.Chapters00:00:00 Paul Klein IV00:04:41 Why Browserbase?00:11:57 What is Browserbase?00:19:09 Stagehand: the open source SDK00:35:30 How People are Using Browserbase00:49:17 Creating web APIs where there are none00:59:40 Product-Market Fit01:06:16 AI Engineering at Browserbase01:08:42 Remote Work vs. Onsite01:13:36 Browserbase's Series A Round01:20:02 AI Fatigue01:28:11 Advice for Founders01:32:10 Conclusion
  • Kelly Vaughn: How to Navigate Career Transitions and Build Meaningful Relationships

    01:38:18|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- React Brussels: https://react.brussels- React Africa: https://react-africa.com- Kelly on X: https://x.com/kvlly- Spot AI: https://spot.ai- Tejas on X: https://x.com/tejaskumarSummaryKelly Vaughn, Director of Engineering at Spot AI, shares her unique career journey from self-taught coder to entrepreneur and now corporate leader. She discusses running a Shopify agency, co-founding a venture-backed startup, and transitioning to her current role. Key points include:- The challenges of running an agency and managing employee livelihoods- Insights on bootstrapping vs. venture funding for startups- The importance of genuine relationships and networking in career growth- Adapting to different company stages and cultures- Navigating the transition from entrepreneur to corporate employee- The value of diverse backgrounds in tech leadership rolesKelly emphasizes the importance of self-reflection, embracing change, and learning from failures throughout one's career journey.Chapters00:00:00 Intro00:05:08 Spot AI: Video Intelligence00:12:46 Dealing with Rapid Growth00:17:05 Getting into Tech00:22:25 TapRoom Consultancy/Shopify00:32:35 Running a Consultancy00:39:09 Venture Capital or no?00:40:08 Shutting Down Consultancy00:41:11 Attention, Effort, Mistakes as a Path to Growth00:47:26 The Pressure of Running a Business00:52:05 How to find a job: networking01:01:02 Being taken advantage of01:04:59 How Kelly got her audience01:08:31 Big audience problems01:12:01 Therapist and Engineering Leadership01:18:18 Boundaries01:26:06 Advice for Founders
  • Aya Bochman, co-founder Fashn.ai: How to build a lean AI startup (that makes money)

    01:32:46|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- Upvote Fashn on ProductHunt: https://www.producthunt.com/posts/fashn-virtual-try-on- Fashn: https://fashn.ai- Aya on 𝕏: https://x.com/ayaboch- React Africa (partner): https://react-africa.comSummaryAya Bochman, co-founder of Fashion AI, discusses her journey in creating a generative AI platform for virtual try-on in the fashion industry. She shares insights on building a self-funded startup, the challenges of developing AI models, and the importance of work-life balance for founders.Chapters00:00:00 Introduction to Fashion AI00:07:42 Demo and product description00:11:10 Technical challenges in virtual try-on00:17:48 Data collection and labeling process00:26:51 API development and pricing model00:34:45 Collaboration with other services (RunPod, Fal.ai)00:43:02 Dealing with content moderation00:46:46 Business model and pricing structure00:52:12 Incident with Meta and open-source code00:59:10 Future plans and potential competition01:03:13 Advice for technical founders01:20:12 Work-life balance and avoiding burnout01:29:51 Working with a spouse as a co-founder
  • Peer Richelsen, founder Cal.com: How to build an open startup

    01:35:12|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- React Brussels: https://react.brussels- React Africa: https://react-africa.com - Cal.com: https://cal.com- Peer on X: https://x.com/peer_rich- Tejas on X: https://x.com/tejaskumar_SummaryIn this discussion, Peer Richelsen, co-founder of Cal.com, shared insights into the company's open-source scheduling infrastructure. Cal.com offers customizable scheduling solutions for individuals and enterprises across various industries, with its open-source approach driving rapid development and community engagement. Richelsen highlighted key features like "instant meetings" for customer support and discussed the platform's technical architecture, primarily based on Next.js with plans to partially migrate to Nest.js.The conversation also touched on Cal.com's cautious approach to AI integration, its structure as a U.S. entity despite European roots, and commitment to transparency in operations. Richelsen expressed satisfaction with Cal.com's current trajectory, outlining plans to enhance offerings in healthcare scheduling, improve sales team routing, and expand capabilities across different sectors. Throughout the discussion, Richelsen's passion for open-source development and innovative scheduling solutions was evident.Chapters00:00:00 Intro00:03:52 Supabase hate00:04:41 What is Cal.com?00:09:12 Balancing Open Source Maintenance and New Features00:14:34 Prioritizing Customer Feedback00:18:33 Cal.com's Product-Market fit00:22:12 Cal.com's Transparency (Open Startup)00:25:02 Cal.com's Hiring Process00:29:10 Location based pay nuance00:35:55 Cal.com stats: active users and recurring revenue00:42:51 Cal.com technical deep dive00:54:06 Cal.com API Platform00:58:01 Cal.com Atoms01:06:15 Cal.ai AI-enabled scheduling agent01:18:16 What founders should know about running a startup01:27:24 Future experimental Cal.com features01:30:36 Germany's Startup Reputation (bad)01:33:57 Positioning and Marketing for Cal.com
  • Harper Carroll: How Machine Learning Works, What AI Engineering is, the Future of AI

    01:42:43|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- React Africa (partner): https://react-africa.com/- Harper Carroll: https://harpercarrollai.com/- 10 Days of AI Basics Course: https://www.youtube.com/watch?v=Ie7qxG9os1U&list=PL-ocKywdn6lE9l4LIPL4gMY4nNRfjEswG&pp=iAQB- Harper on X: https://x.com/harperscarroll- Isabelle Boemeke on X: https://x.com/isabelleboemeke- Tejas on X: https://x.com/tejaskumar_SummaryIn this enlightening conversation with Harper Carroll, we dove deep into the world of AI, covering everything from the basics of neural networks to the cutting-edge concepts of AI agents. Harper's expertise, stemming from her 10 years of Stanford education, provided invaluable insights into the inner workings of machine learning models. We explored the environmental impact of AI and the potential role of nuclear energy in sustaining AI development. Harper's balanced view on AI's future was refreshing, emphasizing its potential for optimization rather than doom-and-gloom scenarios. The discussion concluded with thought-provoking reflections on AI's potential to free humanity for more creative pursuits and its possible connection to fundamental universal principles of peace and love.Chapters00:00:00 Intro00:06:09 What is AI?00:11:34 Machine Learning Deep Dive00:17:08 Impostor Syndrome00:22:11 Machine Learning Deep Dive Continued00:28:04 What are Hidden Layers?00:34:29 Model Architectures00:37:04 How do embeddings models work?00:40:23 AI Engineering Deep Dive00:48:06 Smaller specialized models vs. LLMs (Large Language Models)00:49:57 Hallucinations and RAG00:52:16 Fine-tuning a model and blends00:55:24 RAG vs. Fine-tuning01:00:31 RAG Explained01:04:15 Machine Learning Evals01:10:28 Backpropagation01:12:44 AI Agents01:16:25 Agentic RAG01:17:51 AI and Energy: The rise of nuclear power01:25:06 AI Optimism vs. Doomerism01:31:27 AGI and Superintelligence01:36:22 Hope for the future with AI01:41:03 Conclusion
  • ChatGPT: How to Train an LLM, Ethics, and the future of AI

    01:49:27|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- SquiggleConf: https://squiggleconf.com/- ChatGPT: https://chatgpt.com SummaryIn this groundbreaking episode of the ConTejas Code Podcast, we engage in a deep conversation with ChatGPT, exploring the intricacies of AI, its ethical implications, and the future of human-computer interaction. The discussion covers the training process of AI models, the importance of ethical data sourcing, and the challenges of transparency in AI development. The episode also dives into philosophical dilemmas like the trolley problem, the potential for AI to replace human jobs, and the unique qualities that make us human. Throughout the conversation, the complexities of latent space and voice modeling are examined, culminating in a reflection on the irreplaceable aspects of human experience.Chapters00:00:00 Intro00:07:39 How to Build an LLM00:10:04 Copyrights and Ethics00:17:13 Is OpenAI Actually Open?00:37:10 An Open AI Supervision Committee00:45:21 Training an LLM00:51:11 Optimizing Hyperparameters for Machine Learning00:59:44 What did Ilya see?01:00:14 Superintelligence Threats to Humanity01:07:25 The Trolley Problem01:13:24 AI on Trump vs. Kamala01:19:47 What Questions Would ChatGPT Like to Answer?01:22:04 The Future of AI: Dystopian or Hopeful?01:28:15 Latent Space Explained01:41:28 AI Consciousness01:46:03 Conclusion
  • Tracy Lee, CEO This Dot: How to be successful in DevRel with AI

    01:49:33|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- Wix (sponsor): https://tej.as/wix- SquiggleConf: https://squiggleconf.com/- Tracy Lee on X: https://twitter.com/ladyleet- This Dot Labs: https://www.thisdot.co/- RxJS: https://rxjs.dev/- GitHub Copilot: https://github.com/features/copilot- CascadiaJS Conference: https://2023.cascadiajs.com/- Render: https://render.com/- Vercel: https://vercel.com/- Netlify: https://www.netlify.com/- AWS Amplify: https://aws.amazon.com/amplify/- Michael Terrell Coaching: https://www.michaelwterrell.com/- Cal Newport's "Deep Work": https://www.calnewport.com/books/deep-work/- O'Reilly Media: https://www.oreilly.com/SummaryIn this episode, Tracy Lee, CEO and co-founder of [This Dot Labs](https://www.thisdot.co/) shares her inspiring journey from hosting JavaScript meetups to becoming a prominent figure in the tech industry. She explores the evolution of This Dot Labs, highlighting the crucial role of open source contributions and community building in its success.Tracy emphasizes the significance of Developer Relations (DevRel) in fostering long-term relationships and brand awareness. The discussion touches on current industry trends, including the increasing integration of AI technologies like GitHub Copilot in development workflows, and how This Dot Labs navigates client policies regarding AI usage.We also explore the challenges of scaling a consultancy, the importance of hiring autonomous and entrepreneurial-minded individuals, and strategies for effective team building. Tracy sheds light on the need for leaders to be coachable and receptive to feedback, sharing personal anecdotes about growth and learning. The conversation wraps up with insights into This Dot Labs' future directions, including expanding services in AI consulting and backend technologies.Chapters00:00:00 Introduction00:06:25 Building This Dot Labs00:10:40 The Role of Open Source00:14:15 Importance of DevRel00:22:45 Challenges in Consultancy00:27:00 AI Integration in Client Projects00:31:35 Hiring Autonomous Individuals00:36:20 DevRel's Value in the Current Economy00:40:55 Emotional Intelligence and Leadership00:45:15 Balancing Business and Personal Connections00:50:30 Expanding Services at This Dot Labs00:55:45 Future Directions and Vision01:00:00 Impact of AI on the Industry01:15:00 The Importance of Being Coachable01:20:30 Overcoming Personal Challenges01:25:40 Advice for Aspiring Tech CEOs and Founders01:35:15 Looking Ahead: This Dot's Next Steps01:40:00 Final Reflections and Closing Thoughts
  • Alex Moldovan, founder JS Heroes: How to Organize a Community-first JavaScript Conference

    01:37:38|
    Links- Codecrafters (sponsor): https://tej.as/codecrafters- Wix (sponsor): https://tej.as/wix- SquiggleConf (partner): https://squiggleconf.com/- JS Heroes: https://jsheroes.io/- Alex on X: https://x.com/alexnmoldovan- Tejas on X: https://x.com/tejaskumar_Summary:In this discussion, we talk to Alex Moldovan, a software engineer at CodeSandbox and event planner who co-founded JS Heroes—a non-profit, community-driven JavaScript (Programming Language) conference in Romania. Together, we cover the intricacies of project management, event planning, and the challenges of organizing a conference that prioritizes open source values and community engagement.Key topics include the benefits of a single-track format for presentations and talks, strategies for diversity and inclusion in the call for papers (CFP) process, and balancing a full-time role in technology with being a conference speaker and organizer. The discussion provides valuable insights for developers interested in community building, functional programming, and the evolving landscape of the tech industry.Chapters00:00:00 Alex Moldovan00:03:54 Introduction00:09:42 Origin of JS Heroes00:18:17 Non-Profit Conference Model00:25:15 Single-Track Conference Benefits00:36:16 Transparency in Event Planning00:43:13 Challenges with Sponsorship00:53:27 Scaling and Quality Focus01:04:54 Diversity in CFP Process01:13:08 Cultural Challenges in Tech01:23:26 Balancing Roles01:32:26 Future Goals for JS Heroes