由 SolidJS 提供支持的前端工作室

我想向大家展示一下我过去一年一直在开发的项目。这是一个工作室，它内置了集成开发环境 (IDE)、组件库、自有的元框架，基于 SolidJS 构建，并支持导出为简洁的 JSX 代码。这只是我们实现的众多功能中的一小部分，您可以阅读下文了解更多信息，或者直接观看我上传到 YouTube 的视频。

SolidJS

首先也是最重要的一点——它运行的是SolidJS。一年前我们开始构建第一个原型时，使用的是 virtual-dom。由于这个库似乎已经停止维护，而且性能也不太理想，所以我们在年初决定用 SolidJS 替换它。这不仅极大地提升了 Studio 和导出代码的性能，还让我们能够为开发者实现更多功能，例如UI Signals。

你只需要一个浏览器……

……所有操作都在本地完成。Studio 不仅会将您的项目存储在硬盘上以确保安全，还会直接在您的电脑上编译代码，这样速度很快，因为代码在显示之前无需发送到任何云服务……

现场预览

无需设置，开箱即用。只需打开带有实时预览的新标签页，将其拖到另一个屏幕上，即可边输入边查看所有更改。

实施助理

现在让我们深入了解 Studio 如何真正加快 Web 应用的开发速度。实施助手会在您编写代码的同时扫描代码，并针对项目中需要完成的操作提供上下文相关的通知。当开发者触发实施助手时，它会自动创建所有必要的文件夹、文件和粘合代码，并将所有内容放置在项目结构中，只显示您编写代码以向 Web 应用添加新功能的文件。

小部件

请注意，这里没有简单的下拉菜单、按钮、输入框或其他你能想到的简单元素。小部件是独立的 UI 组件，可让您在几分钟内快速搭建简单的落地页或高级管理面板原型。目前，我们已开发了 70 多个小部件，涵盖从简单的块展示器到高级数据表和表单等各种类型。所有小部件都可一键安装到您的项目中。您可以使用简单的 JSON 对象编辑其内容，并使用作用域 CSS 或全局样式设置样式（我们还计划开放包含社区创建的预制全局样式的存储库）。当然，它们完全响应式，您可以在安装前在 Studio 中找到相关文档。

可重复使用的插槽

导航栏、页脚、Cookie 同意声明、弹出窗口——所有您认为应该在多个页面上重复使用的内容都可以在可重用插槽中开发（也可以在那里安装小部件），并通过粘贴一行 HTML 代码来重复使用：

<div gc-as="slot" gc-name="footer"></div>

HTML指令

循环、条件语句、错误提示等等都可以用简单的gc指令实现。这确实是一个非常广泛的话题，无法在此详述，所以我会在近期专门写一篇博客文章来介绍它。如果您感兴趣，可以查看我们的文档。

造型

对于所有组件、插槽或可重用插槽，Studio 都会创建单独的 CSS 文件，您可以使用这些文件来设置 Web 应用程序各个部分的样式，而不会影响应用程序的其他部分。另一方面，您可以使用全局样式一次性编辑整个应用程序，这有助于保持设计的一致性。由于作用域文件始终优先于全局样式，因此您可以在页面上创建 10 个页眉，全局设置它们的大小、边距和内边距，然后使用作用域 CSS 为每个页眉单独更改颜色。

Bootstrap 和 Font Awesome

由于这两个库非常流行，我们决定将它们集成到 Studio 中。这样，您无需查找依赖项等即可立即使用它们。如果您不太喜欢它们，或者您正在开发的项目用不到它们，也没关系。您可以轻松地从依赖项中删除它们。

导出代码

代码导出为由 SolidJS 提供支持的简洁且结构清晰的 JSX。它还包含 Docker 和 Webpack 配置。您可以直接将其部署到您的主机服务，或者使用终端构建并在 Studio 之外继续开发。

是的。这只是我们工作室开发的所有功能中的一小部分，但我不想说得太久。我们肯定会继续制作新的视频和博客，展示更多特定功能的细节，但对我们来说，与社区保持沟通至关重要。所以，任何建议我们都非常欢迎。

我留下了一个简短的视频，演示 GlueCodes Studio，向您展示这里描述的所有内容在实践中是如何运作的。

GlueCodes工作室演示

您也可以在这里试用 Studio：

www.glue.codes