[Saasfly前端小报] 谁是2023年最好的前端框架?

推荐目录

  • 为什么开发人员正在转向 Next.js?
  • 国外B端大厂设计系统,比国内更强吗?
  • Rust的Web(wasm)框架Leptos,将改变构建网站的方式
  • Mobile 开发轻松跨屏,高效构建
  • 腾讯 | 腾讯混元大模型,来了

国内

Rust Wasm

Rust的Web(wasm)框架Leptos,将改变构建网站的方式

Leptos是一个基于响应式UI概念的新的Rust web框架,具有高性能、易用性、安全性和互操作性。它使用类似HTML和CSS的语法,可以自动更新UI,避免了重新渲染整个UI的需要。Leptos还考虑了安全性,并与其他语言和框架互操作。要开始使用Leptos,需要安装trunk并创建一个Rust项目,然后添加Leptos依赖并设置编译目标。

Next.js

为什么开发人员正在转向 Next.js?

Next.js是一个受到开发人员关注的框架,它旨在简化Web应用程序的部署和托管,与React一起使用,使服务器端渲染和其他高级功能更容易实现。Next.js具有性能优化、支持静态站点生成、强大的路由系统、数据获取能力、国际化支持和安全性等优势。Next.js拥有庞大且活跃的开发者社区,吸引了越来越多的关注和使用。

设计

国外B端大厂设计系统,比国内更强吗?

国外B端大厂设计系统Atlassian Design System(ADS)在细节上相比国内设计系统有一些优势,如按钮的悬停颜色、表格设计、焦点态的设计等方面。ADS注重配色合理性、表格内容理解、减少误操作、视觉暗示风险操作、信息沟通和解决方案。总体来说,ADS在细节上做得更好,这也与其资深的设计经验有关。

回收万象全新改版升级-京东旗下专业回收

京东旗下的专业回收平台爱回收经过十二年的发展,已成为循环经济领域的上市企业。该平台在全国拥有近2000家门店,回收范围涵盖了从3C产品到奢侈品和黄金等多个品类。为了提升用户体验和交付体验,爱回收在过去的半年中更加注重线上线下服务,并致力于为用户提供更高价、更方便、更贴心的回收服务。

京东 - H5

百亿补贴通用H5导航栏方案

百亿补贴频道沉淀出了通用H5导航条组件@pango/navigation-bar,该组件具有以下优势:性能好,支持ssr预渲染,上屏较快;开发/测试成本低,人力节省百分之90%以上,可用于站内外,ssr以及csr场景,无需多次开发;可配置,使用config的形式配置item,一旦业务需求改动,只需调整配置,无需调整组件逻辑,极大降低开发和测试成本;用户体验好,生命周期和其他楼层保持同步,规避了原生容器和H5页面生命周期无法同步的问题,体验佳;灵活定制,支持传入React.ReactElement,比原生定制性更强,可灵活定制导航条样式以及交互动画;机型/系统兼容性好,参考原生导航栏异形屏适配方案,参考原生绝对布局思路,完美适配折叠屏、异形屏;不对外依赖,纯手工打造,未使用第三方库,不会对宿主造成依赖冲突,随时改动随时发布不存在版本控制,最大程度的降低和隔断对原生容器的版本依赖。该文本内容主要讨论了异常处理和导航栏组件的设计思路。在异常处理方面,原生导航条和H5导航条的处理方式不同,原生导航条不受子视图异常的影响,而H5导航条需要保证用户可以点击返回按钮返回上一页。针对业务js执行异常的情况,使用a标签渲染返回按钮,并保证能正常响应返回事件;针对webview加载html失败的情况,通过新增query参数hideNavi=1来隐藏导航条,但需要在webview监测到html加载失败时展示原生导航条;针对通天塔服务异常的情况,根据链接中的hideNavi字段添加返回按钮或通知webview展示默认导航条。在竞品和兄弟频道的现状中,发现在异常场景2和3下,均未做特别处理,展示无头错误页,导致页面无法返回上一级。该导航栏组件已应用于百亿补贴、月黑风高和PLUS95折等线上项目。设计思路上,参考了原生navigationBar的设计思路,将导航栏分为左、右、中三个区域,左右区域可根据item接口协议设置左右的items,中间区域可自由定制元素。该组件发布在JNPM上,使用react + ts开发,大小为4.1K。使用方式上,可以自由配置items,除了已知的元素外还可以设置通用类型的item,还可以设置scrollCallBack来回调上滑比例。

京东 - 低代码+ChatGPT

Ui2Code+ChatGPT助力低代码搭建

本文介绍了低代码搭建在京东内小程序场景的应用,并详细讨论了低代码平台的定位和边界。即时设计平台是一个即时搭建c端楼层的开发平台,支持通过导入relay设计稿url完成Ui2Code,在此基础上完成前端可视化搭建,同时支持通过ChatGPT完成一句话需求,搭建后的楼层自动同步ihub楼层市场,提供到等搭建平台使用。画布预览区是PC端模拟实际渲染的展示区域,用于即时预览和生成预览图。右侧功能区包括样式配置区、交互配置区、绑定配置区、素材配置区,以靠右垂直选项卡形式展示。

网易 - 资源管理器

社交直播游戏场景前端解决方案专栏(三): 通用资源管理器

这篇文本主要介绍了社交直播游戏场景前端解决方案中的通用资源管理器的设计和功能。资源管理器通过插件注册能力、资源预加载和对特定类型资源的处理流程来实现资源的管理、缓存、解析和转换。它还支持资源模块化和预加载功能,可以满足小游戏或活动开发中资源加载和转换的需求。

蚂蚁 - CodeBlitz

比快更快,极速版 IDE 框架 CodeBlitz 开源!

CodeBlitz是一个开源的极速版IDE框架,由蚂蚁研发效能云研发团队基于OpenSumi封装而成。与传统的Cloud IDE相比,CodeBlitz不需要容器资源,只需浏览器即可使用,适用于轻量级的代码查看和编辑等场景。CodeBlitz提供了代码阅读、语法高亮、代码编写、WebSCM等功能,并通过开放的插件体系支持Git Graph、Git Blame等Git辅助能力、多语言服务在线索引、基于wasm的代码运行能力。CodeBlitz在蚂蚁集团被广泛应用于代码阅读、代码评审、解决冲突、在线笔试、代码扫描报告查看、产物预览、SQL编辑等场景。

得物 -元数据中心

得物API元数据中心探索与思考

得物技术部自研的Mooncake平台解决了API文档维护的问题。Mooncake平台从文档组织规范和文档生成效率两个方面进行了尝试。Mooncake平台通过规范应用名称和规范文档分类来降低接口查找难度和用户使用费力度。Mooncake平台开发了MooncakeUpload Idea插件,通过解析Java项目里的注解和注释,实现了一键生成API文档的功能。Mooncake平台的API文档维护还包括调试、Mock和API元数据平台等功能。Mooncake平台将继续改进API文档维护的功能和效率,进一步提升API文档的实时性和有效性,为开发人员提供更好的文档管理体验。

国外

Apple Store

Take your iPad and iPhone apps even further on Apple Vision Pro

Apple将推出全新的App Store,其中包括为visionOS构建的应用程序和游戏,以及数十万款在visionOS上运行良好的iPad和iPhone应用程序。用户可以在Apple Vision Pro的无限画布上同时访问他们喜爱的iPad和iPhone应用程序以及新的visionOS应用程序,使他们比以往更加连接、高效和娱乐。

Google Fonts

The new Google Fonts: find what you're looking for

Google Fonts是一个拥有超过1,500个字体系列、1,000多种语言和6,000多个Material Symbols(可变图标集)的网站。更新包括改进的网站导航,使用Material 3的导航栏,提供更好的移动体验,引入了新的侧边栏用于预览和筛选控制,以及使用Material 3的新颜色调色板。

Android

Mobile 开发轻松跨屏,高效构建

谷歌在2023年的开发者大会上展示了一系列关于移动开发的成果和更新,包括推出两款新的Android设备Pixel Fold和Pixel Tablet,提供一系列工具和参考,如Android Studio Hedgehog Canary 3中的Pixel Fold和Pixel Tablet模拟器配置,更新和拓展的Material设计指南,以及针对游戏和创意应用的设计参考。此外,谷歌还发布了Wear OS 4开发者预览版,推出了Jetpack Compose for TV Alpha版,改进了Flutter的渲染引擎Impeller,提升了图形性能。谷歌还关注应用的隐私和安全,推出了一些新功能来提高平台的隐私性和安全性,如Android 14通过Jetpack Compose for Desktop提高平台的隐私性和安全性,推出新的Beta版集成方案,支持可保护隐私的广告SDK等。Kotlin系列产品提供了低代码、无代码框架,使开发者能够构建和部署设备端机器学习解决方案。其中,多平台UI工具包Flutter提升了应用品质,并能构建适用于多设备的应用。MediaPipe与Flutter一起推动了移动端生成式人工智能的未来。MediaPipe帮助开发者测试和体验设备端机器学习,开发者可以使用MediaPipe Studio在设备上的浏览器中本地运行人脸关键点检测器等九种新解决方案。MediaPipe Model Maker利用模型蒸馏技术从通用的大模型中提取信息,以创建在设备端运行的小模型,并使其能够专门处理一定数量的任务。生成式人工智能解决方案可以使用Flutter构建由人工智能设计的卡牌游戏《I/O FLIP》,Flutter可以控制屏幕中的每个像素,轻松制作用户界面,并用Dart代码实时组合出数百万张可能的卡牌。

WOFF

WOFF Has Left the Building

几乎95%的用户今天使用的浏览器都支持WOFF2。从日期相关的统计数据来看,主要的转变发生在2015年和2016年。到2016年底,所有主要的浏览器在最新版本中都支持WOFF2。七年后,支持WOFF2的水平已经增长到一个程度,除非你确切地知道你的用户中有很大比例仍在使用旧设备和浏览器,否则不包含WOFF也是可以的。另一方面,对于已经存在的项目,没有理由删除WOFF。

VSCode

August 2023 (version 1.82)

Visual Studio Code 2023年8月版本的更新,一些主要的亮点包括:

  • 可访问视图改进 - 支持内联补全的可访问视图,更新按键设置。

  • 内置端口转发 - 可以在VS Code中从本地服务器转发端口。

  • 粘性滚动更新 - 跟随编辑器水平滚动,显示范围内的最后一行,折叠界面。

  • 新的差异编辑器功能 - 检测移动的代码,动态切换内联和并排视图。

  • 命令中心默认显示 - 快速从标题栏打开文件或运行命令。

  • 复制NoteBook输出 - 轻松复制单元格输出以及生成的图像。

  • WebAssembly调试 - 可以反编译WASM代码进行逐步调试和设置断点。

  • 新的TypeScript重构 - 移动到文件和内联变量重构。

  • 新的Python格式化 - 学习如何集成格式化工具,如autopep8和Black。

  • 预览:GitHub Copilot - CreateWorkspace命令预览AI生成的代码的文件结构。

Turbo

Turbo 8 is dropping TypeScript

Turbo 8将在下一个大版本中放弃使用TypeScript,作者更喜欢JavaScript,认为JavaScript在服务器端的Web应用方面更适合大部分工作。作者认为TypeScript妨碍了他的开发体验,因为它需要显式的编译步骤,并且会在代码中引入类型操作,给开发带来不必要的困扰。

JS every

JavaScript WTF: Why does every() return true for empty arrays?

这段文本讨论了JavaScript中的every()方法在处理空数组时的返回值。作者在重构代码时发现自己对该方法的逻辑理解有误。作者原本以为回调函数必须被调用并返回才能返回true,但实际情况并非如此。对于空数组,无论回调函数是什么,every()都会返回true,因为回调函数根本不会被调用。文本中给出了一些示例来说明这一点。此外,文本还解释了为什么空数组返回true,这是因为回调函数没有被调用,而默认值为true。最后,文本提到了ECMA-262规范中对every()方法的实现算法。

React Server Component

Making Sense of React Server Components

我的目标今天是帮助你消除对React Server Components的迷惑,回答你可能对React Server Components有的很多问题!

React vs Angular

React versus Angular: Which frontend framework wins in 2023?

Angular和React是两个流行的前端框架,它们在数据传递、数据流、虚拟DOM和实际DOM、适用场景等方面有一些不同。总体而言,React在多个领域可能更胜一筹,但Angular仍然占据着五分之一的市场份额。

MERN vs. MEAN vs. MEVN

MERN vs. MEAN vs. MEVN: Choosing the Right JavaScript Stack for Your Web Project

MERN、MEAN和MEVN是JavaScript开发中三种最常见的技术栈选择。MERN技术栈由MongoDB、Express.js、React和Node.js组成。MEAN技术栈与MERN类似,基于MongoDB、Express.js和Node.js,但引入了Angular作为前端框架。MEVN技术栈与MERN和MEAN类似,基于MongoDB、Express.js和Node.js,但使用Vue作为前端框架。选择适合自己Web项目的JavaScript技术栈时,需要考虑每个技术栈的核心组件以及它们所带来的前端框架的特点和优势。

人工智能

Retool | Retool AI: Build AI apps that work

Retool AI是一个用于构建定制AI工具的功能套件,可以连接到任何LLM提供商,通过可视化或代码构建应用程序和工作流程,并在几分钟内安全发布给用户。

Gitlab | Modern software development problems require modern AI-powered DevSecOps

现代软件开发领域已经受到AI工具整合的影响。GitLab正在积极推动这种影响。在整个软件开发生命周期中融入AI降低了每个人的参与门槛。通过采用AI驱动的DevSecOps来实现这种转变。

蚂蚁 | 蚂蚁发布金融大模型 公布大模型全栈布局

蚂蚁集团在上海举办的外滩大会上发布了金融大模型CodeFuse,并开源了代码。蚂蚁金融大模型在金融场景需求中表现突出,已在蚂蚁集团的财富、保险平台上全面测试。蚂蚁还发布了智能金融助理"支小宝2.0"和智能业务助手"支小助"。蚂蚁金融大模型已通过专业试题测试,并将在未来与金融机构合作的数字金融业务全线接入。蚂蚁还发布了基于金融大模型的应用产品"支小宝2.0"和"支小助1.0"。蚂蚁集团还开源了代码大模型CodeFuse,该模型可提供智能建议和实时支持,帮助开发者自动生成代码、增加注释、生成测试用例、修复和优化代码等。蚂蚁集团致力于投入大模型基础设施,探索五大方向,包括建设高质量的数据标注团队、攻坚基础大模型算法、发展通用多模态大模型、建设高效的大模型评测标准和评测体系,以及建设大模型安全能力。蚂蚁集团的人工智能技术不仅支撑了自身业务的智能化升级,也正在开源开放给社会,推动全社会的数字化转型。

腾讯 | 腾讯混元大模型,来了

相关推荐
如若12322 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript