从后端到前端的转变：如何选择框架？( 四 ) _框架

我经常从 Bootstrap 支持者口中听到的一句话是“创建一个漂亮的原型是多么容易” 。同样， React 的支持者会说：“永远不离开 JavaScript ，我喜欢这种感觉。”
如果这些情况在你的组织中很常见，那么你的技术栈可能更多的是为传统后端开发人员的需求而设计的，而这些开发人员恰好在前端工作。
我曾经目睹过一场关于基础设施解决方案的激烈辩论，其中一方指出：
“为了让琐碎的任务变得更加容易，反而让简单的任务变得更加困难。”
当我看到我们的团队试图使用 Bootstrap 和其他替代方案解决问题时，我反而觉得没有这个必要。在我看来，他们试图使用笨拙的解决方案来规避微不足道的问题。对于这些工具的支持者来说，他们好像在为严峻的挑战提供解决方案。
解决方案CSS 框架
为了减少对 Bootstrap 等框架的依赖，我的建议是停止将特定于框架的类直接应用于 HTML 。相反，我会鼓励下面这样的做法：
%our-warning-button { @extend .btn; @extend .btn-warning;}.empty-shopping-cart-button { @extend %our-warning-button;}这种方法有助于将应用程序与 CSS 框架分离，可以将它们视为内部 CSS 框架的“装饰器” 。你现在可以轻松地替换框架、覆盖样式，甚至可以在不牺牲前期速度的情况下发布自己的代码。
集中样式的能力意味着 UI 设计人员可以处理 CSS ，不需要陷入组件的迷宫之中。通过使用领域特定语言，还可以与整个组织内的非技术团队成员和利益相关者进行更好的沟通。
最后（也是最重要的），你在结构和风格之间有了分离的关注点。
SPA 框架
这可能具有争议的，感觉就像一个令人难以置信的长期骗局，但我建议从 React 切换到 Vue.js ，原因是：
<template> </template><script> </script><style> </style>你在这里看到的是 Vue 的“单文件组件” ，它鼓励对关注点进行分离。我非常喜欢 Vue（以及它对简约性的承诺）。
我认为使用 Vue 有一个非常强大的商业理由，因为它降低了非 JavaScript 开发人员参与贡献的门槛。除了专业技能的价值，还会释放出忍者们在其他方面的专长。
不要误会我的意思， Vue 具有 React 等框架的所有特征。它非常灵活，可以让你创造任何你喜欢的项目。类似地， React 的实现方式更加容易掌握（虽然远不到 Vue 那样的程度）。
总的来说，我的建议采用强制分离关注点的编码实践。简化成一套简单的规则：

切勿在模板中放入任何不直接引用预先计算的数据、方法或组件的内容。
仅通过自己设计的类应用样式，并不惜一切代价地避免使用 style 属性。

如上所述，再加上将代码库划分为智能组件和非智能组件，应该可以保持 HTML 足够的逻辑和样式自由。它可能会消除一些捷径，但长期的可维护性收益可以补偿前期的成本。
英文原文：
https://hackernoon.com/the-backendification-of-frontend-development-62f218a773d4

【从后端到前端的转变：如何选择框架？】