大前端和flutter,什么是大前端

大前端和前端在就业方向上有什么差别？

简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。

为什么出现大前端的概念?

由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样，代码无法复用，非常浪费人力、物力。那么有没有什么技术能够前端的学习都是需要不断的学习，学一天停一停相当于白学，学习效果很差，如果你想有人一起学习可以来这个扣裙，首先是132 中间是667最后是127 都是零基础的同学，大家相互鼓励 共同努力 只是学着玩就不建议来了!!!解决这一痛点呢?大前端应运而生，其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

现在的前端都需要有多重开发技能，随着微信公众号、小程序的火热发展，这两个领域成为了前端开发的必备技能，更多的还有配合着打包技术的混合应用开发技术、一些桌面APP、甚至有些人认为基于node.js的后台开发都属于大前端的范围。

就如之前说到的，大前端没有什么准确的说明，所以这些提到的技术不是每一个技能都是必备的，但毫无疑问，拥有这些技术可让开发拥有更多的机遇。

技术在互联公司就是需要不断的成长，刚开始的时候其实都一样。一个前端程序员用的技能基本都是HTML+CSS+JavaScript+jQuuery，但是随着工作的开展我们不得不接受新的项目，就比如说前端经常会协同后端一起开发，这时候需要用到一些Vue.js技术。

刚开始的时候可以写出简单的erp系统，慢慢的Vue.js基础功能都可以实现。接触到自己不擅长的工作是经常会发生的，经手了几个项目之后的我们基本都能学会一项技能，不能说精通，正常运用还是可以的。

大前端的发展趋势

大前端不仅会成为移动开发与Web前端的发展趋势，也将会是未来的显示设备终端的开发技术趋势。大前端将做更多的终端开发、工程化等工作，而不仅仅只是开发Web页面。大前端工程师将能搞定所有端上的开发。与充满争议的全栈工程师相比，它更具可操作性。

但同时对开发者而言，要会更多的技术栈，比如原生开发者要学习html、css、js等前端知识，前端开发人员也要学习Android或iOS的原生开发技术，然后了解一下常见的跨平台技术，只有这样才能更好的融入到大前端的这个大家庭中。

相关问答

Q1: Vue前端转Flutter一（环境配置）

（*注：以下仅个人配置过程参考，系统win7-64）

所需软件

vsCode，Android Studio， MuMu模拟器 （直连手机调试的话就不需要了）

配置过程

1、Flutter安装

安装时忘记截图，具体可参考链接 flutter中文网 相关教程+ 百度 ，现在网上教程很多，多踩点坑总会成功的。

2、MuMu模拟器调试时需进行相关配置

（*注：直连手机调试可忽略以下；执行以下操作需要在执行flutter doctor成功后，flutter run执行前）

（1）mumu模拟器端口监听，需要执行

（2）mumu模拟器调试flutter run可能会报错，可以改成，具体原因可直接百度“--enable-software-rendering”

3、如需调试ios端可尝试虚拟机+macOS+xCode

vmware+macOs可参考链接 VMware15安装MacOS系统 ，笔者按照该步骤已安装成功

Q2: 2020年前端最火的技术是什么？

我认为的2020年前端开发者最应该掌握的一些比较火爆的技术与知识点。

1，前端框架和语言层面

9月份 Vue3.0 发布，声称对 TypeScript 有着更好的开发体验，通过从不同框架级别 TS 支持上，我们可以看出社区的整个风向从2019年的大家都去学习应用 TS，变成了大家如何把 TS 用的更好这个方向上来了。

所以我认为今年 TypeScript 的火热程度还是应该排名很靠前的，我今年也使用 TypeScript 重构了 Daruk 的服务框架推出了2.0版本，让 TS 开发者拥有更好的 TS 开发体验。

接下来就是两大重磅框架的更新历程对比，Vue3 前面说了一句。而 React 也在十月也发布了 React 17 的 release 版本。这两大主流框架的频繁更新，也说明了社区和作者都在一同演化。

在 Vue 3中除了更好的支持 TS 外，还更新了Composition API。而 React 17 主要是集中精力在升级体验上，虽然没有新的 Feature 但是提升了和解决了很多之前版本潜在的问题。

要说哪个最火还是要看个人实际的使用场景和喜好，但是2020年来看还没有别的框架可以与之一战。

       

2，大前端相关技术栈

今年基于Chromium的微软edge浏览器也已经推出。google 在 web 端的发展产生了对开发者深刻的影响。Chrome 80+ 也已经发布多个版本，提供了一系列的新特性，比如Core Web Vitals标准，Desktop PWA等都值得我们去关注。

       

我们说完了浏览器相关的那点技术之后，再聊聊大前端相关的一些技术实践，比如 Flutter。

很多前端在今年已经从 web 开发转型为 Flutter 开发，学习和使用 Dart 技术来构建 UI，这是很多大厂的前端工程师正在经历的事情（包括我的部门也在尝试这个事情），这个趋势应该在未来几年还会持续。

客户端 electron 在今年也有着长足的进展，一年内多次更新版本一路到了10.1.5。随着疫情影响，国内在线教育的又一波兴起。很多桌面软件，网课软件都在采用这个技术来进行开发，市场上的岗位也开始变多，electron 技术可以说在今年也有火的趋势。

     

然后我们再看看BFF 层，nestjs依然坚挺，越来越多的人开始跳过学习 express 和 koa 开始学习更丰富的 web 框架了，比如 egg 或者我的 daruk，开发者已经在慢慢形成共识，在 web framework 的路上开始越走越远，裸写 nodejs web 服务的时代已经开始慢慢褪去。

       

不得不提的还有 serverless 在前端的普及，在2020年到达了一个新的高潮。阿里云，腾讯云，头条云等等国内的互联网厂商也都开始大玩 serverless 概念。从对内服务开始转向对外服务，普及的势头很猛，也有落地的趋势和场景。今年的 D2同样也有 serverless 的专场，可见受重视程度非比寻常。

3，工程化提效和个人素质提升

再离我们近一些的推动生产力的技术，比如据我所知在用 CI/CD 和 pipeline 管理上线流程的公司越来越多，这种去年还可以出去吹一吹的东西，今年也逐步变成了业界标配基础能力，如果不会的同学可要抓紧学习了。

       

2019年前大家都疯狂吐槽面试刷 medium 题目没用，而2020年后大家开始默认面试某些公司都至少要刷到medium程度的题目。这对很多前端来说是一个心智和素质的提升与转变，大家在接触新技术的同时，也慢慢发现，前端整个职业环境的变化，越来越多的公司对人的整体综合素质要求变高了。

Q3: 为什么Flutter开发APP性能最接近原生，前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架，支持Android、iOS和WEB终端。1.0版在2018年12月5日发布，目前的最新版本是1.5，它采用的开发语言是Dart，Dart也是谷歌开发的计算机编程语言，语法类似C，是编译型语言：

hello world例子，打印字符串“Hello World!”：

1、没有桥接层

React Native、Weex等技术都是跨终端的框架，然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的：

React Native、Weex等技术多了一个桥接层，所以界面渲染会慢一些，由于UI渲染非常频繁，想要不卡顿，基本上比较难，性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在：

Dart可以被编译成不同平台的本地代码，让Flutter不通过桥接层直接跟平台通信，自然性能会快一些。

2、编译执行

JavaScript是解释执行的，Dart是编译执行的，性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的，Flutter Engine使用C/C++编写，开发人员通过Flutter框架直接和API在内部进行交互，所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外，Flutter还提供了自己的小部件，Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时，窗口小部件会重建其描述，框架将根据前面的描述进行区分，以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘，也就是一些核心类库直接放到虚拟机里面，调用起来更快。

从它的系统结构可以看出，类似安卓的ART(Android Run Time)虚拟机，同样采用AOT(Ahead of TIme)技术，会在APP安装时就编译成机器语言，不再解释执行，从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系统自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，从而实现了高效渲染。而React Native通过桥接层访问原生UI，操作频繁就容易出性能问题。

综合所述，Flutter 是性能最接近原生代码 的一种开发框架，未来也会是构建谷歌Fuchsia应用的主要方式，前途不可限量，唯一的问题就是需要学习一门新的语言：Dart，而有Java或者C#语言基础的程序员会比较容易学习。