StackBlitz, whose WebContainer product enables a Node.js server to run in WebAssembly within the browser for development, has added alpha support for Firefox – alongside existing support for Chromium-based browsers – as well as a private preview of a headless API that enables a custom UI with a WebContainer behind the scenes.
Traditional web development means a PC with a web server, database, debugging tools, and a host of dependencies. This approach is still common, but can no longer be assumed. Development environments can now be containerised, either to run locally, or remotely.
Hybrid environments are common, for example with Visual Studio Code running locally but supported by remote components accessed over ssh (Secure Shell), so that the code and the build process runs on a remote machine. Platforms like GitPod and GitHub Codespaces take this further, with remote containers and code editing in the browser, enabling zero install development from anywhere.
StackBlitz WebContainers represent a return to development on the local machine, but with a difference: everything runs in the browser, including the web server and the build tools.
The project was first previewed at the Google I/O event just over a year ago, with support from Vercel’s Next.js as well as Google. The introductory post stated that the WebContainer approach is faster, better integrated with Chrome developer tools, and more secure because “all code execution happens inside the browser’s security sandbox.” WebContainers include a “virtualized TCP network stack that’s mapped to your browser’s ServerWorker API,” the team explained, giving even lower latency than a server on localhost.
Supported frameworks now include Next.js, React, Angular, and Vue 3, with backends such as Express, GraphQL and json-server, all based on Node.js. The code editor is VS Code and TypeScript as well as JavaScript can be used.
Node.js uses the Chromium V8 JavaScript engine, so the fact that WebContainers only worked on Chromium-based browsers like Chrome and Edge was not a surprise. That has now changed, with the alpha release of StackBlitz for Mozilla Firefox. Getting there was a considerable effort, according to the team, thanks to dependency on a custom stack tracing PI in V8 as well as needing support for cross origin isolation, required for secure use of SharedArrayBuffer, to share memory. The porting exercise revealed bugs in both Firefox and in WebContainers, according to the post.
WebContainers may be ideal for security, but currently are only suitable for a subset of developer requirements. According to Rich Harris, author of rollup.js and creator of the Svelte JavaScript framework, they are however ideal for one particular niche: tutorials. “Running servers is expensive, so you need to have an authentication barrier. We don’t want the latency that’s involved in starting a server. We want to minimise our dependency on third parties that could suffer outages or change their terms of service,” he said, speaking at the JSNation JavaScript developer event in June.
In order to make WebContainers work for this though, Harris needed a new feature – a headless API. “We want to have more control over the user interface,” he said. “Wouldn’t it be great if we could take the underlying Webcontainer technology and use it headlessly inside our own page? That’s exactly what we did,” he said, introducing learn.svelte.dev as a tutorial.
“What’s happening is we’ve gone to the Vercel edge network, downloaded the app, and that has gone and downloaded Node, installed SvelteKit and its dependencies like Vite and esbuild, we’ve written our application to the file system and we’ve started a Vite dev server, and this normally happens in the space of a few seconds.
“I know of at least two other frameworks who have started working on something very similar. I would expect this to become the norm of how we learn full stack tools very soon,” he said.
from Web Development – My Blog https://ift.tt/V8jJCwm
via IFTTT
