C’est la“ Vue” 群控编程网

从放弃React.js到Vue.js的旅程

阴谋

随着技术的快速发展和微服务的发展，支持这种建筑设计风格的前端库/框架的数量已逐渐增加。

做出选择已经开始成为一个痛苦。..因为没有完美的框架，有时，薄雾笼罩着时间的薄雾。正如您将看到的，更多的是了解自己想要什么，而不是了解支持框架，社区甚至框架背后的公司的文章数量。

HX团队

HX（Team）代表人类体验，并且是我们选择的团队名称，因为它表明了我们坚信的愿景：“为eMAG的所有员工提供直观易用的应用程序。”

成为HX团队的一员，不仅仅意味着在整个应用程序之间创造令人愉悦的用户体验或一致的UI。我们的使命远不止于此，它转化为开发人员创建易于使用的工具。

React JS

几个月前，我们决定尝试使用一种前端框架，以应对RESTful API的兴起以及前端和后端的分离。该框架应已用于采用这种体系结构设计风格的eMAG中的内部应用程序。

做出选择并不容易，因此我们从以下需求和期望开始：

大型开发商社区
DOM快速更改
伟大的建筑
调试方便

因此，我们选择了React而不是Angular 2（当时是Beta版）。

React是用于构建用户界面的开源JavaScript库。它只是一个库，因此，如果您想使用功能齐全的框架，React团队便发明了Redux（使用Flux架构的框架）。

我们已设定不使用jQuery的目标，因为将它与React一起使用可能会导致页面中的严重问题（例如互相覆盖）。这可能是一个可能的问题，因为我们想重用具有许多依赖jQuery的插件的eMAG Apps UI Kit（内部eMAG UI Kit）（即使UI-Kit使用的Bootstrap 3.5也需要jQuery）。

经过数周的努力，我们所做的努力并没有得出非常切实的结论，其他开发人员也抱怨它难以使用和维护。

因此，我们不得不退后一步，问自己，这是什么问题？

残酷的事实

考虑到React使用ES6，JSX，Flux架构，学习曲线不是一个线性或令人愉悦的
jQuery仍然是一回事。即使在其大型社区中，您也无法在React中找到像在jQuery中那样复杂的插件（例如，带有支持自举且易于更改的子网格的网格）
简单的事情变得很难开发。创建React是为了使DOM更改快速，真正快速地进行，因此您将不得不使用React函数来利用它，而其中一些您将不熟悉（因为React具有不同的架构风格）
React插件不是可定制的，因为要更改其中一些插件需要进行分叉

不要误会我的意思，React很棒，但是仅当您要开发一个简单的应用程序时，UI才能在不同技术之间保持一致，或者真正，非常快地进行DOM更改。

Vue JS

再次找到意义

当我们意识到React不符合eMAG的内部需求时，我们来发现Vue.js。

Vue（发音为/vjuː/，类似于视图）是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。

Vue不仅很棒，而且非常适合我们想要做的事情：

它具有开发和生产任务的惊人样板
它具有短毛绒，用于单元和功能测试的库，全部开箱即用
它可以与jQuery一起使用（通过为插件制作包装器）
它很小
如果需要，它接受FLUX体系结构
它具有出色的模板引擎
开发容易
它将模板引擎与组件javascript分开

通过做出使用Vue的决定，我们已设法将路线图时间与React相比减少了一半（甚至从零开始）。

因此，经过一个月的努力，我们从eMAG Apps UI Kit中为我们的JQuery组件制作了包装，为它们创建了示例，简单的单元测试，所有服务，包括干净的代码和RESTful API以测试前端。

React JS组件

 导出类自动完成功能扩展了React.Component {

 构造函数（道具）{ 
 超级（道具）; 
  this.state = { 
 值：this.props.value ||  ''， 
  } 
  }

  componentWillMount（）{ 
  this.options = this._initOptions（）; 
  }

  render（）{ 
 返回（ 
  <选择异步 
  .... 
  /> 
  
） 
  } 
  } 

  Vue JS组件

   
   
   
   
    
  
 
  
 
   
   
 从'./../mixins/Datetimepicker'导入datetimeMixin 
 导出默认值{ 
 名称：“ datetimepicker”， 
 道具：['dataOptions']， 
  mixins：[datetimeMixin]， 
 数据（）{ 
 返回{ 
  ... 
  } 
  }， 
 已安装（）{ 
  $（'＃date_time_'+ this._uid）.datetimepicker（this.options） 
  }， 
 销毁：function（）{ 
 尝试{ 
  $（this。$ el）.find（'＃date_time_'+ this._uid）.data（'DateTimePicker'）。destroy（） 
  }捕获（例如）{} 
  } 
  }

结论

 现在我们可以说，在做出选择时，我们正在寻找不同的标准：

易于使用
熟悉的
社区（不是很多插件，而是问题的答案）
重用我们的代码