Juan Carlos Arias Ambriz
Verified Expert in Engineering
Juan有10年以上的自由用户体验经验. His work is rooted in perfectionism & providing the best experience to user.
Expertise
Previously At
Juan有10年以上的自由用户体验经验. His work is rooted in perfectionism & providing the best experience to user.
现代前端框架不断要求您下载一个完整的开发环境, 完整的依赖项，并在尝试在浏览器中查看代码之前编译代码. ¿Es esto algo bueno? 问题是我们正在建造更复杂的网站吗, o框架本身很复杂，呈现出不必要的复杂性?
El desarrollo web de hoy ha evolucionado mucho desde los años 90; podemos crear experiencias completas que están muy cerca de lo que cualquier aplicación nativa puede hacer, 开发过程也发生了变化. 作为一个前端web开发人员只是打开记事本的日子已经一去不复原了, escribir algunas líneas de código, 在浏览器中验证并上传到FTP文件夹中.
我必须首先说明一个显而易见的事实:世界已经不像10年前了. (Impactante, lo sé). 唯一不变的是变化. 在过去，我们的浏览器很少，但有很多兼容性问题. 如今，你不会看到太多像“Chrome 43最佳浏览”这样的东西.4.1”，但在当时，这是相当普遍的. 我们现在有更多的浏览器，但兼容性问题更少. ¿Por qué? Debido a jQuery. jQuery满足了对公共标准库的需求，该库允许您编写操作DOM的JavaScript代码，而不必担心它将如何在每个浏览器和每个浏览器版本中执行, 21世纪真正的噩梦
现代浏览器可以将DOM作为标准来操作, 因此，近年来对这样一个图书馆的需求已大大减少。. Ya no se necesita jQuery, 但我们仍然可以找到一些非常有用的插件依赖于它. En otras palabras, web框架可能不需要, 但它们仍然足够有用，足以流行和广泛使用. 这是大多数流行的web框架的共同特征, desde React, Angular, Vue和Ember到样式和格式模型作为Bootstrap.
在web开发中，就像在生活中一样，有一个快速的解决方案总是有用的. 你用JavaScript做过路由器吗? 当您可以安装npm前端框架来克服这个问题时，为什么还要经历痛苦的学习过程呢? 当客户想要昨天完成的事情，或者继承另一个开发人员为特定框架设计的代码时，时间是一种奢侈, 或者您正在与一个已经使用特定框架的团队集成. 让我们面对现实吧——框架的存在是有原因的. 如果对他们没有好处，就没有人会使用它们.
Entonces, 使用web开发框架的一些好处和独特属性是什么?
El tiempo es dinero. 当你在开发一个项目时，客户并不关心你使用什么框架——事实上, 你可能甚至不知道你在用什么——他们只关心得到结果, y cuanto más rápido, mejor. 设置的框架可以让你从一开始就创造一种即时的进步感, que el cliente anhela desde el día 1. Además, cuanto más rápido se desarrolla, más dinero gana, 因为框架释放的时间可以被重定向到承担更多的项目.
Todo se trata de la comunidad. Al elegir un marco, 这是非常重要的一点:当你陷入困境时，谁会帮助你? 你和我都知道它会在某个时候发生. 它会到达一个点，你需要做一些框架不打算做的事情, 或者这个框架从来就不是用来让你访问的, 所以有一个支持你的社区是至关重要的. 发展——尤其是独立发展——可能很困难, 因为你沉浸在虚拟世界中, y si eres el único desarrollador web front-end en un equipo, 这意味着你是唯一一个有经验和经验去寻找解决方案的人. 但是如果您使用的前端框架具有很强的兼容性, 在世界的另一边会有人遇到同样的问题，可以帮助你.
Los estándares son hermosos. ¿Alguna vez te has dado cuenta de que, 当您查看自己代码的旧片段时, puedes navegarlo fácilmente? 或者至少比别人写的代码更容易? 你以某种方式思考，你有自己的方式命名事物和组织代码. Eso es un estándar. 我们都跟着他们，即使他们只是为了我们自己. 我们早餐倾向于吃类似的东西, 我们在特定的时间起床，每天把钥匙放在同一个地方. Y, de hecho, 如果我们每天都改变我们的习惯, 仅仅因为知道如何做事，生活就会变得更加困难. 你有没有因为把钥匙放在不同的地方而丢了钥匙?? 标准让生活更轻松. 当您作为开发团队或社区的一员工作时, 它们变得绝对必要.
框架从安装的那一刻起就提供了一个标准, 是什么引导你以特定的方式思考和编码. No necesita perder tiempo creando un estándar con su equipo; simplemente puede seguir cómo se hacen las cosas en el marco. 这使得一起工作更容易. 当您知道函数必须在某个文件中时，查找函数就更容易了，因为它的构造是为了在SPA中添加路径, y en su marco, 所有路由都放在一个同名的文件中. 如果你有这种水平的标准化，不同技能水平的人可以一起工作, 因为虽然高级编码人员知道为什么事情是这样做的, 即使是最年轻的开发人员也可以遵循这个标准.
Hace unos años, decir algo como “No uso marcos, 我看不出它们有什么真正的好处。”, 他把人们带着火把和叉子来到他的门口. 但现在，越来越多的人想知道，“为什么我要用一个框架? ¿Realmente las necesito? ¿Es difícil codificar sin ellas?”
Ciertamente, soy uno de ellos. 我从来都不喜欢任何特定的框架, 在我的整个职业生涯中，我一直在编写没有它们的代码. 如果我在这个问题上有选择，我的选择总是:“不，谢谢。”. 在那之前，我已经用JavaScript和ActionScript开发了多年. 当大多数人已经认为他死了的时候，他正在用Flash编码. (我知道，我知道……但我做了很多动画，而简单的HTML动画很难.所以，如果你是许多从未想过编码的人之一 sin 马科斯，让我告诉你一些你可能会挣扎的原因.
“Una talla para todos” es una mentira. 你能想象编写一个软件来完成你在职业生涯中取得的所有成就吗? 这是web开发框架的主要问题之一. 您的项目有非常具体的需求, 我们倾向于通过添加库来解决这个问题, 补充或补充以扩大框架的范围. 没有一个框架能提供你所需要的100%, 没有一个框架是100%由对你有用的东西组成的.
有太多不使用的代码可能会导致站点加载时间的延迟, 随着每增加一个用户，这变得更加重要. 另一个问题是，“一刀切”的心态会导致代码效率低下. Tomemos, por ejemplo, $ ('sku-product'). Html ('SKU 909090');，这是一个jQuery代码，在最后，我们都知道它将被翻译成类似的东西 document.getElementById ('sku-producto'). innerHTML = 'SKU 909090'; .
这种差异在一行中似乎不重要, 但是改变页面中特定元素的内容恰恰是反应的优点. Ahora, React通过创建DOM表示并分析您试图呈现的内容的差异的过程. 从一开始就瞄准你想要改变的内容不是更容易吗?
你走过的杂草越来越多的荆棘. 您是否曾经遇到过这样的情况:您正在使用您的基础设施并试图添加一个库, 只是要意识到您需要的库版本与您正在使用的框架版本不兼容? 有时让两段代码一起工作比自己编写代码需要更多的努力. 由于您使用的框架和库通常是基于 otros 框架和库可能隐藏着您甚至无法预料的不兼容性, 这个问题可能会成倍地变得更加复杂, 如果我想让项目继续增长，就会达到无法管理的地步
跟上琼斯一家是一回事. 你是否曾经在一个AngularJS项目中工作，却发现你需要一些直到Angular 4发布才出现的东西? ¿Sabías que Angular 5 ha sido lanzado? Este es otro gran problema; incluso si se apega a un único marco de front-end, 当一个重要的新版本发生时, 事情可能会发生如此大的变化，以至于你努力工作的代码甚至不会在新版本中运行. 这可能导致从必须对许多文件进行的恼人的小更改到完全重写代码.
跟上框架的最新版本是一个挑战, pero en la misma nota, 当更新完全停止，无法跟上其他技术时，其他帧会受到影响. 2010年，AngularJS和Backbone首次发布. Hoy, Angular已经有第五个主要版本了, 骨干完全脱离了关注的焦点. Siete años parece mucho tiempo. 如果你建立网站，它们可能在美学和功能上完全改变了. Si está construyendo una aplicación, 押注于错误的框架可能会让公司陷入困境, y costosa, más adelante, cuando las cosas deben ser reescritas.
当你只有一把锤子时，一切看起来都像一颗钉子. 如果您经常使用web开发框架, probablemente te haya pasado a ti, 一个代码库定义了您将来使用的代码的形状, 即使它只是外围连接. 假设你要建立一个像YouTube这样的平台，你想使用marco X. Puede haber un punto en el que, 虽然在这个时代听起来很可笑, 你决定在视频中使用Flash，因为这是框架所构建的.
Los marcos tienen opiniones, y son fuertes; React, por ejemplo, 迫使您以特定的方式使用JSX. 您可以看到代码在任何地方都是这样使用的. ¿Hay una alternativa? Sí. ¿Pero quién lo usa? Esto no siempre es malo, 但如果你需要制作复杂的动画, 你可能只需要一个框架来鼓励，而不是整个反应. 我见过一些疯狂的事情，比如在页面中添加jQuery，只是为了在元素中添加节点, 这可以在JS香草中实现 document.getElementById ('id_of_node'). AppendChild (node);.
.innerHTML es Maquiavélico我想花点时间单独探讨这一点，因为我认为这是大多数人在没有框架的情况下不编码的原因之一。. 当您看到大多数代码是如何工作的，当您试图添加一些东西到DOM, 你会发现很多由属性注入的HTML .innerHTML. Todos parecemos coincidir en que eval 运行JavaScript代码不好，但我想放 .innerHTML en el centro de atención aquí. 当HTML代码作为一个简单的字符串注入时, 丢失对您创建的任何节点的任何引用. 这是真的，你可以用 getElementsByClassName o asignándoles un id, pero esto es menos que práctico. 当尝试更改其中一个节点的值时，您会发现自己再次返回整个HTML.
当你开始编码时，这很好. 不需要太多经验，你可以很容易地做很多简单的事情. 这个问题出现在现代网站的复杂性上, que tienden a parecerse más a las aplicaciones; esto significa que tenemos que cambiar constantemente los valores de nuestros nodos, 这是一个高成本的操作，如果你通过重新连接整个结构 .innerHTML. React通过阴影DOM有效地解决了这个问题, Angular通过链接来解决这个问题，将其作为修改页面上显示的值的一种简单方法. Sin embargo, 如果跟踪创建的节点并保存将在变量中重用或更新的节点，也可以很容易地解决这个问题.
También hay otras razones para mantenerse alejado de .innerHTML en general.
El tiempo es dinero. 是的，我以前就把这个概念还给你了. 许多人觉得如果他们停止使用流行的网络框架, 我们将立即切换到90年代的互联网, cuando era la etiqueta favorita de todos, 在Geocities网站上拍摄的GIF是现代和前卫的, Alta Vista是网络搜索的热门, 和访客柜台无处不在.
Con los marcos web, 它的第一行代码似乎在节省时间方面取得了很大进展, pero en algún punto, 利润变成了损失. 你花时间阅读如何让框架做它没有做的事情, 如何集成库并使它们与框架很好地发挥作用, 发现您按照框架标准构建的代码根本不能工作，现在您需要重新编写它. 当你在没有框架的情况下做事时，你开始的速度会慢一些，但你会不断进步. 最后，这一切都是关于你想要简单的部分在哪里. 总时间不会有太大区别.
我的代码会比长城还长. 没有框架的写作就像买一部电影而不是订阅流媒体服务. 不能立即访问数百部你想看的电影, 但你也不需要花钱购买成千上万的其他电影，你永远不会考虑从商店下载. Puedes escribir lo que necesitas.
¿El intermediario es útil? Por supuesto. Pero usualmente no es necesario. 你写的每一行代码都有更多的意义, 因为它不需要适应一个框架的要求. 看起来您正在使用纯JavaScript编写更多代码，因为创建DOM元素的方式需要行来创建元素, 将其附加到DOM中，也许还可以为样式添加一个类, 而不是在JSX中调用一行代码. 但如果你使用jQuery或React等库比较代码, 香草JS在长度上可以相当相似. 有时更长，但有时也更短.
没有必要重新发明轮子. 这是无处不在的计算机教师的咒语. 这是真的——它并不一定意味着具体的里程碑. 发送用于加载或保存数据的Ajax请求是几乎所有web应用程序的要求, por ejemplo, 但是没有框架并不意味着每次都要重写代码. 您可以创建自己的库或代码库，或者您可以从其他人那里提取代码. Cuanto más pequeño es, 更容易根据需要进行修改或调整, 所以当你需要一个特定的项目时，它很有用. 修改100到200行代码要比浏览可能包含库或第三方框架的文件山容易得多.
只适用于小型项目. Este es un mito muy común, pero no es verdadero en absoluto; Actualmente, 我正在开发一个完整的系统，在一个地方管理在线业务的各个方面, 包括一个类似谷歌驱动器的模块. 无论有没有框架，我都经历了非常相似的步骤，遇到了非常相似的问题. La diferencia es insignificante. 然而，没有框架，我的完整代码更小，更容易处理.
QUIERO PRUEBAS
Bueno. 让我们停止谈论理论，跳到一个现实世界的例子. 几天前，我需要给你看一份带有商店标志的品牌清单. El código inicial usaba jQuery, pero tenía un problema donde, al cargar en Mozilla, 显示一个破碎的图像图标的品牌，还没有加载徽标. 我们不能仅仅因为X公司还没有完成它的工作就让商店看起来不完整, pero la función necesitaba activarse.
下面的代码使用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的利弊, 这里的问题是，我们没有任何欧博体育app下载创建的图像的参考. 而有些解决方案不涉及更改代码, 让我们利用这个机会看看如何在没有任何库的情况下做到这一点:
var brands = ['amazon', 'apple', 'nokia'];
var brand_images = document.getElementById("brand-images");
for (var iBrand = 0; iBrand < brands.length; iBrand++) {
var link = document.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个. Para resolver el problema, 隐藏每个图像直到它加载, toma el doble de tiempo codificar. Entonces veamos la alternativa. ¿Se puede resolver en jQuery también? Echale un vistazo:
img_out += "";
function showImage(image){
image.parentNode.style.display = "";
}
加上几行额外的代码, 现在jQuery和vanilla之间只有三行区别, pero en jQuery, puede ver que la línea img_out 它生长迅速，非常复杂, 在某种程度上，你需要暂停并仔细考虑你在做什么. 通过使用节点函数添加属性直接对DOM进行编码, 函数和类似的东西可能会更长, 但每一行都有更清晰、更精确的含义, 是什么让它在未来更容易阅读和维护.
Echemos un vistazo a 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( Esta versión es claramente subóptima. 代码并不比香草短, 我们还没有达到解决问题和隐藏链接的点，直到它们包含的图像被加载.
对于每个例子，结果都是不同的. A veces, jQuery será más corto. A veces, React ganará. 有时香草JS可能比两者都短. En cualquier caso, 这里的目的不是证明其中一个在本质上优于另一个, 而是证明在代码长度方面，使用香草JS和使用框架之间没有显著区别.
就像几乎所有现实生活中的问题一样，没有什么是非黑即白的. 没有web开发框架的编码可能是一些项目的最佳解决方案，而对另一些项目来说则是一场噩梦. 和所有的工具一样, 关键不仅仅是学习如何使用它, sino cuándo, 以及使用它的优点和缺点是什么. 纯JavaScript编码就像任何框架一样:掌握它需要一段时间，你才会对使用它感到舒服.
Pero la diferencia clave, al menos para mí, es que los marcos van y vienen, 即使一个框架很受欢迎很长一段时间, 可以从一个版本到另一个版本进行巨大的更改吗. 纯JavaScript将是一个更长的选择, 直到它不再完全相关，出现了另一种语言. Incluso entonces, 将会有更多的概念和策略可以直接从一种语言迁移到另一种语言，而不是你可以通过给定的框架迁移到另一种语言. 当涉及到一个项目时，时间和精力或多或少是相等的, 减少知识的贬值和它可以带给你下一个挑战的教训是需要考虑的非常重要的因素.
Located in Guadalajara, Mexico
Member since June 6, 2016
Juan有10年以上的自由用户体验经验. His work is rooted in perfectionism & providing the best experience to user.
作者是各自领域的专家，并就其所展示经验的主题撰写文章. 我们所有的内容都由同一领域的顶级专家同行评审和验证.世界级的文章，每周交付.
世界级的文章，每周交付.
Join the Toptal® community.
