jQuery编写的WebOS开源,Puter能否引领潮流?

发表时间: 2024-03-13 06:20

家好,很高兴又见面了,我是"高级前端‬进阶‬",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。

1. 什么是 Puter

Puter 是浏览器中的先进开源桌面环境,特点是:功能丰富、速度极快、高度扩展。

Internet OS and Desktop Environment in the Browser!

借助于 Puter,开发者无需编写一行后端代码即可构建强大的 Web 应用程序。 Puter 提供直接从前端代码对各种云和人工智能服务的完整、免费访问,同时将云存储、键值存储、GPT-3.5 Turbo、DALL·E、托管等引入前端代码。

Puter 的使用可以覆盖以下核心场景:

  • Dropbox、Google Drive、OneDrive 等的替代品,具有新颖的界面和强大的功能
  • 服务器和工作站的远程桌面环境
  • 用于构建和托管网站、网络应用程序和游戏的平台
  • 一个友好的开源项目和社区,用于了解 Web 开发、云计算、分布式系统

目前 Puter 在 Github 通过 MIT 协议开源,有超过 7.7k 的 star,是一个的关注的前端开源项目

2. 为什么 Puter 选中 jQuery

出于性能方面的考虑,Puter 是使用普通 JavaScript 和 jQuery 构建的,而不是采用 React, Angular, Vue 等主流前端框架。 此外,Puter 希望避免复杂的抽象并尽可能保持对整个堆栈的控制。当然,部分灵感也来自一些非框架构建的项目,比如:VSCode、Photopea 和 OnlyOffice。

Puter 选择直接与 DOM 交互,而 jQuery 提供了一个优雅而强大的 API 来操作 DOM、处理事件等等。同时还非常快速、成熟且经过实战考验。

3. 利用 Puter 的 开源 SDK

目前 Puter 的 SDK Puter.js 已经开源,开发者可以轻松上手。

Puter 的工作方式是,应用程序的每个用户都只承担自己的费用,因此无论有 1 个用户还是 100 万个用户,应用程序都不会花费任何运行费用。 换句话说,Puter 为应用程序免费提供无限可扩展的云和人工智能。

Puter 由 Puter.com 提供支持,Puter.com 是一个可扩展的个人云平台,非常注重隐私。 Puter 不使用跟踪技术,也不货币化,甚至不收集个人信息。

下面是 Puter 的云存储(文件系统)示例:

<html><body>    <script src="https://js.puter.com/v2/"></script>    <script>        // Create a new file called "hello.txt" containing "Hello, world!"        puter.fs.write('hello.txt', 'Hello, world!').then((file) => {            puter.print(`File written successfully at: ${file.path}`);        }).catch((error) => {            puter.print('Error writing file:', error);        });    </script></body></html>

如果要集成 GPT-3.5 Turbo、GPT-4 Vision 也非常容易,比如下面的例子:

<html><body>    <script src="https://js.puter.com/v2/"></script>    <img src="https://assets.puter.site/doge.jpeg" style="display:block;">    <script>        // 直接调用GPT-4 Vision服务        puter.ai.chat(            `What do you see?`,             `https://assets.puter.site/doge.jpeg`)        .then((response) => {            puter.print(response);        });    </script></body></html>

Puter 还支持本地开发,通过下面命令可以快速开始:

git clone https://github.com/HeyPuter/putercd puternpm installnpm start

更多关于 Puter 的用法可以参考文末资料,本文不再过多展开。

参考资料

https://github.com/HeyPuter/puter

https://twitter.com/HeyPuter