This post was first published on Frontend Nation’s blog. You can read the original here.
In anticipation of Frontend Nation starting June 4th, we caught up with Jòan Varvenne, a seasoned software engineer with a passion for front-end development. In this interview, Jòan shares his expertise on WebContainers, performance optimization, security considerations, and his vision for the future of web development.
Here are the highlights of our talk.
Ana Marija Majkić (AMM): Tell us a bit about your background.
Jòan Varvenne (JV): Sure, I’ve been a software engineer for the past decade, focusing on front-end development for the last seven years. Recently, I joined StackBlitz’s WebContainer team, but I’m still very much a front-end developer at heart, albeit in a slightly different role.
AMM: How does one make sure running an application in a WebContainer provides good performance?
JV: That’s a great question. Since a WebContainer is essentially a Node.js runtime, applications with good Node.js performance will likely perform well within a WebContainer, especially on Chrome due to their identical JavaScript engine (V8). However, spawning processes inside the container can be memory-intensive, so avoid creating excessive processes. Similarly, be mindful of Node workers. Ultimately, testing within a WebContainer is the best way to assess performance. You can easily try this out on StackBlitz.
AMM: How does WebContainers compare to Docker and other virtual machines?
JV: The answer depends on the perspective. From a server standpoint, virtual machines or Docker containers are more suitable because web browsers are typically absent on servers. However, for end-user development environments, WebContainers shine. Everyone has a web browser, making them readily available.
WebContainers differ from traditional software environments. Virtual machines are ideal for security researchers studying malware due to their isolated execution environment. However, VMs are resource-intensive and can be slow.
Docker containers offer a lightweight and faster alternative to VMs for setting up development environments. However, performance on non-Linux systems, particularly Mac OS, can be hindered.
WebContainers run entirely within the web browser, eliminating installation needs and offering fast boot times (in seconds) compared to Docker’s potential wait times for base image downloads. Security-wise, WebContainers leverage the web browser’s built-in sandboxing capabilities, providing a good balance between security and ease of use.
AMM: Are there security considerations when using WebContainer APIs for web application deployments?
JV: It’s important to be mindful of security when using WebContainer APIs. While StackBlitz allows safe execution of untrusted code, greater responsibility comes with WebContainer APIs. The interface for embedding and communication with the WebContainer instance is crucial. Spawning processes within the container and receiving responses can introduce XSS attack risks if not handled properly. Malicious users could potentially craft data to run inside the container and steal sensitive user information if the communication channel is flawed. However, for playgrounds or environments without sensitive data, security concerns are minimal. This is why StackBlitz avoids features like query parameters in URLs that could be exploited for phishing attacks.
AMM: What is your biggest passion as a developer?
JV: I am fascinated by understanding how things work. Joining StackBlitz and working with WebContainer has been amazing in this regard. It’s been a journey of learning about the challenges they address and the ongoing efforts to improve them. Besides that, I enjoy finding simple solutions to complex problems. WebContainer development often involves this approach, where we might consider alternative solutions that are “good enough” but simpler to maintain compared to complex libraries. Game development is another passion, although I wouldn’t call myself an expert.
AMM: How do you see the future of web development?
JV: The future of web development is brimming with possibilities. Artificial intelligence (AI) is a major game-changer, and while I haven’t personally embraced it due to potential distractions while coding, I see its immense value in boosting productivity. We’re already witnessing this with Figma plugins and tools like TL draw that generate code from drawings.
On the technology front, WebAssembly (Wasm) and the upcoming WasmGC standard are intriguing developments. WasmGC allows code reuse from the browser’s garbage collector, potentially reducing Wasm file sizes and improving JavaScript-Wasm code sharing. The adoption of WasmGC by the Flutter team for their Dart applications highlights its potential to reshape how we use JavaScript in front-end development.
Another exciting prospect is the concept of “building the web with the web,” which StackBlitz champions. This approach has significant potential, as evidenced by its use cases in design. While the full vision of a web browser-centric development environment might require addressing some missing pieces.
Frictionless tutorials await: Join Joan’s talk at Frontend Nation!
If you’re eager to learn more about how WebContainer API can revolutionize tutorial creation, be sure to catch Jòan’s talk, “Frictionless tutorials with the WebContainer API” at Frontend Nation In this session, Jòan will delve into the challenges of traditional tutorial development and showcase how WebContainer API empowers seamless, browser-based learning experiences. Secure your free spot today and join a global community of passionate frontend devs.
Follow Frontend Nation on social media to stay up-to-date and spread the frontend love! Frontend Nation also offers sponsorship opportunities for brands and the chance to feature your developer community.
