【我的产品观】开发wangEditor一年总结
1. 引言
标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确。印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年。
从8月底在济南离职来到北京,一直熟悉新的工作环境和工作节奏,好久没有更新博客了。今天来总结一下这一年的wangEditor的成长过程,以及我自己在这一年的时间,对于技术、产品等各方面的思考。
感觉对这几方面的体会和感悟还是挺多的,拿出来和大家分享。
2. 什么鬼?
不过,大部分朋友可能还都不知道wangEditor是什么鬼?
wangEditor——是我开发的一款轻量级富文本编辑器,开源免费,一年来一直在更新完善。有兴趣或者有需求的同学,欢迎猛戳以下链接,或者加入QQ群:164999061,那里已经有260多个小伙伴(不断增长)在欢乐的玩耍了。
你若要问wangEditor和其他富文本编辑器的区别,进入官网看一下你就知道啦!
- 官网、demo、捐赠:www.wangEditor.com
- github:https://github.com/wangfupeng1988/wangEditor
- 文档:http://www.kancloud.cn/wangfupeng/wangeditor/65722
另外,我近期正式开启了移动端编辑器的开发工作,现在已经开发了一部分了,可以看看效果。不过目前功能还未开发完善,性能和用户体验也需要进一步优化,预计会在两周之后发布一个测试版给大家试用。
手机扫描二维码预览Demo(功能不全面)
3. 产品一年的变化
记得我之前写过一篇文章《我为什么要做富文本编辑器wangEditor5个月总结》现在回过头来回忆一下,感觉还是挺有意思的,感觉自己也挺能折腾。
3.1 UI界面
wangEditor最早的时候UI是这样的,当时还依赖于bootstrap这么一个庞大的UI库。
后来经过了很多次改版(有兴趣的同学可以看看上面的文章)和UI升级,才到现在官网上这个样子,大家可以对比一下。一年之前和现在,UI是不是漂亮很多了?
3.2 功能
一年之前刚刚推出的时候,功能非常简单,大家可以从上文的界面中看出来。一年之后的现在,编辑器几乎涵盖了项目常用的大部分功能。除了最初有的基本功能之外,后面加的主要功能有:
- 查看更新源码
- 引用
- 表情和分组表情
- 插入视频
- 插入代码以及配置高亮代码
- 图片上传(支持跨域和非跨域)
- 插入代码已经配置代码高亮
以上都是和UI有关的功能,还有很多和UI无关的功能,例如支持AMD、CMD……
这些功能有些是我自己主动加的,也有一些是使用者提出来,我觉得合理加上的。
3.3 技术
一年之内,我对wangEditor进行了2次重构,这其实就是在开发过成功不断摸索慢慢步入正轨的过程。而现在我正在计划第三次,最晚会在元旦之后展开。
第三次重构并不是我对当前系统架构的否认,而是一次彻底的升级。现在的框架设计,如果全是我自己来开发,一点问题都没有。这几个月大家提出的问题,我基于现在的框架修改绝大部分情况下得心应手。
第三次重构我的目标是——彻底的组件化,支持自定义扩展菜单,支持插件机制和多人开发。自己个人毕竟精力有限,我要通过重构框架,将每个功能点都分离、将系统可扩展化。这样就为其他开发人员开放了接口,可以接入他们想要的东西!
另外,这一年的时间,到现在我已经为wangEditor进行了173次的代码提交,平均每2天一次commit。唉,我也是一个上班族,时间真的都是挤出来的。
最后,解决的bug我没数过,github的issues中有将近60个问题,不过那是后来才慢慢开始用起来的。要算实际数量,得是这个数的N倍。各位同行不要见笑,bug发现的多,不一定是坏事儿,发现不了才是坏事儿,你懂得。。。
3.4 其他
在这一年之内,除了UI、功能、技术上的改进,我还慢慢的为产品开展了以下平台,这些也都是运营一个产品所必须的。
QQ群(164999061):一开始没有QQ群,这是后来,我也忘记什么时候了,一个使用者提出可以键一个QQ群讨论问题。人也是在慢慢的增长,现在有260多个人。
Github issues: 这也是一个使用者的建议,说以后问题都要记录在测,我作为作者不能整天泡在QQ群解答问题,那不成了客服了吗?——有道理——不过想改变大家提问的习惯,可不是个简单的事儿,后文会详细解说这一点。不过目前issues里面已经积累了将近60个问题,也算是终于起步了。
官网:一年之前是没有这个wangEditor这个网站的,我后来申请了域名,做了一个还算漂亮的官网,也算是有门面的产品了。
文档:我印象中好像大半年没有文档,一些基本使用都写在github的README里面,但是那里根本就写不开呀。后来我自己写文档页面放在官网上。由于官网托管在github,有些人反应访问慢,于是又更换到了kanclound.cn这个平台上,感觉还是很不错的。
3.5 小结
我不知道你在看以上总结的时候感觉如何,我写完这一段之后,感觉手都酸了——怎么一年之内折腾了那么多事儿啊??这还是简单写的,要详细写得写本书了。当然写了书也估计没人买——wangEditor知名度目前还非常低。
但是——我希望在明年的这个时候再写总结的时候,还是要写到手发酸才好!——我接下来的一年还要接着折腾。
4. 如何对待产品用户
4.1 发发我的牢骚
从创建了QQ群,用户不断的加入,我慢慢的出现了如何对待用户的困惑。如果你没有这个体会,听我给你慢慢道来。
一开始,QQ群就那么几个人,怎么都好说,有问题说问题,聊天扯淡也OK。后来慢慢人多了几十个人了,我还是以雷锋为榜样,只要有问题,我就第一时间赶上去,交流然后解答。这样一直持续了好久,我当时对此也乐此不疲。
再后来人多了时间久了,我发现不对劲儿,有些人问问题不懂得怎么问。
这里先插一句:问问题和通过百度搜索问题一样,这是有学问的。例如你输入一些错误提示关键字,很可能就找到了答案,但是你输入『这儿运行不出来』,你试试,搜一年你也搜不出来。运行不出来?哪儿运行不出来,谁知道啊?让我看那就是你自己的能力不行、脑袋不行。
接着说,有些人提问就是这样。在群里说一句:『我的菜单图标不显示啊』就完了,再好点的还能贴个图给你。各位你说你如果作为作者、群主遇到这种情况该如何处理?
我一开始是追问:怎么不行、哪儿出不来、什么浏览器、提示什么错误、下载的代码有没有字体文件……因为一个错误可能会有很多种情况造成的,你得一个一个判断呀。
后来也是经过一个人的提醒,说:你不能再当客服了,你得集中精力做产品升级呀,这是你的核心价值。你应该提供文档、提问接口,让用户自己看文档自己提问。
我觉得很有道理,于是就这么做了。但是这么做的后果就是在很长一段时间,我一直不断的在QQ群发『看文档』、『去githut提交问题』……说了不知道多少遍。到现在,我还一直在群里说『新加入的同学请阅读群公告』……
4.2 我的看法
下面我抛开自己是一个产品作者的身份谈谈提问这件事。
有一句话:老练的程序员都是改bug改出来的。这句话虽然不全面,但是却说出了一个重点内容。遇到一个问题,你都不去主管思考,上来就去提问,这本身就是对自己的极不负责任。
我平时的工作有几乎一半的时间在改bug(其实百度的产品bug也不少,要不然要那么多开发人员干嘛),我要是到处找人去问,谁有那么多时间伺候我。还不是自己去跟踪、断点、分析、查询,来解决吗?不亲自去查一查,你怎么就知道这个问题你自己解决不了。
4.3 对待用户的思考
现在回到我的角色,我作为一个产品的主导者、开发者,想用户去推广这个产品的时候,如何面对用户的各种使用习惯——我觉得关键在于要去带头建议一种环境和平台来引导用户。
这个开始虽然很难、很慢,但是一旦建立起来,就会比较自然顺畅。例如一个新的使用者解决的第一个问题是从github issue得到的答案,那么他遇到第二个问题自然而然回去github issue查询,如果没有他当然也会在这个平台提问。
如果他后来遇到了另一个新来的,他肯定会告诉他,去github issues里可以找到答案。
我想到一句和『授人以鱼不如授人以渔』类似的话——给人一个答案,不如给他一个平台和环境。
5. 为什么重构
今天的文章其实和技术没有多少关系,重点讲述我对产品的认识。不过它绝对不是一片软文,它再次也算是我的一些经历和一些故事。
对于产品的重构其实已经是一个很老的话题了,从我们看到很早的书籍就说:产品就是要完善完善再完善、重构重构再重构。但是我所说的是——不要为了重构而重构。重构一定是要解决一个重量级的问题,非重构而不可的问题。
在此我想简述一下我计划的下一次重构对wangEditor的一些影响。
现在大家遇到一些比较棘手的需求,还是需要求助于我,我没办法去解决的那就算了(例如之前有人提出增加公式,我就没答应,因为就他自个用)。很多人提出了插件机制,我也想过,但是现在的代码框架,确实不足以完美支持。我现在急需这个功能。
另外,目前项目就是我一个人维护,其实还有其他人想一起来为项目贡献代码。但是现在代码结构比较紧凑,除了我,别人还不好插手。所以,下次重构组件化和模块化也是一个重点。要让各个模块和组件之间相互不影响,保持独立性,又让整体保持扩展性。
所以,期待我的下次重构吧。有意向咱们可以一起写代码。
6. 产品营销的困惑
之前阅读《市场驱动的新产品研发项目管理》一书,记住了上面的一句话——一个企业的核心竞争力有两点:一个是技术,一个是营销。我曾经问过一个今年刚刚毕业的同事,问他能不能理解,他说不能。我不知道您现在看到这句话能不能理解,反正我是小有感触。
就拿wangEditor来说,我如何让大家都知道这个产品?如何推广出去?现在是我很大的一个困惑。特别是对于这种不知名的个人开发的产品(大牛和大公司推出的产品好推广),纵然你有一腔热血,但是无人知道,你说是不是很郁闷。现在你知道为何『营销』是核心竞争力了吧。如果咱俩有同样的产品,你先让大家知道了,那么你就赢了。
现在这块正是我的一个困惑。写一篇博客推广吧,上次写的某某版本发布,被博客园踢出了首页。大家如果有好的建议,不妨提交给我,万分感激。
7. 关于移动端编辑器
移动端编辑器的开发,最初是由群里的几个同学提出来的,需求量并不大。如果是就几个人提出一个PC端的个性需求,我直接就拒绝了。我也跟很多人聊过,大部分的反馈都是大家不会用手机去编辑什么打内容的片段。
我之所以启动移动端编辑器,是因为现在网络上根本没有哪怕是不成熟的移动端编辑器。那些所谓兼容移动端的编辑器,无非就是UI上做了个响应式的布局而已,用户体验上根本不适合手机触屏操作。
没有的东西我就要去做,苹果都未移动端准备了ipad pro 我为何不能做一个小小的编辑器呢?至于以后发展如何,我现在不管,想多了啥也干不成。
虽然开发刚刚启动,但是想法和规划早在两个月之前就开始了,我也经过了大量的调研、思考、实验,最终确定了现在的实现思路。
手机扫描二维码预览Demo(功能不全面)
接着说。我本来想把菜单栏紧贴在虚拟键盘上方,可以犹豫技术限制、又是一个插件,做不到这一点,因此只好做一个取舍,放在了上面。
在我看来,手机端和PC端最大的区别就在于手和鼠标的不同。鼠标可以轻松选区一段文字进行操作,而手指则无法轻松做到。因此,手机端的编辑器的功能和操作肯定要和PC端的不一样。具体的大家可以去demo中体会。
另外,在移动端大家不可能做很大篇幅的编辑操作,因此需要的功能就更为精简。基本的文字粗体、颜色、标题,外加上传图片、拍照上传(重要),还有表情,就OK了。
最后,在开发移动端编辑器的时候,我一定会增加用户自定义配置、扩展菜单的功能。有些特殊的需求,自己来开发就OK了。
8. wangEditor的初衷变了吗?
唉妈呀,写了将近三个小时,洋洋洒洒将近5000字,这得顶的上多少篇高考作文啊!其实我很讨厌这种冗长的东西,不过没有这些内容,今天的话题就说不完。如果看这篇文章的你没有耐心看完,那么也不是你的错。
如有错别字,请多多包涵。。。。
最后我想说,wangEditor做上文这样的规划,是不是违背了它当时的初衷和定位了呢?一开始做wangEditor,我对它的定位是——一款最简单、易用的编辑器。
重量级的复杂的编辑器(如百度ueditor、kindeditor)什么都有,插件丰富,但是使用起来没有那么方便、UI也丑的要死。wangEditor要跟他们形成互补——UI设计的最漂亮、使用最简单、要轻量化。
我的观点是,wangEditor最初的定位和初衷,到现在根本没有变化,后面也不会有变化。而我现在要做的,是让它跨步到一个更高级的层次,无论是对于我、未来的其他代码贡献者、还是这个产品的使用者。
wangEditor已经不再是一个技术人员的练手实验品,而它将继续是一款更好的产品,我也会为此而付出更多的努力来。
编辑器这个东西很小,但是别忘了,绝大部分web系统都需要,绝大部分网民都需要,这样它就会变得很大!
共勉!
-------------------------------------------------------------------------------------------------------------
欢迎关注我的教程:
《使用grunt搭建全自动web前端开发环境》《从设计到模式》《json2.js源码解读视频》
《深入理解javascript原型和闭包系列》《css知多少》《微软petshop4.0源码解读视频》
------------------------------------------------------------------------------------------------------------
也欢迎关注我的开源项目——wangEditor,轻量化web富文本编辑器
-------------------------------------------------------------------------------------------------------------
【我的产品观】开发wangEditor一年总结的更多相关文章
- 张小龙《微信背后的产品观》之PPT完整文字版
微信回顾 433天,一亿用户 成为移动互联网的新入口 启动(2010年11月19日) 用户数突破1亿 1.0 1月26日 2.0 5月10日 语音对讲 2.5 8月3日 查看那附近的人 3.0 10月 ...
- 哪些产品不用开发原生APP,微信公众号就够了?
最近一阶段H5技术被推到高峰,很多人认为借助H5就能利用微信公众号取代APP原生应用了,而事实是怎么样的?这里我从产品层做一个客观分析. 一,原生APP总体趋势 要谈APP是否会被微信取代,那么必须回 ...
- Facebook产品的开发流程
[编者注]王淮是Facebook第二位中国籍工程师,也是第一位中国籍研发经理,他一手开创了Facebook的支付安全和客服工具领域.2011年他离开Facebook,回国成为天使投资人,希望用自己在F ...
- 【产品】张小龙《微信背后的产品观》之PPT完整文字版
张小龙<微信背后的产品观>之PPT完整文字版 附:PPT下载地址:https://wenku.baidu.com/view/99d2910290c69ec3d5bb7573.html 微 ...
- 裁剪TOGAF进行产品架构开发
http://ea.zhoujingen.cn/56.html . 有人和我说“周老师,我的企业条件不适合,学习企业架构没用.” 如果等公司让我用企业架构,估计会比我自己开始晚七八年.我们学习任何内容 ...
- 微信之父张小龙经典演讲164页PPT:《微信背后的产品观》
收藏地址:http://www.haokoo.com/internet/8974068.html
- 如何使用.NET开发全版本支持的Outlook插件产品(一)——准备工作
这半年一直在做Outlook的插件,因为不会VC++,所以想找一款基于.NET,用C#开发Outlook插件的技术方案.没想到,光技术选型这件事,就用各种技术手段验证了将近一个月,还花费了大量的精力做 ...
- 开放产品开发(OPD):开篇
OPD?这是什么玩意?google一下.忘记说了,最近google被封锁的厉害,那就百度一下吧.可惜,OPD找不出是什么.你今天你找不到是正常的,因为之前还没有OPD,而现在才开始有OPD这个东东.相 ...
- 集成产品开发-IPD简介
内训IPD流程,听完后,觉的流程的力量很强大,可以高效的团队几千上万人的研发团队,来正确地为同一个目标前进.因为讲解者是从华为出来的,所以,相关的案例分析以及理解,都是以华为研发为模板来讲解的.这没错 ...
随机推荐
- .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引
系列文章索引: .NET面试题解析(01)-值类型与引用类型 .NET面试题解析(02)-拆箱与装箱 .NET面试题解析(03)-string与字符操作 .NET面试题解析(04)-类型.方法与继承 ...
- javascript中Date对象的应用——简易日历的实现
× 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...
- java中同步嵌套引起的死锁事例代码
/* 目的:自己写一个由于同步嵌套引起的死锁! 思路:多个线程在执行时,某一时刻,0-Thread绑定了LockA锁,1-Thread绑定了LockB锁! 当0-Thread要去绑定LockB锁时 和 ...
- 邻接矩阵有向图(二)之 C++详解
本章是通过C++实现邻接矩阵有向图. 目录 1. 邻接矩阵有向图的介绍 2. 邻接矩阵有向图的代码说明 3. 邻接矩阵有向图的完整源码 转载请注明出处:http://www.cnblogs.com/s ...
- VS2013正则表达式应用示例
VS2013正则表达式语法 在查找替换对话框中查看 VS2013语法可在查找替换对话框中查看,具体过程如下: 通过编辑->查找和替换->在文件中替换或者相应快捷键(Ctrl+Shift+H ...
- php操作mongodb中的ISODate格式日期
mongodb 中数据记录的日期格式为"dateCreated" : ISODate("2011-12-20T07:22:50.836Z")经过翻阅php官网中 ...
- Hadoop阅读笔记(五)——重返Hadoop目录结构
常言道:男人是视觉动物.我觉得不完全对,我的理解是范围再扩大点,不管男人女人都是视觉动物.某些场合(比如面试.初次见面等),别人没有那么多的闲暇时间听你诉说过往以塑立一个关于你的完整模型.所以,第一眼 ...
- Jsp字符编码过滤器
通过此过滤器,可以实现统一将编码设置为UTF-8. 1.首先在web.xml中配置,添加如下代码: <!-- 过滤器 --> <filter> <filter-name& ...
- javascript学习4
JavaScript Date(日期)对象 日期对象用于处理日期和时间. JavaScript Date(日期)对象 实例 返回当日的日期和时间 如何使用 Date() 方法或者当日的日期. getT ...
- C#中string.format的格式和用法
String.Format 方法的几种定义: String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项. Str ...