Clera: Giving the Web an Application Layer

Clera：为 Web 赋予应用层

The Web Platform Can Do More I have looked at the web platform over the years, the amazing things people have built with it and can build with it. I saw the capability where the web can do a lot but i kept asking myself, “Why are we using all this capability mostly to build websites?”

Web 平台大有可为 多年来，我一直关注着 Web 平台，观察人们用它构建出的惊人成果，以及它所蕴含的潜力。我看到了 Web 强大的能力，但我不禁自问：“为什么我们拥有如此强大的能力，却大多只用来构建网站？”

HTML, CSS and Javascript Almost every developer knows HTML, CSS and Javascript. Most beginners end up studying web development because they couldn’t move or comprehend languages beyond the web. That made me ask, “If beginners already start here, why don’t we make this step a wider platform?”

HTML、CSS 和 Javascript 几乎每个开发者都懂 HTML、CSS 和 Javascript。大多数初学者选择学习 Web 开发，是因为他们无法跨越或理解 Web 之外的编程语言。这让我思考：“既然初学者都是从这里起步的，为什么我们不把这一步扩展成一个更广阔的平台呢？”

Mobile Development My main focus was mobile application development. When i looked at mobile development I thought, “I’m just trying to develop an application. Why should i have to learn Kotlin, Java, Android Studio, SwiftUI, everything around those ecosystems just to build an application? I already know basic web development.”

移动开发 我的主要关注点是移动应用开发。当我审视移动开发时，我想：“我只是想开发一个应用程序。为什么为了构建一个应用，我必须去学习 Kotlin、Java、Android Studio、SwiftUI 以及围绕这些生态系统的一切？我已经掌握了基础的 Web 开发知识。”

Cross-platform Frameworks I researched Flutter and React Native. They both have their pros and cons. But React Native wasn’t actually the web. It wasn’t the syntax I was already familiar with. It still required learning React, JSX, its own ecosystem, its own tooling, its own environment. I wanted something different. I wanted something vanilla. I wanted HTML to define structure, CSS for presentation, and Javascript for functionality just like i spent months learning in those beginner courses. The same languages most developers started with, the same languages most developers already knew.

跨平台框架 我研究过 Flutter 和 React Native。它们各有优劣。但 React Native 实际上并非 Web，它不是我所熟悉的语法。它仍然需要学习 React、JSX、它自己的生态系统、工具链和环境。我想要一些不同的东西。我想要“原生（Vanilla）”的东西。我希望用 HTML 定义结构，用 CSS 进行展示，用 Javascript 实现功能，就像我在那些入门课程中花费数月所学的那样。这是大多数开发者起步时使用的语言，也是大多数开发者已经掌握的语言。

Progressive Web Apps Then I discovered Progressive Web Apps. That was the moment I thought, “Whoa… this existed?”. PWAs looked like the perfect way to build applications using the web. But there was a catch. Service Workers, Configurations, Limitations. Especially on iOS. They were close, but not enough. PWAs weren’t the problem. In many ways they proved the web could become an application platform. They simply exposed the limits of the browser sandbox.

渐进式 Web 应用 (PWA) 后来我发现了渐进式 Web 应用（PWA）。那一刻我心想：“哇……原来还有这种东西？”PWA 看起来是用 Web 构建应用的完美方式。但它有一个问题：Service Workers、配置、以及各种限制，尤其是在 iOS 上。它们很接近目标，但还不够。问题不在于 PWA 本身。在许多方面，它们证明了 Web 可以成为一个应用平台，它们只是暴露了浏览器沙箱的局限性。

Looking at the Industry I started looking at startups. I would open their websites, look at what they were building and i noticed something. A lot of these websites were clearly trying to behave like applications. I kept thinking, “This is trying to be an app… but they ended up with a website”. So I kept asking, Why aren’t more people building PWAs? I went to YouTube, Google had tutorials on them, Microsoft talked about them. But they weren’t mainstream.

审视行业 我开始观察初创公司。我会打开他们的网站，看看他们在构建什么，我注意到了一些事情。许多网站显然都在试图表现得像应用程序。我一直在想：“这明明想做一个应用……但最终却做成了一个网站”。所以我不断追问，为什么没有更多人构建 PWA？我去 YouTube 上看，谷歌有相关的教程，微软也谈论过它们。但它们并没有成为主流。

The Real Question Eventually it stopped becoming about PWAs. The real question became, “Why should the web stop at websites?”. Then comes wrappers. Take the PWAs and wrap them in a native shell using Capacitor or Ionic. Well that works and i love that idea but at the end of the day most developers need to build a website first (having the mental model of a web developer not an app developer), take into consideration what makes a good PWA (if they have even heard about it at all), handle SPA, service workers, manifest and of course plugins of the wrapper they intend to use. There is another way though, learn a framework, use it to build the app and wrap it with a wrapper or go entirely the React Native way, which i respect. But that seems a little far from the basic beginner web mental model. HTML for structure, CSS for presentation and Javascript for functionality.

真正的问题 最终，重点不再是 PWA。真正的问题变成了：“为什么 Web 只能止步于网站？”于是出现了“包装器（Wrappers）”。使用 Capacitor 或 Ionic 将 PWA 包装在原生外壳中。这确实可行，我也很喜欢这个想法，但归根结底，大多数开发者需要先构建一个网站（拥有 Web 开发者的思维模型，而非应用开发者），还要考虑如何做好一个 PWA（如果他们听说过的话），处理 SPA、Service Workers、清单文件，当然还有他们打算使用的包装器的插件。当然还有另一种方式：学习一个框架，用它构建应用并进行包装，或者完全走 React Native 的路线，我对此表示尊重。但这似乎离初学者基础的 Web 思维模型有点远——即 HTML 定义结构、CSS 定义展示、Javascript 定义功能。

The Philosophy Begins The whole idea became, Take the thing every developer already know. HTML, CSS and Javascript. Instead of asking people to leave that behind, expand what it can do. Let it build applications. Not just websites, not just PWAs. Applications… …And provide the toolings to make these application developments feel less like website development and more like an application development because that is what it will be. Tools like Capacitor solved packaging. I wanted to solve the experience of building the application itself.

理念的萌芽 整个想法变成了：利用每个开发者都已经掌握的东西——HTML、CSS 和 Javascript。不要让人们抛弃这些，而是扩展它们的能力。让它们能够构建应用程序。不仅仅是网站，不仅仅是 PWA，而是应用程序……并提供相应的工具，让这些应用的开发过程感觉更像是在开发应用，而不是开发网站，因为这正是它的本质。像 Capacitor 这样的工具解决了打包问题，而我想解决的是构建应用本身的体验。

What is Clera? Clera is a platform for building applications using the web stack. At its core is the Clera Runtime, an application layer that extends HTML, CSS and JavaScript beyond websites and Progressive Web Apps into application development. Around the runtime is Clera Studio, the development environment built to make application development feel like application development, not just website development. Instead of piecing together different tools, configuring service workers, switching between browsers and editors, and solving the same problems repeatedly, Clera brings those experiences together into one workflow.

什么是 Clera？ Clera 是一个使用 Web 技术栈构建应用程序的平台。其核心是 Clera Runtime，这是一个应用层，将 HTML、CSS 和 JavaScript 的能力从网站和 PWA 扩展到了应用开发领域。围绕运行时的是 Clera Studio，这是一个开发环境，旨在让应用开发感觉像真正的应用开发，而不仅仅是网站开发。Clera 将各种体验整合到一个工作流中，无需再拼凑不同的工具、配置 Service Workers、在浏览器和编辑器之间切换，以及反复解决同样的问题。

The Goal The runtime focuses on reducing repetitive work while preserving the web’s familiar mental model. Rather than replacing HTML, CSS and JavaScript with a new language or framework, it enhances them with application-focused capabilities such as navigation, lifecycle management, reusable templates, hardware integrations, packaging and other features needed to build applications. The goal is not to replace the web. The goal is to give the web an application layer.

目标 运行时专注于减少重复性工作，同时保留 Web 熟悉的思维模型。它没有用新的语言或框架来取代 HTML、CSS 和 JavaScript，而是通过以应用为中心的功能来增强它们，例如导航、生命周期管理、可重用模板、硬件集成、打包以及构建应用所需的其他功能。我们的目标不是取代 Web，而是为 Web 赋予一个应用层。

Learn More If you’d like to explore Clera, follow its development or try it yourself, here are the official links. Documentation Github This is only the beginning of Clera’s journey. I hope you’ll enjoy being part of it.

了解更多 如果您想探索 Clera，关注其开发进度或亲自尝试，请访问以下官方链接： 文档 (Documentation) Github 这仅仅是 Clera 之旅的开始。希望您能享受参与其中的过程。