新欢 React 在 Coding 2.0 中的前端尝试

Coding 2.0 一直是我挂在嘴边的话题。

老板说了，等我们“有钱，有人，有时间”了就有机会弄了。

但是我从他第一次说就没当真，这种 “有钱，有人，有时间” 的情况，在创业公司里应该是不太可能出现的。

今年 2月 也曾 “展望” 过 Coding 2.0，那时候是考虑用高版本的 AngularJS 来重构，然后逐步迁移到上面去，然而最大的问题还是“没人，没时间”的问题。

这种状况让我也无能为力，每每想到这些，挫败感很深，然后，习惯了以后，也还是能活得下去…

然后顺着 WebIDE 吹来的 React 风潮，我也顺便开始玩了玩，也有空没空跟 刘辉 交流交流，于是就有机会写了些下面的这些组件：

Modal

每次用 Angular 实现的 modal 的时候，用过的人应该都会发自内心的吐槽（旁白：怪我咯，都怪我咯…）

然而，写了一晚上 React 的 modal 组件，总算是能够这么简单的使用了，show 设置为 true 显示，关闭调用 onClose 方法：





Layout

说到布局，也是心伤，我们的应用是一个 SPA（Single Page Application）,可还大量保留了传统网页的滚动条，体验上就差很多，比如：

上图滚动条只应该出现在成员那一列，还有公开项目底部滚动条:

而我认为的一个好用的布局器应该是这样的，它能让你在想要有滚动条的时候有滚动条，想要定宽就定宽：

于是又 写了一晚上的 Flex 布局器，终于可以轻松的干掉恼人的全屏网页滚动条了





咳咳，请男同学们注意标红的地方哈。

Loading

写了一堆列表以后，每次写 Loading 都很烦，要维护一堆 loading 状态，然后写了下面的列表组件，妈妈再也不用担心我写出各种各样的列表 Loading 样式了…

列表自带 Loading 状态：

总结下上面所说的，上面的那些组件都是在被坑过无数次，才总结出的经验教训，才知道我们真正在开发中需要什么，所以 Coding 2.0 用什么框架实现并不是重点，重点是它一定是：开发体验舒适，能让开发者更多的关注业务细节和用户体验而不是框架本身的一些乱七八糟的问题；性能卓越的；维护性佳的；可测试的；可重用的

Coding 2.0 in Coding+

Coding 2.0 的念头总会隔一段时间就冒出来一下，而这次，我又找到了一个相对“轻松”一点的推进想法的方式：我不要多少人、也不需要占用多少工作时间，也没人为它买单付账 —— 利用 Coding+ 发布我觉得需要重构或者重写的功能，在性能和体验上做一些尝试

Coding+ 公司大部分人应该有听说过，是用来增强 Coding 的功能的，是个 Chrome 插件，在 Chrome 官方市场上搜索 “Coding+” 就能下载到

而 Chrome 插件有两个好处：

能够轻松的 跨域访问 – 我可以不用做任何代理就能像 Coding 服务器请求数据
随时体验新功能 – 我可以随时发布最新的版本让所有用户体验



开发这些组件确实很费时间，但是 React 给我的开发体验是非凡的，它概念极其简单，上手很快，而且进阶也很舒适，所有组件的实现都没让我有挫败感

我希望，有一天这个项目能够获得整个公司的认同，并真正投入“人、时间、钱”到 Coding 2.0 项目上，我觉得 Gmail —> Inbox 就是一个很好的范例。

关于作者

彭博 @ Coding.net
前端工程师
新的体验总是好的！

原文链接：https://blog.coding.net/blog/coding2-feasibility-trial