2024】前端,该卷什么呢?_2024-02-16

2024已来,过去的 2023 可以说是具有里程碑意义的一年,ChatGPT 的炸裂式发展,很多大佬都亲自入场整活儿,你不得不说,人工智能时代的未来已来,大势所趋,不可阻挡。随着生成式AI的迅猛发展,程序员的生存也受到了前所未有的挑战,你可能已经嗅到了满世界都在裁员的味道了。但并不是说这件事儿马上就会发生,机器它当前还只是个“有点聪明”的机器,尚不具备完全替代人的能力,但几年后,谁知道呢?所以,还是未雨绸缪比较好~ 卷起来!

最后

欢迎关注"所谓前端"微信公众号,大家一起交流
点击扫码关注

结尾有推荐很多篇优质的前端文章~

主要包括下面几部分:

  1. 人工智能会革掉我们的命吗?
  2. 继续学习JavaScript,使用TypeScript
  3. 你必须要会微前端了
  4. 全栈框架的兴起
  5. 你得会 SSR
  6. 跨端:建议别入坑 Flutter 了
  7. 低代码要入吗
  8. 要搞全栈吗?
  9. 鸿蒙生态要入吗?
  10. 推荐一些 2023 看过的好文章

人工智能会革掉我们的命吗?

可能会,但不是现在,这个趋势应该是不需要太多争议的,毕竟随着 ChatGPT 的爆发,在生成式人工智能引发的革命性变革已经来临,未来机器能做的事情只会越来越多,迟早是要“解放一批人的”。

如果在当下还没有使用人工智能作为日常开发辅助工具的,显然你可能已经走在时代列车的尾灯后面了,之前也写过几篇这方的文章,供大家参考:

  • GPT-4 炸裂成那样,前端真的还有机会吗?我是这么看的~
  • 【ChatGPT】一文教你怎么编写清晰有效的(Prompt)提示词~
  • 【前端】一些让你事半功倍的 ChatGPT Prompts 建议~

随着人们争先恐后地寻找某种方式(任何方式)将人工智能产品化作为前端工作流程的一部分,这个领域出现了很多问题。其中一个不断出现的问题是“机器会抢走我们的工作吗?”

今年,可以说,“人工智能的不可阻挡的前进”在你失去前端工作的原因列表中可以往后放一放了。但该行业的市场潜力已经非常明显。你必须要重视在日常工作中如何使用人工智能辅助工具来提升你的开发效率。

ChatGPT 和 GitHub Copilot 现在已成为橡皮鸭编程和代码生成的日常配套工具,微软今年有信心向其背后的公司 OpenAI进一步投资100 亿美元。虽然只有巨头才有希望与这些工具竞争(谷歌有Bard和Gemini;Meta 有LLaMA,尽管是与微软合作构建的;亚马逊有Q;苹果肯定正在开发一些东西,拥有一长串像机器学习这样的工具) -ferret和ml-explore开始出现在他们的 GitHub 上),在它们之上进行构建的行业仍然相当大。

可能你已经看到 tldraw将草图转化为代码,Vercel 的 v0:将描述转化为 UI 组件,Figma也可以为设计做同样的事情。看起来你只是一个傻瓜,仅用你的人类能力来开发东西。然而,有人担心最终结果可能与真实交易相比马虎,例如在可访问性方面。更不用说供应商面临的劫持问题了。

继续学习 JavaScript,使用 TypeScript

image.png

JavaScript

从 JavaScript 诞生之后,几乎每年都在变得更流行。根据2023 年 Stack Overflow 开发者调查,JavaScript 连续第十一年成为最常用的编程语言。

image.png

不出意外,它会在 2024 年保持流行状态,甚至更久,它的统治地位还会持续更长时间。而且它还在不断更新迭代,加入一些很好的新 features。

推荐几本很好的书:

  • You don’t know JS Yet 2nd Edition
  • JavaScript: The Good Parts
  • Eloquent JavaScript
  • Clean Code JavaScript

TypeScript

根据《2023 年 Octoverse 状况》,今年(2023 年),TypeScript 首次取代 Java,成为 GitHub 上 OSS 项目中第三大最受欢迎的语言,其用户群增长了 37% 。

image.png

这一趋势也从上面 2023 年 Stack Overflow 开发者调查中也能看出来。因为它是一种强类型语言,面向对象、类型检查器、编译器和语言服务集于一身。如果你想编写更可读、更干净、更可维护的代码,你肯定必须使用 TypeScript。

在我近两三年的开发中,不管是业余还是实际工作,都已经默认使用TypeScript了,虽然会写很多看起来很繁琐的类型声明代码,但是使用过后就知道有多香了,而且有很多类型工具可以帮你一键生成类型声明,并不会明显降低开发效率,反而是类型安全更为重要。

我之前写了一些关于TypeScript的文章

  1. 【React】一些实际项目中的 TypeScript 技巧(一)~
  2. 【React】一些实际项目中的 TypeScript 技巧(二)~

学习教程,我这里推荐阮一峰大神的系列教程:

  • 前端系列教程 - 阮一峰

也可以看看其他的:

  • JavaScript from ES6 to ES12 in 2022 | KenHuang
  • 用8000字总结了【ES2015~ES2022】的所有新特性
  • JavaScript 新特性最全指南:ES2024 ~ ES2016
  • 「建议收藏」送你一份精心总结的3万字ES6实用指南(全)

你必须要会微前端了

都2024了,你还不回微前端!就真的out了~ 关于微前端的详细介绍,之前有写过两篇文章,可供参考:

  • 【微前端】在造一个微前端轮子之前,你需要知道这些~
  • 【微前端】手把手教你从0到1实现基于Webpack5 模块联邦(Module Federation)的微前端~

前端已经蓬勃发展了好多年,随着业务的不断迭代,必然就催生了很多“巨大的”SPA系统,而这时候就微前端就可以大显身手了,它的使用场景主要有下列这些:

  • 大型单页应用程序:在一个单一的代码库中开发和维护一个大型单页应用程序可能会变得非常复杂,使用微前端可以将应用程序拆分为更小、更易于管理的部分,从而提高可维护性和可扩展性。

  • 复杂的应用程序:当应用程序变得越来越复杂时,使用微前端可以降低应用程序的复杂性,并提高开发效率和可用性。

  • 多个团队合作开发:当多个团队共同开发一个应用程序时,使用微前端可以将应用程序拆分为多个部分,每个团队可以独立地开发和部署自己的部分,从而提高整个团队的效率。

  • 多个技术栈的应用程序:当应用程序需要使用不同的技术栈时,使用微前端可以让团队选择最适合自己的技术栈,提高开发效率和可用性。

根据国外的统计,可以看到当前主流的几种方案的流行程度:

image.png

国内可能不一样,各家大厂都有自己独立开发的微前端方案:

  • 阿里:qiankun
  • 字节:garfish
  • 腾讯:无界
  • 京东:Micro App

属于是各有优劣:

  • 自由度更高:module-federation
    • 需要自定义实现css隔离、js沙箱、路由劫持等功能
  • 用的最多:qiankun
    • 相对比较成熟,社区活跃
    • webpack体系、接入相对比较重
  • 接入更流畅:wujie、micro-app
  • 基于react +vite技术栈,我们最终选择更新更活跃,文档更丰富的micro-app

全栈框架的兴起

推荐阅读:

  1. Next.js 完全手册
  2. Learn Next.js 中文教程
  3. Nextjs全栈详细开发教程,完整版
  4. 2023 年 Web 开发(前端 + 后端)路线图
  5. 全栈开发者路线图 🗺

create-react-app 已经弃用了。它的上一个版本是两年前发布的,官方文档已经不提它了。甚至还一度掀起 “使用 vite 替换 CRA” 的讨论:

阅读链接:Replace Create React App recommendation with Vite

作为 React 的忠实粉丝,这里必须要提到在 React 的新官方文档中已经将 Next.js 作为生产环境推荐的首选项目初始化工具了,而不再是老官网的 CRA。

image.png

image.png

2024,你必须要开始重视 Next.js 了~

你得会 SSR

SSR 并不新鲜。PHP 提供 SSR 已经有 28 年的历史了,如果它对 Neopets(勉为其难地对 Facebook 也是如此)足够好,那么它对任何事情都可以说是足够好了。

但 Vercel 一直在努力推动它。Vercel 已成为前端开发领域一些最有影响力人物的公会组织,因此很难忽视他们的说法(例如,他们关于 Server Actions 的讨论在 Twitter 上充斥了一周的备忘录),那就是你应该使用 SSR,而且应该通过他们的服务来使用 SSR。

既然 SSR 这块蛋糕已经重新做大,每个人都想从中分一杯羹。Ruby on Rails 一族长期以来一直在这一领域工作,他们一直在试图用no-build工作流程吸引用户(这与 Vite 的no-bundle工作流程如出一辙,不过两者都遭到了一些强烈的反驳(counterpoints))。HTMX 也是同类产品中的一员,它再次通过成功应用 “流行语”(memes)来鼓吹,人们真正需要的唯一框架就是一个用于交付 HTML 文件的 HTTP 服务器。虽然 React 和 Svelte 现在是 Vercel 成功的既得利益者(核心团队成员都在那里工作),但 Vue 仍然是社区驱动的 Nuxt 的坚守者。

就连移动领域也染上了这个毛病。正如《React Native 值得期待的事情》一文中提到的,Szymon Rybczak 一直在为 React Native 开发 Async 组件和 React Server 组件,而 Expo 则一直在推动 Expo Router。SSR 在移动设备上是否有意义仍有待商榷([1] [2]),不过你可以随时指望 Evan Bacon 和 Nate Birdman 来为双方据理力争。

不过,对于使用 Node.js 之外的后端软件的公司来说,SSR 是否会流行起来还有待观察。

跨端:建议别入坑 Flutter 了

笔者之前也在实际业务开发中使用过 Flutter 近三年,开发体验上挺好的,但是一旦升级版本,真的是灾难(至少在2.0之前是这样),近几年,不管是从社区还是公司业务中,都已经能明显感觉它逐渐式微了。

image.png

随着 Hixie 和 Tim Sneath 都离开了 Google,而后者甚至转而宣传SwiftUI,Flutter 开发者陷入了生存危机,有人担心会被干掉。

与此同时,React Native 的发展依旧稳如老狗,亚马逊宣布它已成为他们多个旗舰App的首选技术。随着 Software Mansion 演示了他们的新IDE,并且 Meta 已从 Flipper 迁移到Chrome Devtools, DX 得到了突飞猛进的改进。 Expo 还做了太多值得一提的事情,尽管特别是通过Expo Modules彻底改变了本机 API 访问,并通过Expo Router继续了代码共享和 SSR 的故事(如前所述)。 Meta和Microsoft向 Web 一致性迈进,从DOM 遍历到事件循环,一直非常令人兴奋。

其他框架也在采取行动,Tauri 与Servo合作,Dioxus承诺使用 Rust 和类似 React 的 DX 来创建 GUI 应用程序。它建立在Taffy布局引擎之上,Taffy 布局引擎是 Yoga 的一个非常有前途的继承者,它可能很快会提供C 绑定,使其可在更多上下文中使用。我还听到了有关 Kotlin Multiplatform 的持续讨论,但没有什么特别突出的内容。

也可以去看看 Reddit 上面的讨论帖:What’s the problem with Flutter’s future? : r/FlutterDev

低代码要入吗?

低代码被热炒也不是一年两年了,但近些年确实也有很多大厂在跟进做这件事,但你要说它能成为一个巨大的市场,我是怀疑的。

image.png

因为,你通常会发现,在精简的低代码体验与平台本身的表现力之间需要权衡。如果一个平台试图做太多事情,试图包含太多的功能,它就会变得杂乱无章,难以使用。它甚至可能不稳定,难以修复错误。最好只做好一件或几件事情,并为其他所有无法控制的事情提供合理的默认设置。

让软件更容易构建的一个看似不可避免的副作用是,你往往会牺牲可定制性和对软件工作原理更深入的理解。"低代码/无代码工具倾向于寻找通用用例,这可能会限制软件的灵活性:在所有这些工具中,易用性和控制性之间似乎存在着一种权衡,我还没有看到有人能真正很好地解决这个问题(目前)。

但是在一些垂直业务和领域,低代码也是可以大展身手的,比如:

  • 数据管理和分析工具;
  • 业务系统集成工具;
  • 业务流程自动化工具;
  • 内部资源;

如果你当前的业务是低代码友好的,还是挺值得入的,毕竟数字化是未来,当一个技能人无你有,人有你精的时候,它就是个好技能!

要搞全栈吗?

我的回答是:尽可能搞!

为啥?

机器会的都比你多~

啊哈哈 ~

  • 全栈 Roadmap

鸿蒙生态要入吗?

最后一个,鸿蒙生态开发要入吗?这个比较敏感,我目前持保留态度,就不说了,容易被喷,大家可以讨论下~

推荐一些 2023 看过的好文章

  • ChatGPT:前端开发的新好朋友
  • 如何在 React 中记忆组件
  • 你的 React 组件做的太多了
  • React Hooks 3:React 18 中的新 Hooks
  • useTransition() 和 useDefferedValue()
  • React 18 中的 useTransition() 与 useDeferredValue()
  • React v18:初看 useTransition 钩子——等等,但为什么呢?
  • React v18 Suspense 和 Render-as-You-Fetch 方法简介
  • 服务器端渲染 React 18 应用程序的实践指南
  • 作为前端工程师,你应该知道的 4 个 React 陷阱
  • 2022 年使用 React 时要避免的 11 个错误
  • 5 个能让你成为更好的 React 开发者的概念
    面向高级 React 开发人员的 React Hooks 挑战
  • React 中的事件发射器:深入探讨
  • 你应该知道的 5 个 React 设计模式
  • 在 2022 年使用 React hooks 优化你的 React 应用程序(React.Memo、useMemo、useCallback)
  • 更简洁的代码——React 子组件
  • 我们如何处理 React 上下文
  • 零依赖的简单 React 滚动动画
  • 5 个用于优化 ReactJS 性能的推荐工具
  • React 中最丑陋的模式
  • React Hooks 2:useMemo、useCallback、useLayoutEffect、useImperativeHandle、useDebugValue 和自定义 Hooks
  • 在 React 应用程序中获取数据的 7 种方法
  • 你如何重构一个 2,700 行的 React 组件?
  • 每个初级 React 开发人员都会犯的 8 个错误
  • 如何使用 React Error Boundary 处理 React 中的错误
  • 10 个提示和技巧,让你成为更好的 ReactJS 开发者
  • ReactJS 中的视差效果
  • React 不是快速,而是高效!
  • 如何使用 React 和 Node.js 创建 Stripe 订阅
  • 每个人都应该学习成为 Pro 的 5 种常见 Reactjs 反模式
  • 停止在 React 中使用过多的 useState()
  • 🔥 3 大 React 技巧专家 😎 喜欢用来减小组件的大小
  • 用 Vite 创建一个完美的 React 项目
  • 像专业人士一样为您的 React 项目配置 Eslint 和 Prettier
  • 使用 react-redux 和 styled-components 实现深色主题切换 💅
  • 如何在 React 项目中对导入进行排序
  • React 中的 useRafInterval 钩子
  • Redux 与 Context API + useReducer
  • React 查询:迁移到 v4
  • 在 ReactJS 中不该做什么
  • 使用自定义挂钩响应可重用 API 调用
  • React 减少代码的最佳实践和模式——第 3 部分
  • 关于 React 中 Contenteditable 元素的状态管理
  • TypeScript:键入 React useRef 钩子
  • 如何在 React 中清理数据
  • 如何在 React 中将一个 div 变成一个可访问的按钮
  • 在 React 中创建无限滑块
  • 如何在 react.js 中使用 debounce 创建实时搜索
  • React Router V6 和 Framer Motion 中的页面转换
  • 如何使用 React Hooks 去抖/节流回调
  • 7 React 代码片段的最佳实践
  • 如何通过 useState 使用 React 上下文

参考

  • buttondown.email/whatever_ja…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/471997.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI:128-基于机器学习的建筑物能源消耗预测

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…

怎么恢复电脑重装前的数据?介绍几种有效的方法

在日常生活和工作中,电脑已成为我们不可或缺的工具。然而,有时候我们会遇到一些突发情况,比如电脑系统崩溃需要重新安装系统。在这个过程中,我们可能会失去一些重要的数据,比如照片、文档、视频等。这些数据可能包含着…

【NLP】MHA、MQA、GQA机制的区别

Note LLama2的注意力机制使用了GQA。三种机制的图如下: MHA机制(Multi-head Attention) MHA(Multi-head Attention)是标准的多头注意力机制,包含h个Query、Key 和 Value 矩阵。所有注意力头的 Key 和 V…

BBC英式口语~发音练习~笔记整理

参考资料 原视频地址: https://www.bilibili.com/video/BV1D7411n7bS/?spm_id_from333.1245.0.0&vd_source5986fc7c8e6d754f3ca44233573aeaff 笔记图片

Java Web 中forward 和 redirect 的区别

前言 在Java Web开发中,页面跳转是构建用户界面和实现业务逻辑的重要组成部分。Forward(转发)和Redirect(重定向)是两种常见的跳转方式,它们分别具有不同的特点和适用场景。正确地选择和使用这两种跳转方式…

html的列表标签

列表标签 列表在html里面经常会用到的,主要使用来布局的,使其整齐好看. 无序列表 无序列表[重要]: ul ,li 示例代码1: 对应的效果: 无序列表的属性 属性值描述typedisc,square,…

文生视频:Sora模型报告总结

作为世界模拟器的视频生成模型 我们探索视频数据生成模型的大规模训练。具体来说,我们在可变持续时间、分辨率和宽高比的视频和图像上联合训练文本条件扩散模型。我们利用对视频和图像潜在代码的时空补丁进行操作的变压器架构。我们最大的模型 Sora 能够生成一分钟…

【硬核】堪称全地球最好用并且免费的AI人工智能图片无损放大神器,我只偷偷告诉你一个人!

🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起学习和进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞&a…

C语言—函数

1.编写一个函数&#xff0c;通过输入一个数字字符&#xff0c;返回该数字29. /*1.编写一个函数&#xff0c;通过输入一个数字字符&#xff0c;返回该数字 */#include <stdio.h>//函数定义,返回类型为int int char_num(char c) {if(c > 0 && c < 9) //检查…

Java基于 SpringBoot 的高校校园点餐系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

C++中对象的构造与析构顺序

一、对象的构造顺序 对象的构造&#xff0c;先被创建的对象&#xff0c;先被构造&#xff0c;先调用其构造函数 class A { private:int _a 0; public://构造函数A(int a 0){_a a;cout << "A(int a 0)" << " " << _a << endl…

【python--迭代生成器闭包面向对象继承多态】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;深度学习 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; python--迭代生成器闭包面向对象继承多态 往期内容1.迭代for...in字典的迭代列表迭代 生成器推导式的…