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

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

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版项目截图功能列表首页分类…

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

不得不说,如今比前些年学习资料多很多了。现在的前端公众号也挺多的,这里推荐几个前端大佬运营的公众号,都是聚焦前端垂直领域的优质公众号,关注这些公众号至少可以: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…

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

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

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

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

powerpoint技巧_几乎每个PowerPoint都烂鸡蛋

powerpoint技巧Almost 20 years ago — 2001! — Seth Godin wrote an ebook called Really Bad Powerpoint (and how to avoid it). In that book he detailed all of the things that tend to go wrong in slide presentations.差不多20年前-2001年! —塞斯戈丁(S…

认识mysql总结_从根上理解Mysql - 读后个人总结1-搜云库

初识 MySQL通信介绍MySQL 也是典型的 C / S 模型,分为客户端及服务端,服务端一般部署在远端服务器中,也可以部署至本地,然后客户端跟服务端通信则可以使用依赖网络的 TCP 长连接或 Unix-like 的系统下可以使用 Socket文件的形式通…

面试官问:你在项目中做过哪些安全防范措施?

大家好,我是若川。今天分享一篇安全相关的文章。点击下方卡片关注我、加个星标,或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列如果你被面试官问到这个问题,不要急于描述自己遇到的问题以及如何处理的,你得…

消灭病毒_消灭遗产

消灭病毒The year was 1995, I was 10 years of age. The number 1 single in the UK was Think Twice by Celine Dion, and Batman Forever was the highest grossing movie across the pond in the States. Manchester United, unfortunately, won their 3rd Premier League …

logcat崩溃_使用logcat抓取Android崩溃日志

一、安装jdkJDK网上教程非常多,此处不再赘述。(好像不装也没关系,未实测)二、工具列表a) adb包(v.1.0.31版本或以上,下文提供下载地址)b) logcat.bat文件(下文制作)三、安装adb(二选一)a) 放到任意位置(推荐)因为adb…

基于 Ubuntu 16.04 LTS 的 KDE neon 到达维护周期

随着 KDE neon 在 Ubuntu 18.04 LTS 发布,开发团队已经决定 放弃维护基于 Ubuntu 16.04 LTS版本,大多数用户预警将希望升级到基于 Ubuntu LTS 的 KDE neno 新版本。“去年KDE neno 被重新定位到 Ubuntu bionic / 18.04上,并且升级已经基本顺利…

真诚推荐7个能助你成长的前端大佬

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