1.Flutter Introduction

Flutter由于上手难度低，性能体验好，特别大厂的力推，加速了它发展的脚步。
此系列文章仅用于自己学习，参考链接在文章结尾

一. 简介

从 Hybrid 到 Weex、React Native 这些跨端技术的出现，确实很好地解决了跨端技术不一致、热加载、提升开发效率，以及降低开发成本的问题，但一个核心技术痛点“性能问题”却一直没有非常好的解决方案。而仅仅出道 2 年的 Flutter，通过自渲染模式，以及在体验和性能上的优异表现一时风头无两，其性能更是在跨端技术中处于领跑地位。

除了大量为适应快速发展节奏和节省人力成本的中小型企业，很多一线互联网企业也在重要项目中落地了 Flutter 技术，包括阿里（闲鱼）、蚂蚁金服（蚂蚁财富）、腾讯（多款在线教育App）、字节跳动（头条和西瓜视频），以及美团（美团 App）和快手（快手 App），等等。

二.什么是大前端

大前端概念对于编程开发者来说早已耳熟能详，从我的角度来理解这个概念的话，主要是通过同一套编程代码，经过框架编译转化能够适应于多端平台的前端交互界面。当然这里只介绍目前应用较广的三个方面，即 iOS、Andorid 和 Web H5，之后可以再延伸到小程序、TV、Watch 等其他智能设备。

大前端的核心是为了解决多端不一致和人力的问题。比如在一些交互复杂度不高的应用中，通过这种模式可以更好地节省人力成本，特别是在一些前期快速发展的创业公司，可以使用较少的人力来支撑一些核心业务功能。

三.跨段技术分析

image.png

Hybrid：在技术原理上的核心是，将原生的一些能力通过 JSBridge 封装给 Web 来调用，扩充了 Web 应用能力。但是这种方法有两个不足，一是依赖客户端，二是在性能和体验上都非常依赖于 Web 端。因此，整体上的体验不可预知。目前这个技术还经常被应用到，例如，当前 App 内会提供白名单域名和可调用的 JSBridge 方法，由此来增强 H5 与客户端交互能力，从而提升 App 内 H5 的灵活性。

React Native/Weex：在原来的 Hybrid 的 JSBridge 基础上进行改进，将 JavaScript 的界面以及交互转化为 Native 的控件，从而在体验上和原生界面基本一致。但因为是 JIT 模式（ 运行时编译，就像在运行的时候将 JS 编译为原生界面的过程 ），因此需要频繁地在 JavaScript 与 Native 之间进行通信，从而会有一定的性能损耗影响，导致体验上与原生会有一些差异。

Flutter：取长补短，结合了之前的一些优点，解决了与 Native 之间通信的问题，同时也有了自渲染模式（框架自身实现了一套 UI 基础框架，与原来的渲染模式基本一致）。从而在体验和性能上相对之前的两种框架表现都较好。

经过上面的技术原理和优缺点对比，Flutter 在各方面都表现出了突出的优势，因此把 Flutter 作为入门大前端的核心框架。

学习地址：

Flutter中文网

Flutter实战

闲鱼技术社区

掘金Flutter社区

拉勾教育