前端技术分享--3.16-yzy

在 2018 年初，让我们再谈谈大前端的趋势

[toc]

•   One JavaScript：移动应用
•   One JavaScript：Serverless 与 全栈
•   Function！Function！Function！
•   架构：BFF
•   问题：更臃肿的 SPA
•   选型：Angular、React、Vue

在 2018 年初，让我们再谈谈大前端的趋势
这是微信公众号[前端之巅]的一篇文章，如果大家觉得今天太水了，下周我再做一次短篇分享。 这篇文章涉及到很多全栈和架构设计的内容，而且是这两年比较新的技术。其中每个部分拿出来单独讲都是很长的内容。而我在这方面是个门外汉，这次分享只是带大家了解一下。

移动应用

image

前有，使用 React 及 React Native 来开发 Android 及 iOS 应用。
后有，Dart 通过 Google 的 Flutter 框架来支持移动应用程序开发，该框架旨在为 Android 和 iOS 创建原生 UI。
使用同一种语言作为业务开发语言，再基于一个 DSL 来封装基础平台的架构，已经成为了一种大的趋势。过去，在后端的这种语言是 Java；现在，这种语言则是 JavaScript。

• React不是一个MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层
• 其次React是单向的从数据到视图的渲染，非双向数据绑定,vue和angular则是双向数据绑定。
• 不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。vue和angular也是这种思路，只是实现方式不同。
• 不便于直接操作DOM，大多数时间只是对 virtual DOM 进行编程。现代(这个‘现代’指的是最近两年，ES6发布之后)的前端框架都是如此。

参考：
React 简单介绍(这里面包含很多参考资料)

---

dart和flutter
flutter这个厉害了，最近谷歌推出的跨平台开发框架， Dart是Flutter的开发语言,google的一种新语言，和java有点像，会java的比较容易上手。

1. Fuchsia 是谷歌的新操作系统，极有可能被突然甩掉不要
2. Flutter 是 Fuchsia 的开发框架，支持导出 Android iOS 和 Fuchsia 三个平台的安装包
3. Dart 是为以上两者服务的官方编程语言

Flutter 从设计、体验、跨平台上都有亮点。值得关注和寄予期望。但目前成熟度有限，不适合商用。

Fuchsia 的官方应用框架就是 Flutter + Dart 。

参考：
如何评价 Google 的 Fuchsia、Android、iOS 跨平台应用框架 Flutter？
备注：
DSL： 领域专用语言

Serverless 与 全栈

image

对于没有后台经验的前端开发人员来说，使用 Node.js 开发后端应用是一种相当大的挑战。大多数非科班的前端程序员，不知道从数据库到 RESTful API 的一系列操作，并且还需要了解到部署等一系列的系统底层知识。因此，使用 Serverless 这种不关心基础设施的技术，可以进一步地降低开发成本。
使用 AWS 来运行大量的 Serverless 计算的成本很高，但是自己搭建一个 Serverless 服务器，来运行自己的 Serverless 应用，则变成了一种更廉价的方式。

•   在 Serverless 应用中，开发者只需要专注于业务，剩下的运维等工作都不需要操心
•   Serverless 是真正的按需使用，请求到来时才开始运行
•   Serverless 是按运行时间和内存来算钱的
•   Serverless 应用严重依赖于特定的云平台、第三方服务

这个涉及到服务器端和运维，我不大了解，就不多说。我个人理解就是能够外包给云计算提供商的都外包出去。在电气时代刚开端的时候，所有工厂都是自己建发电厂，很快有人发现集中发电，再把电力卖给工厂将极大提高效率。IT服务也是一样。现在全国有近一半的网站运行在阿里云上，而几年前云计算还只是个概念。
阿里云2017年在中国公共云市场占有率为47．6％

这里给大家推荐一本书《大转换：重连世界，从爱迪生到Google》

早在2003年，尼古拉斯•卡尔发表在《哈佛商业评论》上的一篇文章——《IT不再重要》就引起了轩然大波，卡尔极具前瞻性地预言了云计算将取代传统IT，公用运算等服务将如同电力一般不可或缺，并成为公共服务的一部分。一场关于IT价值的论战就此展开。诸多媒体界精英、IT界的巨头卷入这场论战。 这本跨越历史、经济和技术领域的著作是卡尔在这场思辨中的思想精髓。他从电力运营方式对社会变革的深刻影响娓娓道来，对比分析和阐述了互联网对世界重构的重大影响。作者预言，互联网将像自来水或电力一样由专门公司提供服务，付费使用。

image.png
image

参考：
有哪些通俗易懂的例子可以解释 IaaS、PaaS、SaaS 的区别？
花了 1000G，我终于弄清楚了 Serverless 是什么（上）：什么是 Serverless 架构？

Function！Function！Function！

image

2017 年 9 月，在接手一个 React 项目的时候，发现在这个 React 项目里，Lodash 已经变成了 Ramda。初次上手时，和我之前维护一个 Scala 的微服务有着一致的体验，这货真难懂。但是毫无疑问地是，它大大减少了代码量。只是不同的人写出的函数式代码是不一样的，所谓的千人千码。
函数式编程可以减少一定量地冗余代码，它也带来了一定的新问题：可维护性及上手复杂度。
但是越少的代码，可能意味着更少的 bug，不是吗？

函数式编程:

• 函数柯里化
• 组合函数
• 与面向对象编程（Object-oriented programming）和过程式编程（Procedural programming）并列的编程范式。
• 最主要的特征是，函数是第一等公民。
• 强调将计算过程分解成可复用的函数，典型例子就是map方法和reduce方法组合而成 MapReduce 算法。
• 只有纯的、没有副作用的函数，才是合格的函数。

深奥，不懂。函数式编程是一个很大的话题了。我看了几篇文章，还是没什么概念，毕竟面向对象编程都还没理解透彻。
函数式编程这几年逐渐火热起来，有观点认为函数式编程是未来，当然目前OOP还是主流。
参考：
JavaScript函数式编程（一）
函数式编程入门教程
为什么会有函数式编程？
JS中的柯里化(currying)

架构：BFF

image

我的上一个客户端项目里，采用了 BFF 层，其对于大前端来说，是一种很友好的开发体验。对于存在 Android、iOS 及 Web 应用的系统来说，BFF 层不仅仅可以减少应用的开发时间，还可以提高业务的灵活性——只需要在修改 BFF 层的情况下，就可以使三端达到一致。
更详细的内容可以参见：《前后端分离演进：不能微服务，那就使用 BFF 隔离》。

---

现有的绝大多数软件系统，都将在未来某一刻成为遗留系统，只是时间跨度不一样。好的系统，拥有好的设计，并在其生命周期里不断地演进。但是没有一个设计能抵抗住时间，以及业务带来的变更。
BFF，即 Backends For Frontends ，也就是服务器设计 API 时会考虑前端的使用，BFF 作为中间件。在这个中间件上我们将做一些业务逻辑处理。

我的理解是BFF作为中间层获得从服务端获得数据后，根据业务逻辑向不同的端提供不同的API接口。可以降低前后端耦合。BFF带来便利好处的同时也会引起一些问题，如代码重复，加大开发工作量等。

参考：
了解BFF架构

问题：更臃肿的 SPA

Center.jpg

在过去的几年，大量地前端项目已经使用 Angular、Vue、React、Ember 等框架重写。使用哪种框架，对于一个前端项目来说，差别并不大。
从零启动一个前端项目是一件容易的事，但是问题的关键在于，我们不可能不断地重写前端项目。于是，对于前端项目来说问题变成了，如何去维护一个前端项目。
如果一个项目中的前端开发人员水平参差不齐，但是没有辅以有效的代码改善方式，如 CheckStyle、Code Review、测试 等等。那么，未来它必是一个痛苦的遗留系统。

这一点对应到睿途的问题就是过去旧的项目没有用前后端分离，并且新的项目在旧的项目基础上修改，导致代码越来越臃肿，难以维护。
未来是否需要重构。以及怎样建立可长期维护的前端工程体系。

选型：Angular、React、Vue

image

如果只做的是复杂的 Web 应用，基本上就是 Angular 了。因为要用 Angular，就需要会 TypeScript -> 强类型、RxJS、注解、依赖注入等等——需要学习的时间长，代码质量上有一定的保证，应该不怕遇到小白，笑~~。
不选择 React 的主要原因是，React 只是一层 View，整个系统在配置上太麻烦了，Angular 上手即用。
如果同时做 Web 和 APP 应用的话，那么在 Web 方面就是 React，毕竟 APP 可以用 React Native。
我没有在复杂的 Web 应用里，使用过 Vue，不好做太多评价。以我在一些公司项目上和个人项目上的使用经验来说，Vue 的最大优势是简单，同时可以帮助我们渐进式的迁移前端应用。
对了，我更喜欢 TypeScript，因为它看上就像是 EcmaScript 的终极版。

Angular 、React 和vue目前三足鼎立是因为他们各有特色，都有不可替代性。如果要用angular，它会提供一整套工具，同时你也不可能用别的东西。
React生态圈很繁荣，系统配置麻烦，但是React Native 可以跨三端，这点很有吸引力，但是也有观点认为RN和weex这种技术不是未来，因为灵活性不够，flutter才是未来。
vue则是一个渐进式、轻量级的框架，你可以用它写个小demo，可以配合其他技术和框架，也可以用webpack、vue-cli、vue-router 、aixos、vuex 这些vue全家桶来构建复杂应用。
就我个人而言，目前计划重点学习vue，如果能够把vue深入理解了，那么其他MVVM框架也都大同小异，学习起来也会很快。

Typescript
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

image

TypeScript 优秀开源项目：

• Typescript
  • TypeScript语言本身就是用TypeScript编写的，即self-hosting，使用上一稳定版本的编译器来编译本次版本。
• IDE - VSCode
  • 基于TypeScript + Nodejs + Electron开发的IDE. Github上star: 2万+
  • 相对于Visual Studio的笨重，VSCode非常轻，占用内存少，打开项目速度快，而且跨平台，非常适合用来做前端或Nodejs开发。
  • 其他基于TypeScript的IDE还有： 在线IDE monaco-edit，游戏开发IDE superpowers等，有兴趣的同学可以去awesome typescript projects了解下。
• Framework - Angular2
  • 基于TypeScript + RxJS + ZoneJS的Framework. Github上star: 2万+
  • 大名鼎鼎的前端三剑客之一，背后的老爹Google确保了Angular的质量，Angular从Angular2开始采用TypeScript来开发，强类型对框架的稳定性提供不少支持。
  • 其他框架还有很多诸如 ionic，NativeScript，AtomicGameEngine的优秀框架都是用TypeScript开发的，国内的白鹭引擎(egret)同样基于TypeScript。
• UI - ant-design
  • 基于TypeScript + React的UI界面库. Github上star: 1万+
  • ant-design是由国内阿里旗下的蚂蚁金服的团队用TypeScript开发的一款企业级React UI库，已经应用到金服和其他阿里旗下产品当中。
  • ant-design的UI看起来非常美观，而且不显累赘，文档也非常完整，重点是文档是中文版的，相信非常适合国内开发使用
• library - RxJS
  • 这个库算是响应式编程库家庭中的一员，其他还有RxJava，Rx.NET，RxGO等。
  • RxJS是基于流的概念，提供了一系列神奇的函数工具集，使用它们可以合并、创建、过滤这些流。
  • （其实我完全不懂RxJS）

参考：
浅谈TypeScript语法
awesome typescript projects