新欢 React 在 Coding 2.0 中的前端尝试
发布在Coding 技术博客2015年7月27日view:2511前端开发SPA,WebAppJavaScriptReact
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

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

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

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

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

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

Modal

每次用 Angular 实现的 modal 的时候,用过的人应该都会发自内心的吐槽(旁白:怪我咯,都怪我咯…)

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

enter image description hereenter image description here

Layout

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

enter image description here

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

enter image description here

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

图片

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

enter image description hereenter image description here  咳咳,请男同学们注意标红的地方哈。

Loading

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

图片

列表自带 Loading 状态:

enter image description here

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

Coding 2.0 in Coding+

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

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

而 Chrome 插件有两个好处:

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

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

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

关于作者 enter image description here 彭博 @ Coding.net / 前端工程师

新的体验总是好的!

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

评论
发表评论
1年前

mark

1年前

不错,mark一下

2年前
赞了此文章!
WRITTEN BY
Coding
云端开发平台 > https://Coding.net/
TA的新浪微博
PUBLISHED IN
Coding 技术博客

Coding.net 为软件开发者提供基于云计算技术的软件开发平台,包括项目管理,代码托管,运行空间和质量控制等等。目前,Coding.net 的核心业务包括:

代码托管平台 通过代码版本控制系统 git 进行公开项目或者私有项目的源码托管。

在线运行环境 无需重复搭建配置环境,一键部署,在云端进行项目展示。

代码质量监控 通过自动化静态代码分析等管理工具,发现代码问题,获取代码度量信息,及时了解代码质量状况,保证项目管理质量。

项目管理平台 通过社会化项目协作管理平台,开发团队成员之间可自由进行信息交流、知识分享、任务管理和项目讨论,让远程协作和云端管理变得简单高效。

Coding 官方技术博客 : http://blog.coding.net/

我的收藏