#710 — October 24, 2024
Together with
JavaScript Weekly
Svelte 5 is Alive — The long awaited next major release of Svelte, the compiler-driven JS UI framework, is the “most significant release in the project’s history”, while remaining largely backwards compatible. A big addition is runes for explicitly declaring reactive state, but there’s much more besides. The official svelte.dev site has also undergone a big rebuild to act as an ‘omnisite’ for all things Svelte.
The Svelte Team
📺 If you want to see how to use Svelte 5, Syntax’s Scott Tolinski has released ▶️ a 2 hour Svelte 5 basics course on YouTube.
FlexGrid by Wijmo: The Industry-Leading JavaScript Datagrid — A fast and flexible DataGrid for building modern web apps. Key features and virtualized rendering are included in the grid module. Pick and choose special features to keep your app small. Built for JavaScript, extended to Angular, React, and Vue.
Wijmo From MESCIUS inc sponsor
GenAIScript: Microsoft’s Generative AI Scripting Environment — Microsoft is really poking at AI from all angles. TypeChat introduced a type-safe way to talk to LLMs; now GenAIScript offers a JavaScript-powered way to programmatically assemble prompts and process responses. They claim it “brings essential LLM prompt tooling into a cohesive scripting environment.”
Microsoft
Next.js 15 Released — It’s a big week for the popular (some may even argue default) React framework with Next.js Conf starting today, as well as this release. It includes a codemod CLI for easier upgrading, async request APIs, alignment with React 19, and more.
Vercel
IN BRIEF:
-
Developer IDE firm JetBrains has announced its WebStorm JavaScript/TypeScript IDE is now free for non-commercial use which, notably, also covers paid content creators.
-
The popular
shadcn/uicomponent library has unveiled a new suite of components for building sidebars. -
⌚ Spectra is a hackable smartwatch seeking funding on Kickstarter (but it has passed its initial goal). ESP32-S3 based, it appears able to run JavaScript as shown in the ‘dev experience’ screenshots.
-
🙋 This year’s State of React survey is now open to take until November 19.
RELEASES:
-
⚛️ React Native 0.76 – A big release. The so-called ‘New Architecture’ is now used by default (so you can now use all the modern React features in RN too), the React Native DevTools are stable, and build times are faster than ever.
-
🥖 Bun is on a roll.. with three releases in the past week. v1.1.31 added support for
node:http2server and gRPC, v1.1.32 added Node’scrypto.hashmethod, and v1.1.33 was a bug-fix release. -
Express.js 5.0 – Landed a few weeks ago, but now there’s an official post explaining the state of the project which has now passed a comprehensive third party security audit.
-
Medusa 2.0 – A Node.js-powered ecommerce platform.
-
React Compiler Beta, Turborepo 2.2, ESLint v9.13.0, Deno 2.0.2
📒 Articles & Tutorials
▶ Build a Sonic Infinite Runner Game Using Kaplay — A two hour walkthrough of using the Kaplay game library (formerly known as Kaboom.js) to build a complete, if simple, Sonic-branded game. You can also play it here.
JSLegendDev
New Wallaby 2.0 - Works with All Editors - A Massive Step Forward for JavaScript Testing — Experience faster JavaScript debugging, real-time insights, & enhanced coverage monitoring with Wallaby 2.0’s integrated UI.
Wallaby Team sponsor
Why I’m Skeptical of Rewriting JavaScript Tools in “Faster” Languages — Rewriting common JS infrastructure / build tools in ‘faster’ languages like Rust, Zig or Go has become popular in recent years, but is it necessary, asks Nolan?
Nolan Lawson
How to Create a Modern SPA with Django and Vue — If you can handle some Python in your life, Django is a powerful backend web framework and it’s quite happy to be paired up with a Vue.js frontend with GraphQL providing the glue.
The Dev Space
Learn How to Build a Full Stack Application Using React Native & Expo — Build a cross-platform full-stack app using a single codebase with scalable backend support and authentication.
Clerk sponsor
📄 Creating a 3D Hand Controller Using a Webcam, MediaPipe and Three.js Caio Bassetti
📄 How To Speed Up Your Vue App with Server Side Rendering Jakub Andrzejewski
📄 Angular’s Approach to Partial Hydration Loraine Lawson (The New Stack)
📄 Understanding npm audit and Fixing Vulnerabilities Niraj Chauhan
📄 Building a Mental Model of Node.js Streams Pavel Romanov
🛠 Code & Tools
match-sorter 7.0: Deterministic Best-Match Array Sorting — If you have an array of items you want to filter and sort ‘intelligently’ and deterministically, this offers a well-described, predictable algorithm. Play with a live CodeSandbox demo.
Kent C. Dodds
🤖 Transformers.js v3: Run Transformers in the Browser — A JS port of Hugging Face’s transformers Python library that can run natural language, vision, and audio machine learning models right in the browser. v3 adds WebGPU support for boosted performance and now supports Node, Deno and Bun too.
Hugging Face
Build Forms from JSON Using Drag & Drop UI — SurveyJS Libraries for Surveys & Forms — Integrate a JSON form editor with any backend. Enjoy complete control over your data with unlimited users and forms — no restrictions.
SurveyJS sponsor
Fetch Mock 12.0: Mock Requests by the fetch API — A flexible API for mocking HTTP requests made by fetch or fetch-imitating libraries. Supports browsers, Node, and web/service workers.
Rhys Evans
📊 Vizzu 0.14: A Library for Animated Data Visualizations — Making visualizations is one thing; animating them is much harder. Vizzu helps you create animated data stories and interactive explorers with a variety of showcase examples for inspiration.
Vizzu Inc.
eslint-plugin-functional: Rules to Promote Functional Programming — This isn’t for me, but if you want to encourage (or even force) a lack of mutation and a use of FP techniques in your codebase, this could be for you.
Jonas Kello
Radix Vue: Unstyled, Accessible Components for Vue.js — An unofficial Vue port of the popular Radix UI component library. GitHub repo.
zernonia et al.
-
Edge.js v23 – Run .NET and Node.js code in one process on Windows, macOS and Linux.
-
✂️ Knip 5.34.0 – A neat way to find and tidy unused stuff in your projects.
-
🧊 PlayCanvas glTF Viewer 5.0 – 3D model viewer supporting glTF 2.0 and PLY.
-
🗓️ React Date Picker 7.5 – Simple date picker component. (Demo.)
-
🤖 ml.js 8.0 – Machine learning tools in JavaScript.
-
MDX 3.1 – Write JSX in your Markdown documents.
📰 Classifieds
Meticulous automatically creates & maintains E2E UI tests. Zero flakes. Used by Lattice, Bilt Rewards and others.
SupaHooks: An Outbound Webhooks Template for Next.js.
⚙️ Create entire web apps with Reactile and let it handle your widgets and windows within a single browser tab. 1-month free trial. Try it now.
Published by Cooperpress and edited by Peter Cooper
‘JavaScript’ is a trademark of Oracle Corporation in the US
We are not endorsed by or affiliated with Oracle.
#710 — 2024 年 10 月 24 日
连同
[](https://javascriptweekly. com/link/161398/d076523b1d)
JavaScript 周刊
Svelte 5 is Alive — 期待已久的 [Svelte] 的下一个主要版本(https://javascriptweekly.com/link/161452/ d076523b1d) 是编译器驱动的 JS UI 框架，是“项目历史上最重要的版本”*，同时在很大程度上保持向后兼容。一个重要的补充是 runes 用于显式声明反应状态，但除此之外还有更多。](https://javascriptweekly.com/link/161453/d076523b1d) 官方 [svelte.dev](https://javascriptweekly. com/link/161452/d076523b1d) 网站也经历了一次大重建，以充当所有 Svelte 事物的“全能网站”。
苗条的团队
📺 如果您想了解 如何 使用 Svelte 5，Syntax 的 Scott Tolinski 在 YouTube 上发布了 ▶️ 2 小时 Svelte 5 基础知识课程 。
Wijmo 的 FlexGrid：业界领先的 JavaScript 数据网格 — 用于构建现代 Web 应用程序的快速灵活的数据网格。网格模块中包含关键功能和虚拟化渲染。选择特殊功能以保持您的应用程序较小。专为 JavaScript 构建，并扩展到 Angular、React 和 Vue。
Wijmo 来自 MESCIUS 公司赞助商
GenAIScript：微软的生成式人工智能脚本环境 - 微软确实从各个角度研究人工智能。 TypeChat 引入了一种与 LLM 交谈的类型安全方式；现在 GenAIScript 提供了一种基于 JavaScript 的方式来以编程方式组装提示和处理响应。他们声称它*“将基本的法学硕士提示工具带入一个有凝聚力的脚本环境中。”*
微软
Next.js 15 发布 — 对于流行的（有些人甚至可能认为默认）React 框架来说，这是重要的一周。 Node.js Conf](https://javascriptweekly.com/link/161459/d076523b1d) 从今天开始，以及此版本。它包括一个更容易升级的 codemod CLI、异步请求 API、与 React 19 的一致性等等。
韦尔塞尔
简而言之：
-
开发 IDE 公司 JetBrains 宣布其 WebStorm JavaScript/TypeScript IDE [现在免费用于非商业用途](https://javascriptweekly.com /link/161402/d076523b1d) 值得注意的是，它还涵盖付费内容创作者。
-
流行的
shadcn/ui组件库推出了一套用于构建侧边栏的新组件。 -
⌚ Spectra 是一款可破解的智能手表，正在 Kickstarter 上寻求融资（但它已经超过了最初的目标）。它基于 ESP32-S3，似乎能够运行 JavaScript，如“开发体验”屏幕截图所示。
-
🙋 今年的 React 现状 调查 现已开放，截止日期为 11 月 19 日。
发布：
-
⚛️ React Native 0.76 – 一个“大”版本。现在默认使用所谓的“新架构”（因此您现在也可以使用 RN 中的所有现代 React 功能），React Native DevTools稳定，并且构建时间比以往更快。
-
🥖 Bun 正在滚动..，在过去一周发布了三个版本。 v1.1.31 添加了对
node:http2服务器和 gRPC 的支持，[v1.1.32](https://javascriptweekly.com/link/161410/ d076523b1d) 添加了 Node 的crypto.hash方法，并且 v1.1.33 是一个错误修复版本。 -
Express.js 5.0 – 几周前发布，但现在有一篇官方帖子解释了该项目的状态，该项目现已通过了综合第三方安全审核。
-
Medusa 2.0 – 一个 Node.js 支持的电子商务平台。
-
React 编译器 Beta、Turborepo 2.2、[ESLint v9.13.0](https ://javascriptweekly.com/link/161415/d076523b1d), Deno 2.0.2
📒 文章和教程
▶ 使用 Kaplay 构建 Sonic Infinite Runner 游戏 — 使用 Kaplay 的两小时演练.com/link/161418/d076523b1d）游戏库（以前称为 Kaboom.js），用于构建完整的（如果简单的）索尼克品牌游戏。您也可以在此处播放。
JSLegendDev
新 Wallaby 2.0 - 适用于所有编辑器 - JavaScript 测试向前迈出了一大步 — 体验更快的 JavaScript 调试、实时洞察和通过 Wallaby 2.0 的集成 UI 增强了覆盖范围监控。
小袋鼠队赞助商
为什么我对用“更快”的语言重写 JavaScript 工具持怀疑态度 — 用“更快”的语言重写常见的 JS 基础设施/构建工具，例如诺兰问道，Rust、Zig 或 Go 近年来变得流行，但有必要吗？
诺兰·劳森
如何使用 Django 和 Vue 创建现代 SPA — 如果您能在生活中使用一些 Python，[Django](https ://javascriptweekly.com/link/161423/d076523b1d）是一个强大的后端 Web 框架，它很高兴与 Vue.js 前端配合使用 GraphQL 提供粘合剂。
开发空间
了解如何使用 React Native 和 Expo 构建全栈应用程序 — 使用单个应用程序构建跨平台全栈应用程序具有可扩展后端支持和身份验证的代码库。
文员赞助人
📄 使用网络摄像头、MediaPipe 和 Three.js 创建 3D 手部控制器 Caio Bassetti
📄 如何通过服务器端渲染加速 Vue 应用程序 Jakub Andrzejewski
📄 Angular 的部分水合方法 Loraine Lawson（新堆栈）
📄 了解“npm 审核”并修复漏洞 Niraj Chauhan
📄 构建 Node.js 流的心理模型 Pavel Romanov
🛠 代码和工具
match-sorter 7.0：确定性最佳匹配数组排序 — 如果您有一个项目数组，想要“智能”地过滤和排序确定性地，这提供了一种描述良好、可预测的算法。玩一下现场 CodeSandbox 演示。
肯特·C·多兹
🤖 Transformers.js v3：在浏览器中运行 Transformers — Hugging Face 的 transformers Python 库的 JS 端口，可以运行自然语言、视觉和音频机器学习模型就在浏览器中。 v3 添加了 WebGPU 支持以提高性能，现在也支持 Node、Deno 和 Bun。
抱脸
使用拖放 UI 从 JSON 构建表单 - 用于调查和表单的 SurveyJS 库 - 将 JSON 表单编辑器与任何后端集成。通过无限的用户和表单，完全控制您的数据——没有任何限制。
SurveyJS 赞助商
Fetch Mock 12.0：通过 fetch API 进行模拟请求 — 一个灵活的 API，用于模拟 fetch 发出的 HTTP 请求 或模仿 fetch 的库。支持浏览器、节点和网络/服务工作人员。
里斯·埃文斯
📊 Vizzu 0.14：动画数据可视化库 — 制作可视化是一回事；制作可视化是一回事；为它们设置动画要困难得多。 Vizzu 通过各种展示示例 帮助您创建动画数据故事和交互式探索器以获取灵感。
维祖公司
eslint-plugin-function: 促进函数式编程的规则 — 这不适合 我，但如果你想鼓励 (甚至强制）在你的代码库中缺乏突变和使用 FP 技术，这可能适合你。
乔纳斯·凯洛
Radix Vue：Vue.js 的无样式、可访问组件 — 流行的 [Radix UI]( 的非官方 Vue 端口)( https://javascriptweekly.com/link/161439/d076523b1d）组件库。 GitHub 存储库
泽尔尼亚等人
-
Edge.js v23 – 在 Windows、macOS 和 Linux 上的一个进程中运行 .NET 和 Node.js 代码。
-
✂️ Knip 5.34.0 – 一种查找和整理项目中未使用内容的巧妙方法。
-
🧊 PlayCanvas glTF Viewer 5.0 – 支持 glTF 2.0 和 PLY 的 3D 模型查看器。
-
🗓️ React Date Picker 7.5 – 简单的日期选择器组件。 （演示。）
-
🤖 ml.js 8.0 – JavaScript 中的机器学习工具。
-
MDX 3.1 – 在 Markdown 文档中编写 JSX。
📰 分类广告
Meticulous 自动创建和维护 E2E UI 测试。零片。由 Lattice、Bilt Rewards 等公司使用。
SupaHooks：Next.js 的出站 Webhooks 模板。
⚙️ 使用 Reactile 创建整个 Web 应用程序，并让它在单个浏览器选项卡中处理您的小部件和窗口。 1 个月免费试用。 立即尝试。
由 Cooperpress 出版，由 Peter Cooper 编辑
“JavaScript”是 Oracle Corporation 在美国的商标
我们未获得 Oracle 的认可或隶属于 Oracle。
发布者