腾讯创意本月推荐

1 创意点的产品功能/使用场景介绍:

      TCR(代码评审)是Code平台中心研发的一个code review工具。通过此工具进行代码评审,能显著的提高代码质量、减少bug、促进团结交流合作。而在code review中用于代码展示的代码阅览器一侧,我们通过一系列的改进和创新为用户呈现了全新的类IDE方式的代码阅览器。

        代码阅览器主要用于呈现代码评审中的代码,包括普通代码呈现模式和差异呈现模式两种。用户除了普通的浏览查看代码方式之外,还可以在代码不同变量和不同函数之间跳转,查看代码大纲,在代码阅览器上进行评论代码,从而达到一个代码级别的管控和交流的作用。

2 创新点的创新之处的具体描述

         Ø Web端代码高亮,无缝阅读体验

        用网页的方式查看代码内容,并根据代码的相关语言特性,高亮其关键字。目前平台支持41种开发语言,囊括了所有的常用开发语言。
        Ø Web端代码差异对比,快速定位无烦恼

       TCR代码阅览器通过左右两屏的方式对比查看代码块,清晰展示当前版本与历史版本的代码差异。其中有差异的部分会用特别颜色标注出来,以代码块的方式给用户呈现。而右侧有工具栏用特别的色块标注,使用户快速定位差异代码块。

 
                                                               图1 web端差异对比

        Ø 交互新颖,代码点评更舒心

        在TCR代码阅览器中,双击进行单行评论,单击选择可进行多行评论。微信对话式的点评方式,按评论对话角色依次替换展示评论,让用户整个评论过程更自然。评论列表可以进行隐藏收缩方便用户在不同场景下进行代码评审。


                                                       图2 新颖的评审交互方式

        Ø 类IDE操作,玩转代码评审无障碍

        点击变量将声明与使用行的高亮;点击跳转自动跳转到变量或者函数的声明行;拥有代码语法大纲模式;可以根据代码跳转痕迹回退与前进…… 没错,曾经只能是在IDE上的功能用户在web侧通通可以享受。拒绝重复学习,拒绝蹩脚操作,玩转代码评审,就从这个强大享受的代码阅览器开始。

                                                      图3 类IDE操作点击变量高亮使用行
 


                                                  图4 类IDE操作单击变量或者函数跳转

3 创意如何产生?

        我们平时写代码的时候,大多数人都习惯使用IDE进行开发。所以,IDE肯定是程序员接触最多、最熟悉的软件之一,IDE之于程序员就跟步枪之于士兵一样。所以,我们经常思考,是否在web端也可以设计出这样一款轻量级的代码阅读器,使开发者在code review的时候可以享受到这种IDE似的效果。高效、快捷、方便的浏览代码,快速理解需评审代码的逻辑、实现细节。

        因此,我们在使用并且对比了业界许多成熟的code review工具(如google code、github等)的代码浏览页面之后,通过学习业界的这些优秀工具的优点,并结合公司开发者常用的IDE的使用习惯,设计属于我们自己的web端代码阅读器,希望开发者在code review的时候,也同时获得IDE似的使用体验。

4 怎么实现的?

        Ø 通过对代码文件内容和格式的深度解析,实现其内容和格式与源文件的一致性展示。
        Ø 在代码差异的产生上,通过自动分析用户上传的文件而产生各处的差异,以高亮、差异块栏的方式展现在页面上,并提供通用的点击功能使用户可以轻松的识别和触及差异块,实现快速定位。


                                                         图5 用户上传diff解析

        Ø 通过一些列支持多语言的词法分析算法,对源文件进行词法分析而标记代码文件中变量和函数,实现变量和函数的高亮和跳转,另外同时对源文件进行语法分析,从而产生源文件的代码大纲。


                                                       图6 获取源码文件进行展现
 

        Ø 通过在web端跟踪用户的代码跳转操作,实现代码跳转痕迹的回退与前进功能;

        Ø 在代码评论上,通过简单的事件处理机制使用户在任意代码行、任意代码位置就可以进行代码评论,包括单行、多行代码评论,另外还将自动通知到相关联的代码评审参与人。

5 产品的意义对未来的展望

         以WEB IDE为目标的TCR代码浏览和代码差异对比功能,目前只是实现了一部分的IDE功能而已。未来将会把更多只有在本地IDE环境才有的功能在WEB上实现,例如:完整的代码语法分析能力和更加精细的标识符识别,函数、类声明识别,函数调用识别能力,以实现跟IDE无差异文件内和文件间的代码跳转功能。通过优秀的文件内和文件间的代码跳转功能,让评审人在阅读评审代码的时候更加方便,也更加容易理解代码的逻辑。