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

suosuopuo 发布于2019-08-21 10:35 / 872人阅读

摘要：一直是我挂在嘴边的话题。今年月也曾展望过，那时候是考虑用高版本的来重构，然后逐步迁移到上面去，然而最大的问题还是没人，没时间的问题。关于作者彭博前端工程师新的体验总是好的原文链接

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

服务器托管云服务器前端react 前端框架react 新欢 coding

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85828.html

2017-09-27 前端日报

摘要：前端日报精选是如何工作的内存管理如何处理个常见的内存泄漏译中的面向对象原型原型链继承源码事件机制考拉升级经验掘金中文第期你知道编译与解释的区别吗视频在白鹭引擎中的实践王泽变量自定义属性使用指南众成翻译禁止手机虚拟键盘弹出做 2017-09-27 前端日报精选 JavaScript是如何工作的：内存管理 + 如何处理4个常见的内存泄漏(译) js中的面向对象、原型、原型链、继承Vue....

wangym 2019-08-21 16:47 评论0 收藏0
Vue.js快速入门

摘要：今年以来，的文档更新很快完善社区也日渐状大，再加上于某厂你懂的大力的推广，的前景十分光明。一般情况下，中小型的系统从迁移到版本大概只需要天的时间。快去动手尝试吧原创新书移动前端高效开发实战已在亚马逊京东当当开售。作者：晓飞（沪江Web前端开发工程师）本文原创，转载请注明作者及出处 Vue.js框架已经火了好长一段时间了，早在2015年的双11中，淘宝的部分导购业务——如：双十一晚会摇...

KitorinZero 2019-08-20 19:06 评论0 收藏0
Reactjs vs. Vuejs

摘要：上图是二月份前端框架排名，位居第一，排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档，才发现另有蹊跷。欢迎大家关注腾讯云技术社区-segmentfault官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经...

AaronYuan 2019-08-20 16:24 评论0 收藏0
前端每周清单第 40 期: JS 的 Core 与 Cost，Node 内存溢出调试，Softwar

摘要：已被所有主流浏览器支持在过去几周苹果的浏览器与微软的浏览器分别发布新版本，支持了，再加上早已支持的和，已得到所有主流浏览器支持。 showImg(https://segmentfault.com/img/remote/1460000012086220?w=1240&h=823); 前端每周清单第 40 期: JS 的 Core 与 Cost，Node 内存溢出调试，Software 2...

番茄西红柿 2019-08-21 17:43 评论0 收藏0
前端窝 - 收藏集 - 掘金

摘要：毫无疑问，设计模式于己于他人于系统都是多赢的设计模式使代码编写真正工程化设计模小书前端掘金这是一本关于的小书。 JavaScript 常见设计模式解析 - 掘金设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的；设计...

李文鹏 2019-08-21 11:41 评论0 收藏0