迅速发展的前端开发,在每⼀年,都为开发者带来了新的关键词。2019 年已步⼊尾声,2020 年前端发展的关键词⼜将有哪些呢?发展的方向又会是什么呢?参考2019年大前端的发展,不出意外,前端依旧会围绕⼩程序、超级APP、跨端开发、前端⼯程化以及新技术运用等几个方面进行展开(可以参考2019年大前端技术趋势深度解读)。

小程序

在⼩程序⽅⾯,今年仍然是⼩程序突⻜猛进的⼀年,各⼤主流的 App 都上线了⼩程序能⼒的⽀持,各前端团队也都有了专⻔的⼩程序开发团队,以适应更快的⼩程序开发需求。同时App 中很多关键的功能都被⼩程序所替代,甚⾄有些 App 已经变成 Native ⼩程序壳,上层的应⽤实现全部是⼩程序。

在微信小程序出现以前,大家在谈 Hybird、ReactNative,但终归只是技术层面的狂欢,始终没有业务属性的注入。小程序的出现,一方面告诉业界在当前设备上 Webview 也没差到哪去,另外一方面告诉业界如何让有能力的商家在超级 APP上进行私域运营。

另一方面,从技术角度说,在上层 DSL 的严格限制下,超级 APP 就可定义符合自己诉求的 Web 标准,弥补当前 Web 标准的不足,最后和客户端配合,结合离线、预加载、定制Webview 能产出类似于 NSR 等各种酷炫的技术模型,让 Web 在端内低成本达到 Native 版的体验,端外也不会像 Weex 一样有点小别扭。

不过由于需要依赖超级APP(微信、支付宝、百度、美团、头条等),由于各家平台采用的具体方案的差异,造成目前小程序的落地方案也不一样,有时候需要开发多套代码。

跨端开发

跨端开发⽅⾯,RN ⽣态已经⾮常成熟,或者说看不到太多发展前景,因为目前还停留在0.61版本,似乎1.0版本仍然遥遥无期。因此,今年很多团队转战⾕歌⽣态的 Flutter,特别是 Flutter for Web 的第⼀个 Release,⼜让 Web 前端重燃希望、跃跃欲试。

同时,苹果公司也发布了全新的 UI 系统——SwiftUI,同时,开源社区中 SwiftUI for Web已经在路上了,SwiftUI for Android 还会远吗?

跨端开发⽅⾯,Flutter 仍会快速发展,并且会有更多的开发者,Flutter on JS、SwiftUIfor Web&Android 也将是开源⽣态值得期待的事情,毕竟跨端仍没有⼀个完美的解决⽅案。

前端工程化

在前端⼯程化⽅⾯,开发者最重要的基本素养就是通过⼯具提升效率,⽽前端开发者在这⽅⾯会持续迭代和优化。

曾经我们谈 Yoman,谈 CLI 等系列构建工具,但在团队大了之后始终觉得差点什么。反观 Java 同学,从没听说过 Spring Boot 配置工程师。今年很多团队都在建设完整的前端 DevOps 流程⼯具集,⼀些团队之间也开始协作共建,不管是 Web 还是⼩程序项⽬,从新建项⽬、开发、联调(tiao)、部署、测试、发布、运维到监控统计,都有完善的⼯具做保障和提效,今后前端⼯程也会越⾛越标准化。

展望2020年前端的发展,前端工程体系一定会更加闭环,不再是一个脚手架这么简单,而是会结合 IDE,打通业务属性,从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个完成的闭环。

Serverless

Serverless 的⽕爆⼏乎可以归因于前端。因为 Serverless 能够较完美的⽀持Node.js,使⽤ Serverless 帮助前端开发者解决了使⽤Node.js 过程中的诸多问题。

当前的前端工程师大多都是科班出身,虽不能和正宗的服务端开发同学比,但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层,来满足这部分诉求,但依旧摆脱不掉运维、机器分配 这条拦路虎。随着 Serverless 的逐步落地,BFF 这层的代码会摆脱运维、机器分配等复杂的问题,同时大概率会由前端同学写这部分代码,服务端同学专注中台系统的实现。从业务上说,业务的试错成本也会大幅度降低。

随着 Node.js 成为前端开发者必备技能之后,云计算的不断普及会让Serverless 触⼿可及。当越来越多的开发者尝到研发⾼效的甜头之后,Serverless 必将对前端的研发模式产⽣变⾰。

同时,使用Serverless的同学一定会使用 TS。这也意味着,2020 不写 TS 可能真的就 Out 了。

WebAssembly

WebAssembly 是一种新的字节码格式,目前主流浏览器都已经支WebAssembly。 和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似,可以快速装载运行,因此性能相对于 JS 解释执行而言有了极大的提升。 也就是说WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

有了 WebAssembly,在浏览器上可以跑任何语言。从 Coffee 到 TypeScript,到 Babel,这些都是需要转译为 js 才能被执行的,而 WebAssembly 是在浏览器里嵌入 vm,直接执行,不需要转译,执行效率自然高得多。

举个例子,AutoCAD 软件是由美国欧特克有限公司(Autodesk)出品的一款自动计算机辅助设计软件,可以用于绘制二维制图和基本三维设计。使用它时,无需懂得编程,即可自动制图,因此它在全球被广泛应用于土木建筑、装饰装潢、工业制图、工程制图、电子工业、服装加工等诸多领域。

AutoCAD 是由大量 C++ 代码编写的软件,经历了非常多的技术变革,从桌面到移动端再到 web。之前,InfoQ 上有一个演讲,题目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》,即通过 WebAssembly,让很多年代久远的 C++ 代码在 Web 上可以运行,并且保证了执行效率。

hrome 的核心 JavaScript 引擎 V8 目前已包含了 Liftoff 这一新款 WebAssembly baseline 编译器。Liftoff 简单快速的代码生成器极大地提升了 WebAssembly 应用的启动速度。2019年,很多的公司都开始投入人力进行WebAssembly的学习个改造,相信2020年WebAssembly会经历爆发式期。

5G

2019年一个绕不开的话题就是5G。⾸先,5G 带宽的⼤幅提升带来传统 Web ⻚⾯复杂度的进⼀步提升,如同 2G 到 4G 变⾰过程中⻚⾯从 WAP 的纯⽂本超链接时代变⾰到 4G 全图⽚视频时代。5G 对于⻚⾯的变⾰必将是巨⼤的,但肯定不会⼀蹴⽽就。因为相应的配套设施也需要逐步完善,如硬件性能和浏览器的处理速度。⽽服务端渲染(SSR)肯定是其中⼀个捷径,轻前端重后台,5G 是桥梁,把渲染放后台,不像同构那么简单,需要关注和优化渲染性能。WebAssembly 或许会在这个机遇下得到快速发展,因为它可以⽆缝对接后台多种语⾔,⽽后台渲染的优化也会带来前端⻚⾯研发模式和技术架构的变⾰。

其次,5G 带来的万物互联,⼜将带来有别于智能⼿机和普通 PC 的多样化的应⽤场景,VR、可穿戴设备、⻋载系统、智能投影、智能交互等⼜会把 Web 带⼊各种各样的垂直领域,这也意味着前端将有更多⼴阔的空间。相信随着5G的大规模商业,会诞生一批新的互联网巨头。

前端酷炫效果参考_2020年大前端发展趋势相关推荐

  1. 前端酷炫效果参考_纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. 前端酷炫效果之那些漂亮的登录界面

    源代码:前端登录页面 PS:如果点击链接是 404 页面,可能是还未登录 gitee.登录之后,可以直接搜索,木兰君,找到仓库中的前端页面效果合集 -> 前端登录页面. 以上作品均来自B站(在此 ...

  3. css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果

    前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转. 大家先看效果 这酷炫的效果,你怎么看? 这次效果,咱们需要用JS实现.主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rota ...

  4. 想实现前端酷炫的打字机效果吗

    实现酷炫的打字机效果插件typed.js 前言: 最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西.看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思 ...

  5. 如何做出酷炫且实用的可视化大屏?Excel和PPT该淘汰了

    上次给各位看了一个新的可视化图表和大屏: FineReport作为报表界扛把子,必须安排到位! 今天教大家,如何巧妙利用图表,快速做出场景化数字大屏! 一.大屏主体类图表 大屏主体类图表通常作为整块大 ...

  6. excel如何做出弧形_如何做出酷炫且实用的可视化大屏?Excel和PPT该淘汰了

    上次给各位看了一个新的可视化图表和大屏: 作为报表界扛把子,必须安排到位! 今天教大家,如何巧妙利用图表,快速做出场景化数字大屏! 一.大屏主体类图表 大屏主体类图表通常作为整块大屏的视觉中心,一般放 ...

  7. c语言触屏滑动图片,微信小程序左右滑动切换图片酷炫效果(附效果)(示例代码)...

    开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 2 ...

  8. python 酷炫效果_六种酷炫Python运行进度条效果的实现代码

    六种酷炫Python运行进度条效果的实现代码,进度条,代码,六种,效果,酷炫 六种酷炫Python运行进度条效果的实现代码 易采站长站,站长之家为您整理了六种酷炫Python运行进度条效果的实现代码的 ...

  9. 前端酷炫的n个UI设计效果网站

    1.Neumorphism 地址:https://neumorphism.io/ 2.带有渐变的图标 地址:https://www.iconshock.com/svg-icons/ 3.Interac ...

最新文章

  1. org.apache.struts2.json.JSONException: org.hibernate.LazyInitializationException: failed to lazily i
  2. 第二阶段_第一小节_小知识
  3. 电脑显示计算机无法显示,如果计算机无法打开怎么办?
  4. php asp.net core,asp.net core实例教程之配置
  5. 文件上传 java 完美,vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData())...
  6. sybase SET CHAINED OFF与SET CHAINED ON两种事务模式的区别
  7. FullCalendar 的学习笔记(一)
  8. access统计各职务人数_东莞各阶段学生人数统计|终于知道为什么在东莞总是学位紧缺了...
  9. linux 进程内核栈
  10. 网页转PDF 在线工具 输入网址获取PDF
  11. ppt制作弹跳的小球动画效果_你不能错过的PPT制作酷炫弹跳的小球教程
  12. 多组两两比较用什么检验方法_SPSS教程:多个组比较(Fisher精确检验)及组间两两比较...
  13. WebX配置文件、启动与响应流程
  14. Java随笔记 - 断包和粘包 解决方法
  15. 酒水知识(六大基酒之金酒_Gin)
  16. 概率论基础(sigma域、测度)
  17. OpenShift 4 - 在单机版 OpenShift Local 中运行 OpenShift Virtualization(视频)
  18. linux who命令详解,Linux who命令详解
  19. java 手电筒 电池_android 手电筒的实现
  20. 工作站启动不起来的解决方案

热门文章

  1. mysql slave_mysql master slave
  2. azure云数据库_Azure SQL数据库中的地理复制
  3. easyui的下拉框combobox在包含的iframe页面里点击不能收回解决办法
  4. 《梦断代码》读后感03——为什么我们不能像造桥一样造软件
  5. Java 基础系列之volatile变量(一)
  6. JaveScript用二分法与普通遍历(冒泡)
  7. SQL Server 锁
  8. JPA多表查询映射自定义实体类(包含两个表字段)
  9. 分布式id-数据库实现
  10. oracle、sqlserver创建表、删除表、创建索引的sql