[Saasfly前端小报] Next.js的崛起:为什么它是现代网站的首选全栈框架

143 阅读12分钟

国内

蚂蚁 - AR

外滩大会安全 AR 沙盘首秀--背后的前端技术

本文介绍了外滩大会安全 AR 沙盘首秀--背后的前端技术,AR 沙盘是大安全继『AR 打怪兽』后在 AR 方面又一次尝试,不同于之前打怪兽项目是使用 AR 团队集成好的 3Dof 算法,本次采用了算法团队自研的 3D marker 算法,此外模型更多,场景、渲染逻辑、动画的组织关系也都更为复杂。

阿里 - 低代码

UIPaaS | 基于 LowCodeEngine 的低代码平台孵化器

这篇文章从企业视角入手,讲诉了为什么需要定制低代码平台,以及如何通过阿里开源的项目「低代码引擎」和阿里低代码商业产品 「UIPaaS」 降低企业定制低代码平台的成本。阅读这篇文章,你可以了解到企业为什么需要定制低代码平台,低代码引擎是什么,UIPaaS 是什么,UIPaaS 如何服务于中大型企业的,以及 UIPaaS 如何去解决一些低代码领域下的问题的。

阿里云 - 浏览器插件

从浏览器原理出发聊聊Chrome插件

本文从浏览器架构演进、插件运行机制、插件基本介绍和一些常见的插件实现思路几个方向聊聊Chrome插件。

字节 - VChart

探索 VChart 图表库:简单、易用、强大、高性能、炫酷的可视化利器

VChart 是字节跳动开源可视化解决方案 VisActor 的核心图表组件库。它基于可视化语法库 VGrammar 和渲染引擎 VRender 进行封装,在满足数据呈现的同时,还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格,简单易用的配置大大降低了用户的学习成本。

腾讯 - OpenAI

OpenAI震撼技术圈!0代码构建Assistants API,技术原理探秘

OpenAI在开发者大会上发布了Assistants API,这是一种新的开发方式,基于AI Agent智能体技术。智能体的技术框架包括感知端、控制端和行动端。自然语言交互是指智能智能体通过自然语言与外界进行多轮交互。该文本内容主要讨论了问答系统中的一些问题以及智能体在任务规划、行动端和工具使用方面的能力。该文本内容主要介绍了基于大模型的智能体(LLM)的应用场景和能力要求。本文介绍了ChatGPT+、LangChain、多智能体系统和AutoGen等相关技术和框架。

腾讯 - 设计

界面设计中格式塔原理的应用

格式塔原理是一种描述人类认知过程的心理学原理,它认为人们在感知世界时会将各种元素组织成有意义的整体,而不是孤立的个体。格式塔理论主张“整体不等于部分的总和”,即我们在识别事物时并不是通过判断其各个部分是否拼合而成,而是立即将其作为一个整体识别出来。大脑在处理信息时会自动进入“节能模式”,习惯于用一种更为简单的方式来感知和解释含糊不清或复杂的图像,以更快地做出判断。格式塔理论衍生出了一系列原理,如相似性、接近性、连续性等,常被应用在界面设计中。

百度 - 设计

暑期内容运营活动设计大揭秘

本文介绍了设计团队与产品运营团队如何合作,在暑期内容运营中达成业务目标。针对影视类目,文章拆解了设计解题思路,并思考了可复用的方法。在项目背景和目标部分,讨论了为什么视频方向需要进行运营活动以提高用户留存率和平台活跃度,并介绍了如何衡量用户的兴趣。在运营驱动用户体验产品部分,讨论了如何通过兴趣标签和功能边界来匹配用户画像和推荐内容,以满足用户需求并实现商业目标。

转存失败,建议直接上传图片文件

BiliBili - 动态化

多容器动态化方案在游戏SDK中的实践

本文介绍了在游戏SDK中实践多容器动态化方案的背景和目标,以及展示型业务、技术选型和方案设计等内容。同时还介绍了自定义参数、多容器和发布系统的应用,以及灰度发布系统的配置和实践。最后,讨论了游戏SDK接入方在混淆处理上的安全隐患,并提出了解决方案。

得物 - 监控

一文搞懂得物前端监控

本文介绍了前端监控的背景和监控类型,以及前端性能监控中的指标和概念,前端埋点方案和监控脚本的实现方式,以及接口异常上报和监控白屏的方法。

转转 - 微前端

微前端时代:打造高效、灵活的前端开发体系

系统化地介绍微前端及其核心技术,并介绍了什么是微前端以及为什么我们需要它。我们还讨论了在众多微前端框架中如何选择适合自己系统的框架,并分享了一些业界使用微前端的实践案例。最后,我们提到了微前端目前存在的一些局限性和争议点。总之,希望这篇文章能为大家提供有用的信息。

Next.js 科普

Next.js的崛起:为什么它是现代网站的首选全栈框架

Next.js是一个可靠的选择,因为它得到了开发者社区的广泛认可和兴趣,并赢得了行业领袖的信任。Next.js采用了驱动力,可以在服务器上或在浏览器中直接渲染页面,提供了更快的初始加载时间。它提供了三种主要的渲染策略:静态渲染、动态渲染和流式渲染,每种策略都对SEO和性能有不同的影响。Next.js还引入了React服务器组件,可以在服务器上直接渲染UI组件,提供了高效的数据获取,减少了客户端请求并加速了数据检索过程。Next.js通过将运行时选择与目标对齐,优化项目的性能和搜索可见性。Next.js的Metadata API增强了SEO和Web可分享性,允许开发者轻松地集成元数据。Vercel是一个简化部署过程的平台,特别适用于Next.js开发者。它提供免费的Hobby层,包括全球交付、自动Git集成和无服务器函数,适合启动Next.js项目而无需花费成本。Vercel还鼓励协作工作流程,团队成员可以在UI组件、布局、拷贝等上发表评论,促进实时反馈。Next.js提供了一流的文档,具有直观的导航、强大的搜索功能和良好的布局,以及清晰、引人入胜的图像来阐明核心概念。Next.js的崛起与React的生态系统息息相关,选择Next.js意味着选择React,这将使开发者与一个可靠且不断发展的技术堆栈保持一致,得到充满激情和创新的社区的支持。

国外

HTML

HTML First

HTML First是一组原则,旨在通过利用现代Web浏览器的默认功能、HTML属性语法的极简性以及Web的ViewSource功能,使构建Web软件更容易、更快速、更具包容性和可维护性。作者鼓励在添加库或框架之前,先检查是否可以使用纯粹的HTML/CSS来实现所需功能。此外,作者还提到了关注点分离和行为局部性原则在软件设计中的应用,以及现代浏览器对性能约束的变化和构建工具的使用看法。作者还强调了保持“查看源代码”功能的重要性,并计划建立一个HTML First代码片段库。

CSS

Using CSS content-visibility to boost your rendering performance

本文主要介绍 content-visibility 属性和 CSS containment,这个属性用来控制一个元素是否渲染其内容。它使得浏览器可以跳过对用户当前不需要的元素进行布局和渲染的工作,这可以加快初始页面加载的速度。

View transitions and stacking context: Why does my CSS View Transition ignore z-index?

这段文本讨论了CSS视图过渡和堆叠上下文的问题,作者尝试使用视图过渡API展示动画效果,但发现动画实际上是在页脚的上方播放的。作者推测这可能与浏览器有关,而不是开发者的错误。作者还提到了一些解决方法,包括调整z-index和添加属性等。

Why You Should Use px Units for margin, padding, & Other Spacing Techniques

这段文本讨论了在CSS中使用像素单位(px)进行边距、填充和其他间距技术的原因。它解释了边距和填充如何影响空白,并且它们在CSS Box Model中是紧密相邻的。这两个属性接受几乎相同的CSS数据类型,包括长度(length)、百分比(percentage)、自动(auto)等。文本还解释了绝对单位和相对单位之间的区别。绝对单位是固定的,不基于页面中的其他元素,而相对单位可以根据页面中的其他元素的大小而变化。文本还提到了使用绝对单位还是相对单位的选择取决于用户的需求,例如在设置文本大小时最好使用相对单位(如rem)以便用户可以根据自己的设备设置进行调整。

ESLint

ESLint Stylistic Stylistic Formatting for ESLint

ESLint Stylistic项目是由ESLint团队发起的,旨在维护与格式和风格相关的规则。与其他格式化工具相比,ESLint提供了更细粒度的控制和更高的可扩展性,并且尊重源代码的输入。ESLint Stylistic项目的目标是保留原始代码风格并应用修复,以满足那些关心细节并希望对代码风格有完全控制的人的需求。

Interesting Bugs Caught by ESLint’s no-constant-binary-expression

这篇文章介绍了ESLint的no-constant-binary-expression规则,并分享了一些在流行的开源项目以及Meta内部发现的一些有趣的bug的实例。作者指出,这个规则最初只是用来检测不必要的空值检查,但后来意识到无用的代码是一个更广泛的问题,因为开发人员不会有意写无用的代码,而与开发人员意图不符的代码就是bug。作者在Meta的代码库上运行了该规则的第一个版本,并发现了各种微妙而有趣的bug。

Node.js

Node v20.9.0 (LTS)

Node.js 20.9.0 'Iron' (LTS)是Node.js的一个版本,标志着20.x版本线进入了长期支持(LTS)阶段。该版本将保持"Active LTS"状态,直到2024年10月。之后,它将进入"维护"状态,直到2026年4月结束。这个版本存在一个已知问题,即通过环境变量收集代码覆盖率可能会导致卡顿。这不被认为是Node.js 20的一个回归问题,一些报告是在Node.js 18上。

Angular

Introducing Angular v17

Angular的13周年,展示了它的起源和未来的发展方向。在Angular的v17版本中,我们很高兴地引入了一系列新功能和改进:

  1. 可延迟视图(Deferrable views):提供了更高的性能和开发者体验。
  2. 在公共基准测试中使用内置的控制流循环,可以使运行时速度提升高达90%。
  3. 在混合渲染中构建速度提升高达87%,在客户端渲染中提升高达67%。
  4. 全新的外观设计:反映了Angular未来的特性。
  5. 全新的交互式学习过程:帮助开发者更好地学习和使用Angular。
  6. 还包含了其他许多功能和改进,具体不一一列举。

这些新功能和改进将进一步提升Angular框架的性能、开发者体验和学习曲线。

Chromium

How Core Web Vitals saved users 10,000 years of waiting for web pages to load

强调了Web Vitals度量标准在性能方面取得的成就,特别是自从引入这些度量标准以来,我们所有人通过一点点的小改进所积累的“指数影响”。这些改进使得用户在等待网页加载时节省了大约10,000年的时间。

OpenAI

抢占生态位!更强GPT-4、GPT商店、Agent工具、API降价!OpenAI开发者大会开启AI大规模落地

OpenAI在首届AI春晚DevDay上展示了其在大模型时代的生态布局,发布了更强大的GPT-4 Turbo和Assistants API,升级了GPT-3.5 Turbo,开放了DALL·E 3和TTS的API,开源了Whisper v3和Consistency Decoder,还将推出GPT Store。OpenAI希望通过为开发者提供工具来改变世界,相信AI将成为科技和社会的革命,并能够赋予个体和机构新的能力。

Thoughtworks - AIGC

2024 AIGC 规划:探索交互体验变革及 智能硬件基础设施篇

2024年AIGC规划的重点是探索交互体验变革和智能硬件基础设施。多模态融合、本地AI运行能力的增强、虚拟与现实的融合以及人机交互是当前重要的趋势。智能手表、智能眼镜等智能设备依赖手机作为配置端或展示端,添加新设备需要依赖手机。随着AIGC能力的引入,添加新设备将变得更加简单。端侧设备主要分为运行在类Unix/Linux操作系统的中枢设备、嵌入式Linux操作系统设备和低功耗与超低功耗嵌入式设备。AIGC与智能硬件的结合将推动新的交互和体验,多感官融合、本地智能、小型模型和XR技术将改变人机交互,使设备更智能。