网页设计中的过度架构

网页设计中的过度架构

我最近在 X 上读到了 @justinfagnani 的一篇文章,内容是:

“Lit 不是框架。浏览器才是框架。”

这让我思考了近年来我们如何构建网络。

在相当长的一段时间里,如果您了解 HTML、CSS 和 JavaScript,那么您确实不需要框架来构建 Web 应用程序。最多,您可能会使用一些库来简化某些任务,但即使这些也逐渐被合并到平台本身中,例如路由或状态管理。

然而,我们的重点已经转向学习框架,现在是元框架,这确实使构建 Web 环境变得更容易。它们优化页面,自动生成必要的文件(例如 sitemaps.xml),优化图像,删除未使用的 CSS,捆绑、缩小和优化 JavaScript。是的,它们很有效。但他们不遵守标准。

像 Astro 这样的元框架可以让你使用标准,但它们并不能让这一切变得容易。相反,他们以更加用户友好的非标准格式简化使用其他框架或自己的组件,以“简化”组件创建。他们还采用技术来促进 SEO、加载和索引 – 取决于您如何实现它们。

对我来说,这种方法有两个主要问题:

认知超载:开发人员不仅必须学会管理框架本身,还必须学会管理元框架及其工具集,这通常会给项目架构增加不必要的复杂性。

脱离标准:专注于框架意味着我们不会投入时间来了解网络本身的最新发展,而这些发展是巨大的。例如,CSS 在容器查询等功能方面取得了巨大的飞跃。同时,JavaScript 和 HTML 也在不断发展,HTML 可能会引入新的 元素,该元素将允许 中包含 HTML 和 CSS,从而开辟新的、更灵活的方式来创建丰富的选择器。

但是,在许多框架中,这些创新是通过自己的组件实现的,因此对于开发人员来说,这些新功能似乎是框架发明而不是标准进步。

我记得几年前,当这些元框架刚刚兴起时,一位开发者兴奋地告诉我,“他们发明了SSR(服务器端渲染);现在我们可以在服务器上生成 HTML,创建静态页面。”我惊讶地看着他。他坚持认为我也对这种“新奇”印象深刻,他说:“这不是令人难以置信吗?多棒的主意啊。”讽刺的是,SSR 从网络早期就已经存在了。

当今的 Web 开发人员,那些研究 Web 开发并进入该领域的人,往往缺乏历史背景。他们不知道网络开发最初是如何运作的。他们不明白我们从服务器端渲染转向客户端渲染并开始使用框架的原因。一路走来,当“Ajax”流行起来时,我们迷失了方向——可能是因为希望标准能够涵盖我们需要的一切,而大公司却在努力在浏览器中强加自己的标准、标签和语言(我仍然记住微软臭名昭著的 VisualBasicScript)。

框架不是问题。一点也不。他们为网络开发增添了力量和价值。它们使我们能够为每个人创建应用程序,刺激了数十万 Web 开发人员和训练营的崛起。

框架和元框架不是问题;问题在于。他们甚至帮助网络开发民主化,使数百万人能够创建应用程序并推动训练营的繁荣。但随着网络平台的成熟和标准变得更加健全,框架创建者有商业动机来保留和推广他们的工具。他们不会说,“停止使用我的框架;现在你可以按照标准做任何事情。”另外,将使用这些框架构建的应用程序迁移到标准几乎是不可能的,特别是根据我的经验,大多数缺乏 E2E 或功能测试来确保迁移保持原始行为。

那么,我们为什么不投资于帮助我们利用当今标准的工具呢?

没有一个元框架“强迫”您使用该标准,从而使这个过程变得更容易。

如果我们想要进行 SSR、CSR、SSG、ISR、Hydration、创建 MPA 或 SPA,我们需要能够帮助我们高效组织项目并协助构建和优化任务的解决方案。但我们应该充分了解自己的需求以及每种选择的利弊。这些工具应该优化图像、JavaScript、CSS,并仅生成必要的文件。他们应该允许使用符合标准的库,并充分弥补平台的剩余差距。他们应该优化和支持 SEO、加载和索引、促进测试并利用平台的力量。

是时候减少我们网络项目中的过度工程和过多的架构设计了。让我们继续学习,不仅要学习如何使用框架,还要学习如何欣赏和应用 Web 标准中令人难以置信的进步。

没有任何借口。

以上就是网页设计中的过度架构的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1493161.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 15:27:25
下一篇 2025年12月19日 15:27:38

相关推荐

  • 如何在Bootstrap中进行用户列表UI设计?

    用户列表是一种常见的界面元素,用于显示系统中的用户列表。在 bootstrap 中,您可以使用各种布局和样式选项来设计用户列表的外观。 如何使用 html 和 css 制作用户列表 在 bootstrap 中创建用户列表的一种方法是使用 和 元素来创建已使用项目的无序列表。然后,您可以使用 boot…

    2025年12月19日
    000
  • 如何使用 Tailwind CSS 和 JavaScript 创建圆形菜单

    大家好,今天我们将使用 Tailwind CSS 和 JavaScript 创建一个圆形菜单。 什么是圆形菜单?圆形菜单是一种 UI 组件,其中菜单项围绕中心按钮或点以圆形或放射状图案排列。这种类型的菜单通常用于节省空间,同时提供视觉上引人入胜的交互式导航体验。激活后,菜单项会围绕中心按钮展开为圆形…

    2025年12月19日
    000
  • 使用 JavaScript 构建“谁想成为百万富翁”

    根据热门问答节目“谁想成为百万富翁”创建游戏是练习 javascript 技能同时构建有趣且互动的游戏的绝佳方法。这篇博文将引导您了解如何构建这款游戏,包括计时器、生命线和评分系统。 游戏的主要特点多项选择题:玩家可以从四个选项中选择答案。计时器:玩家有 30 秒的时间回答每个问题。生命线:玩家可以…

    2025年12月19日
    000
  • 如何开始 Web 开发

    介绍 Web 开发是当今最受欢迎的职业之一,对于那些对 前端(用户所看到的内容)和 后端(服务器逻辑)感兴趣的人来说)。如果您刚刚起步,想知道从哪里开始或者作为开发者可以赚多少钱,本指南将为您提供清晰的路径和入门资源。 什么是网页开发? 网络开发分为两大区域: 前端:网站的视觉和交互部分。包括: H…

    2025年12月19日
    000
  • 了解如何建立实时聊天

    在本教程中,我们将指导您使用 superviz 构建实时聊天应用程序。实时聊天是现代 web 应用程序的一项重要功能,它使用户能够即时相互通信。无论您是在构建协作平台、客户支持工具还是社交网站,添加实时聊天都可以增强用户交互和参与度。 我们将演示如何设置一个简单的聊天界面,参与者可以在其中实时发送和…

    2025年12月19日
    000
  • React Native 入门 (EXPO):初学者指南

    react native 已成为构建移动应用程序最流行的框架之一,使开发人员能够使用 javascript 和 react 为 ios 和 android 创建跨平台应用程序。 expo 通过提供一组工具和服务来简化 react native 开发,帮助您快速构建原型、构建和部署 react nat…

    2025年12月19日
    000
  • React 基础知识~样式组件/ inline_style

    内联样式必须用javascript编写。 ・属性名称必须是“style” ・无论是通过除以值来设置样式还是直接设置样式都没有区别。 ・属性必须以驼峰大小写书写,像这样的 fontweight: “bold”,. ・如果我们想用 css 样式(kebabcase)编写属性,我们…

    2025年12月19日
    000
  • Things I Wish I Knew When I Started with React

    3 年 react 开发的经验教训 当我第一次投入 react 时,感觉就像打开了潘多拉魔盒。有很多东西要学,一路上,我遇到了很多“啊哈!”的情况。时刻。以下是我希望在开始时就知道的 10 件事,以帮助您在 react 之旅中跳过一些减速带。 1. 组件只是函数 最重要的认识是什么? react 组…

    2025年12月19日
    000
  • 构建无障碍网站:最佳实践

    建立一个无障碍网站可确保您的内容可供所有人(包括残疾人)使用。可访问性不仅有助于使您的网站具有包容性,而且也是改善用户体验和遵守网络标准的关键因素。在本博客中,我们将探讨构建无障碍网站的最佳实践以及如何实施它们。 为什么可访问性很重要 包容性:全球有超过 10 亿人患有某种形式的残疾。无障碍网站可确…

    2025年12月19日
    000
  • js 如何设置高度

    在 JavaScript 中设置高度有以下几种方法:直接设置元素的 height 属性。使用 CSSOM 界面中的 offsetHeight 或 clientHeight 属性。使用 jQuery 中的 height() 方法。 如何在 JavaScript 中设置高度 直接设置元素的 height…

    2025年12月19日
    000
  • js中如何渲染

    在 JavaScript 中,渲染将数据转换为可视输出,通过 DOM 操作,包括数据获取、转换、DOM 操作、样式应用和事件处理。为了优化性能,可以使用虚拟 DOM、避免过度渲染、优化 DOM 结构和异步渲染等措施。 JavaScript 中的渲染 如何渲染? 在 JavaScript 中,渲染是指…

    2025年12月19日
    000
  • js如何如何获取li

    获取 li 元素有以下方法:使用 getElementById 获取具有唯一 id 的 li 元素。使用 getElementsByClassName 获取具有指定类名的 li 元素。使用 querySelector 根据 CSS 选择器获取 li 元素。使用 querySelectorAll 获取…

    2025年12月19日
    000
  • js如何发表情

    在 JavaScript 中发表情的方法有多种:使用内置的 emoji 包;使用第三方库(如 emojis-list);使用 HTML 实体;使用 CSS 图像属性。 如何在 JavaScript 中发表情 发表情是通过图像或符号来表达情绪的方式,广泛应用于网络聊天和社交媒体。JavaScript …

    2025年12月19日
    000
  • js中如何showhide

    在 JavaScript 中,可以通过控制 CSS 属性来显示或隐藏元素:显示元素:使用 document.getElementById(“elementId”).style.display = “block”;隐藏元素:使用 document.get…

    2025年12月19日
    000
  • 流场屏幕

    使用 vanilla js 和 html canvas 的动态流场 您是否曾被抽象粒子动画迷住过?这些流动、动态的视觉效果可以通过使用纯 javascript 和 html canvas 元素的极其简单的技术来实现。在本文中,我们将分解创建一个流场的过程,该流场为数千个粒子提供动画,让它们自然运动。…

    好文分享 2025年12月19日
    000
  • js如何取消js效果

    有六种方法可以取消 JavaScript 效果:1. 禁用浏览器 JavaScript;2. 使用“nojavascript”类;3. 使用 JavaScript 代码;4. 使用 Greasemonkey 脚本;5. 使用 Tampermonkey 脚本;6. 手动修改页面源代码。但需注意禁用 J…

    2025年12月19日
    000
  • 如何在游览器中调试js

    通过使用浏览器调试工具调试 JavaScript,您可以在浏览器中完成以下操作:在源代码中设置断点以暂停执行并检查变量值;在控制台中输入代码片段以立即执行并检查错误消息;分析网络请求以识别性能问题;查看内存使用和垃圾回收情况以诊断内存泄漏。 如何在浏览器中调试 JS 如何打开浏览器的调试工具? 大多…

    2025年12月19日
    000
  • js中如何修改元素样式

    在 JavaScript 中修改元素样式的方法包括:修改内联样式属性(使用 element.style 对象);修改外部样式表规则(使用 document.styleSheets[0] 和 rule.style);添加或删除 CSS 类(使用 element.classList);使用工具函数(ge…

    2025年12月19日
    000
  • js 如何做排序的箭头

    在 JavaScript 中,使用 CSS 和 HTML 实现排序箭头:1. 创建一个带有 sort 类的 span 元素;2. 使用 CSS 为其添加样式以创建箭头;3. 使用 data-sort 属性控制排序顺序(asc 升序,desc 降序);4. 使用事件监听器处理箭头点击,反转排序顺序并排…

    2025年12月19日
    000
  • js弹框如何置顶

    要将 JS 弹框置顶,可以采用以下方法:设置高 z-index 值;使用 CSS transform 移除元素 khỏi文档流;创建 JavaScript 浮动窗口。 js弹框如何置顶 js 弹框默认在页面中层叠,可能会被其他元素遮挡。为了使弹框置顶,使其始终位于最上方,有以下几种方法: 1. 设置…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信