Miao, Mac微博客户端开发随笔

iCloud icons

iCloud icons

大约从2010年开始,我就计划开发一个自己的微博客户端!开始命名为 iCloud,意思是云云,漫画里对话框的泡泡。可惜后来(2011年6月)这个名字让Apple官方拿去用了,iCloud 改名成了 Miao。也没什么好抱怨的,我并没有注册过这个名字,也没做出东西。这里是关于做这个软件的过程和背后的故事。

开始做这个微博客户端以来,进度总是进进退退的。其中最主要的原因就是在微博显示部分选择 WebView 还是 NSView 绘制数据。选择webview开发简单,可以给用户更大权限实现新的皮肤。但是与Mac OS原生绘制机制相比,webview实现方法内存占用大,速度慢,而且有些关键的UI特性无法实现。

起初选择WebView的原因很简单-开发进度快。由于自己还算精通 html、css 所以根据微博数据构造页面非常迅速,还轻易的设计了换肤系统。但是随着进度深入,开始发现一些希望的特性难以实现,例如其中之一:view 之间切换的动画。如果要做这个视觉回馈,需要多个webview。并且这个客户端功能之一就是维护一个访问微博页面的栈,用户可以在多个好友微博页面间切换而不会打断用户浏览行为。对于这个功能,使用webview这样大型的控件代价太高了( 每个 webview 都会维护一套自己的 DOM Tree 和 Render tree ) 就好比开了好多浏览器标签。绝对没人希望一个客户端软件运行起来臃肿的像浏览器一样。

大约是在2010年底,我第一次暂停了项目。另外创建了一个小工程,希望测试使用 NSView 做同样效果。这种数据填充的程序自然而然想到了使用 NSTableView,况且我使用它也是最多的。接下来绘制TableCell,从这里开始情况很快就变得复杂起来。绘制可变高度的表格很难实现,求定宽文本高度总是不够准确,简单的100条微博就让 tableview 慢到不可理喻。更抓狂的是,我不知道如何在 tablecell 里绘制 gif 动画, 添加可以点击的链接等等,添加 NSTextField 做点击链接我到是会,可是在 view 里再添加众多 textfield 不会让这个表格卡到死么!当时还学习了 Core Animation 的部分,了解到 CALayer 利用 GPU 硬件绘制,而且滚动时候不会出现 cell 重绘情况,应该是解决 tableview 慢这个问题的好方法。但却卡在了 CALayer 的各种事件相应上,不知道如何在 CALayer 上添加鼠标点击,鼠标选择,文本拷贝等等。无法实现表情图片显示, 不能点击链接,这不就是残废么!我一下子望而却步了。

在一头撞到这么多堵石墙上之后,我又灰溜溜的返回到 webview 的老路上来。明知道墙后的风景会很美,只能自叹技术不行。于是我开始考虑控制 webview 数量,试着在单一 webview 里实多帐号多页面和现切换动画。这确实有可能实现,jQuery UI 我非常熟悉,做一些 fadeout、fadein 的动画很容易。很快一个支持分帐户,分页的 html 结构做好了,jquery 实现 fadein fadeout 的确可行。这时我发布了 iCloud 的内测版本。也有很大一部分朋友用过我这个 iCloud 版本。随着测试进度深入,发现这个解决方案代价也是很大的,首先 javascript,css 代码占的比重迅速增加,其次 html 结构过于复杂,所以 css 设计难度提高了很多。当然这都是小问题,还有一些问题就像刺一样,不要命却总让我心头不爽,例如:滚动条不够平滑;插入新微博无法维持 webview 滚动条位置,微博总会上下跳动。最后一个要命的问题就是,内存开销还是和国内房价一样花花的往上涨。内存就好比用户手里每个月拿到的那点银子,真的不好意思让大家花着买房的钱看着 iCloud 办着‘偷菜’的那点儿事。

2011年4月,我宣布停止内测。再一次暂停了这个项目。开始研究 nsview,一个一个的解决问题。截止写这篇文章,上面提到的技术壁垒都找到了突破口。这真的让人很兴奋,就好比你凿开了哪面石墙,透过缝隙看到了对面鲜花遍野的山坡。虽然路还没有打通,不过没什么比这个更让我宽心的了。

在这期间,我看着众多微博客户端开始出现在果粉视线里。WeiLark, Mint, Macbo, Weibo For Mac, Woob 我全部用过,也全部否定了。这些软件作者大部分是业余时间开发的,并没有什么报酬,做出来就已经很好了。但是从我的眼光评价,这些只能算是业余作品。中国需要像 Tweetie 这样能够站在世界级别的 Mac 软件出现。虽然这时候我还不敢保证什么,但是 Miao 绝对是带着这样的使命起步的。

Miao icons

Miao icons

2012年初到4月份左右,我都忙在 iYY 的升级和改进过程上。等再次拿起 iCloud 代码,我不得不给它改名为 Miao。并且请 Yidi 帮我重新设计了图标,一个有着可爱的粉色肉球黑猫爪。开发 Miao 过程中我特意在浏览窗口模式还保留了 Tweetie 的外观,向这个开创 Mac 新 UI 时代的软件致敬!目前 Miao 1.0 beta 已经发布,收到了果粉的好评,还有朋友留言说,“Miao 绝对超过了 Twitter For Mac。” 真的没有什么比自己的设计和程序得到用户的肯定更让人开心的了。

gintama 软件开发其实就像写文章一样,需要作者斟酌各种问题。烦了、累了,我就会反复告诫自己:“不可因为着急上线销售就胡乱赶进度”。 坂田银时不是说过么:“钱呢,心急的家伙是得不到的!”。所以对于我来说,还是决定克服各种技术壁垒认真的开发更优秀的软件。 对于用户来说,好的东西是值得等待的。

  • Liu Yi

    请问能否写个文章讲解一下如何让NSTableView性能好一些

    • keefo

      这个我想一下子还写不出来。目前我还没有量化的数据,等做些具体benchmark test后我会写篇文章的。

  • 老五

    Miao这个名字很棒啊

  • limbopeng

    大爱这个 app!!

  • 15617738963

    顶你。。。。加油

  • Nathan Xu

    很棒啊 为什么不上架appstore呢

  • Gyt

    这个图标好萌,目前的版本好多bug,又不能私信,还是用回了官网。

  • henryyan

    的确很棒,可以考虑上架到App Store了,我已经购买了License支持作者

  • 期待分析文章!

    p.s. 目前 app 素质已经很不错了,期待正式版本(我这个不怎么用新浪微博的都打算买个呢

  • bmz

    hi, 用心的态度真的可以肯定,很棒!。其他的先不说,要评论的是这个logo, ,某个程度上这是第一视觉,人们先看到的是它, 就你的使命来说,它是达不到标准的。 粉色缺乏亲和力和专业性,外形也不符合 Mac 华丽的低调。 确实是 QQ 的,但这是大家所需要的感觉吗,是作者需要表达的吗? 信息交流和传达的平台,除去软件本身的完善, logo的选取更是重要。 它要的就是那种感觉,没有年龄层,没有束缚感! 看不出黑猫,只看到肉球,如果在app store里,无推荐的话,只会一扫而过, 就像三星的界面,其实都很努力在做,只是出发点就错误,气泡,卡哇伊,这些都太局限了。  抒发下感想,原标志作者见谅!
    另外如果做到后面的几个部分,read it later  和私信等,就相当不错了。yes.

  • Player2005

    上mas的话就马上买

  • 体验很棒,钱花的值! 感谢作者,希望软件能持续更新

  • FreeWizard

    刚打开就不停的重启……

  • choco

    原来是这样一段艰辛的历史啊~

  • Er

    已购买,学习对细节和交互的处理 。。。

  • treylin

    这个 Mac 应用 值得花钱购买 每当你打开它 提示有新版本更新 修复了bug 或是添加新feature的时候 就能感知到背后有一枚勤劳的程序员在努力着 本人是 iOS 开发者 深有体会啊  会继续支持作者 也希望我们有机会能交流一些开发的心得

  • rainyluo

    买过iyy的路过
    mac上唯一买过的软件……