2020 前端开源领域技术展望

简介: 导读:可以说开源前端领域正如偏右所说的渡过了波澜不惊的2019年,2020年开启了下一个10年,站在这个起点展望前端的未来,必会面临巨大的变化和挑战。说实话,展望接下来的十年会发生什么?十年对于互联网,对于前端来说太长了,很难想象十年后会是什么一个场景,但这路上有些事情在我们看来正在发生。

1.jpg
作者|展炎、御术、偏右

导读:可以说开源前端领域正如偏右所说的渡过了波澜不惊的2019年,2020年开启了下一个10年,站在这个起点展望前端的未来,必会面临巨大的变化和挑战。说实话,展望接下来的十年会发生什么?十年对于互联网,对于前端来说太长了,很难想象十年后会是什么一个场景,但这路上有些事情在我们看来正在发生。

TypeScript 是当下的政治正确但前端终将语言无关

毫无疑问 TypeScript 将成为很长一段时间的主流,大型前端开源项目大都已经或正在全面拥抱 TypeScript,他能让我们拥有很多面向对象语言、强类型语言才具备的先进特性,能帮助我们提升代码质量,降低团队协作上的成本和风险,如果我们的项目还未转过来,是时候动手了。

但一个开源项目的质量跟语言本身并无直接关系,更别说 TypeScript 本身依旧还只是带「静态类型检查」的「弱类型」语言,OO并不是必须的,用原生 JS 也一样能写出优雅的封装与继承,更让人期待的是WebAssembly(https://www.zhihu.com/question/362893829) 的潜力被真正开发出来后,前端终将语言无关,前端在研发的是人机交互界面上的产物。

浏览器技术和云计算的进化将加速前端构建和资源加载的变革

Webpack 5 正式版发布,通过物理缓存大幅提升构建性能,在短期内还会是主流构建工具;但随着 ES Modules 成为主流,CJS 淡出,ESM CDN 大范围使用后构建工具将转向 Bundless,Webpack 不可避免也会逐渐退出历史舞台。特别是当 HTTP/2 到来,支持请求与响应的多路复用来,HTTP 首部字段被大大压缩,传输效率会得到极大的提升,届时我们将不再需要对资源文件进行合并操作,构建工具也会随之加速进化。

C/S 到 B/S 再到 C/S

历史总在不断重复轮回中循环上升,互联网,特别是云的出现让软件从 C/S 走向了 B/S,甚至如 WebAssembly 技术的出现,我们能更低成本的将原先的客户端软件移植到浏览器上去,一切看上去都是朝着 B/S 发展。然而我们也要看到另外一个趋势,自成生态的巨型应用如微信、支付宝、Facebook 等正在收敛浏览器上软件至他们的客户端上,背后的典型技术是小程序、PWA,我们甚至已经看到了出现在 PC 客户端上小程序。而借助如 Electron 这类项目,很多 B/S 模式的软件服务在推出自己的客户端以谋求用户更专注的使用体验,特别是很多传统以 C/S 模式提供服务的软件推出客户端会更贴合用户的心智。这是我们看到的历史轮回,但接下来的这段 C/S 历程跟过去的 C/S 所用到的技术已经完全不一样了,不管是小程序、PWA还是Service Worker、Electron、这 Client 端上开源项目会迎来一个春天。

新兴交互场景将唤起 Micro UI

Micro Frontends (https://micro-frontends.org/) 正风生水起,然而它不过是已经风靡多年但仍备受争议的Microservice Architecture(https://microservices.io/) 在前端的应用,可以帮我们更好地去解决复杂应用的开发和维护问题。在人机交互,用户如何在一个复杂的产品中找到此时此刻最需要的一个 UI,仍然是一个未被很好地解决的问题。用户常常迷失在一个个大型 APP 复杂的 UI 中,然而很多时候我们只是需要一个能高效完成某项工作的 UI,姑且称为 Micro UI 吧。在银河帝国等科幻小说及科幻电影中,常常能看到一种叫“信息窗”的黑科技,这样的每个信息窗就是一个 Micro UI。随着 AI、AR、VR 、IOT 持续推进话,设备将越来越懂人,信息和数据的呈现也将越来越生动化,这些在科幻中才出现的东西在未来 10 年一定有一些会变成现实 ,这种 UI 的开发方式也将为前端的开发方式带来质的变化。

RPA & Marchine Driven UI

在 AI 和 IOT 时代,如果你然坚持认为应用一定是一个需要由专业人士设计开发,并且由用户通过手机主动使用 Web 产品的话,那么你将有较大概率过未来。

RPA 这个远古时代活跃在游戏外挂的古老的技术在 AI、标准化产品飞速发展的正在焕发着升级,UiPath(https://www.uipath.com/)、Zapier(https://zapier.com/)、Microsoft Power Platform(https://flow.microsoft.com/zh-cn/) 、UI Bot(https://www.uibot.com.cn/) 等工具正在改变很多行业的工作方式,而以 Google Assistant 为代表的智能助理正在改变人们使用电脑的方式。作为前端,我们要考虑是:UI 不仅是被人消费的,还可以被机器消费,甚至只需要描述你的意图,这些非常需要一种高效的方式让你的应用可以被机器人来驱动。甚至应用已经不再是一个当下我们能看到的,而是一个个机器人了,而我们提供的则是:RPA 机器人制作工具、可以被 RPA 来驱动的标准 UI。如何设计与实现可以被机器人、人同时使用的 UI 是我们面临的一大挑战。

图形技术依旧会是界面上的热点

尽管脑机交互已经在实验室里孵化,但未来十年眼睛依旧还是人类获取外界信息最主要的通道,图形化可以比文字快十倍甚至万倍的速度清晰有效地传达信息,这是人类经历漫长进化习得的强大视觉化思考本能。在数据愈加丰富、使用场景愈加多样的下一个十年,如何高效的从数据中获得洞察依旧会有强烈的诉求,前端这个最接近数据可视化能力模型要求的工种依旧会是这个领域的主力。而另一方面,未来会出现新的「屏」,不管是 IOT 下的实屏还是 VR、AR 下的虚屏,当下已经相当完备和标准化的绘图 API 最有机会被新「屏」优先支持和采用,在这基础上利用图形技术实现一套新的 UI 基础设施甚至语言都是有可能的。

前端智能化

前端近年来一直尝试提升效率,可视化研发、搭建体系、工程&工具、端多解决方案等等都是为了解决效率,但天花板已然出现,下一步必然会引入智能化能力,在原来的技术体系&产品上,注入自然语言识别、图像识别的能力,使得效能的发生一系列质的变化,来突破这个天花板。更大层面上,运用智能化能力来解决工作中的问题,会逐步成为前端的必备能力和思考方式。

就算不想去蹭人工智能的热,事实上是你不得不接受并开始学习人工智能,大量简单如千人千面的Banner、营销活动页已经纯粹通过人工智能自动化生产,并不需要前端去参与研发,复杂如中后台的表单、表格、图表展现也已经可以通过提供接口智能推导出最佳的页面实现,只需要一行代码输入数据就能出可视化图表,甚至从设计稿直接生成页面也将变成现实。前端智能化的项目将会越来越多,任何时候开始都不晚,但不开始就晚了。

端到端的研发

随着云原生和业务平台能力逐步完备,前端运用Serverless能力来完成端到端的研发工作会逐步成为一种趋势,在这个趋势的背后,会面临两个挑战,一方面是需要将现有的工具和平台延展到Serverless上,在支持Serverless的同时,必须将端到端一体化的来看待,包括:研发工具、监控体系、质量体系等等;另一方面对人员自身能力和意识有了新的要求。前端这个岗位的职能边界和能力范围的会发现变化。

基于前端智能化与端到端的研发方向上,是未来前端开源上的最具吸引力的项目;而在整体的层面上,前端具备吸引力的项目会有两个方面的特征:

在现有相关体系上提出新的理念和思想;随着框架、构建库等基础设施收敛,类似的重复性的开源项目会减少,但创新并不会停止,等到更多关注和认可的一定是能力在基础设施上提出新的理念和思想的项目。
在现有相关体系上与其他领域产生链接;有些技术未必是刚刚出现,但今天重新受到前端业内的关注,比如WebAssembly,因为大家发现了新的运用场景。未来将现有前端技术与其他技术领域相结合的项目和设计,会受到开源社区的更多关注。

We are hiring

淘系技术部依托淘系丰富的业务形态和海量的用户,我们持续以技术驱动产品和商业创新,不断探索和衍生颠覆型互联网新技术,以更加智能、友好、普惠的科技深度重塑产业和用户体验,打造新商业。我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、移动技术、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。
请投递简历至邮箱:ruoqi.zlj@taobao.com

更多技术干货关注「淘系技术」微信公众号!
屏幕快照 2020-02-07 下午3.57.54.png

相关实践学习
基于阿里云短信服务的防机器人验证
基于阿里云相关产品和服务实现一个手机验证码登录的功能,防止机器人批量注册,服务端采用阿里云ECS服务器,程序语言选用JAVA,服务器软件选用Tomcat,应用服务采用阿里云短信服务,
相关文章
|
3天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
3天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
3天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
3天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
3天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
3天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
3天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
3天前
|
前端开发 JavaScript 安全
【TypeScript技术专栏】TypeScript在微前端架构中的应用
【4月更文挑战第30天】微前端架构通过拆分应用提升开发效率和降低维护成本,TypeScript作为静态类型语言,以其类型安全、代码智能提示和重构支持强化这一架构。在实践中,TypeScript定义公共接口确保跨微前端通信一致性,用于编写微前端以保证代码质量,且能无缝集成到构建流程中。在微前端架构中,TypeScript是保障正确性和可维护性的有力工具。
|
3天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
3天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践