TS Congress

TypeScript Congress 2023

This Talk discusses TypeScript's migration to modules, the challenges faced, and the automation used for the migration. The TS Morph library and git are used for code transformation and managing changes. The final step involves converting TS dotted names to named imports. The migration to ESBuild brings benefits like faster development loop and improved import organization in TypeScript.

In TypeScript 5.0, the TypeScript toolchain migrated to modules. In this talk, we'll get deep in the weeds, discussing what "modules" even are (and how we somehow weren't using them), the specifics of the migration itself, how we managed to make the switch "mid-flight" on an actively-developed project, how the migration went, and what's next.

Migrating TypeScript to Modules: The Fine Details

Jake Bailey

Vue.js Live Conference

Vue.js London 2023

Nuxt.js modules are a central part of Nuxt and have had 14 million downloads. Creating Nuxt modules is easy with Nuxt 3. Modules can provide assets, CSS injection, plugins, and auto imports. Learning Nuxt modules gives a deeper understanding of Nuxt and extends its functionalities. The Nuxt community is friendly to newcomers and encourages module creation.

Nuxt modules are the de-facto way of extending our Nuxt applications with new behaviors and functionalities. Have you ever built your own? Why would you bother with hundreds of modules already out there? Let's answer those questions together and see why making your own modules in Nuxt 3 can both help you have a deeper understanding of how Nuxt works while also paving the way for you to get into open source!

Nuxt 3 Modules and Open-Source

Lucie Haberer

React Advanced

React Advanced 2022

Hello everyone, my name is Wojta Mikšu. I work at Uber as a web infrastructure engineer. Today, I will tell you about a new open tool that supercharges developing and testing your React components. This talk covers the history of JavaScript modules, the introduction of Vite and Ladle, and future predictions. Ladle is an open-source tool built on top of Vite for developing and testing React components through stories. It offers features like different viewports, component variations, event handler logging, theme switching, and more. Ladle has received positive feedback and shows improvements in dev server startup and hot module replacement.

The bigger they are, the slower it gets. I am talking about your applications and the bundling process. Fortunately, there might a be better future - the one without bundlers. This talk will be about JavaScript modules, Vite and how we built Ladle - a speedy tool for your React stories.

Ladle: The Story About Modules and Performance

Vojtech Miksu

JP Morgan is using modern web technologies like the UITK and Modular to address challenges in their large-scale development environment. They employ micro front-ends with ES modules for dynamic loading and sharing theming using CSS variables. The applications are built using modular, which allows for scaffolding and creating new applications from templates. They rely on an opinionated approach to app creation and use a CDN for efficient deployment and caching. The host application handles user authentication and communication between micro front-ends, while platform services like authorization and authentication are provided by the digital platform.

A look at the open source tooling created by the UI Engineering group at JP Morgan to streamline the developer workflow of building and deploying apps in isolation while still delivering a single unifying micro-frontend based portal to the end user, leveraging the use of native support for ES module imports in the browser.

Using ES Modules Based Micro-Frontends to Enable Distributed Development

Steve King

JS Nation

JSNation 2022

This workshop on micro-frontends covers topics like dependencies, communication between federated modules, team organizations, and code sharing. It emphasizes the benefits of module federation and micro-frontends in enabling continuous operation and collaboration. The workshop provides practical examples and discusses the challenges of managing breaking changes and handling conflicts. It also explores the use of React as a view rendering library and the importance of sharing data and controlling communication between feature apps.

Discover Micro Frontends with Module Federation. Learn about the benefits and pitfalls so you can decide whether Micro Frontends are a good fit for your organization.

Is Module Federation Right for You?

Grgur Grisogono

This Talk discusses JavaScript modules from the perspective of a browser, exploring how they work and their differences from common JS. It covers topics such as loading modules, module records, and the module map. The module loading and evaluation process is explained, along with the challenges of module adoption and performance. The Talk also touches on lazy loading, dynamic import, and import reflection. The speaker shares a humorous anecdote during the Q&A session about stealing a shirt from the DOM team.

Modules are a popular tool for JavaScript Developers. Recently, there have been a number of proposals touching on how Modules work, including Import Maps, Top level await, JSON modules, Module asserts, and many others. But how does the module loading system work, and how do these proposals augment it? What does it look like from the browsers perspective to load a module tree with an import map? We will explore these questions and more, giving you a behind the scenes look at module loading in JS.

How JS Modules work: a Browser Perspective

Yulia Startsev

TypeScript Congress 2022

Deno is a modern runtime for TypeScript and JavaScript that runs out of the box and is secure by default. The Talk covers building a greeting message library with Deno, compiling Deno libraries for Node consumers, setting up the editor and writing code, writing tests and running them with dnotest, code formatting, linting, and publishing, publishing to NPM and running tests, and building and publishing the NPM package. The speaker emphasizes the ease of use and integration of Deno's tooling system.

This talk will walk you through writing a module in TypeScript that can be consumed by users of Deno, Node, and browsers. I will walk through how to set up formatting, linting, and testing in Deno, and then how to publish your module to deno.land/x and npm. I will also start out with a quick introduction on what Deno is.

#modules