重新思考现代网络
#javascript #网络开发人员 #tooling #webqit

前端有工程问题！

这是一个通过大约每种措施（从增长率到技术巫师）大致构建了最令人羡慕的工具生态系统的领域，以及这一举动的令人难以置信的思想领导力，

但仍处于底线：

  • 平均网站性能仅与我们退缩！
  • 普通开发人员的生产率只会停止！

因此，事实证明，所有这些“充满活力的生态系统”并没有真正转化为用户 front上的“可访问”，“功能”应用程序，也不是更多的“ speed”和开发人员的“生产力” front！

您离Frontend的瓶颈越接近，以及其中多少是工具引起的，您想知道我们是否只是在工具上创造了比我们解决的更多问题！

The Counterintuitive Equations!
Looking Back: The Paradigm Shift!
Towards a Faster Web: A New Quest!
Introducing: Web-Native Development!

违反直觉方程！

考虑一下自己的自欺欺人...

...在用户前面

给定real world network and device-capability factors，性能从少递给字节开始，尤其是当它向javaScript -your most expensive asset时。 （事实是，所有额外的东西，例如即时导航和过渡，都会使您的用户满意您的应用程序首先可以访问！）

不幸的是，将其作为主要呼吁的水疗框架使他们的工程模型采用对面方式：朝着更多的JavaScript ！这些可能遵循不同的编程范式...但是所有这些都有相同的 javascript 底线！

  • [HTML, CSS, JS]> Build_Step> [JS, JS, JS]，例如Svelte，Vue
  • [JS, JS, JS]> Build_Step> [JS, JS, JS]，例如反应

您的最后捆绑包在这里是您的框架捆绑包的总和，加上您的 Essential JS，以及诱导的（通常是更大的）JS页面结构，内容和样式 - 明显的数学到Frontend的terrifying payloads！

现在，您的应用程序的全部重量现在最终以JavaScript为顶...及其非JS方面 - 页面结构，内容和样式 - 现在在JS中被解释了，您现在为现实世界设置了错误的设置！很快就会清楚您在应用程序成为真实事物并随着每一项体重而开始退缩的刀边缘很清楚！

开始退缩！

不足为奇...“高度优化”，“可访问”，“功能”应用程序的想法很快就会崩溃！

在2017年现实世界网络绩效预算（here）中报告此信息，Alex Russell relates：

“我已经看到了刚刚在现代技术堆栈中重建的团队，因为我们在使用他们的“更好”，“更快”的经验的经验中，持续了一个小时条件。”

Tam Kadlec也notes from field experience：

“清楚的是：现在，如果您使用框架来构建网站，那么即使在最佳情况下，您也会在初始性能方面进行权衡。 [...]如果您要使用以下框架之一，那么您必须采取额外的步骤来确保您在此期间不会对性能产生负面影响。”

在对话中通常被排除在对话中，但是许多人遇到了比以前更多的工具引起的性能问题！多么适得其反！

...在开发人员 Front

性能就是能够以最少的开销来驯服复杂性。这要求采用抽象/工具来管理复杂性，以保持“第一个不伤害”原则...确保您至少对开销的生产力不如没有它。” （Swyx）

问题是：我们真的在管理复杂性方面有所改善吗？当我们陷入时，并不是比以往任何时候都更复杂的时候，整个deep programming concepts的课程取代了以前是“ HTML”的问题，而且还有一个杂耍。 compilers-本身必须迎合许多新的范式，魔术语法和方言！

现在，我们必须严格地经过惊人的高度代码级复杂性，并支付A compile-step 的价格（使用Webpack和babel（或类似的野兽） ）以及具有工作网页的配置，插件和扩展程序）！但这还不是全部，我们还必须与令人难以置信的运行时行为（钩子和朋友），以及 debug 通过我们代码的难以转换！

此时...您现在完全在破解不同等级的螺母！一切简单都很难再次 1 ！

Jelan shares her frustration：

“我对使用最常见的前端框架所需的所有复杂性越来越沮丧。在绝大多数情况下的手段。”

和Chris Coyer puts a fitting analogy to that：

“具有讽刺意味的是，虽然工具增加了复杂性，但使用它们的原因是与复杂性作斗争。有时感觉就像将美洲狮释放到森林中以解决您的蛇问题。现在您有一个美洲狮问题。” <<<<<<<<< /em>

看，要使您进入成功的坑中 2 使您更复杂，比起初 更复杂！ （在essential/accidental 3 刻度上，那就是您拥有“偶然”（工具引起的）复杂性，胜过您的“必需问题”（真正的问题空间）复杂性！）完全适得其反！

如果有明显的东西，那是每次都破坏体验的一件事：“ javascript” ;这次，不是传统的“ HTML，CSS，JS”方法中的“ JS”，而是我们的新“ All-JS”方程中的“ JS”：

  • “ all-js 底线”工程模型 - 将所有页面结构，内容和样式带给JS（Build_Step => [JS, JS, JS]）！
  • “ all-js 前线”工程模型 - 默认为JS用于创作页面结构，内容和样式（[JS, JS, JS] => Build_Step）！

回顾：范式转移！

由React的Rethinking Best Practices音调发出信号，早在2013年3月，Frontend的New Era在很大程度上坐落在似乎是通用的公理上：传统网络很糟糕；抽象！此后，关于Web应用程序故事的所有“传统”（从创作到运行时）从那以后注定要 Attractration 或重新设计 - 与传统的“ HTML”，CSS，CSS， js“而dom是战争的第一个伤亡，而javaScript是新的默认本能！

脱离技术的全新生态系统已经旋转，每个生态系统都伴随着虚假的二分法，并与Web基本面保持防御能力！这是为了深入了解思考过程...

从HTML到JavaScript：

从Web平台到抽象：

...从HTML到JavaScript

出现令人惊讶的出埃及记！

“ HTML最近是Web开发社区中的奔跑。 JavaScript”，writes Mark Steadman

React的infamous movement可能具有JSX的初始背景，后来是CSS-in-JS！但是不幸的是，这已经扫除并推翻了前端工具空间的更大份额！现在您到处都有多个JS优先的议程 - 即使在Web平台建议板上！

将其视为光荣的提及：

  • HTML Modules-提议的“ JS -First” 导入“ HTML”。
  • CSS Modules-“ js -first” import “ CSS”的机制。

慢慢地，HTML问题空间中的某些属于JavaScript功能提案现在开始降落 - 有时是彻头彻尾的名称quatting html！

但是，避免您问“ HTML模块”和朋友如何解决问题：也许他们会这样做！但是，这些当然不是“ html”的问题，而是JS-优先世界中“意外限制”类型的问题！这样的建议只是以“非常规”方式的症状。您必须无休止地建造JS优先桥，为其他HTML/CSS的东西寻求JavaScript隐喻，并希望其余的网络都有颜色的yellow！ （您可以清楚地说出这些不是一个功能，而是一种结束的手段！）并注意这是如何出现的，即使有紧密耦合的风险/em>， dom-agnostic 带有dom的编程语言！ （请参阅原则上的HTML模块如何折磨JavaScript语言来产生DOM原始语！）

事实证明，它不仅是通过后门走私进来的JavaScript，而且还有更多的HTML和CSS被扔到窗外！ （可能是更大的伤害！）考虑一下HTML Imports从规范中删除（而不是改进）的情况，以支持ES6 Modules-或现在可能是上面的名称较高的HTML Modules！碰巧的是，“以JS为中心的时代精神赢得了这一胜利” - 将其放入Brad Frost's words！

中

有人指出要删除范围的CSS，而转向基于阴影DOM的CSS？我们来吧！

js-First以这种方式导致了许多围绕HTML的好思考的焦点，只是为了让他们重生JavaScript！不可逆转的全命名！

针头说的是，HTML中的许多高度错失功能甚至在提案板上的雷达中都没有！实际上，当您环顾四周时，HTML有多少“开发人员的思维方式”可以推动这些？

这是如此之深，以至于您敢于与现状抗衡并在真正的UI开发技能上建立专门的职业，这意味着更少的工程，您会发现自己在Great Divide和risk not having a career的边缘化的一半中！ （因此，many devs have had to acquiesce against their own will考虑到有账单要支付！）

...从网络平台到抽象

突然，平台被放弃了！

出于对网络平台的蔑视和错误表征，现代抽象的重点似乎有点像重新设计网络语言，复制平台功能和API ，重复浏览器的努力！使用Web平台的整个想法仍然是脱离技术的没有吸引力的选择。在Alex Russell's words中说，“框架作者的激励措施与兼容性不符”。我经常看到“网络标准”只有在大新闻或表现增长的地方被吹捧！

回顾多年来的反应及其生态系统如何保持独立，Mikeal Rogers相关：

“我记得何时启动React，整个事情都是关于Dom的差异。它的价值是这个虚拟的DOM。然后，我们快速地使DOM变得很快，现在谁给了狗屎。但是我们是由于我不知道。 t从平台上进行此功能升级。[和]我认为该平台开始赶上了很多其他示例，然后框架可以。” - JS Party – Episode #89 | Changelog

我们似乎只是为了交易“ norm”，但在摘要 world中寻找“类型”！

以及框架优先文化的特别悲伤的含义？我们投资于脱离技术和侧面生态系统的越多，我们对真正的问题空间的了解和实际移动Web向前的所有机会 ！事实证明，迄今为止，HTML及其生态系统仍然存在 ，而框架网络继续蓬勃发展！现在，您几乎可以肯定会被滞留在香草html和dom中的沙漠土地上。

：

“确实令人沮丧的是，这些天最有用的工具是针对React项目和/或需要React知识来设置和使用的。这锁定了我们许多人没有为所有事物使用React＆谁仍然喜欢他们项目的香草路线。” -Sara Soueidan

您只是意识到每个人似乎已经与真正的“问题空间”类型的问题断开了连接，并埋在“抽象”问题中，这使我们为特定于框架的解决方案解决了非常常见的问题！

事实证明，对所有渴望香草网络简单性的人来说，实话仍然是一种真正的威慑力。 （这也应该是雷米·夏普（Remy Sharp）问：what's stopping you from using exactly [that] method today?的挑战的一个有效挑战）

）

尽管在工具空间中出了很多问题，因此只有预期的是：一个庞大的社区在网络基础上遭受了一个可怕的盲点！地面真理现在到处都有辩论，“最佳实践”实际上是麻木的（hi Pete），标准越来越多地在开发人员中失去了自己的位置！ （考虑调查：What do you know about Web Standards?。）

去看一个典型的讲框架的开发者 - 即使在他们的角色老年人中；去检查即将一代的典型学习路径；然后去看看工作委员会上的现代前端职位描述！令人惊讶的是，现代开发人员的职业现在对Web技术本身以及“最受欢迎的框架的复杂性”的所有内容都不了解，将其放在Frédéric Bonnet's words中！看到吗？

有一个破坏性信息差距和A 文化侵蚀 4 现在也超越了我们！

可以说，过去十年是疏远的生活与传统智慧的生活，几乎完全花了 html-并在旅途中燃烧我们的船只 - 不可逆转的赌注 javascript ;转向我们的背部，将污垢扔到Web平台上，以抽象的方式将其投入到银行期货！但是，只有少数人真正谈论了这十年的转变几乎不可逆转的命题...

“在将前端提升到严重的代码之地时，我们不仅使事情变得令人难以置信的过度工程，而且我们还为我们首先在这里起床的所有梯子都放火了。” <<<<<< /em> - Laura Buns

迈向更快的网络：一个新任务！

随着框架时代的弊端变得越来越明显，bells and whistles of the decade正在失去对人的魅力！人们现在正在我们的生活现实中走来走去，许多人正在积极回到他们的生活中，以寻求理智，冒着将火把和干草叉带到他们家的风险！

！

但是，工具层的理念又如何：现在是时候重新思考了吗？这取决于您要问的是多少！

一方面，人们一直在努力识别和解决当前系统中固有的开销。 （但是，当然，不是要重新思考整体JS优先哲学！）

例如，意识到运输应用程序的想法仅仅是JavaScript在用户方面没有工作的任何功能，因此React和朋友从那以后就回到了能够通过网络发送HTML的想法。这呼吁进行重大的建筑返工（想想React 18's Streaming SSR architecture）；这是与Gatsby这样的构建工具静态站点生成的现有想法的补充。服务器端渲染（SSR）和静态站点生成（SSG）已经成为现状！

的壮举

因此，现在，HTML和渐进式增强再次成为“ All-Js或Nothing”营地的有吸引力的选择。 （实际上，Remix是一个新的吹牛！用它自己的话说：谁知道？）组合在一起，所有新的收入都代表了一个新的游戏计划：很长一段路回到基础知识；在其initial takes上有些妥协，但有点更大的好处：朝着更快，功能的前端！

！

另一方面，一波新的创新浪潮正在以比较雄心勃勃的舞台上的焦点，而持续的长时间痛苦的步行回到基础知识：这次，彻底的HTML优先，首先是“渐进式增强”的想法从一开始就进行建筑！ （SitePen Engineering提供了完美的Intro to HTML-first Frontend Frameworks，具有Qwik，Marko，Astro，11ty，Fresh和Enhance;这绝对值得您的时间！）

我觉得这特别有趣，因为最后，每个人都可以看到，更快的网络的想法并不一定是我们多年来一直遇到的艰难，强度且难以捉摸的事情！现在，比以往任何时候都更清楚我们一直处于多大的幻想...保持专注于JS ，但却订阅了html ，尽管巧妙地！您还会意识到：网络上的HTML不一定是任何“现代”智慧，或者如此大的创新或任何壮举！不是当这是网络创世纪所拥有的东西时！ （从PHP的第1天开始流式传输SSR，有人吗？）

可悲的是，我们似乎只有在工具方面的事实之后才活着，但是由于新的框架浪潮散发出了公开挑战现状的光线！最后，我们到达了我们可以充满希望的地步：拥有“可访问”，“功能”应用程序的前景！ （希望相关是我们现在第一次的方式 - 自JS制作时代-recorded a less steep increase以来的JavaScript数量已发送给用户！）

所以我们现在很好吗？好吧，不只是！

似乎不是我们只有一个想法的一半来：将页面作为html发送，而是以js为例。解决了权衡问题及其在用户正面的开销，但在开发人员的前面保持不变！清晰了吗？我们新的html-first方程中的“ html”的 仍然是工具收益的html ，而不是手工作品> ;与以前一样，HTML被视为A 编译目标，A 实现细节 ...您要抽象的具有良好的DX！ “工具”仍然是前端的“ html”结束的主要手段！

这个纯粹的想法是在编译墙后面获得“ html”而倾向于抽象，也开始说我们可能还以新的方式遭受了十年的盲点，以一种新的方式 - 拥抱HTML仅用于性能激励措施，而不是使用平台 的整个想法！让我们把它扔出去：前端仍然与使用平台与give legacy tooling their well-earned rest和take a correction back to simplicity！

不符。

Chad Fowler notes这有多深：

“我年龄越大，我就越意识到技术要解决的最大问题就是让人们停止使事情变得比他们必须更难。”

那么，只需进行比赛...并拥抱整个网络平台的事情呢？现在，我们不仅会在 user Front和开发人员 Front上解锁性能，而且我们会做更多的事情：释放网络的全部潜力！ （还有一个更雄心勃勃的目标？）

实际上，这就是为什么我们在这里！我们可以跳到好零件吗？

介绍：网络新开发！

将其视为新框架或某些反框架运动的名称，而是释放网络全部潜力的剧本。

Web-native开发 5 是一种用于Web开发的方法，它将Web平台视为整个应用程序故事中的推动者，实际上，这是成功成功的基本关键这个故事的每个阶段 - 从创作到运行时！这是对长达十年的文化转变及其在网络平台上的悲观态度的艰难重置！

这实际上是关于拥抱和利用本机Web技术，API，语言和惯例等，以及最小化工具！实际上，生活中有一段时间是您真正想要的……用戏剧少做的事情！ “我在编程的20年中已经参加了足够的团队，几乎比其他任何事情都重视这一部分。” writes Andrea Giammarchi！

随着平台及其技术和语言的发展，我们经常可以找到多个机会“放弃了很多工具”，并遵守本地方法。 （JS Party - Episode #89 | Changelog）很高兴知道，工具仅与解决未解决的问题的解决方案一样好，而不是解决问题的问题！例外的任何事情很快就会开始改变叙事变为适得其反的事物！因此，为了我们在自定义工具上打赌，我们现在必须击败沉没的成本谬误 6 才能探索本来可以使用的东西！

一天结束时，网络本地开发可以让您在网络平台上更多地依靠！您现在在赢得方面 - 而不是在上竞争方面 - 在网络的“动态”故事中！平台展开时，您现在正在获胜！

George Katsanos explains这如何使我们恢复更多的脑周期，最终做出事情：

“对于我们所有人来说，都应该很明显，如果我们将所有的努力集中在平台上并停止重新发明轮子[...]，我们将有更多的空闲时间专注于真正的原因我们正在从事这项工作，该工作是交付快速，稳定，安全，用户友好的接口。”

那么，Web平台可以在哪里获得全面的好地方？ Chrome的web.dev开发人员中心是由Chrome团队和其他行业专家维护的关键网络设计和开发主题的资源宝库！ （Here's the learning centre。）以及当您需要通过其单个技术采用Web平台时，这是MDN！ （和here's the learning centre。）对于展示，这是一个：Using the platform-一个令人愉悦的故事，讲述了ES6模块无构建的故事，并通过Elise Hein撰写的Web组件无框架！

撰写！

接下来是：这在现实生活中走了多远？用零工具构建Twitter克隆？嗯，这从来都不是这个主意，我们可能永远也不会到达那里！ Web平台除非它自己的框架！ 在某个时候，我们将不得不比本机低级功能需要更高级别的抽象！似乎有些坏消息是， HTML的当前状态和DOM使这一发生 soarer ;不久的是，在平台中的差距和下降使您陷入强迫劳动之后，不久之后！但是我们可以通过两行进行投资来轻松扭转这一点：

  1. 低级工具：标准化和因素和 常见的Web开发体系结构和范式。 （我们为天然级别的反应性和更授权的组件模型逾期 - 仅提及！）

  2. 高级工具：以社区为中心的计划扩展为扩展 该平台的低级功能，带有“ Web-native”库和框架。 （我们需要在网络平台上借鉴的新一波谦虚的抽象，让我们这样做！）

这是我将我的钱放在我的嘴里！的地方，我想带您一些我一直在努力的想法！

开放一些工具想法？

和我一起探索...

我们的旅程涵盖了一系列帖子！我们从底层方程式开始，然后转到提案和多菲尔，Userland库和框架的展示！

！

对于好奇的here's a sneak peak进入了该项目。

笔记

  • 在本文的创建中没有任何框架受到伤害。

致谢

参考

  1. 借用Frank Chimero的标题：Everything Easy is Hard Again ↩

  2. 定义The Pit of Successâ↩

  3. 参见Fred Brooks: No Silver Bullet (PDF)â↩

  4. 请参阅Cultural Erosion ↩

  5. “ Web-native”是多个计划和范式的重复主题：↩

    一些相关标签：

  6. 参见Sunk Cost Fallacy ↩