前端框架选型

前端框架选型是件困难的事情，困难的原因是各个方面的权衡，包括 项目业务的适应性，前端开发人员的自身技术偏向，各个框架主张的思想，入门和后续的难易程度,性能情况,背后支持及生态系统是否丰富…..综合的考虑，但又没有一定的正确答案。

框架需求

• 整合多项功能项目的能力，支撑业务的扩展
• 尽量兼容桌面端和移动端
• 具有技术先进性可持续发展

三大框架

目前主流的前端框架是 Angular, React,Vue

Angular

Angular由Google进行维护，并用于Google 的Adwords 和Fiber项目。既然AdWords是Goolge重要的吸金利器，自然Angular不太可能突然夭折。

Angular自带很多的功能，更丰富的功能对于一个框架来说，是优点也有可能是缺点。

功能特性

Angular除了提供一些需要最新浏览器支持的功能外，同时提供以下标准功能：

• 依赖注入
• 模板
• 路由（@angular/router）
• AJAX（@angular/http）
• 表单（@angular/forms）
• 组件化CSS封装
• XSS保护
• 单元测试工具

功能丰富的好处就是你不需要额外费精力去挑选第三方的类库，然而，这也同样让你没得选择。

模式

TypeScript

TypeScript是一种基于JavaScript开发并由Microsoft开发的新语言。
其实TypeScript就是前端开发领域的“Java”，其特点（Type，Generics）天生契合以团队规模开发为目标的Angular。
你可以使用它而不是Babel来编写最先进的JavaScript。它还可以通过使用注释和类型推断的组合来静态分析你的代码

RxJS

RxJS是一个响应式编程库，可以灵活地处理异步操作和事件。它是将Observer和Iterator模式与功能编程相结合的组合。RxJS允许您将任何东西视为连续的流，并对其进行各种操作，例如映射，过滤，拆分或合并。

生态系统

Angular CLI

CLI工具，可以帮助您引导项目，而无需自行配置构建。它允许您仅使用几个命令来生成和运行项目。负责构建应用程序的所有脚本，启动开发服务器和运行测试都会在node_modules中隐藏。您也可以在开发过程中使用它来生成新的代码。这使得新项目的设置变得轻而易举。

Ionic

Ionic 开发混合移动应用程序。Angular集成的Cordova容器，以及一个漂亮的材料组件库。可以轻松地设置和构建移动应用程序。

Material design components

如果您热衷于设计Material，Angular有一个Material组件库

更多

更多的有关Angular相关类库和工具:Awesome Angular list

学习曲线

Angular介绍了最多的新概念。首先，您需要使用TypeScript。对于具有静态类型语言（如Java或.NET）经验的开发人员，这可能比JavaScript更容易理解，但对于纯JavaScript开发人员，这可能需要一些额外的学习。

框架本身丰富的技术主题可以从诸如模块，依赖注入、装饰器、组件、服务、管道、模板和指令等基础开始，到更高级的主题，如更改检测，区域，AoT编译和RxJS。这些都在文档中。RxJS是一个很重的话题，在官方网站上有详细描述。虽然在基本功能层面上使用起来相对容易，但在转到高级应用时会变得更加复杂。

React

React由Facebook开发和维护，用于自己的产品，包括Instagram和WhatsApp。它也是GitHub 最受欢迎的项目之一。

功能特性

React本身提供的功能就相对 简约：

• 无依赖注入
• 使用JSX代替传统的HTML Templates
• XSS保护
• 单元测试工具

自由度去挑选第三方的类库，比如：

• 路由（React-router）
• AJAX（Fetch or axios）
• 各种CSS封装（详见
• 更强大的单元测试（Enzyme）

模式

JSX

React决定使用一种类似XML的语言在组件中把标记和代码结合起来，直接在JavaScript代码中编写HTML标记。

优点：静态分析。
如果在JSX标记中发生错误，编译器会立即报错而不是留待运行时出现莫名其妙的问题。
这有助于开发人员快速排查错误以及避免其它愚蠢的错误，比如拼写错误。

Flow

Flow是由Facebook开发的JavaScript类型检查工具。
它可以解析代码并检查常见的类型错误，如隐式转换或取消引用。

你的代码注释类型检查工作。在流程中，类型注释是可选的，可用于向分析器提供其他提示。
如果你想使用静态代码分析，同时避免重写现有的代码，Flow是一个很好的选择。

Redux

Redux是一个可以以清晰的方式管理状态变化的库。
它的灵感来自Flux，但是有一些简化。
Redux的关键思想在于，应用程序的整个状态由单个对象表示，该对象由名为reducers的函数进行突变。
Reducers本身是纯功能，与组件分开实现。这样可以更好地分离问题和测试。

如果你正在开展一个简单的项目，那么引入Redux可能有点得不偿失，但对于中等和大型项目来说，这是一个很好的选择。

生态系统

Create React App

Create-react-app 是一个CLI工具，用于快速创建新的React应用。
可以生成一个新的工程，启动开发服务器并创建绑定。
Jest（Facebook的一个单元测试工具）也同时集成在Create-react-app内部，更方便的让我们进行单元测试。

React Native

React Native 是Facebook开发的基于React在移动端的开发平台，借助此平台，React可以创建真正的Native的UI。提供了一系列标准的React组件用于绑定。
同时允许创建自己的组件并与Objective-C、Java或者Swift的代码进行绑定。

Material UI

用于React的Material Design Component。
与Angular的版本相比，比较成熟，可以使用更广泛的组件

Next.js

Next.js是一个基于React实现的服务端渲染框架，github地址为next.js。

更多

可以从Awesome React list了解更多的工具和类库。

学习曲线

JSX对于一些开发人员来说似乎刚开始会觉得很别扭，但它并没有增加复杂性; 只是表达式，实际上还是JavaScript，还有一个特殊的类似HTML的语法。
您还需要学习如何编写组件，使用props进行配置和管理内部状态。不需要学习任何新的逻辑结构或循环，因为所有这些都是纯JavaScript。

官方教程是开始学习React的好地方。
一旦完成了官方教程，接下来应该熟悉并掌握React的路由机制 。

使用Redux将需要一个范式的转变，免费入门Redux视频课程可以快速介绍核心概念。

根据项目的大小和复杂性，找到并学习一些额外的库。

Vue

Vue.js 是一套构建用户界面的渐进式框架。尤雨溪个人创立的一个前端MVVM框架，Vue.js 是构建 Web 界面的 JavaScript 库，提供数据驱动的组件，还有简单灵活的 API，使得 MVVM 更简单。

功能特性

Vue提供的功能就相对 简约：

• 轻量级的框架
• 双向数据绑定
• 指令
• 插件化

模式

组件系统

把UI结构映射到恰当的组件树。Vue的组件引入构建工具之后有一个单文件组件概念，就是这个Vue文件。
在同一个Vue文件里，可以同时写 template, script 和 style，三个东西放在一个里面。
同时，Vue的单文件组件和 Web Components 有一个本质不同，它是基于构建工具实现。

客户端路由 vue-router

应用的URL和组件树的状态之间有一个映射关系，客户端路由的职责就是让这个映射关系声明式地对应起来。

状态管理 vuex

它采用集中式存储管理应用的所有组件的状态.

生态系统

vue-cli

Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

weex

Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。
目前主要支持 Vue.js 和 Rax 这两个前端框架。

服务端渲染 Nuxt.js

Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。

更多

可以从Awesome vue list了解更多的工具和类库。

前人对比 React or Vue

React or Vue: Which Javascript UI Library Should You Be Using? | Codementor

两个倡导者对比了React和Vue,得出了如下结论：

• 如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue
• 如果你喜欢简单和“能用就行”的东西，请使用Vue
• 如果你的应用需要尽可能的小和快，请使用Vue
• 如果你计划构建一个大型应用程序，请使用React
• 如果你想要一个同时适用于Web端和原生App的框架，请选择React
• 如果你想要最大的生态圈，请使用React
• 如果你已经对其中一个用得满意了，就没有必要换了

UI组件库和最佳实践

Material design components

Ant Design Components

基于 Ant Design 设计语言，我们提供了一套开箱即用的高质量 React 组件，用于开发和服务于企业级中后台产品。

Ant Design Pro

预览

• 优雅美观：基于 Ant Design 体系精心设计
• 常见设计模式：提炼自中后台应用的典型页面和场景
• 最新技术栈：使用 React/dva/antd 等前端前沿技术开发
• 响应式：针对不同屏幕大小设计
• 主题：可配置的主题满足多样化的品牌诉求
• 国际化：内建业界通用的国际化方案
• 最佳实践：良好的工程实践助您持续产出高质量代码
• Mock 数据：实用的本地数据调试方案
• UI 测试：自动化测试保障前端产品质量

Element

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

vuejs/vue-cli 3.x

iview

一套基于 Vue.js 的高质量 UI 组件库

iView admin

iView admin是基于Vue.js，搭配使用iView UI组件库形成的一套后台集成解决方案

2.0版本预告 Feature

• 使用Vue-cli作为项目脚手架
• 使用Webpack4版本（待定）
• 重整项目结构，更好封装组件
• 新增更多组件
• 多级菜单
• 动态路由
• 重构权限控制体系
• 使用最新版iView以及iView-editor
• 加入大数据量表格vue-bigdata-table组件，几十万数据流畅渲染

移动端

Ionic

Ionic 开发混合移动应用程序。Angular集成的Cordova容器，以及一个漂亮的材料组件库。可以轻松地设置和构建移动应用程序。

• 编写一次运行到多个平台
• Ionic3基于最新的angular4。Angular4和TypeScript以面向对象的开发方式，将成为网页开发的主流方式，而且在语法上与Java 8惊人的相似。
• 官方集成常见的120多种api功能，如蓝牙、HealthKit、指纹Auth，可以基于cordova扩展几乎原生能实现的所有功能。
• 性能而生-追求性能,运行非常流畅。 让您感觉到用html5开发的app也可以飞起来。
• 专注原生Native,基于cordova，官方提供了几百个调用原生的插件，可以快速的让我们完成调用摄像头、二维码、调用支付、调用定位等原生功能
• 强大的命令行,利用ionicframework只需要一个命令就可以创建，构建，测试，部署你的应用程序在任何平台上。

React Native

react-native通过Components进行组件化。它把UI分割成独立的、可重用的部件 。

• React通过虚拟DOM实现了对UI层的解耦（无论是android还是ios）
• 将浏览器的DOM树替换为Native的UI模块，使React在移动端进行渲染
• 采用Native的核心API完成react与native的通信

使用React Native一年后的感受

react-native技术的优劣

weex

Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。

weex只是提供了很好的多平台集成方式，但自身提供的组件很少，没有项目上的结构，这方面可以引用 WeexEros)

WeexEros

eros 是基于 weex 封装面向前端的 vue 写法的解决方案，由于 app 开发的特殊性，eros 则更偏重关心于整个 app 项目。

• 详细的文档来解决环境搭建过程中的坑。
• 一套代码编译成 ios，android 两端原生应用。
• 封装了大量 weex module，让前端开发方便进行原生的操作。
• 支持大量 echart 实例运行。
• 可以通过 appboard 机制来减少多页面项目中的代码冗余，减少包体积，并可以对其实时修改。
• 内置了一套完整的 JS 二次封装 module (widget) ，直接通过 vue 插件系统注入，直接在 this 上调用，可根据业务自行修改。
• 内置了中介者服务，来进行多个页面间的交互，并可以管理业务。
• 内置了服务器端增量发布更新逻辑，可以搭配着开源的简易增量发布系统一起使用。
• 支持真机和模拟器通过 weex debug 来断点调试，程序报错均会有报错日志弹窗提示。

Ionic vs React Native

Ionic vs React Native: 前端框架之争，谁更胜一筹？

weex&ReactNative对比

weex&ReactNative对比