现代前端框架需要您下载开发环境, 完成依赖项, 并在尝试在浏览器上查看代码之前编译代码. 这是一件好事吗? 问题是我们正在建立更复杂的网站吗, 还是说框架本身就很复杂, 引入不必要的复杂性?
Web development today has evolved a lot since the ’90s; we are able to create entire experiences 那。 are very near what any native application can do, 开发过程也发生了变化. 作为一名前端web开发人员只需打开记事本就能搞定的日子已经一去不复返了, 输入几行代码, 在浏览器上检查, 并上传到FTP文件夹.
首先，我必须陈述一个显而易见的事实:世界已经不像10年前那样了. (令人震惊，我知道.惟一不变的是变化. 在过去，我们只有很少的浏览器，但有很多兼容性问题. 今天，你不会看到“在Chrome 43上观看效果最好”这样的字样.4.但在当时，这是很常见的. 我们现在有了更多的浏览器，但兼容性问题更少了. 为什么? 因为 jQuery. jQuery满足了对标准的需求, 它允许您编写操纵DOM的JavaScript代码，而不必担心它如何在每个浏览器和每个浏览器的每个版本上运行——这在2000年代是一个真正的噩梦.
现代浏览器可以将DOM作为一种标准来操作, 因此，近年来对这样一个图书馆的需求大大减少了. jQuery不是 需要 但是我们仍然可以找到一些非常有用的插件依赖于它. 换句话说, Web框架可能不是必需的, 但是，它们仍然是有用的，是流行和广泛使用. 这是大多数流行的web框架的共同特征, 从反应, 角, Vue, 和Ember对Bootstrap等模型进行样式和格式化.
在网络开发和生活中，有一个快速的解决方案总是很方便的. 你以前用JavaScript做过路由器吗? 既然可以通过npm安装前端框架来克服这个问题，为什么还要经历痛苦的学习过程呢? 当客户想要完成任务时，时间是一种奢侈品 昨天 或者从其他开发人员那里继承为特定框架设计的代码, 或者如果您正在与已经使用给定框架的团队集成. 让我们面对现实吧——框架的存在是有原因的. 如果它们没有好处，没有人会使用它们.
那么，使用web开发框架的好处和独特属性是什么呢?
时间就是金钱. 当你在开发一个项目时，客户并不关心你使用哪个框架, 可能他们甚至不知道你在用什么——他们只关心结果, 而且越快越好. 已经建立的框架可以让你从一开始就有一种进步的感觉, 客户从第一天开始就渴望什么. 另外, 你发展得越快, 你赚的钱越多, 因为这个框架释放出来的时间可以被重新分配到更多的项目上.
这都是关于社区的. 在选择框架时, 这是非常重要的一点，当你在一个问题上陷入困境时，谁会帮助你? 你我都知道这是早晚的事. 您将到达需要做一些框架不打算做的事情的地方, 或者这个框架从来没有设计给你访问, 所以有一个支持你的社区是很重要的. 的发展 自由这可能很难，因为你沉浸在虚拟世界中，如果你是唯一 前端web开发人员 在团队中，这意味着你是唯一一个有经验和专业知识来找到解决方案的人. 但是如果您使用的前端框架有坚实的支持, 在世界的另一端，会有人遇到同样的问题，也许能够帮助你.
标准是美好的. 你注意到了吗, 当您查看自己的一段旧代码时, 你可以很容易地浏览它? 或者至少，比别人编写的代码更容易? 你以一种特定的方式思考，你有自己的命名方式和组织代码的方式. 这是一个标准. 我们都遵循它们，即使它们只是为了我们自己. 我们早餐都吃类似的东西, 在特定的时间醒来, 每天把钥匙放在同一个地方. 事实上, 如果我们每天改变我们的日常生活, 仅仅是弄清楚如何做事情的开销，生活就会变得困难得多. 曾经因为把钥匙放在不同的地方而丢过钥匙吗? 标准让生活更轻松. 当作为团队或开发者社区的一员工作时，他们就变得不可或缺了.
框架从安装它们的那一刻起就提供了一个标准, 指导您以特定的方式思考和编写代码. You don’t need to spend time creating a standard with your team; you can just follow how things are done in the framework. 这使得合作更容易. 当您知道函数必须在某个文件中时，查找函数会更容易，因为它是为在SPA中添加路由而构建的, 在你的框架中, 所有的路由都放在同名的文件中. 如果你有这种程度的标准化，不同技能水平的人可以一起工作, 因为当先进的 程序员 知道 为什么 事情是这样完成的，即使是初级开发人员也可以遵循标准本身.
几年前, 如果你说“我不使用框架——我看不出它们有什么真正的好处”，就会有人拿着火把和干草叉找上门来. 但是今天，越来越多的人在问自己，“我为什么要使用框架?? 我真的需要它们吗? 它是 那。 没有它们很难编码?”
我当然是其中之一——我从来都不是某个特定框架的粉丝, 在我的整个职业生涯中，我一直没有他们. 如果这件事让我选择的话，我的选择永远是:“不，谢谢。.“多年来我一直在使用JavaScript进行开发，在此之前我一直在使用ActionScript. 当大多数人都认为Flash已经过时的时候，我还在用它编写代码. (我知道，我知道……但我做了很多动画，在纯HTML中制作动画很难.)所以，如果你是那些从未考虑过编程的人之一 没有 框架，让我向您展示一些您可能会遇到困难的原因.
“一刀切”是个谎言. 你能想象写一个软件就能完成你在职业生涯中完成的所有事情吗? 这是web开发框架的主要问题之一. 你的项目有非常具体的需求, 我们倾向于通过添加库来解决这个问题, 插件, 或扩展框架范围的附加组件. 没有框架能提供你所需要的100%, 没有一个框架是100%由你会发现有用的东西组成的.
有太多不使用的代码会导致站点的加载时间延迟, 随着用户的增加，哪个会变得更重要. 另一个问题是“一刀切”的思维模式导致了低效的代码. 举个例子， $ (' sku-product ').html (909090 SKU);，这是jQuery代码，我们都知道它最终会被翻译成 文档.getElementById(“sku-product”).innerHTML = 'SKU 909090';.
单行上的这种差异可能看起来并不重要, 但是改变页面中特定元素的内容正是React的优点. 现在, React将经历创建DOM表示并分析您尝试呈现的内容的差异的过程. 从一开始就瞄准你想要改变的内容不是更容易吗?
你走过的那片纠结的杂草正在长出荆棘. 您是否曾经遇到过这样的情况:您正在使用框架并试图向其添加库, 只是要意识到您需要的库版本与您正在使用的框架版本不能很好地工作? 有时候，让两段代码一起工作要比你自己编写代码付出更多的努力. 而且由于您使用的框架和库通常是构建在此基础上的 其他 框架和库可能有隐藏的不兼容性，你甚至无法预料, 这个问题的复杂程度会呈指数级增长, 如果你想让项目继续发展，他们就会达到无法管理的地步.
攀比是一件事. 曾经用角JS做过一个项目，却发现你需要一些直到角 4发布才出现的东西? 你知道角 5已经发布了吗? This is an其他 huge issue; even if you’re sticking to a single front-end framework, 当新的主要版本发布时, 事情可能会发生很大的变化，以至于你辛辛苦苦编写的代码甚至无法在新版本上运行. 这可能导致从需要对大量文件进行恼人的小更改到完全重写代码的任何事情.
跟上框架的最新版本是一项挑战, 但同样的道理, 当更新完全停止并且无法跟上其他技术时，其他框架就会受到影响. 2010年，角JS和Backbone都首次发布. 今天，角已经发布了第五个主要版本，而Backbone已经完全淡出了人们的视线. 七年似乎是很长的一段时间. 如果你建立网站，它们可能在美学和功能上完全改变了. 如果你正在开发一个应用, 押注于错误的框架可能会让公司以后陷入艰难和昂贵的境地, 当需要重写的时候.
当你只有一把锤子时，一切看起来都像钉子. 如果你经常使用web开发框架, 这可能发生在你身上, 单个代码库定义了您将来使用的代码的形状, 即使它只是外围相关的. 假设你要建立一个像YouTube这样的平台，你想使用框架X. 可能会有一个点, 即使在这个时代听起来很荒谬, 你决定在视频中使用Flash，因为这是框架内置的.
框架有自己的观点, and they are strong; React, 例如, 强制您以特定的方式使用JSX. 你可以在任何地方看到以这种方式使用代码. 有别的办法吗?? 是的. 但是谁用它呢?? 这并不总是一件坏事, 但是如果你需要执行复杂的动画, 你可能只需要一个动画框架，而不是整个React. 我见过一些人做一些疯狂的事情，比如向页面添加jQuery，只是为了将节点附加到元素上, 一些可以在普通JS中完成的事情 文档.getElementById(“id_of_node”).列表末尾(节点);.
.innerHTML 是狡猾的我想花时间单独探讨这一点，因为我认为这是更多的人在没有框架的情况下不编写代码的原因之一. 当您在尝试向DOM添加内容时看到大多数代码是如何工作的, 你会发现一堆HTML被注入 .innerHTML 财产. 我们似乎都同意这一点 eval 对运行JavaScript代码不利，但我想把 .innerHTML 在聚光灯下. 当您将HTML代码作为普通字符串注入时, 您将失去对您创建的任何节点的任何引用. 的确，你可以用 getElementsByClassName 或者给它们分配一个 id，但这是不切实际的. 当尝试更改其中一个节点的值时, 您会发现自己重新呈现了整个HTML.
当你开始编码时，这是很好的. 即使没有太多经验，你也可以轻松地做很多简单的事情. 这个问题发生在现代网站的复杂性上, 哪一个更像应用程序——这意味着我们需要不断地更改节点的值, 这是一个高成本的操作如果你通过重新连接整个结构 .innerHTML. React通过影子DOM有效地解决了这个问题, 角通过使用绑定来修改页面上显示的值，从而解决了这个问题. 然而, 通过跟踪创建的节点并保存将在变量中重用或更新的节点，也可以相当容易地解决这个问题.
也有 其他原因 远离 .innerHTML 在一般情况下.
时间就是金钱. 是的，我把之前的概念带回来了. 很多人觉得如果他们停止使用一个流行的web框架, 我们将立即转向90年代的互联网, 当 每个人最喜欢的标签是什么, Geocities网站上的旋转动图既时髦又前卫, Alta Vista是网络搜索的首选, 击球计数器无处不在.
使用web框架, 您的第一行代码似乎节省了很多时间, 但在某种程度上, 收益变成了损失. 您将花费时间阅读有关如何使框架做它不应该做的事情的内容, 如何集成库并使它们与框架配合良好, 并且发现您在遵循框架标准时构建的代码根本无法工作，现在您需要重写它. 当你在没有框架的情况下做事时，你开始的速度会慢一些，但你会取得稳定的进展. 最后，最重要的是你想把容易的部分放在哪里. 总时间不会有太大差别.
我的代码会比长城还长. 没有框架的写作就像买电影而不订阅流媒体服务. 你不可能立刻看到数百部你想看的电影, 但你也不必花钱去买成千上万部你从未想过要从商店下载的电影. 你可以只写你需要的.
中间人有用吗? 确定. 但这并不常见 必要的. 你写的每一行代码都有更多的意义, 因为您不需要适应框架的需求. 这可能会让您感觉是在用纯JavaScript编写更多代码，因为创建DOM元素的方式需要行数来创建元素, 将其附加到DOM, 也许还可以添加一个用于样式化的类, 而不是在JSX中调用一行代码. 但如果你用jQuery或React之类的库比较代码, 香草JS在长度上可以非常相似. 有时更长，但有时也更短.
没有必要重新发明轮子. 这是世界各地计算机科学教授的口头禅. 这是真的——它并不一定是指框架. 发送Ajax请求来加载或保存数据几乎是每个web应用程序的需求, 例如, 但是没有框架并不意味着您需要每次都重新编写代码. 您可以创建自己的库或代码库，也可以从其他人那里提取代码. 它越小, 就越容易根据需要进行修改或调整, 因此，当您需要某个项目的特定内容时，它会派上用场. 修改100-200行代码比浏览第三方库或框架可能包含的堆积如山的文件要容易得多.
它只适用于小项目. 这是一个非常普遍的误解, but not true at all; currently, 我正在开发一个完整的系统，可以在一个地方管理公司的所有方面, 包括一个类似Google Drive的模块. 不管有没有框架, 我经历了非常相似的步骤，遇到了非常相似的问题. 差别可以忽略不计. 然而，没有框架，我的整个代码更小，更容易管理.
我要证据
好吧. 让我们停止讨论理论，跳到一个现实世界的例子. 几天前，我需要为一家商店展示一份带有商标的品牌列表. 初始代码使用jQuery, 但它有一个问题, 在Mozilla中加载时, 它显示了一个破碎的图像图标，品牌还没有上传徽标. 我们不能仅仅因为X公司还没有完成他们的工作，就让商店看起来没有完工, 但是这个功能需要上线.
下面的代码使用jQuery等效的 .innerHTML:
var list_brand_names = ['amazon', 'apple', 'nokia'];
var img_out = '';
for (i=0;i![](images/" + brandName + ")
";
}
jQuery("#brand-images").html(img_out);
无需深入了解jQuery的优缺点, 这里的问题是，我们没有任何对我们创建的图像的引用. 虽然有不涉及更改代码的解决方案, 让我们利用这个机会看看如何在没有任何库的情况下完成它:
var brands = ['amazon', 'apple', 'nokia'];
var brand_images = 文档.getElementById("brand-images");
for (var iBrand = 0; iBrand < brands.length; iBrand++) {
var link = 文档.createElement('a');
link.setAttribute('href', '/pages/' + brands[iBrand]);
link.style.display = 'none';
brand_images.appendChild(link);
var image = new Image();
image.src = "images/" + brands[iBrand] + "png";
image.onload = function(){
this.parentNode.style.display = '';
}
link.appendChild(image);
}
最初的jQuery代码只有6行，而普通的JS解决方案则有12行. 为了解决这个问题，隐藏每个图像直到它被加载，需要两倍的时间来编写代码. 让我们看看另一种选择. 它也可以在jQuery中解决吗? 看看吧:
img_out += "";
function showImage(image){
image.parentNode.style.display = "";
}
加上几行额外的代码, 现在，jQuery和vanilla之间只有三行代码的区别, 而是在jQuery上, 你可以看到 img_out Line正在迅速发展，非常复杂, 到了你需要停下来仔细想想自己在做什么的地步. 通过使用节点函数来添加属性，直接对DOM进行编码, 功能, 类似的话可能会更长, 但每条线都更清晰, 更精确的含义, 使其在将来更易于阅读和维护.
让我们来看看React:
function BrandLink(props) {
var url = "images/" + props.brand + ".png";
return (
);
}
class Brands extends React.Component {
constructor() {
super();
this.state = {brands: ['amazon', 'apple', 'nokia']};
}
render() {
const links = this.state.brands.map((step, move) => {
return ();
});
return ({links});
}
}
ReactDOM.render( 这个版本显然不是最优的. 代码并不比香草版本短, 我们甚至还没有解决这个问题，隐藏链接，直到里面的图片被加载.
对于每个例子，结果都是不同的. 有时，jQuery会更短. 有时候，React会赢. 有时候，普通JS可能比它们都短. 无论如何, 这里的目的并不是要证明一个天生就比另一个优越, 而是为了证明在代码长度方面，使用普通JS和使用框架之间没有明显的区别.
就像任何现实生活中的问题一样，没有什么是非黑即白的. 没有web开发框架的编码可能是一些项目的最佳解决方案，而在另一些项目中则是噩梦. 就像每个工具一样, 关键不在于学会如何使用它, 但是,当, 以及使用它的优点和缺点. 在纯JavaScript中编写代码就像使用任何框架一样——在熟练地使用它之前，需要花时间来掌握它.
但关键的区别是, 至少对我来说是这样, 框架来了又走了吗, 即使一个框架流行了很长一段时间, 它可以从一个版本到另一个版本发生巨大变化. 纯JavaScript将是一个长期的选择, 直到它完全失去意义，出现了其他语言. 即使在那时, 将有更多的概念和策略可以直接从一种语言迁移到另一种语言，而不是从给定的框架迁移到另一种语言. 对于单个项目，时间和精力大致相当, 知识贬值的减少和你可以学到的下一个挑战是需要考虑的非常重要的因素.
墨西哥瓜达拉哈拉
2016年6月6日加入
Juan拥有超过10年的自由用户体验经验. 他的作品植根于完美主义 & 为用户提供最好的体验.
以前在
世界级的文章，每周发一次.
世界级的文章，每周发一次.