命令行与GUI会议

EV，您今天晚些时候有时间讨论命令行终端的新Web GUI吗？松弛的信息说。它来自我们的用户体验主管Alex，而问题中的产品就是SSH客户端。

我有点担心。命令行环境有一个庇护所，在那里我远离了基于浏览器的工具世界，找到了安宁和快乐。虽然很友好，但这个会议邀请闻起来像是一种“入侵”的味道，我在帮助亚历克斯的真诚愿望和为我心爱的CLI辩护的冲动之间左右为难，我和亚历克斯已经共事近10年了。

简单介绍一下背景：Alex一直致力于的开源项目是Teleport(想想类固醇上的SSH)，它也支持Kubernetes和(很快！)。其他基础设施访问协议。有了基于浏览器的用户界面，我们就可以说“嘿，它也有Windows和iPad客户端！”此外，当使用未预安装任何SSH客户端的计算机时，工程师会欣赏通过浏览器进行SSH的功能。

Alex觉得我们有机会“革新CLI”，而我不确定我是否想让它“革命化”。

我尽量让自己听起来友好些，我说：“亚历克斯，航站楼并不真的需要用户界面。它只是一个黑匣子，应用程序可以在里面运行。“。

让我们确保航站楼的窗户有尽可能多的空间。

没有必要在它周围留出空格。每个像素都很重要，特别是垂直像素。

需要支持所有键盘快捷键。使用GNOME终端或MacOS终端作为灵感，但也可以考虑在周末使用没有窗口管理器的Raspberry PI。

我觉得做好了充分的准备，就出现在了我们的Zoom Call中。房间里还有其他几个工程师。一些人以前管理过Linux服务器，而另一些人的职业生涯更多的是编程。一些人做后端工作，另一些人做前端工作。体验水平也不同，MacOS和Linux通常是分开的。在这个群体中找到妥协几乎是不可能的，因为我们发现自己自然而然地分成了三个阵营：

快乐的GUI用户。有趣的是，总的来说，这些工程师对基于浏览器的编程(和系统管理)相当满意。我们称他们为“WebUI团队”。

运行终端的核心“CLI团队”将大部分时间最大化，甚至不使用制表符，更喜欢使用tmux进行多任务处理。

亚历克斯一个人在岛上。他并不坚定地属于任何阵营，但对用户体验抱有强烈的信念，他声称这些信念是普遍的，无论用户是不是工程师。

达成协议花了很多讨论。显然，我们都非常关心UI，并且每个人都对CLI SSH客户端需要如何行为有强烈的看法。最终，我们就实现达成一致，你可以向下滚动到这篇文章的底部，查看YouTube演示链接。

但如果你想听听我们讨论了哪些选项，下面是一些让谈话变得激烈的问题。

一种基于网络的终端的设计方案就像典型的网络用户界面一样，其区域被大量的负空间包围。即使是我们的旧用户界面也因为不只是一个盒子而有些“内疚”：

当我们讨论如何最大化可用终端区域并最小化其周围的“Chrome”时，WebUI人员一直将Teleport称为应用程序。CLI团队会回应说，“SSH客户端不是用户正在运行的应用程序。应用程序实际上在内部，所以客户端必须尽可能不可见。“。当然，两人都是对的。我们只是在处理许多嵌套的应用程序，每个应用程序都会占用屏幕的垂直空间：

桌面(顶部栏，有时是Dock)|->；浏览器(窗口栏+选项卡)|->；Teleport Web App(顶部导航栏)|->；Emacs(CLI应用程序)。

看看Emacs用户为了能够通过浏览器访问盒子而牺牲了多少垂直空间？对于某些屏幕尺寸来说，这可能是50%或更多！

然而，这是一个每个人在设计Web UI时都必须支付的表赌注税，最终，我们在这里没有发现任何妥协。

滚动也出现了：WebUI团队认为让终端窗口部分可见没什么大不了的，因为每个浏览器都提供滚动作为处理部分可见内容的一种方式。但是CLI用户会争辩说，SSH客户端必须再次淡入后台，并且不能干扰内部的应用程序(如Emacs)。

最后，我们决定在单独的浏览器选项卡中启动终端窗口，为它们在浏览器中提供尽可能多的垂直空间。此外，终端的工作区将始终等于浏览器页面大小，这与操作系统原生终端应用程序完全相同。

标签本身产生了另一种不同的意见。Web UI小组针对成功的基于Web的编程环境，倡导添加内置的Tab键，这样用户就可以通过按Ctrl+Shift+T之类的键打开新的选项卡。他们甚至使用GNOME终端和MacOS终端作为例子。

另一方面，争论说，用户已经有了两种创建标签的方式：浏览器本身提供标签，他们可以在现有的终端内运行tmux！

然后问题就变成了，如果您在shell中输入exit，该怎么办呢？您是否关闭了Teleport选项卡，最终在浏览器中出现空白页面？当用户键入Exit时，对浏览器页面关闭会有什么反应？如果那是最后一张账单呢？当你在网页上的黑框里键入exit时，如果浏览器消失了，你会觉得舒服吗？

最后，我们决定推出我们自己的内置选项卡来解决以下问题：

浏览器的内置选项卡可以很好地用于单击URL，但是如果您在SSH会话中，如何告诉浏览器为另一台计算机打开另一个选项卡呢？

这给了我们创新的能力：我们添加的跳转机制提供了一些功能，比如查看哪些服务器可用，您甚至可以看到是否有其他用户登录到您试图通过SSH连接到的机器上！

我们有什么革命性的东西吗？不是的。取而代之的是，我们意识到好的旧终端不需要太多的革命性改造。但我们尽了最大努力保留它所有令人敬畏的东西，并使其大部分都可以在Web浏览器中使用。

我们的一些想法没有容易或明显的实施。我们今天还在咀嚼它们。以下是几个例子：

如果用户在基于Web的SSH客户端的bash会话中键入ls，为什么他们不能单击显示的文件呢？如果可以，单击浏览器支持的任何媒体文件都可以让您播放它。话又说回来，SSH客户机的真正目的并不是做这些事情。我们还需要考虑安全问题，以及如何知道显示的内容是否实际上是一个文件。毕竟，终端最终只是在不了解其实际传输内容的情况下推送stdin/stderr/stdout。

我可以将文件放入黑色终端箱并启动文件传输吗？SSH支持这一点。让我们通过浏览器通过拖放来执行SCP！但是，再说一遍，这对安全有什么影响？您要上载到的当前目录是什么？

所有这些问题都没有令人信服的答案，所以我们决定谨慎行事。

但在这些对话中，有一个主题闪耀着光芒。我们中很少人对网络平台目前的局限性感到满意。

我会争辩说，做得不好的GUI绝对是一场噩梦。我的职业生涯始于开发桌面软件。苹果和微软过去都会发布指南，为他们的平台构建合适的GUI。我们的用户体验设计师和PM积极执行这些内容。

例如，在Windows上，每个功能都必须在主窗口的菜单中显示。通过将鼠标悬停在(甚至不是单击)每个菜单项上，您可以了解到每个功能的存在。Photoshop现在还是那样。这些选择背后是有逻辑的，拥有一组标准化的UI控件可以让用户更快地学习软件。

相比之下，现代网络“应用程序”是粗糙的。没有标准化的方法来发现任何东西。是纽扣吗？这是一个下拉列表吗？显示错误只是一个奇怪的背景吗？无缘无故地，东西会自动隐藏和自动出现，你必须移动鼠标，或者练习每次滑动的变化。热键是事后才想到的。即使调整浏览器的大小或滚动有时也会损坏一些东西。

我不打算指名道姓，但几年前我们尝试了一款基于网络的会议应用。UI太差了，近30%的人搞不懂如何加入。加入通话的方式是该页面需要提供的最基本的东西，但UX甚至让这一点变得不可能。

我是CLI第一人，但在我看来，一个做得好的GUI可以极大地拉平用户对新应用程序的学习曲线。然而，要做得好，需要一套特定的规则和惯例。

没有它们是很昂贵的。苹果和微软过去常常雇佣可用性专家，他们为每个人设计了指导方针。今天，如果您想要构建一流的用户体验，每次都是从头开始。

采用的速度。预定义的约定可加速用户学习。大多数Teleport用户没有意识到他们可以为SSH会话(记录的或活动的)添加书签。为什么？因为我们(错误地)依赖于人们的识别能力，即您看到的一切都是URL，并且URL可以被书签标记。但是，由于如此多的Web应用程序违反了这一简单的约定，用户已经不再信任URL。

浏览器技术有一些令人兴奋的发展。考虑到Web组装，但除了安全性和性能改进之外，我们还需要一套更一致且被广泛采用的可重用Web组件标准。

这些Web浏览器的限制在很大程度上指导了我们使用Teleport的新用户界面。他们引起了激烈的讨论，冗长的争论和冗长的解释，但我们最终得到了一些我们都满意的东西。

那么，我们最终得到了什么呢？您可以在YouTube上看到基于Web的SSH客户端的演示，甚至可以自己下载并试用。

那次会议开了好几次，都留下了一些伤疤！亚历克斯甚至就此写了自己的博客文章。但是，嘿-最终，我们建造了一些我们都可以引以为豪的东西。请随时在我们的Github页面上提出改进建议，顺便说一句，我们正在招聘！所以，如果你对如何“革新”你在Github上看到的内容有很多想法，请给我们留言。