前端技术未来三年前瞻性思考

大家好,我是若川。今天推荐云谦大佬的一篇好文章,值得收藏。点击下方卡片关注我、加个星标,或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列


习惯从业务场景、用户体验、研发速度、维护成本四个维度来看框架等前端技术,大部分的技术点都能找到合适的位置,解的问题是如何快速上线和维护满足业务的好用的产品

业务场景

这部分解从框架的角度看业务需要。

框架负责,

  1. 对接后后端框架

  2. 对接输出环节,包括支付宝容器,pc 和 mobile 浏览器,组件研发等

  3. 对接二方服务,包括统计,鉴权等

未来三年,

  1. 更多的业务有移动办公需求,小程序会继续加量

  2. 更多复杂场景的出现,包括重型应用,应用集群等,WebAssembly,微前端,Module Federation 等技术会在此发挥作用

  3. 标准应用中 NoCode/LowCode 的占比逐渐增大,开发者逐渐习惯这种研发方式,包括云凤蝶或更垂直的 NoCode 平台,imgcook 等

  4. 需要对接的业务场景越来越多,框架层需要做取舍、收敛和适时的减法

用户体验

什么是默认好用?以及如何做到默认好用。

要有更好的用户体验,前端 + 设计师需负责,

  1. 前端尺寸要小,这样页面载入更快

  2. 合理的 Code Splitting、Bundle Splitting 和按需加载策略,这样重要内容载入更快

  3. UI 好看,交互流畅且好用

  4. 合理的缓存和预加载策略,这样页面切换更快

之前觉得 5G 来了尺寸肯定不是问题,直到我看到需要下载 60M JS 资源的页面,内网环境打开页面都要 8s+。现在的图形库、UI 库根本不把尺寸当回事。

未来三年,如果我们希望有更好的用户体验,

  1. 图形库、UI 库自己得做瘦身/按需加载/正确的 tree-shaking/设计合理的按需编译

  2. 更多框架层内置的性能优化方案

  3. 框架接管请求层,不止是发请求,基于路由,提供缓存和预加载策略

  4. 混合研发如果成为主流,需要解沙箱满的问题,参考 tech ui 首页,换 module federation 或者坐等浏览器实现标准的沙箱环境

研发速度

这部分解如何快速完成研发,并交付上线。

各方配合,不止是框架,

  1. 工具提速、框架瘦身、TS 定义等

  2. 组件封装,包含 antd/antv/tech-ui

  3. 数据准备,包含 oneapi

  4. 交付流畅性,包含 DEMO 中心,MOCK 平台,联调最佳实践等

  5. 辅助工具

未来三年,

  1. 编译速度肯定会大幅提升,路肯定不止一条;重 CPU 部分会基于 Rust/Go 实现但不是整体,整体方案的终态我更倾向 npm pre-built cdn + bundless 的组合;这不止是框架/工具等事,ui 库和工具库也许合理规划和配置,不然一个项目用 5 个图形库 + 10 个依赖 antd 等库,10000+ 的文件要编译,怎么搞也是快不起来

  2. 更多垂直领域高级别的封装,集成框架/UI/数据/数据流,快速产出中台应用,形态可能是平台,也可能是 ProCode;封装等级越高,开发越快,但定制越难,需权衡

  3. 命令行在很多场景下不够用,借助辅助工具可进一步提效;形态有编辑器插件、Chrome 插件和 In-Context Editing

维护成本

产品不仅要开发,还要维护,何况框架和依赖库还在不断升级。

成本问题包括,

  1. 新人的上手成本

  2. 开发人员迭代的接手成本

  3. 技术栈升级成本

未来三年,对于框架而言,

  1. 降低技术栈升级成本。这需要框架有更好的顶层设计,更好的抽象,抹平底层技术栈,解 3-5 年后依赖的技术栈变更后迁移成本最小化的问题;功能方面权衡一方集成/二方提供/三方引入,设计上适度集成,适度组合,适度 eject

  2. 写一样的代码。持续打磨最佳实践,方案唯一化,一不是绝对的一,而是特定场景下的一;框架支持多端适配,未来是 PC + 小程序,长远看,多套写法应该走向统一


最近组建了一个江西人的前端交流群,如果你也是江西人可以加我微信 ruochuan12 拉你进群。


················· 若川出品 ·················

今日话题

略。欢迎在下方留言~  欢迎分享、收藏、点赞、在看我的公众号文章~

一个愿景是帮助5年内前端人走向前列的公众号

可加我个人微信 ruochuan12,长期交流学习

推荐阅读

我在阿里招前端,我该怎么帮你?(现在还能加我进模拟面试群)

若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

点击方卡片关注我、加个星标,或者查看源码等系列文章。
学习源码整体架构系列、年度总结、JS基础系列

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

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

相关文章

微信临时素材接口_在接口中表达临时性

微信临时素材接口When interacting with today’s graphic user interfaces (GUI), we experience a sense of realism. As of now, certain aspects of realism (for example animations) create the appearance that user interface graphics behave in accordance with the …

程序员,当你写程序写累了怎么办。

记得泡泡网的CEO李想说过这样一句话,大体就是:做一件事情,一开始是兴趣使然,然而当三分钟热度过去之后,就要靠毅力支撑自己来完成它。至少我到现在是能非常深刻的体会这句话。一开始再怎么喜欢做一件事,要想…

mysql 导致iis 假死_解决IIS无响应假死状态

1 查看服务器iis的w3wp.exe对应的应用程序池在IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢。今天研究了一下,可以做以下配置:1、在IIS中对每个网站进行单独的应用程序池配置。即互相之间不影响。2、设…

Swift 5将强制执行内存独占访问

Swift 5将带来改进的Swift程序内存安全性,在程序的其他部分修改变量时,不允许通过其他变量名来访问这些变量。这个变更对现有应用程序的行为和Swift编译器本身都有重要影响。Swift 5将带来改进的Swift程序内存安全性,在程序的其他部分修改变量…

GitHub 支持上传视频文件啦!

大家好,我是若川。今天周六,分享一篇热点新闻。文章较短,预计5分钟可看完。近日 Github 宣布支持了视频上传功能,意味着,大家在提 issue 时可以携带视频了,这极大地提高了开发者和维护者的效率,…

ui设计 网络错误_UI设计人员常犯的10个错误

ui设计 网络错误重点 (Top highlight)1.不考虑范围 (1. Disregarding scope)It’s not uncommon for designers to introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business o…

灰色的生命

也许幸福从来没有在我身边也许是已经在我身边但我抓不住,摸不着 你的出现让我惊奇为我灰色的生命添上了从没见过的色彩我不相信这一切都是我的 不相信总是害怕相信了之后却要面对残酷的现实 但为何你让我相信所有抓住了希望却又转过身没有离去但让一切停止望着你不想说…

小程序 node.js mysql_基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)...

高仿网易严选的微信小程序商城(微信小程序客户端)界面高仿网易严选商城(主要是2016年wap版)测试数据采集自网易严选商城功能和数据库参考ecshop服务端api基于Node.jsThinkJSMySQL计划添加基于Vue.js的后台管理系统、PC版、Wap版项目截图功能列表首页分类…

前端菜鸟笔记 Day-5 CSS 高级

文章大纲来源:【Day 5】CSS 高级 CSS 选择器CSS 拓展CSS 单位CSS 参考手册CSS 选择器 内容引用:CSS 选择器 元素选择器 html { ... } 复制代码选择器分组 h2, p { ... } 复制代码类选择器 .important { ... } p.warning { ... } .important.warning { .…

推荐几个干货超多助你成长的前端大佬

不得不说,如今比前些年学习资料多很多了。现在的前端公众号也挺多的,这里推荐几个前端大佬运营的公众号,都是聚焦前端垂直领域的优质公众号,关注这些公众号至少可以:1、了解现在前端技术发展情况和未来发展趋势&#x…

背景图片_背景

背景图片A designer’s journey is one that’s littered with many portfolios. Many of which have been reduced to a mere 404 error page, an abandoned link or another archive in the folders. Recently, while updating my portfolio, all the forgotten versions tha…

解决《Mobile绘制背景图片》中的问题

与PC平台的开发相比,Mobile的开发麻烦了许多,至少这是我的感觉 。 谢谢--“ Fly Pig(^^)” 的文章《Mobile开发(绘制背景图片) 》 http://www.cnblogs.com/Bright-Liang/archive/2009/06/11/1501309.html 不过对于我这种低手来说&…

mysql 5.6.31 winx64_详解介绍MySQL5.6.31winx64.zip安装配置的图文教程

这篇文章主要介绍了MySQL5.6.31 winx64.zip 安装配置教程详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下#1. 下载##2.解压到本地 修改必要配置my*.ini#3.mysql installadmin模式启动cmdcd mysql目录/bin执行安装: mysqld -install启动…

如何使用Gitbook创建html技术文档

故事背景:很多时候对外发布的产品需要一份html格式的文档 首先要了解的是 word直接转成html是不现实的,需要通过md文件来转换。 我们本节课讨论的Gitbook即是在MD基础上进行操作的。 所以任务一:安装typora软件,用于编辑md文件&am…

徒手撸了个markdown笔记平台

大家好,我是若川。今天分享一篇markdown笔记平台的项目文章。点击下方卡片关注我、加个星标,或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列一、前言作为开发者,我觉的用markdown写文档是一件很酷的事情。在之前&#…

This week I’ve been forging background illustrations for my website, epdillon.com (launching soon). I’ve been using Adobe Illustrator to do all the major casting, dabbling in Figma only to temper the colours. Fresh from the design furnace, my hands are a…

【转】Vector与ArrayList区别

在写java的时候,基本上都喜欢用arraylist,甚至我都不知道有个vector的存在。查了一下发现又是线程安全问题。。。咋个线程安全天天围着我转呢。。。多得阿里巴巴,让我开始认识java的所谓线程安全问题。 the following is from:htt…

pyqt控件显示重叠_Python编程:一个不错的基于PyQt的Led控件显示库,建议收藏学习...

1、控件说明在Github上,偶然发现了一个基于PyQt5的第三方Led指示灯控件库,使用起来非常方便,控件外观也比较漂亮,更难能可贵的是作者源代码写得比较简洁,仅仅才约200行左右,可以作为一个在PyQt中写自定义控…

编写高质量可维护的代码:优雅命名

大家好,我是若川。今天分享一篇关于如何命名更优雅的文章。点击下方卡片关注我、加个星标,或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列本文首发于政采云前端团队博客:编写高质量可维护的代码:优雅命名ht…

继春晚不宕机后,百度云这次拿下携程大单

今年春晚,百度和央视联手发放高达9亿现金红包的消息,想必让不少人替百度捏了把汗。根据统计,春晚期间,全球观众参与百度App红包互动次数累计达到208亿次,日活从1.6亿冲上3亿关口,这么大的瞬时流量冲击是百度…