Solid for macOS

Solid for macOS empowers you to build truly native desktop apps, leveraging
native AppKit components for
a seamless and performant user experience. Unlike purely webview based
cross-platform frameworks (or frameworks that attempt to recreate the entire
platform interface), Solid for macOS directly integrates with native APIs,
ensuring your apps behave, look and feel right at home on macOS. This
integration allows you to develop fully native apps that utilize all the
nuanced capabilities of the entire platform, providing users with a smooth and
responsive experience.

The first macOS app built with Solid is already
available on the
Mac App Store here.
We welcome you to install and give it a try (compatible with macOS 14+ and
M-series arm64 machines).

You can also try out the example app in this repository. To run the example,
clone this repository and run the following commands:

deno task start

Yes, you don't need Xcode installed to run and develop the app for macOS.
You can start the app directly from the terminal, it's as simple as that. Only
when you are ready to release your app would you need Xcode and an Apple
developer account to publish to the store.

Architecture

Let's explore the architecture of Solid for macOS. There are a lot of components
working together behind the scenes to make Solid for macOS possible.

Runtime

The runtime is a critical component that connects macOS APIs to JavaScript.
Written in Objective-C++, it leverages
Node-API to facilitate seamless
communication with any JavaScript engine that implements engine-agnostic
Node-API layer. This open-source runtime, available at
macos-node-api, handles the
task of bringing all the native APIs seamlessly to JavaScript land.

DOM

DOM provides the simplest possible implementation of a
DOM Document,
just enough to expose the most basic DOM Apis needed by Solid. We are using
undom-ng as a simple and
lightweight DOM implementation.

Foundation

Foundation integrates the concepts of web and native, making the process of
building native macOS apps intuitive and familiar for web developers. By
combining the best ideas from both worlds, it ensures that developers can
leverage their existing web development skills to create high-quality apps from
day one.

One of foundation's primary responsibilities is to handle various aspects of the
application, including styling, layout, rendering, windowing, menubars, and the
overall application lifecycle. It ensures that all essential elements of a macOS
app are seamlessly managed, providing a cohesive development experience.

To achieve this, foundation makes each AppKit UI component to be a DOM element
and registers it with the global document object, allowing developers to
interact with native components using familiar web development paradigms.

For layout management, foundation utilizes the flexbox layout engine provided by
Meta's Yoga, enabling developers to apply
almost all flexbox properties to DOM elements. This approach simplifies the
process of creating complex and responsive layouts.

The most basic UI element provided by foundation is the view, which internally
creates an NSView
which serves as a building block for more complex components and user
interfaces. Foundation already includes a comprehensive set of basic AppKit
components, and ongoing efforts are being made to expand this library further,
ensuring that developers have access to all AppKit has to offer.

Solid Renderer

A custom renderer, implemented at renderer, is
used to transform JSX into our DOM implementation. This renderer seamlessly
integrates Solid's reactive capabilities with native macOS components.

Deployment

If you have noticed, our
Solid Desktop app on Mac App Store
is just 5.5 MB in size. That is possible with
Hermes, a JavaScript engine developed by
Meta. Credit to Tzvetan Mikov for his continued
excellence on the engine. Hermes provides optimal performance while having
minimal footprint.

Contributors

• Ammar Ahmed
• Diljit Singh
• Nathan Walker

License

Apache-2.0