当前位置: 首页 > news >正文

前端食堂技术周刊第 70 期:Volar 的新开端、Lighthouse 10、良好的组件设计、React 纪录片、2022 大前端总结

美味值:🌟🌟🌟🌟🌟

口味:黑巧克力

  • 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly

本期摘要

  • Volar 的新开端
  • Chrome 110 的新功能
  • Lighthouse 10
  • Nuxt v3.2.0
  • 加速 JavaScript 生态系统之 ESLint
  • Cloudflare Workers 和微前端:为彼此而生
  • 良好组件的设计关键是什么
  • React 纪录片 React.js: The Documentary
  • 2022 大前端总结和 2023 就业分析

大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下上周的技术资讯。

技术资讯

1. Volar 的新开端

Volar 从 Vue 官方 VS Code 插件已经成长为 Embedded Language 工具框架。目前的架构不仅可以支持 Vue,还可以支持 Astro、Svelte、Angular 等。

以下是 Volar 2023 Roadmap:

  • 支持 Monaco
  • 支持除了 VS Code 以外的 IDE
  • 尝试基于 Bun 的语言服务器
  • 使用单个语言服务器,提升性能
  • 尝试使用 Rules API 避免不同 Lint 工具之间的冲突,并确保性能
  • 提供 Scripts API,公开语言服务器的 Format 、Lint 能力,可以在 CI 或者 git pre-commit 钩子里使用

2. Chrome 110 的新功能

Chrome 110 挤牙膏:

  • 新的伪类 :picture-in-picture 可以自定义画中画元素样式
  • launch_handler 设置网络应用启动行为
  • <iframe credentialless> 嵌入不设置 COEP 的第三方 iframe

搭配 DevTools 的新功能(Chrome 110) (自己看)

3. Lighthouse 10

  • 性能得分中删除 TTI 指标(在 Lighthouse JSON 输出中还可以拿到),10% 的得分权重转移到了 CLS,CLS 占整体性能得分的 25%
  • bfcache 失败检测、允许粘贴输入、提供完整的 TS 类型声明

4. Nuxt v3.2.0

Nuxt DevTools 支持可视化项目、页面、组件、模块、Hooks 等等信息。

下面我们来看技术资料。

技术资料

1. 加速 JavaScript 生态系统之 ESLint

加速 JavaScript 生态系统第三弹来袭,本文探索了 ESLint 以及 Linting 的工作原理,并发现其中的选择器引擎和 AST 转换过程还有着很大的性能提升空间。

JS 工具或许也可以接近 Rust 工具的性能。

2. Cloudflare Workers 和微前端:为彼此而生

文中的一些关键点:

  • 片段架构(Fragments Architecture)
  • 优势:安全性、基于 Worker 的服务端渲染、尽早交互(Eager interactivity)
  • 未解决:绕过微前端客户端依赖 Tree Shaking 及共享问题、没有客户端沙箱方案(样式冲突,同一技术栈多版本冲突)
  • AWS、Cloudflare 纷纷入局微前端,提供基于他们云基础设施的微前端解决方案,微前端背后的复杂度已经足以撑起一个商业化解决方案。

3. 良好组件的设计关键是什么

良好的组件设计关键是利己主义。

  • 少即是多,组件应该只对自身负责,而不对其内容负责,不然组件诞生之时技术债就产生了
  • HTML 驱动组件的设计

4. React 纪录片 React.js: The Documentary

前端娱乐圈又新增一部大片。

纪录片采访了 Dan Abramov、Sebastian Markbåge 和 Andrew Clark 等人。

5. 2022 大前端总结和 2023 就业分析

狼叔年度趋势解读,必读。

好了,以上就是本期的食堂周刊,观众老爷们如果觉得还不错,一键三连是对食堂老板最大的支持。

你的前端食堂,吃好每一顿饭,我们下期见。

http://www.lryc.cn/news/7052.html

相关文章:

  • react路由详解
  • mysql数据库完全备份和增量备份与恢复
  • CF1667E Centroid Probabilities
  • 全网详细总结com.alibaba.fastjson.JSONException: syntax error, position at xxx常见错误方式
  • 快速部署个人导航页:美好的一天从井然有序开始
  • 【Python】如何在 Python 中使用“柯里化”编写干净且可重用的代码
  • ROS笔记(4)——发布者Publisher与订阅者Subscribe的编程实现
  • Linux进程概念(一)
  • Leetcode.1124 表现良好的最长时间段
  • 达梦数据库会话、事务阻塞排查步骤
  • sqlServer 2019 开发版(Developer)下载及安装
  • 使用Arthas定位问题
  • 性能测试之tomcat+nginx负载均衡
  • 【手写 Vuex 源码】第十一篇 - Vuex 插件的开发
  • opencv基础知识和绘图图形
  • 15- 决策回归树, 随机森林, 极限森林 (决策树优化) (算法)
  • Flink相关的记录
  • 配置可视化-基于form-render的无代码配置服务(一)
  • Java 代理模式详解
  • 知识付费小程序怎么做_分享知识付费小程序的作用
  • 14- 决策树算法 (有监督学习) (算法)
  • 如何编译和运行C++程序?
  • Golang 给视频添加背景音乐 | Golang工具
  • 让AI护理医疗:解决卫生系统的痛点
  • Windows 离线安装 MySQL 8
  • 【前端攻城狮之vue基础】02路由+嵌套路由+路由query/params传参+路由props配置+replace属性+编程式路由导航+缓存路由组件
  • CHAPTER 1 Zabbix介绍及安装
  • 认识V模型、W模型、H模型
  • excel ttest检测
  • PDFPrinting.Net操作进行细粒度控制