Life is short , You never need Flutter - 知乎

Life is short , You never need Flutter
—— 鲁迅

对于现在打算学、正在学、或者已经在使用 Flutter 的朋友来说，这可能是49年入国军

Flutter 完全抛弃了 Web 生态，抛弃了 JS 生态。

Flutter 就像一个任性的孩子，没有把问题解决好，却把大前端搞的更加混乱。

什么是大前端？
包括 手机App、网页、电脑上的应用程序等等。
几乎所有的界面交互都可以称为大前端。

甚至 端游绝地求生[PUBG] 的大厅界面，都是用 Web 技术来开发的。

各个平台都有 WebView， 哪怕连 Flutter 本身，都是有提供 WebView 组件。
Flutter 之所以没用 TypeScript，官方给出的理由是，它不能 AOT，而 Dart 可以。
实际上更正确的做法 ，应该是拥抱 LLVM 生态，写一个 ts-llvm 为其增加 AOT 功能
这样起码与 Web 生态，不算太脱节
    • *

Flutter 所谓的优势

  1. 性能（这也许是个伪命题）
在图形层写了一套通用的控件，对比 ReactNative、Weex 之类方案，的确有更好的性能。
（后面两个是对原生平台的控件，进行映射，而不是直接调用 GPU 进行渲染）

2. 跨平台（这是个伪命题）

支持 Android、IOS、Web、Desktop ...

注意：它不支持 小程序！

然而这些优势只有 Flutter 才有吗？这里以 Web 生态作为对比！

    • *

Web 生态对比

简单的说：目前除了 手机端的性能 稍微不如 Flutter，其它各个方面都是碾压 Flutter 的存在（包括其他一些平台的性能）。

不仅支持的平台数量更多，而且更稳定，整个生态库也更加好，这是 Flutter 完全不能比的。

注意：Flutter 并不是在所有平台上，性能都好。 
比如：通过 Flutter 程序，导出的 web 页面，性能是非常差的，目前完全不能用于实际项目。

虽然手机端性能比 Flutter 略差，但是采用 ReactNative 开发，所遇到坑会比 Flutter 少很多。 

而且手机端性能上的差距，其实并不算大，大家可以安装它们的官方 Demo 亲自体验。

  1. 跨平台
- Android、IOS 【WebApp、ReactNative、Weex】
Web本身（直接嵌入一个“浏览器”）、ReactNative、Weex 等都可以直接来开发手机软件。
虽然 ReactNative、Weex 底层是采用映射原生组件的方式来开发。
但是起码它们的上层是拥抱 Web生态 的。

- Desktop 【electron】
很多我们熟识的软件，都是采用了 electron 开发： vscode、迅雷。

- 小程序
这是一个完全不能忽视的一个平台。
不单单是微信小程序、还有支付宝小程序、抖音、百度 等等。
它们都可以用 Web 技术来开发。

有一堆质量很高的工具，可以直接从 React、Vue 写的代码，生成这些平台的程序。

2. 生态繁荣

各种库应有尽有：加密、压缩、图形处理、网络、深度学习...
你能想到的库，基本都是有的。 

至于 Dart， emm...
    • *

那么什么才是大前端技术发展的正确方向？

试想一下：如果我们把 web 在手机端的渲染性能，改的比 Flutter 还要好，那么不就完全没 Flutter 什么事了？！

业内就有这么一个组织 Mozilla ，完全就是一个勤勤恳恳的老父亲形象：儿子没搞好的事情，只能由爸爸出面来摆平。

关于 Mozilla

很多人对于 Mozilla 的了解，可能只限于：FireFox（火狐浏览器）是他家开发的。

其实关于 Mozilla 有很多有趣的事情。

  1. MDN Web Docs

https://developer.mozilla.org/zh-CN/docs/learn 
web前端开发者熟悉的 MDN web docs 就是 Mozilla 负责维护的。

2. 你可能不相信，几乎所有的浏览器，都把自己伪装成 Mozilla！

chrome、safari、IE、Opera...的 User-Agent 都是 Mozilla/x.0 开头
它们都把自己伪装成 Mozilla 的样子...

有兴趣了解历史的话，可以查阅这个问题： 
为什么所有主要浏览器的 User-Agent 都是 Mozilla/x.0 开头？ x.t.u.t.u
https://www.zhihu.com/question/19553117

3. Rust 也是诞生于 Mozilla

除此之外，还有很多，但是篇幅有限，我就不展开说了。

    • *

Mozilla 目前在做的事情

首先需要了解：一个网页显示到屏幕上，笼统的讲，大致分为两步。

  1. 通过 CSS 排列好布局
  2. 把排好的内容画出来

Mozilla 早在 2017 年，就开始着手优化这两块的内容。 分别对应两个项目：

1. Quantum CSS (aka Stylo)

主要思路是利用多核，并行计算。

详细介绍可以看这篇文章：https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

2.WebRender

这个其实就和 Flutter 干的事情有点像，直接从底层重写渲染机制。

WebRender 学习了不少游戏领域的经验，将网页的渲染机制，改成与游戏渲染的方式一致。

目前已经可以在 Firefox 的最新版本中开启这一特性！（ Firefox 67 [2019-5月] 正式提供）

这是它的性能概览：https://github.com/servo/webrender/wiki

效果显著！！！

手机端也是效果显著！

3. Pathfinder

尽管 WebRender 在性能上已经有了巨大的提升，但 Mozilla 并没有停下脚步。

传统游戏的字体渲染一般是通过 FreeType 进行光栅化（放在 CPU 中执行），为了进一步利用 GPU 加速，Mozilla 又创建了一个项目：Pathfinder: A fast, practical GPU rasterizer for fonts and vector graphics x.t.u.t.u。虽然目前还没有完全稳定，但是未来可期！

这将给浏览器内核全面采用GPU加速架构铺平道路，在 AR 和 VR 场景下，浏览器页面可以与3D场景无缝结合。

放几张 Demo 截图感受下效果，原文地址：Pathfinder: a first look at the best fonts and vector graphics on VR/AR

VR 场景

放大之后的效果

如果这些事情都做完了，那么对于 ReactNative、Weex 来说，可能也没它们什么事了。
到时候直接用 Web 来渲染组件，性能堪比 Native 。

不过好在 ReactNative、Weex 它们现在的技术栈是拥抱 Web 生态的，哪怕之后改底层实现，对上层开发者的影响也并不大。

    • *

那么什么才是值得学的？

如果你真的想学一门新的大前端知识。在你掌握基础 Web 开发知识（HTML、CSS、JS）之后， WebAssembly 可能是个更好的选择。

它并不是像 “Flutter 这样属于一家公司（或一个团队）”，WebAssembly 是所有大厂都支持的标准。

WebAssembly 的开发团队分别来自Mozilla、Google、Microsoft、Apple，代表着四大网络浏览器Firefox、Chrome、Microsoft Edge、Safari。

关于 WebAssembly

说到 WebAssembly， 这里又不得不再一次提起 Mozilla 这位踏实的老父亲。。。

WebAssembly 的前身 asm.js ：也是诞生于 Mozilla。 ：）

感觉 Mozilla 应该给我广告费...
知识补充：
WebAssembly 可以理解为：跑在浏览器里的汇编代码。
（其实还可以跑在其它地方，不单单是浏览器里，这个后面会说）

JS作为一门动态脚本语言，哪怕有 V8 引擎加持，其执行效率终究是有瓶颈的。

于是 Mozilla 开始尝试新的技术方案，创造了 asm.js。
结果效果显著，极大的提高了代码的运行效率！

各大厂商一看，居然这么厉害，就想着干脆搞一个统一的标准，这样大家都可以用。
于是大佬们就聚在了一起，WebAssembly 诞生了。
  1. Web 技术的未来，就是大前端的未来
  2. JS 是现在、也是未来（JS 除了指 JavaScript 本身，也包含了用于编译为 JavaScrpit 的 TypeScript）
  3. WebAssembly 是未来的一部分：弥补 JS 的缺失
WebAssembly 除了能跑在浏览器里，还能脱离浏览器，放在其它平台上运行！
详见 https://wasi.dev/。

限于精力有限、篇幅有限。很多技术点，并没有深入展开。这里推荐一些 Lin Clark 的科普文。

1. WebRender 相关
https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/
https://hacks.mozilla.org/2017/11/entering-the-quantum-era-how-firefox-got-fast-again-and-where-its-going-to-get-faster/

2. WebAssembly 相关
https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/
https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/

希望大家齐心协力，共同把这个 大前端 的圆仔汤给搓好。 ：）

补充

关于小程序

评论区对文章中，拿小程序作为对比，很有争议...
说真的，我完全没有get到你们的点...

现在只要是比较常见的产品，比如微博，饿了么，美团，京东，知乎等等等...
他们都是有小程序的。（这里的小程序，主要指微信小程序，但是也包括其它平台的小程序，比如支付宝小程序。饿了么，是同时有微信小程序，以及支付宝小程序的。)
这是公司产品策略上的需求，不是程序员想不想开发的问题。

但是淘宝系的软件，是没有微信小程序的，他们只有支付宝小程序。他们之所以没有微信小程序，肯定不是他们不愿意开发，而是微信不同意他们上线（微信连淘宝的分享链接，都是屏蔽的）

最后我们来看一看，主推flutter技术栈的闲鱼，它的支付宝小程序是什么样子的。

你们可以看下底部的两条导航栏，是不是稍微有点搞笑...闲鱼团队既然有能力推行flutter开发，他们的技术能力，肯定是完全没问题的。那现在这个情况，只可能是因为没有那么多精力，去维护一个技术栈完全不同的平台产品吧...（如果flutter本身是采用ts开发，那维护起来，也许就方便很多。或者闲鱼干脆就用ReactNative开发，那维护支付宝小程序的成本就几乎为0了）

支持Web技术栈的多端转译框架有很多！
比如
uni-app 基于 Vue 开发

司徒正美

的娜娜奇(Nanachi) 基于 React 开发
等等等...
你总能找到一款适合你们团队的，这些框架都是由业内优秀的同行在维护。

Original url: Access
Created at: 2019-09-04 19:39:40
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论