JSR: Registro JavaScript de próxima generación

Rate this content
Bookmark

JSR, un registro de paquetes moderno para JavaScript y TypeScript, está diseñado para ser rápido, simple, confiable y funcionar en múltiples entornos de ejecución de JavaScript. Ven y aprende cómo el uso de JSR puede simplificar tu experiencia como desarrollador.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Leo Kettmeir
Leo Kettmeir
6 min
13 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

JSR es un nuevo registro de JavaScript que admite TypeScript y ofrece características adicionales como integración con GitHub Actions, atestaciones de procedencia y generación de documentación. Proporciona un sitio web simple con búsqueda de paquetes, documentación y una puntuación gamificada. El proceso de publicación de un nuevo paquete en JSR implica crear un archivo JSR.json con los detalles y exportaciones del paquete, usar MPX JSR publish para publicar el paquete y aprobar la autorización en el navegador. Sin embargo, la documentación del paquete no se genera automáticamente y debe agregarse manualmente.

1. Introducing JSR and its Features

Short description:

Hoy, estaré presentando JSR una vez más. Es un nuevo registro de JavaScript, similar a npm, pero con soporte para TypeScript de forma nativa. Creamos JSR debido a la complejidad de npm. Npm no está innovando en absoluto. Tenemos características adicionales como integración con GitHub Actions, certificaciones de procedencia y generación de documentación. Echemos un vistazo a JSR en sí, un sitio web simple con búsqueda de paquetes, documentación y una puntuación gamificada. Publiquemos un paquete.

Hoy, estaré presentando JSR una vez más. Soy Leo, trabajo en Deano, trabajo en JSR, generación de documentation y APIs web. ¿Qué es JSR? Es un nuevo registro de JavaScript, similar a npm, pero con soporte para TypeScript de forma nativa. No es necesario configurar TSC, solo subes TypeScript y genera los archivos por ti. Sin embargo, no reemplaza a npm. Está construido sobre él. Aún puedes usar paquetes de npm junto con él. Es compatible con diferentes entornos de ejecución, ya sea Node, Deano, trabajadores de Cloudflare, siempre que admitan módulos de Node, funciona. Lo mismo ocurre con los administradores de paquetes, npm, pm, pm, yarn, y más. Siempre que admitas módulos de Node, funcionará sin problemas. Entonces, ¿por qué creamos JSR? Es debido a la complejidad de npm. Como se mencionó, TypeScript se está volviendo complicado, pero todos lo usan hoy en día, entonces, ¿por qué npm no lo adopta? La solución fue crear una alternativa basada en él. Npm no está innovando en absoluto. Sin soporte para TypeScript, ha realizado muy pocos cambios y parece estar orientado más hacia el ámbito empresarial, pero nada para el ecosistema de código abierto. Nuestros valores son que JavaScript es uno que avanza rápidamente y, nuevamente, npm no lo hace realmente. La razón por la que creamos esto es porque npm no está avanzando. Algunas características adicionales de npm son que tenemos integración directa con GitHub Actions, por lo que, a través de tokens YDC, puedes ejecutar npm JSR publish y se publicará automáticamente. No necesitas poner ningún token, solo autentica que eres tú. Tenemos certificaciones de procedencia que, si usas GitHub Actions, generará certificaciones de procedencia para ti, lo que demuestra aún más que publicaste el paquete y que eres el verdadero autor, y no hay un intermediario con algún tipo de token robado, etc. La generación de documentation es que JSR genera documentación para todas tus APIs directamente para ti. No necesitas configurar TS docs u otra herramienta de generación de documentation. Lo hace directamente por ti. Entonces, hora de la demostración. Esto va a ser interesante. Echemos un vistazo a JSR en sí. Es un sitio web simple. Podemos buscar un paquete, hacerlo más grande y es un paquete middleware popular similar a express del ecosistema de npm. Tiene un archivo readme, puedo hacer clic en los docs, tiene algunos tipos exportados, clases, interfaces, etc., y más documentation, los parámetros de tipo, propiedades, métodos, toda la información diferente que uno necesitaría de un paquete está incluida. También tenemos una puntuación pequeña pero interesante porque a la gente le encanta gamificar las cosas. Publiquemos un paquete, ¿de acuerdo? Así que estamos aquí, en un directorio vacío, nada especial que ver, y simplemente crearemos, en realidad, vayamos al navegador, déjame iniciar sesión rápidamente.

2. Publishing a New Package in JSR

Short description:

Vamos a publicar un nuevo paquete en JSR. Crea un archivo JSR.json con los detalles del paquete y las exportaciones. Exporta una función que imprime un mensaje de bienvenida. Usa MPX JSR publish para publicar el paquete. Aprueba la autorización en el navegador. El paquete se publica, pero no se encuentra documentación. La función hello se puede encontrar en la documentación actual.

Y vamos a la página principal, y vamos a publicar un nuevo paquete. Así que voy a seleccionar mi propio alcance, o puedes crear uno nuevo si quieres, pero ya tengo el mío. Y simplemente creemos JS nation, y está disponible. Genial. Entonces, ¿cómo publicar? Simplemente copiaremos este JSR.json, o también puedes especificar manualmente el archivo que deseas, el archivo de configuración, pero por ahora, simplemente creamos JSR.json, y eso contiene el nombre del paquete, incluyendo el alcance, porque en JSR todo está acotado, tenemos la versión y las exportaciones. Para este ejemplo, llamémoslo index.ts. Esto podría ser un objeto, clave por valor, y la clave a la que deseas asignar, y vamos a crear un archivo TypeScript, index, y exportemos una función. Hola. ¿Por qué no? Y toma un año. Eso es un número. Y simplemente console.log hola JS nation, y pasemos ese año. Agreguemos también alguna documentación. Tenemos el cuerpo de la función actual que genera un mensaje de bienvenida. Digamos imprime. Imprime un mensaje de bienvenida, y un año, el año para dar la bienvenida. Muy bien, entonces. Simplemente MPX JSR publish, y esperemos que funcione. Primero tiene que descargar JSR en sí, y abre el navegador para aprobar la autorización porque no se pasan tokens con la CLI en sí. Y aprobamos. Hace algo de magia detrás de escena. Y se publica. Ahora dice que no se encontró documentación porque no agregamos un readme de ningún tipo, pero si voy a la documentación actual, y voy a la función hello en la exportación predeterminada, tenemos imprime un mensaje de bienvenida con el año, especificando el tipo y el comentario que dejamos anteriormente, y devuelve nada, obviamente. Sí, eso es prácticamente todo. Muchas gracias.

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

Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
TypeScript Congress 2023TypeScript Congress 2023
31 min
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
Top Content
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.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.
Compilaciones de TypeScript más rápidas con --isolatedDeclarations
TypeScript Congress 2023TypeScript Congress 2023
24 min
Compilaciones de TypeScript más rápidas con --isolatedDeclarations
Top Content
This talk discusses the performance issues in TypeScript builds and introduces a new feature called isolated declarations. By running the compiler in parallel and using isolated modules, significant performance gains can be achieved. Isolated declarations improve build speed, compatibility with other tools, and require developers to write types in code. This feature has the potential to further increase performance and may be available in TypeScript soon.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Featured Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Building Your Own Custom Type System
React Summit 2024React Summit 2024
38 min
Building Your Own Custom Type System
Featured Workshop
Kunal Dubey
Kunal Dubey
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side. 
Frictionless Development With Unified Type System
JSNation 2024JSNation 2024
113 min
Frictionless Development With Unified Type System
Featured Workshop
Ejiro Asiuwhu
Ejiro Asiuwhu
Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.