我用React.js的灯泡时刻

我从事开发工作大约12年,热情地从事了15年。 那15年充满了变化和有趣。 我已经从Netscape Navigator变成了坏人,并且不管Internet Explorer 6是一个很酷的新手,还是一个经典的ASP和记事本世界(无论如何,他们都需要一个IDE?),我信不信由你–到了Java语言是一个新世界受到重视,现在是增长最快的语言,有十亿个图书馆支持,每个人都想雇用“全栈Javascript工程师”。 那是我没想到的。

随着开发技术和技术速度的巨大变化和曲线变化,业务和应用程序的增长也随之而来。 如此快速的增长带来了整体上能够控制您的应用程序和开发路线图的更大需求。 输入过去一年的文章和工作描述中最常用的库“ React.js”。

现在,我并非一直是React的最大粉丝,实际上刚开始相反…… *借口自我*

除了我的失误,沟通不畅和热情洋溢的互联网咆哮之外,确实花了我很长一段时间才能接受像React这样的新框架。 作为一个热情的开发人员,他拥有大量的经验和疤痕来证明这一点,因此我很难重新考虑整个前端开发过程。 我花了一段时间才弄清楚React适合的地方以及类似的时间。

步骤1:验收

我要做的第一件事也是最重要的事情是,在现实世界中进行第二步。 我曾尝试实施一个受时间限制的激情项目,尽管它进展得并不顺利(实际上完全没有……),但进展并不顺利,无法保证我重新编写整个前端。

作为唯一的开发人员,我一直在全栈Node.js应用程序上为客户签约2年左右。 该应用程序从紧密耦合的前端和后端开始,在同一解决方案中,两者仅由2个文件夹分开。 随着项目的发展,对更大可伸缩性的需求变得显而易见。

该应用程序的特定部分具有很多用户交互作用,必须处理许多事件和UI更改,我很快将其确定为React提供的理论的理想人选。

步骤2:实施

我首先采用了已经存在的相同功能,然后拿笔和纸,以块的形式说明了基本功能(我经常这样做……):

下一步的逻辑步骤是正确考虑组件,以及如何分解此页面。 那变成了这样的东西:

我将其构建为基于组件的格式,并在需要时将其分解。 例如,我将从“ FilterGroup”组件开始,然后当我进入其中的循环时,在那里将有单独的样式和绑定到该项目的UI交互/状态更改(例如,点击事件,传递的API数据),我将创建一个子“ FilterItem”组件。

步骤3:实现

我一点一点地开始了解React打算为您提供的功能,灵活性和粒度。 将每个组件分解为基本的原始状态,然后向其中添加简单的功能,使所有事情都更易于处理,尤其是在规模方面

我喜欢这样想象:

在我的新React世界中:

一旦完成重新构建庞大的应用程序的任务,我就会非常高兴。 在React版本的实现过程中有很多地方,我确实(自然地)遇到了错误或不太正确的事情,但是由于代码的微小部分和所关注的单个状态,它们能够迅速地修复它们。

数据无法在“ AppliedFiltersList”组件中正确呈现? 没有戏剧性,页面的其余部分仍然有效,嘿,如果我对该组件进行了测试,它将在单个位置失败,如果测试通过,则错误仍然在单个位置发生。 不再筛选庞大的堆栈,尝试记住可疑代码所在的JavaScript模块。

步骤4:投资

经过几年的反复思考,向其他人解释了为什么我“不需要”或“不想重新学习我已经做过的一切”,甚至“不能rs了,它只会在6个月内再次改变为其他新事物。” —我花了整整一周的时间不仅做了180度的转弯,而且做了那次转弯,极力地向相反的方向冲刺,我的手臂张开开放拥抱React的一切。

时光倒流到今天,我很幸运,经过讨论和关于我到目前为止所取得成就的演示,我现在的雇主看到了与我相同的收益。 我们正在投资用React完全替换前端(还有一些类似Redux的好东西还没有出现……)。

建立团队时,关注点分离的重要性变得越来越重要。 对代码质量和技术债务的关注变得越来越重要。 我们相信使用像React这样的框架:

  • 强制执行特定级别的结构以进行编码
  • 使其非常容易地独立测试前端组件和功能
  • 使人们可以轻松地在应用程序的各个区域中工作
  • 允许单独审查组件
  • 等等
  • 等等

这就是我们在其中投资的内容。

步骤5:成熟的学生

Oxymoron? 是吗?……重点是永远成为学生,但对您的知识要成熟和自信。 对新事物持开放态度,直到看到适合您的现实用例,您才可能会眼前一亮,但要尽量开放以了解界限之外。

这可能是一堆乱七八糟的东西,但是如果它能帮助或激发你们中的任何一个人(年纪大,睿智,风化,破碎,动力,决心,天真,有经验的人),像我这样的人,看看这样的事情可以在哪里帮助您,真棒。

如果没有漫长的跋涉,那就太好了,如果您觉得自己的应用程序变得越来越大,花了更长的时间查找错误并修复错误,那么发现很难编写有意义的,可测试的,分离的代码,请尝试一下,您将一无所有。