Facade: Server-Side Frontend Framework

Facade is a server-side frontend framework that takes the concept of Server-Side Rendering (SSR) to the extreme. In Facade, all frontend code runs exclusively on the server, ensuring that all logic, page rendering, UI changes, and state management are handled server-side, rather than on the client.

Advantages of This Technique

Enhanced SEO: Since all content is rendered on the server, search engines can easily index the content, improving SEO significantly, similar to traditional SSR.
Faster Page Load: With server-side rendering, pages load faster as the content is pre-rendered and delivered to the client, avoiding the need for client-side rendering.
Consistent Bundle Size: As all code resides on the server, there's no need to send large bundles of code to the client, ensuring a consistently low bundle size.
Reduced CPU and Memory Usage: All computations are performed on the server, minimizing the CPU and memory usage on the client device.
Complete Code Obfuscation: Since the frontend code is not sent to the client, it remains fully obfuscated, enhancing security.
Scalability: Server-side computations allow for easy scalability, as server resources can be scaled up without being limited by the client's hardware capabilities.
Consistent User Experience: Server-side processing ensures that all clients, regardless of their hardware, receive the same user experience.
No Need for Babel: As all code runs on the server, developers can use the latest JavaScript features without the need to transpile code to older versions.
Immediate Interactivity: The framework uses inline events, so pages are interactive as soon as they load, eliminating the need for hydration.

Facade Features:

TypeScript and JSX: Facade utilizes TypeScript and JSX for templating, ensuring a robust and type-safe development experience.

State Management: For both local and global state management, Facade uses signals, providing efficient and reactive state handling.

Optional Client-Side Components: Facade supports optional client-side components and methods for functionalities that require client-side execution, such as sliders, carousels, and other interactive elements, enhancing the user experience.

How do it work

Build Stage

The first crucial part of the process is the build stage, where the project is divided into two builds: server and client. The client build includes the framework core code, optional client-side components, and special server-side client-side methods (methods prefixed with "script"). These are extracted from the server code into the client build. Every element of this build is lazy-loaded for better performance.

Rendering and State Management

When a user accesses the website, the server starts constructing a component graph that stores the relationships between components and their states. The server renders these components in parallel. Once rendering is complete, the state and render result are sent to the client, with the state serialized and stored with the user session.

The client receives a fully rendered HTML page. Facade initializes, and a WebSocket (WS) connection is established.

User Interaction and Dynamic Updates

When the user interacts with the page, a request is sent to the server. Upon receiving the request, the server parses the stored state and initializes the component the user interacted with, along with any other components dependent on this interaction. Irrelevant components are not initialized. After executing the necessary functions, the server re-renders the affected components and responds with a JSON list of state and UI changes that need to be applied on the client side.

The client receives this list and applies the changes.

Inspiration

Facade draws inspiration from Blazor, Livewire, and HTMX. Blazor introduced me to the concept of server-driven rendering. Livewire provided my first hands-on experience with creating server-side components using PHP and interacting with them on the client side through HTTP requests. HTMX's idea of self-replacement using HTML responses from the server was the initial spark that led to the development of this project.

Demo

URL: http://164.90.235.40/

To demonstrate different approaches when working with Facade:

Switching to home and product list pages is done in SPA style. While switching to product details and checkout is done in MPA style.
Search suggestion modal is done using client side component. Cart modal is done using server side component.