一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告

简介: 笔者是一位 Angular 开发工程师,之前尝试过国外一款著名的在线编辑器,StackBlitz. 这款编辑器功能强大,但因为服务器在国外,所以我平时访问的时候,由于网络的原因,在编辑代码和本地运行编译好的 Angular 应用时,经常感觉到延迟,影响了用户体验。

笔者是一位 Angular 开发工程师,之前尝试过国外一款著名的在线编辑器,StackBlitz. 这款编辑器功能强大,但因为服务器在国外,所以我平时访问的时候,由于网络的原因,在编辑代码和本地运行编译好的 Angular 应用时,经常感觉到延迟,影响了用户体验。

下图是 StackBlitz 在线编辑器的 home 界面:

这次听说腾讯推出了自己的 Cloud Studio 之后,非常激动,第一时间就在浏览器里进行试用了。

使用 Cloud Studio 创建第一个 Angular 应用

访问 Cloud Studio 的官网, 发现支持直接使用微信和 Github 登录,这样连账号注册的过程都省去了,很方便。

我使用微信成功登录后,新建一个工作空间(Workspace):

工作控件列表里,除了我最关心的 Angular 工程模板之外,还有 React,Vue,Hexo 等许多其他的项目工程模板。

选择 Angular 项目模板之后,Cloud Studio 自动生成一个 Angular 应用的 Template,我们观察一下其中的 package.json,里面包含了 Angular 应用的所有依赖:

其中 Angular 版本为 ~12.1.0,这个版本也算比较新了。

Cloud Studio 里和 Angular 应用编译和运行相关的命令行


我们可以看到,Cloud Studio 自动在 Terminal 窗口里运行了如下的命令行:

set port=4200 && export PORT=4200 && yarn && yarn start --port=4200

仅仅花费了 6 秒多的时间,就完成了应用的编译。但下图的 Console 输出,有两点美中不足:

(1) Build At 时间戳的时区显示的是服务器端的时区,个人认为按照用户在浏览器里的时区设置对用户更友好一些,比如下图我期望时间戳显示的是我本地时间 18:02:51,而不是服务器端的 10:02:51.

(2) 打印的日志 Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200,这里会误导用户,因为实际上我们根本无法在浏览器里通过直接访问 http://localhost:4200/ 的方式,来打开我们在 Cloud Studio 里运行的 Angular 应用。

正确的 url 应该是这个自动生成的 url:https://dzdkkc-wbsddy-4200.preview.myide.io/

这里我在 Terminal 里进行了更多的测试,比如直接执行命令行 ng serve

发现整个应用虽然仍然能够成功编译,但是浏览器访问 url https://dzdkkc-wbsddy-4200.preview.myide.io 时,遇到错误消息:Invalid Host header,于是不知道怎么继续下去了,只得继续使用冗长的命令行 set port=4200 && export PORT=4200 && yarn && yarn start --port=4200 来启动应用。

整个 Cloud Studio 可以看成一个运行在浏览器环境中的 Visual Studio Code,因此对于笔者来说,不存在任何的学习曲线。

笔者短短的 Cloud Studio 使用体验非常流畅,个人认为这是一款完全不输于 StackBlitz 的在线编辑器。笔者打算将来的一些小型验证项目,将不再使用 StackBlitz,而是切换到访问速度更快更流畅的腾讯 Cloud Studio 上来。

相关文章
|
6月前
|
存储 缓存 JSON
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
32 0
|
JavaScript 前端开发
如何使用 Visual Studio Code 调试 Angular Schematics 实现
如何使用 Visual Studio Code 调试 Angular Schematics 实现
117 0
如何使用 Visual Studio Code 调试 Angular Schematics 实现
一个Angular应用开发的辅助Visual Studio Code扩展 - Dependency Tree
一个Angular应用开发的辅助Visual Studio Code扩展 - Dependency Tree
一个Angular应用开发的辅助Visual Studio Code扩展 - Dependency Tree
如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
如何使用 Visual Studio Code 调试 Angular Schematics 实现
How to Debug an Angular Schematic using Visual Studio Code 能够在代码执行时调试和遍历代码是我们开发工作流程的基础。这是一项必不可少的功能,使我们能够调试和确定代码在做什么。它可以是我们测试工作流程的一部分——附加调试器并在特定场景中执行测试。
如何使用 Visual Studio Code 调试 Angular Schematics 实现
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2
|
3月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0
|
19天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
3月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
40 1
|
1月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
23 0

热门文章

最新文章