首发于前端微刊
前端必知 - 各种在线 web 编辑器平台简要对比介绍

前端必知 - 各种在线 web 编辑器平台简要对比介绍

前言

相信不少朋友,在平常进行 code 的时候,会遇到这么一个场景.我们需要敲一个 demo 出来,但是直接敲在项目里面的话,又不想 commit 进历史,也觉得 store 起来不算很方便.就想独立出来,一个单独的 demo, 可以敲完直接看效果.

但是要启动一个web 项目,我相信对于仅仅只想写 demo 的小场景来说,安装各种依赖,启动 node 服务,可能还有代理需要配置,有点小题大做.

那么对于需要写一个独立 demo 来看效果的人来说,一个非常好的选择就是使用网上提供的在线 web 编辑器


常用的有哪些在线 web 编辑器的网站呢?

在此,个人推荐自己使用过的,而且也是使用人数比较多的,网站给大家.

CodeSandbox

Online Code Editor Tailored for Web Application Developmentcodesandbox.io图标


这是一家网红的在线编辑器,可以说紧跟潮流,主流的几乎都有,可以满足你80%的需求


我们打开这个网站的首页,效果处理得很棒:



这个的确给人眼前一亮的感觉,但是我们关注的是,如何更快去写好一个 demo 看效果.那么它目前提供了以下的框架,可以快速写出该框架下的 demo:


我们点击React 后,就会快速出来一个编辑界面:


如果你不喜欢旁边的实时预览,可以关了它

不过我一般是不关这个功能的,这就是它的优势啊,不过编辑器做了什么修改,会立马显示到预览立马.其实更合理的逻辑是,保存了才进行更新.


安装包变成了图形化管理,这个交互,对用户来说很友好,估计以后会被越来越多的编辑器模仿


支持代码美化(别说,这个别的在线编辑器不一定支持,本地编辑器 vsc 这种也需要装插件):


修改项目的信息:


demo 输出到 github 去:


部署 build 的版本:


很牛逼的夫妻编程(不过要付费会员才能使用):


本来我觉得能从 github 直接 clone 项目放进去,但是目前看来,这个功能还比较鸡肋:


Codepen

CodePencodepen.io图标


这家网站在我还没发现 CodeSandbox 之前是一直使用着的,关于这款编辑器,其实我是来吐槽的


我们随便打开一个 pen, 嗯,是一片空白的,如果我只想快速打个 demo, 我还需要从头开始写:


看到这个界面,可以说是很不利于一眼定位我需要做什么:


不过这个地方,同样支持搜索安装依赖:


我们来看看dashboard:

pens 可以建多个,但是 project 就只能建一个,如果要多个,就需要升级到 pro 版本


使用下来,会发现, codepen 的实时预览其实蛮坑爹的.敲代码改动的过程中,就会报错.而且报错的定位,却不好,根据错误看了半天,不知道自己的bug 发生在什么地方.


Jsfiddle

Create a new fiddlejsfiddle.net


这个网站的一个优点就是,打开一个新的pen, 有模板可以提供选择,就不需要自己手动操作那么多


点击 react, 就出来一个 demo 代码:


对于这个网站,我不打算介绍太多,我相信,它被众多中国开发者弊掉的原因,就是在普通网络下,会被墙!!!


不是所有开发者都使用科学工具,对于那些不使用梯子的开发者来说,就是一个门槛.就像我们 install 一个包,结果还要引入一堆依赖进来,那么我相信,这个包并不会太受欢迎.


Jsbin

JS Binjsbin.com图标


一打开这个网站,我觉得很干净,至少不会乱七八糟的.


不过有一句不忍吐槽的就是,这个界面一上来,真的很像我大学时候做得实验项目...


它的包安装,只能安装它提供好的,这样其实满足不了太多情况


需要的编译,主流的也提供了一些:


虽然这款很简单,也没有太多功能,但是就我个人使用而言,我会喜欢去使用,因为够轻便,单纯拿来打 demo 是可以的,如果你的需求不算太复杂的话.


上面就对比了自己使用过的四款在线代码编辑器.个人推荐 codesandbox, 综合各方面来看,其实都做得不错,而且界面风格和 vsc 很接近,免费的情况下,功能多.付费的提示并不会太明显.

个人感受:那些印出大大 logo 叫用户付费的产品,其实反而加重了用户的厌烦情绪.如果一个产品使用感受良好,那么我反而会更愿意去付费升级体验,而不需要那么强烈的提示告诉我付费体验更好!
编辑于 2018-06-05

文章被以下专栏收录