Making Magic: Building a TypeScript-First Framework

Rate this content
Bookmark

I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.

Daniel Roe
Daniel Roe
31 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.

1. Introduction and Background

Short description:

Daniel Rowe, NUXT maintainer and open-source library author, discusses building a TypeScript-first framework at TypeScript Congress. He shares his involvement in various projects, such as Fontane, Magic Regular Expressions, and Elk. Daniel invites the audience to connect with him on his website at roe.dev and offers assistance with questions, help, and open source contributions. He also mentions his location in the UK and the unpredictable weather.

How TypeScript Works Hello. It's a real pleasure to be here at TypeScript Congress talking about making magic, building a TypeScript-first framework. My name is Daniel Rowe. I'm an open-source library author and maintainer of NUXT, which is a framework for building web applications. I'm also involved in some other things from Fontane, which helps reduce cumulative layout shift with custom web fonts, to Magic Regular Expressions, which is a re-imagination of what projects could be like, based heavily on TypeScript magic, to Elk, which is a client for Mastodon, a distributed social network. I'm also a Google GDE and a Microsoft MVP. You can get in touch with me on my website at roe.dev. If there's anything that I can help you with, I would love to. I'm accessible if you have questions, or you need help, or you want to contribute to open source. For whatever reason, it would be really nice to say hi. I live in the UK, in the northeast of England, in a lovely rural setting, by the banks of a river, in the shadow of an ancient forest. I have three cats and a dog, and this is where I am right now. And probably, when you get in contact or send me a message, you'll find me in this exact kind of situation. It's been raining a little bit today, but it's also sunny. So that's a pretty good indication of UK weather, if you're not familiar with it.

2. Nuxt Framework and TypeScript Integration

Short description:

Nuxt is a progressive framework built on Vue.js, providing a seamless developer experience with best practices and configurability. The goal is to reduce friction and distraction, allowing developers to focus on their code. The use of TypeScript at a core level aims to enhance this experience, with a focus on being the source of truth, leveraging inference, enabling augmentation, and revealing project truth to the end user.

And you're probably wondering what is Nuxt, if you haven't come across it before. It's a progressive framework built on Vue.js. Vue is the rendering layer for the front end, but it's full stack. So it also has a server engine called Nitro, which is now a framework of its own and used by other meta-frameworks as well.

One of the key things for Nuxt is the developer experience. So it's all about making something that is easy to use, that has best practices built in, but doesn't impose a high barrier to entry, but at the same time is configurable and allows you to extend it as you need, as you grow and have different requirements, it should grow with you.

A few years ago, we started to rebuild Nuxt. And one of the things that we worked on that we wanted to do was think about how we could make Nuxt even more magical. And I think magic is a really important characteristic of a framework that I would want to use. I know sometimes it can be used in a pejorative sense, but I think magic is something that we want in terms of developer experience. And for me, it's really these two qualities. It's about reducing friction, keeping you in a single context, and about reducing distraction. So, adopting a more minimalistic principle.

So, wherever you switch context, if you're a developer and you're writing code, ideas are flowing through you and out, if there's something that stops you from that, whether that's you have to go to the documentation to find out something, or you need to check in another part of your project to understand whether you can do what you're trying to do, that is going to slow you down and create a feeling of frustration. And the same is true, I think, with distraction. So, when you find yourself having to maintain complex bundler configuration or to repeat code over and over again, even when you open a new component and you see 20 lines of imports at the top before you even see the code that you want to look at, all of that, I think, can get in the way of flow, state, something that makes you feel productive and to enjoy and flourish in what you're doing. And so I think magic is one of the things that we can do, can provide us framework offers that can dramatically improve the experience of developers.

So, when we came, as I was saying, to rebuild Nuxt from the ground up, for us, it was about thinking, how can we use TypeScript to make this kind of magic? Because building the framework, writing it in TypeScript is pretty much table stakes. But what could we do if we aimed to have TypeScript built in at a much more core level for the framework itself to be TypeScript native? And I came up with these four different possibilities, and you might have others, and more might go to me later. But I thought these would be helpful guide to go through. And the first is that it has to be designed to be the source of truth in a project. The framework needs to be designed for inference, so it takes best advantage of TypeScript to do what it can do. It needs to be designed for augmentation. And it needs to be designed to reveal all of the truth of the project as much as possible to the end user. So, what do I mean? First, designed as a source of truth. So, the moment you clone a new project in any framework, often you'll find that there's a page in the documentation called using with TypeScript. And in this page, there's then a tsConfig. And you can go to the page and copy and paste it into your project. Or maybe you have a template where it's already there. And from that moment on, your TypeScript config starts to diverge from the reality of the library.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Workshops on related topic

React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.