CoRecursive: Coding Stories

Episode: React and Scala JS with Shadaj Laddad (January 16, 2020)

Host: Adam Gordon Bell
Guest: Shadaj Laddad (Creator of Slinky, Scala.js open source contributor, UC Berkeley student)

Overview

This episode explores the intersection of modern web frontend frameworks and statically typed functional languages. Host Adam Gordon Bell interviews Shadaj Laddad—Scala.js contributor, creator of the Slinky React wrapper, and long-time Scala programmer—about the evolution of frontend development, why React became dominant, and how the experience of building in JavaScript can be brought to strongly-typed languages like Scala. Together, they delve into Slinky's philosophy, the parallels between React and functional programming, the benefits of type-safe full-stack development, and Shadaj’s journey from childhood programming to research aspirations.

Key Discussion Points & Insights

1. The Evolution of Web Frontends

• Shift from Server-Rendered to Client-Rendered Apps
  • Web apps have moved from server-side HTML generation to client-side rendering via frameworks like React and Angular.
  • This shift increases interactivity (e.g. offline capabilities, instant feedback) but puts more complexity on frontend code.
  • [01:38]
    Shadaj: “Before, when you submitted a form, you were just waiting there, seeing your browser spinner run… Now, the web page is still interactive while it's sending that data processing, so you can keep on using it, and you get much more fluid interactions.”

2. Why React Dominates

• Ecosystem & Extensibility
  • React’s success is propelled by its vast library ecosystem and integration capabilities (Redux, React Router, GraphQL, etc.).
  • Its design—functional “components” mapping state and props to UI—is conceptually aligned with functional languages like Scala.
  • [04:49]
    Shadaj: “React lets you model your entire application as a function from properties... to HTML tree. Everything is defined as this function.”
• Declarative, Functional Paradigm

  • You declare what the UI should look like given the state, and React handles DOM updates.

  • The analogy: Kubernetes for infrastructure ("declare the end state"), React for UI ("declare what you want shown").

    [05:58]
    Adam: “In Kubernetes you don’t say ‘add one new node,’ you say ‘I would like three nodes.’ So you kind of describe the end state. React works the same way...”

3. React "State," API Calls, and JSX

• Local vs. Shared State
  • Components track their own local state; you interact with servers via event handlers (APIs), and React doesn’t care where the state comes from.
  • JSX:
    • While JSX (mixing markup into JavaScript) isn’t required, it’s often used and compiles to simple function calls.

4. Scala.js: Scala in the Browser

• Compiler from Scala to JavaScript
  • Scala.js lets you write (almost) regular Scala code, using its type-safe libraries and standard library, running in the browser.
  • Benefits: excellent type safety, access to both Java and Scala libraries, and advanced language features like macros.
  • [10:10]
    Shadaj: “By using scalajs you can write web applications with that type of safety...you can write web applications with that type of safety that, hey, if I'm doing a refactor, I'm not going to break someone else's code.”
• Why Not TypeScript?
  • TypeScript offers types atop JS but isn’t as strict, due to needing interoperability with untyped code (“any” escape hatch).
  • Scala’s type system is more rigorous, reduces silent errors, and lets you share code/models (e.g. validators, algorithms) between client and server.
  • [11:47]
    Shadaj: “One of the jokes you'll see on Twitter about TypeScript is the moment you do type any in TypeScript, you can do absolutely whatever you want. Scala doesn't let you do that.”

5. Introducing Slinky: Bridging Scala.js and React

• Goal:
  • Make the React-in-JavaScript experience available in Scala—matching the pragmatic, productive workflow of the React ecosystem for Scala users.
  • Slinky code closely resembles idiomatic React JS code, easing onboarding for JS-literate developers.
  • [14:41]
    Shadaj: “The idea is, can we create a way to write React applications in Scala while preserving all of these developer experiences that you have?”
• Interop:
  • Expose Scala components to JS (and vice versa); use existing React libraries (with static type annotations for props).
  • Mix and match JS and Scala-written React components easily in larger codebases.
  • [16:10, 16:50]
    Shadaj: “You can write a little bit of code in Scala, Export that to JavaScript code, and then use it in your regular JavaScript React code as if it was a regular component... Slinky provides this API called an external component, where all you have to do is say, here's which component I want to be talking to.”

6. Slinky Syntax and Design Philosophy

• Avoiding Obsolete Features
  • Chose not to use Scala's XML literals (although JSX is conceptually similar) due to compiler team plans and future compatibility.
• React’s “JavaScript First” Philosophy, Mirrored in Scala
  • Slinky encourages colocation of UI and code (vs. template-based separation), echoing React’s trend away from HTML templates toward component logic in code.
  • [21:35]
    Shadaj: “That's kind of the principle of React... all of your code is supposed to be JavaScript. So Slinky kind of mirrors that approach where it's Scala code with HTML mixed in.”

7. Parallels Between Scala and Modern JavaScript

• Functional and Typing Mindsets
  • Both Scala (for backend) and modern JS (frontend) are moving toward using more type safety and functional models.
  • Type inference in languages like Scala and TypeScript makes static typing less burdensome and more mainstream.

8. Real-World Use and Adoption of Slinky

• Early User: LearnRaga.com
  • Shadaj’s parents’ startup was the first adopter; also used internally at Oracle and by individual web developers.
  • Slinky supports React Native, making cross-platform mobile UIs possible in Scala.js too.

9. Open Source Vision and User Experience

• Keep Slinky Aligned with React
  • Minimal new abstractions—no “additive” APIs or builder-based deviations; instead, almost everything maps directly to a React JS concept.
  • [26:16]
    Shadaj: “The official tagline of Slinky is write React application in Scala just like you would in ES6.”
• Learning from Professional Experience
  • Inspiration for Slinky came from using React professionally at Khan Academy; aimed to bring that productive, hot-reload- and library-rich workflow into Scala.js.

10. Developer Experience and Tooling

• Hot Reloading
  • Slinky delivers fast, state-preserving code reloads during development, mirroring JS React workflows.
• Styled Components
  • Slinky allows CSS colocation via JS (“styled components”); a Scala interpolator API provides the same developer convenience.
• Starter Templates
  • Slinky offers a “Create React Scala App” command for easy project bootstrapping—mirroring React’s own starter tooling.

11. Shadaj’s Path and Motivation

• Background
  • Began programming at age 6 (Ruby, Python, then Scala), both parents are software engineers and early Scala adopters.
  • Developed Slinky in high school (open sourced junior year).
• Research Interests
  • Now at UC Berkeley, interested in programming-language theory and compilers (e.g., liquid types for more powerful type systems).
  • Sees PL research as a way to empower all software development by building better tools and abstractions.
  • [36:17]
    Shadaj: “Right now, I'm really excited about liquid types... can we go beyond types just declaring what type of data we have to runtime characteristics of the data?”

Notable Quotes & Memorable Moments

• On React’s design:
  [04:49]
  “React lets you model your entire application as a function from properties... to HTML tree. Everything is defined as this function.” – Shadaj

• On strict typing:
  [11:47]
  “TypeScript is kind of... a statically typed language, but it has this strong requirement of needing to be able to really easily interop with existing dynamically typed code. So one of the jokes you'll see... is the moment you do type any in TypeScript, you can do absolutely whatever you want. Scala doesn't let you do that.” – Shadaj

• On Slinky’s philosophy:
  [26:16]
  “The official tagline of Slinky is write React application in Scala just like you would in ES6.” – Shadaj

• On hot reloading:
  [30:44]
  “In JavaScript, with most application bundlers... you have hot reloading. So you modify a little chunk of your JavaScript, you save it, and by the time you go to your browser, your application will already be running the newer version. But it preserves all the state of your application.” – Shadaj

• On becoming a developer:
  [34:06]
  “I started programming when I was 6. So both of my parents are software engineers, so they got me into that groove very early on. I started with... simple Lego robots. My first programming language was Ruby.” – Shadaj

• On the future of type systems:
  [36:17]
  “Right now I'm really excited about liquid types... it's a way of can we go beyond types just declaring what type of data we have to runtime characteristics of the data.” – Shadaj

Timestamps for Important Segments

• [01:38] The shift in frontend development and why frameworks matter
• [04:49] What React actually is, and its functional programming underpinnings
• [09:35] Introduction to Scala.js and why you’d use it on the frontend
• [11:41] Comparing Scala.js to TypeScript from a type safety perspective
• [14:41] What Slinky is and why Shadaj built it
• [16:10] Mixing/matching between Scala and JS components in React
• [18:54] Implementing “Hello World” in Slinky vs. Vanilla React
• [21:35] Why Slinky doesn't use Scala’s XML literals
• [23:00] How Scala and React’s philosophies align
• [26:12] Slinky’s adoption and real-world usage
• [30:44] The importance of hot reloading and other React developer tooling
• [33:41] Slinky’s “Create React Scala App” for easy project bootstrapping
• [34:06] Shadaj’s early start in programming
• [35:04] Current interests: programming languages, research, and future plans

Tone and Style

The interview is technical but approachable, balancing explanations for those less familiar with React/Scala, while highlighting Shadaj’s passion and clear-sighted philosophy about developer experience and programming language design. The mood is curious, direct, and upbeat, with moments of humor and personal reflection woven in.

Conclusion

This episode provides a unique window into building software at the intersection of modern JavaScript frameworks and statically-typed functional programming, emphasizing pragmatic productivity and type safety. Listeners get both a technical primer on React, Scala.js, and Slinky, and a glimpse into how dedicated developers like Shadaj shape the future of web development and programming languages.