Safari compatible with WebContainer, now it’s easy to create web apps for iPhone and Mac. There is very technical news that hardly emerges in the press but whose consequences are considerable. One of these dates back to a few days ago: Stackblitz announced that WebContainers now run on Safari, and above all on iOS and iPadOS.
Apple increases the trade-in value of iPhone, iPad, Mac and Watch
What are WebContainers and why is it very important that they work on all Apple platforms? Here the story gets interesting and you have to take a step back. But it’s worth it.
The Javascript and Node.js revolution
StackBlitz announced WebContainers in 2021. It is a micro-operating system, based on WebAssembly, designed to run a Node.js server inside the browser. Node in the browser!
We know JavaScript and we all take advantage of its capabilities: it is a programming language used mainly for the development of web applications. It is a high-level, interpreted, object-oriented scripting language that is executed by web browsers on clients.
Node.js, on the other hand, is a JavaScript runtime environment that allows JavaScript code to run outside of web browsers, i.e. on a server. Node.js uses Google’s V8 engine for executing JavaScript code and provides a set of pre-built libraries and modules that make it possible to perform network operations, file management, web server creation, and more. A power in your pocket.
Why is Javascript important today?
The main difference between JavaScript and Node.js is that JavaScript is mainly used for front-end application development, whereas Node.js is mainly used for back-end i.e. server-side application development.
Node.js is important because it allows developers to use JavaScript for server-side application development, as well as client-side application development. This means that developers can use the same programming language for developing both types of applications, thus simplifying the development process. Furthermore, Node.js is very powerful but more importantly very efficient and scalable, making it a popular choice for developing traffic and computationally intensive web applications.
Containers, or rather WebCointainers for web apps, enter the scene
Another trend of recent years has been the creation of applications inside containers, i.e. virtualized environments of minimal size that allow the execution of single applications in single or in swarm, directly in the cloud. Very useful but require a server to run on. Until now.
As we said, StackBlitz announced WebContainers in 2021. StackBlitz’s WebContainers are execution environments where you can run real-time web applications directly from your browser, without having to install any software on your computer. StackBlitz offers several preconfigured WebContainers for different web frameworks and technologies, including React, Angular, Vue, Svelte, and more.
StackBlitz WebContainers are based on Docker containers and provide a complete infrastructure for running web applications, including web servers, databases and other dependencies. In this way, developers can start writing application code immediately, without having to worry about setting up the development environment.
Additionally, StackBlitz offers an easy-to-use user interface for editing code, running the application, viewing logs, and sharing your project with others. Thanks to these tools, developers can quickly and easily create, test and share their web applications, without having to worry about the complexity of the underlying infrastructure.
And all of this comes to Safari!
Until now, Safari had remained outside the development scope of StackBlitz because Apple’s browser lacked, both in the Mac and in the iOS/iPadOS implementation, the right features to be able to run the StackBlitz web containers. But with recent updates to the browser and the underlying framework, which is used on iOS/iPadOS, it is now possible.
StackBlitz’s announcement is remarkable because it opens the door to an ocean of applications developed directly for the browser, which go far beyond traditional web apps (the so-called PWAs, Progressive Web Apps, as they have been christened by Google) and opens the door to much more structured web applications.
Each browser has its own rendering engine (Blink in Chrome, WebKit in Safari, Gecko in Firefox) responsible for drawing text and images on the screen: in other words, it works with HTML and CSS. Each browser also has its own JavaScript engine, which executes JavaScript code. These are: V8 for Chrome (also used in Node.js), JavaScriptCore in Safari and SpiderMonkey in Firefox. One fact that perhaps not everyone knows is that every third-party iOS browser “must use the appropriate WebKit framework and WebKit JavaScript“. This means that every browser used on iOS and iPadOS is effectively a reworked version of Safari.
The strength of WebAssembly
To create the WebContainer application that runs inside the browser, those at StackBlitz have decided to use WebAssembly. WebAssembly (abbreviated as wasm) is a portable binary code format designed to run in a web environment. It was created to increase the performance of web applications by allowing code written in low-level programming languages such as C, C++, and Rust to run outside the JavaScript execution environment.
WebAssembly was developed by a consortium of web browsers, including Mozilla, Google, Microsoft and Apple, and is supported by all major web browsers. The binary code format of WebAssembly is designed to be compatible with modern hardware architecture, making it extremely speed and size efficient.
StackBlitz, by choosing to participate in the consortium behind WebAssembly, instead of using various tricks to make WebContainer work inside Safari from the beginning but with the risk of seeing it become incompatible with each operating system update, made the right move. It took more time (and a lot more work “for the greater good” of optimizing wasm) but in the end, as the people at StackBlitz say, “we built the web we want“.
The results of this not so small revolution behind the scenes, indeed under the hood of Safari, will be seen in the coming years and will be enormous, because they restore centrality to the Apple platform at a time when the alliance between Google with Chrome and Microsoft with Edge (based on Chrome) risked marginalizing Apple’s browser.
