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

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

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

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业成都天府联通服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

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

由于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的原生开发技术，然后了解一下常见的跨平台技术，只有这样才能更好的融入到大前端的这个大家庭中。

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系统 ，笔者按照该步骤已安装成功

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程度的题目。这对很多前端来说是一个心智和素质的提升与转变，大家在接触新技术的同时，也慢慢发现，前端整个职业环境的变化，越来越多的公司对人的整体综合素质要求变高了。

为什么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#语言基础的程序员会比较容易学习。