Maximilian Stoiber v3.6.0一次满足所有React Boilerplate

最近在2018年6月26日react-boilerplate组件更新到版本3.6.0。 这个大会已经有3年多的历史了,但是,在许多其他大会(超过1.8万个GitHub Stars)的背景下,它引人注目,在哈布雷市几乎从未见过。 它有什么特点? 简而言之-程序集为开发人员提供了“一次全部”!

首先关于悲伤


首先,关于悲伤的事情。 对于React项目而言,入门构建的价值是巨大的。 如您所知,React本身只是一个实现表示级别的库,并且为了创建功能完善的应用程序,您将需要使用许多其他库,因为React生态系统提供了许多此类库。 因此,React项目的配置是一个严重的问题,对于单个开发人员而言,解决方案非常困难。 丹·阿布拉莫夫本人对此非常理解,他说:“配置不应该妨碍入门 。” 并提供了解决方案- 创建React App 。 在这一颇受欢迎的启动程序集中(GitHub上有超过5.1万个Stars),作者试图尽可能地保护开发人员免受配置问题的影响,隐藏默认配置,将模块集减少到最少,从而提供了自动生成组件的可能性,从而营造了简洁感和React应用程序易于开发。 而且,它们基于同一消息提供了推荐程序集的列表 。 这种方法可能很适合吸引新来者,但是由于局限性和配置问题,应用最佳模块的问题以及最佳做法,很快就筋疲力尽。 例如,正在开发他的第一个反应项目的开发人员呢?


有出路


反应样板组件是解决问题的另一种方法,并且“一次完成”。 这是公认的事实上的标准并在工作中经过测试的一组模块,其中应用了项目组织中的最佳实践,包括顾及可伸缩性和性能,引入了可帮助程序员快速开发和调试代码的技术。

组装 开发人员将其定位为高度可伸缩的“脱机优先”(一旦下载的应用程序脱机工作),同时考虑到最佳开发人员的经验,针对高性能并根据“最佳实践”,强大,“生产就绪”进行构建,经过实践检验的基础,用于开发React应用程序。


适用图书馆


有关使用的模块的更多信息:


  • React,v16.4 (Fiber) -关键React算法的逐步实现,可提高开发任务的效率,例如动画,页面上元素的组织和元素的移动;
  • React Router v4.3-实际上是React应用程序的路由器,使构建具有搜索引擎友好URL的应用程序成为可能;
  • Redux v4-一个提供严格单向数据流的库,使应用程序逻辑更可预测且更易于理解;
  • Redux Saga v0.16-一个旨在简化和改善React / Redux应用程序中的副作用(即诸如异步操作如加载数据之类的动作)执行的库;
  • 重新选择v3-一个允许您防止不必要的重绘和重新计数接收到的数据的库,从而加快了React / Redux应用程序的运行;
  • ImmutableJS ,v4-一个在React / Redux应用程序中方便处理不可变数据的库;
  • 样式化组件 v3.3-一个库,可让您摆脱CSS类,成为组件与其样式之间的中间阶段;
  • React Loadable v5.4-一个库,使您可以实现面向组件的方法来进行代码分离和实现后期加载;
  • Jest v23.1, Enzyme v3.3-用于测试React应用程序的库。

可扩展性和性能


该程序集始终执行支持可伸缩性和提高生产率的原则,该程序集的开发人员在Max Stoiber的演讲“ Scaling ReactJS应用程序”Dan Abramov的演讲“ Presentation组件和容器组件”中进行了详细介绍


这些原则尤其包括:


  • 将组件分为展示和容器;
  • 根据一个组件的原理放置代码-一个文件夹;
  • 使用现代工具 (样式化组件,CSS模块)解决大型项目中的CSS继承问题;
  • Redux / Saga应用程序用于简化数据流,简化异步操作。

编码,调试,测试


该程序集提供了很多机会来帮助程序员编写和调试代码:

  • 下一代JavaScript(小写模板,对象重组,JSX语法等);
  • 通过命令行通过选择器,sagas,reducer和测试快速生成组件/容器/路线;
  • 模块的“热交换”,允许立即查看对应用程序代码所做更改的结果;
  • 使用Webpack Dll插件可将服务器上应用程序的启动时间缩短40%,并在模块“热重装”期间
  • 使用AppVeyorTravisCI (默认情况下包括安装文件),它使您可以在Windows和Unix上自动运行应用程序测试;
  • 静态代码分析: ESLintPrettierstylelint会在您的编辑器中自动检查和格式化代码(需要配置,并附带配置文件和说明 );
  • 放置在AWS S3云服务Heroku上 :(需要配置,包括说明 )。

指令行


如前所述,程序集为命令行提供了一组命令,其中实现了开发人员必需的许多功能,包括:


  • 初始化具有100%测试覆盖率的新项目;
  • 在开发者的服务器上启动应用程序;
  • 生成零件,带有选择器的容器,sagas,减速器和测试;
  • 生成项目代码的“生产”版本;
  • 项目测试;
  • 远程调试,允许使用Ngrok服务从Internet提供对本地服务器的安全访问;
  • 棉绒
  • 翻译管理(添加语言,将消息提取到i18n JSON文件);
  • 尽管在build命令行的优点中提到了概要分析,但遗憾的是未找到该概要分析。

有多余的东西吗?


如果您决定不需要某些模块,则可以将其删除,而程序集将为您提供指导( 此处此处 )。


您认为缺少什么吗?


组件提供的其他功能:


  • “离线优先”,这意味着一旦下载的应用程序脱机工作,即使在较旧的浏览器上也可以;
  • “本地Web应用程序”是指在重复访问该应用程序时,用户将收到向主屏幕添加图标的邀请,并且该应用程序可以完全用作“本地”应用程序(但不受应用程序商店的限制);
  • 支持搜索引擎优化(页面标题标签的管理),以支持对JavaScript内容建立索引;
  • Web字体快速加载,消除了与字体加载延迟相关的页面显示延迟;
  • 通过Webpack的图像加载器进行图像优化。

该文件


该程序集有据可查 ,例如,甚至包含有关解决可能出现的问题部分


更新,错误


该项目会定期更新,及时响应其组成模块的更改(最新更新时间为06/26/2018),积极解决问题 :例如,在2018年11月8日,解决了1367个问题,有9个问题正在解决中。


那又怎样


因此,该程序集为React项目的完整配置提供了一个极好的示例,为程序员提供了加速代码编写和调试的条件,并提供了在高度可扩展和高效的应用程序开发中使用的最佳实践的实现示例。


最后 -来自大会Maximilian Stoiber的作者和他的团队的信息:

“如果您需要坚固,经过考验的基础来构建下一个超级食物,并且您具有React的一些经验,那么这对您来说是完美的!”

Source: https://habr.com/ru/post/zh-CN416859/


All Articles