前端早读精选 -- 第二期

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章，在这份汇总中，发现前端技术的精髓，概括个人观点，共同探索前沿技术与行业动向。与笔者一起在每周的学习中前行，不容错过的前端精选，助力你成为技术领域的探索者。

总结趋势系列

年终总结：2023 最受欢迎的 NodeJS 框架

Framework	Description	Released	Growth
Next.js	Next.js 是一个用于构建 React 应用程序的框架，提供强大的路由系统、服务器渲染、自动代码分割等功能。它被设计用于构建现代的、可扩展的 Web 应用程序，支持静态生成和服务器渲染。	2016	+53.3/day
tRPC	tRPC 是一个用于构建类型安全、现代化的后端服务的框架。它允许你使用 TypeScript 定义 API，然后自动生成客户端和服务端代码，以提供类型安全的 API 调用。tRPC 支持多种后端框架，包括 Express、Fastify 等。	2020	+51.5/day
Nest	Nest 是一个用于构建可扩展且模块化的后端应用程序的框架。它基于 TypeScript，提供了依赖注入、模块化、强大的路由系统等功能。Nest 可以用于构建 RESTful API、WebSocket 应用程序等。	2017	+26.5/day
Remix	Remix 是一个构建在 React 生态系统之上的现代 JavaScript 框架，专注于构建 Web 应用程序。Remix 的目标是提供一种更好的开发体验和性能优化，通过强调一些现代前端开发最佳实践来简化复杂的应用程序构建。	2020	+24.3/day
Strapi	Strapi 是一个开源的 Headless CMS，允许开发者创建和管理内容 API。它提供了一个用户友好的界面，支持自定义数据结构和字段，并可通过 API 提供内容。Strapi 可以与各种前端框架和技术一起使用。	2015	+23.7/day
SvelteKit	SvelteKit 是一个用于构建现代 Web 应用程序的框架，基于 Svelte 框架。它提供了路由、状态管理、服务端渲染等功能，并以编译时生成的方式优化应用程序。SvelteKit 强调简单性和性能	2020	+17.6/day
Directus	Directus 是一个开源的 Headless CMS，专注于提供可扩展的自定义数据库。它允许开发者通过直接访问数据库表和字段来定义内容结构，同时提供强大的 API，可用于构建各种类型的应用程序。	2012	+17.1/day
Redwood	Redwood 是一个全栈 JavaScript 框架，旨在简化前端与后端的集成。它使用 React 进行前端开发，GraphQL 作为 API 查询语言，Prisma 用于数据库访问。Redwood 支持自动代码生成、服务端渲染等功能，以提供开发人员高效构建全栈应用的能力。	2019	+12.7/day
Nuxt	Nuxt.js 是一个基于 Vue.js 的前端框架，用于构建服务端渲染 (SSR)、静态站点生成 (SSG) 和单页应用 (SPA)。Nuxt 提供了一系列的约定和配置选项，简化了 Vue.js 应用程序的开发和部署。	2016	+12.4/day
Fastify	Fastify是轻量级、高性能的Node.js Web框架，专注于提供快速、低开销的HTTP服务。其采用低开销插件系统、支持异步编程、强调Schema验证，使其成为构建高性能、生产就绪的Web服务的理想选择	2016	+11.3/day
Express	Express 是一个基于 Node.js 的后端框架，用于构建 Web 应用程序和 API。它是一个轻量级、灵活且易于扩展的框架，通过中间件的概念，可以方便地添加各种功能。Express 提供了路由、HTTP 请求和响应处理等基础功能。	2009	+10.8/day
Keystone	KeystoneJS 是一个用于构建内容管理系统 (CMS) 和 Web 应用程序的 JavaScript 框架。它基于 Node.js 和 Express，并使用 GraphQL 作为 API 查询语言。Keystone 提供了一个灵活的数据模型、自动生成的管理界面和强大的查询能力，适用于构建各种类型的应用程序。	2018	+4.9/day

上述大部分框架在笔者日常工作中都有接触，其中tRPC 是笔者第一次接触，这里补充一下 tRPC 的信息。之前在 Node 端调用 rpc 接口更多的是选择使用thrift 对 IDL 文件进行编译后使用，而 tRPC 允许您轻松构建和使用完全类型安全的 API，而无需模式或代码生成。采用 Protobuf 协议。

简单对比一下二者的区别：

特性/包	trpc	thrift
静态类型检查	支持，利用 TypeScript 的类型系统	需要手动进行类型检查和处理，不如 TypeScript 强大
编译过程	不需要显式编译，利用 TypeScript 编译器	需要将 Thrift 文件显式编译成目标语言的代码
运行时依赖	可能需要 TypeScript 运行时依赖	部分语言可能需要 Thrift 运行时依赖
社区支持	相对年轻，社区规模较小	相对成熟，有较大的社区支持
代码生成	利用 TypeScript 的自动生成功能	需要显式编译 Thrift 文件生成代码
开发体验	针对 TypeScript 用户友好，提供良好的开发体验	可能需要额外配置和步骤，不如 TypeScript 开发体验好
项目适用性	适用于 TypeScript/JavaScript 项目	适用于多语言项目

同时二者在 RPC 的协议上页有一定区别，这里页简单对比一下二者的区别：

特性/协议	Protobuf	Thrift
序列化格式	二进制	二进制
语言支持	支持多种编程语言，包括Java、C++、Python等	支持多种编程语言，包括Java、C++、Python等
可读性	较小且二进制，不易人工阅读	二进制，不易人工阅读
性能	通常比JSON和XML更快	通常比JSON和XML更快
动态类型	不支持动态类型，需要先定义消息格式	支持动态类型，无需预先定义消息格式
扩展性	支持向后兼容性的版本控制	支持向后兼容性的版本控制
语法	使用.proto文件定义消息结构	使用IDL文件定义消息结构
字段标签	使用数字标签标识字段，更紧凑	使用字段名作为标签，可读性更好
社区支持	由Google维护，有较大的社区支持	由Apache维护，有稳定的社区支持
适用场景	适用于大规模数据交换和高性能要求的场景	适用于大规模数据交换和高性能要求的场景

发展趋势 2024 年后端和 Web 开发趋势

文章深入探讨了2024年后端和Web开发的关键趋势。首先，人工智能（AI）和机器学习（ML）在后端开发中的融合被强调，涵盖了代码生成、安全改进、个性化、预测分析和推荐引擎等方面，以提高开发效率。其次，Serverless Architecture 被认为将在2024年继续扩展，通过减少服务器管理，提高可扩展性和成本效益。Edge computing 作为新兴技术，被列为能够减少延迟、提高性能和实现实时数据处理的关键趋势。ZTA 架构的出现改变了传统的网络安全模型，强调验证身份、最小特权访问、微分割和数据加密等原则。物联网作为快速增长的软件开发趋势，涉及连接的物理设备通过互联网收集和交换数据，与云计算平台相结合构建可靠的后端系统。此外，对开发者健康的关注也体现在人体工程学键盘的推崇。最后，文章列举了2024年流行的编程语言和框架，包括 Rust、JavaScript、Python、Django、Node.js、Svelte和 Qwick。

工具推荐

qnm 用于查询node_modules目录的 cli 工具

我们经常需要快速检查 node_modules目录下安装的模块的版本。通常我们会运行 npm list 或者 yarn list 来进行查找，其运行速度很慢，而且会产生很多不相关的输出。qnm 是一个工具，它通过提供关于已安装模块的快速和集中的信息来解决这个问题。它同时支持npm和yarn，并允许你快速识别你感兴趣的模块的版本。

面试工具推荐

马上又到了找工作的金三银四，准备迎接金三银四求职高峰了吗？接下来为大家推荐两款工具，希望对大家找工作有所帮助

rxresu.me 一个免费和开源的简历生成器，简化了创建、更新和分享简历的过程。

• 没有用户跟踪或广告，隐私是最优先考虑的。支持自主托管，可以在不到30秒的时间内自托管。
• 支持同时管理多份简历
• 实时编辑预览
• 丰富的排版模式
• 更多丰富的功能

如何高效的使用leetCode

通过对相似算法进行分类，找到各类问题的解决方案，培养将新的问题映射到已知问题的能力。文章收集了大约 20 个这样的编码问题模式，了解这些模式背后的想法，一旦你熟悉了一种模式，你将用它解决许多问题。详细的问题讨论可以查看Grokking the Coding Interview

经验输出

试试这个来替换console.log

文章列举了 console 的其它几类用法，在更合适的场景下采用对应的方法，而不是一昧的使用console.log。其中比较令笔者印象深刻的是，console.trace()，可以将方法的调用堆栈打印出来，这个在一些复杂调用的场景下会很有帮助。

function trace(){  
	console.trace()  
}  

function randomFunction(){  
	trace();  
}
/* 输出
console.trace
- trace
- randomFunction
- (anonymous)
*/

前端 10 个最佳实践（React）

从前端开发的角度出发，我们将聚焦于代码的工程结构和组织方式，逐步探讨工程化标准的建设。最终，我们将深入研究 React 的真实开发场景，重点关注如何有效实现UI与逻辑的分离。此外，在处理性能问题时，我们还将介绍一系列有效的手段。这篇文章旨在为前端开发者提供全面的视角，帮助他们在项目中建立清晰的代码结构，规范化工程流程，并在React应用中实现高效的UI与逻辑分离，同时掌握处理性能问题的有效方法。

Node 最佳实践

经典的 NodeJS 最佳实践，2023 年新增 14 条最佳实践，更新 12 条最佳实践。快来看吧！)

结语

在探索和总结2023年最受欢迎的NodeJS框架、后端与Web开发趋势以及一系列实用工具后，我们深刻领略了技术的脉动与演进。2024年将带来更多挑战与机遇，我们期待着在这不断变化的技术领域中保持敏锐的洞察力。通过学习和采用新的工具，我们将能够更加高效地应对未来的开发需求。让我们共同迎接新一年的挑战，努力不懈地提升自己，创造更加卓越的技术成就。