露出獠牙：Google发布Flutter For Web，剑指前端

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

 

什么是Flutter?

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

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

Flutter For Web

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

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

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

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

但是，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 框架。

Flutter与前端开发

前端工程师的挑战

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

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

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

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

怎么办？

学起来。

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

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

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

原文：前端们又要失业了？Google重磅发布Flutter For Web，剑指前端——Web前端号