Flutter自从诞生之日起就一直光环加身,发展的也是如火如荼。Web前端号今天就来盘一盘Flutter。大家都知道除了苹果和安卓系统,Flutter Web的出现直接染指前端,也显示Flutter对整个移动互联网的野心。下面让我们一步一步来认识Flutter以及Flutter Web,也让前端工程师知己知彼,打打预防针,别哪天人家跑过来抢饭碗,都不知道对方是谁,这就尴尬了。

frc 9ea2c5a266fc7e9c1c1f3c20e5483059 - Google重磅发布Flutter For Web,剑指前端
前端Flutter

前端Flutter

什么是Flutter?

在回答问题之前,首先确保大家都知道,目前市面上的手机操作系统主要谷歌的安卓和苹果的IOS,如果一个公司要开发一个手机APP,为了覆盖全部的用户,就必须招各自的开发团队分别敲代码开发一个功能一样的APP,再分别投放到各自的应用市场进行推广,当然苹果的只有一个市场。

很明显,这对大部分中小企业来说,这个成本就高了。可以说天下小老板苦双系统久矣。于是乎能快速写一次代码整出个东西,放并且到两个系统都可以运行成为本能追求。

frc e1655d6b390b9af2b2ebe155c052385b - Google重磅发布Flutter For Web,剑指前端
Flutter For Web

Flutter For Web

这不,谷歌来了,推出了Flutter。

Flutter是谷歌针对移动端推出的移动UI框架,通过它可以快速在安卓和IOS上构建高质量的原生用户界面,既然是UI框架,就说明Flutter的领地不在服务端,也是在客户端。其特点是:

能快速开发强大的UI,使用自己的高性能渲染引擎来绘制widget。Flutter能达到原生应用一样的性能完全免费、开源一言以蔽之,Flutter是一款移动应用程序SDK,包含丰富的框架、控件和一些工具,一次编码可以同时构建Android和iOS应用,并且可以达到和原生应用一样的性能。Flutter用Dart语言开发,即使之前没有移动开发经验,也能很快上手。

由于以上特点,现在越来越多的开发者和组织使用Flutter进行开发,Flutter正变得越来越流行。

frc 12d2902ca942977b3526a8f3b6a9e326 - Google重磅发布Flutter For Web,剑指前端
Flutter Platform

但是,Flutter的野心可不只是IOS和Android这些移动端,默默在一边的Web首先被瞄上了,而其后还有桌面应用,以及物联网时代的嵌入式开发。远的不说,先说和前端工程师最相关的Flutter For Web。

那什么是Flutter For Web?

在2019年5月7日举办的Google IO 2019 开发者大会正式上,Flutter 发布了 1.5 版,新加入对 Web 端的支持,即 Flutter for Web。

Fltter for web其实是一种代码兼容的实现,它使用的仍然是基于标准的Web技术(HTML、CSS和JavaScript三件套)。对于Web, Flutter For Web直接将 Dart 代码编译为 JavaScript,在底层则用 HTML、CSS、Canvas 等实现一个新的引擎,这使得 Flutter 项目可以输出为 Web 应用(注意底层Dom实现不了的部分用Canvas来代替)。而且Flutter本身的所有特点都可以被使用起来,并且是不需要安装任何浏览器插件。

就框架来说,Flutter For Web就是在Flutter的基础上,添加了对Web的支持。这里面的关键是在标准浏览器API之上实现Flutter的核心绘图层。Flutter For Web在Dart中完全实现了这个核心绘图层,并使用Dart编写的的JavaScript优化编译器将Flutter核心和框架与应用程序一起编译成一个可以部署到任何Web服务器上的单一的、小型化的源文件。Flutter For Web使用DOM、Canvas和CSS的组合,提供跨现代浏览器的可移植、高质量和高性能的用户体验。

Flutter For Web 框架

从框架来看,如果你已经用Flutter开发了IOS和安卓应用,甚至不用变动Flutter API就可以完全可以将UI代码从该应用中移植到Web,而这只需要重新实现一下引擎和嵌入层。

这就几乎实现了一边编写,到处运行,不论是封闭的IOS,还是开源的安卓,甚至是无处不在的Web,这也验证了Flutter 的发展目标:从移动端扩展到 Web 端、桌面端以及嵌入式设备,并希望它最终成为最好的“全平台” UI 框架。

frc 2f717386463f01777b96c586de947e6f - Google重磅发布Flutter For Web,剑指前端
Flutter与前端开发

Flutter与前端开发

前端工程师的挑战

上面提过了,Flutter是一种“客户端”技术,而客户端听起来不就是前端的阵地吗?

虽然目前Flutter For Web项目本身还处于技术预览状态,但随着更多限制的接触和问题的持续解决,Flutter的优势将会越来越明显。Flutter 已逐渐成为知名技术社区 Linkdein 和 StackOverflow 上的热门话题。

但对于前端的来说,Flutter对目前现有的前端技术不是通过颠覆或者淘汰,有点像降维打击,直接把前端的位置往“后端”给挤了挤。

首先Flutter可不是前端工程师熟悉的技术,并且在学习这门新武器的时候,前端毫无优势可言,Flutter Web的推出,真有些让前端工程师担心会丢了工作,因为失去竞争力而失业。

怎么办?

学起来

既然Flutter可以做这么多事情,就把他当作一门前端技术学起来呗,谁让你在入了互联网这个行当呢!

其实如果前端学的还可以的话(主要是指JS那块一定要强),学习Dart语言还是有一定有优势的,而且因为仍然在“客户端”这个阵地,其实还可以把前端工作中积累的一些经验继续发挥出来,这也是前端的优势所在。

总之,面对挑战,唯有树立信心,沉下心来学习,并最终把它拿下,才是王道。

参考:### Web前端号:前端们又要失业了?Google重磅发布Flutter For Web,剑指前端

Google重磅发布Flutter For Web,剑指前端