前端选型

构建前端框架概述

任务拆分

任务编号	任务名称	负责人	依赖项	工作量
T01	Dojo/Vue/React/React Native针对PC端/移动端对比的选型方案	黄露		2020-02-14
T02	了解EPEC的页面样式风格、页面操作风格，设置原型图	黄露	T01	1人天
T03	根据选型结果，基于框架做PC端/移动端原型。	黄露	全部	？人天
总计
			天	？天

Dojo/Vue/React/React Native针对PC端/移动端对比的选型方案
技术成熟度，技术可行性等等
了解EPEC的页面样式风格、页面操作风格，根据选型结果，基于框架做PC端/移动端原型。

1.三大框架对比

PC端

名称	react	vue	dojo
基本介绍	React于2013年3月首次发布，被描述为一个JavaScript库。React由Facebook开发和维护	Vue是当今世界上发展最迅速的JavaScript框架之一。Vue被描述为“用于构建交互式界面的直观，快速和可组合的MVVM”。它于2014年2月首次发布。它是前谷歌员工尤雨溪的创意。	dojo是一个js的工具集，一个面向对象的js框架(在widget中更能体现这点),根据功能分成多个module,每个module又分为多个package,可以根据程式的需要导入不同的package,类似于JAVA。
灵活性	从不限制你用什么样的代码组织结构，更加随意。评分：5分	这点和React和相似，Vue可以与已知的库或框架很好地配合。评分：5分	灵活性不高。评分：2分
生态圈	生态圈强大，因为react把路由库和状态管理库交给社区维护，虽然相对来说这些方面不如vue的官方发布稳定，但是造就了生态圈的繁荣。评分：5分	这点和React和相似，Vue可以与已知的库或框架很好地配合。评分：5分	生态圈不太活跃。评分：1分
跨平台优势	React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发。评分：4分	跨平台 支持web端，Weex可以支持iOS、Android、web。体验效果不佳 评分：3分	由于网上资料不多。评分：1分
学习成本	学习成本一般 在你开始学 React 前，你需要知道 JSX 和 ES2015，相对于vue是学习难度高，相对于angular来说比较好学，如果要构架大型应用，它的生态是相对复杂，个人觉得没有dojo官方发布的文档清晰。评分：3分	学习成本较低 你只需要有良好的 HTML 和 JavaScript 基础就可以通过官网上的阅读指南快速投入开发，相比于react和dojo都有很大的优势。评分：4分	学习成本很高。因为资料不多，社区不太活跃。评分：1分
适合场景	PC端：react 较复杂	Tencent QQ，Facebook，JD（手机京东），F8，Skype，adidas GLITCH，Baidu Mobile (手机百度)	适合场景是大型复杂的国际化产品，用于企业级应用，其实挺好的。不过缺点在于：过于重量级，不适合互联网。
总结	react和vue一样只关注视图层，这跟angular有本质的区别，如果react想开发大型应用需要配合第三方库，他的跨平台优势和生态优势大于vue。总评：17分	轻量，学习成本低等等，优点很多，灵活，性能好，构建项目可大可小。总评：17分	dojo更多的是一个加强的、企业级的应用框架，它提供了更好的OOP和框架组织模式，丰富的组件库，表格、图表，国际化等，并且可以容易的扩展自定义widget，当你开发比较复杂的Web应用程序的时候，dojo一个非常好的选择。总评（加的10分考虑到前期项目中大量封装了很多组件，可提高了开发效率）：5分+10分=15分
综合比较	总结：轻量，学习成本低等，优点很多，灵活，性能好，构建项目可大可小	react和vue一样只关注视图层，这跟angular有本质的区别，如果react想开发大型应用需要配合第三方库，他的跨平台优势和生态优势大于vue。	针对本公司来说，因为前期项目中大量封装了很多组件，也提高了开发效率，缺点在于可扩展性不高，前端样式单一，学习成本很高，不够灵活，生态圈薄弱。

结论：最后我们选择了react

市面上常见的App开发方式

名称	WebApp	NativeApp	HybirdApp
基本介绍	基于浏览器实现的，有特定功能的网站，称作WebApp	用android和Object-C等原生语言开发的应用	利用前端所学的知识去开发移动端App，兼具2者的优势
优点	依赖网络，有白屏效果，相对来说，用户体验差；不能调用硬件底层得设备，比如摄像头；	体验好；用户使用起来很流畅；非常适合做游戏【性能高】；可以直接调用硬件底层的API；	能够跨平台；体验会好一些；也能够调用硬件底层的API
缺点	依赖网络，有白屏效果，相对来说，用户体验差；不能调用硬件底层得设备，比如摄像头；	不能跨平台，开发周期长。	相对于原生体验稍微弱一丢丢；不适合做游戏；适合做非游戏类型的手机App；
应用技术	vue、react	Object-C、JAVA等原生语言	react-native、weex

2.引入react方式：

1.CDN[Content Delivery Network]方式引入.js文件来使用React
2.脚手架工具Create-react-app

结论：我们项目采用脚手架引入

3.react框架目录结构

|-- 
    |--node_modules                              脚手架自动生成的          
    |-- public     
    |   |   |-- index.html                       入口的一个html文件
    |   |   |-- manifest.json                    
    |   |   |-- api                    
	    |   |   |-- detail.json                   mook文件
    |-- src                                       本项目的源代码
    |   |   |-- index.js                          入口js文 件
    |-- yarn.lock                                项目安装包 版本文件
    |-- README.md                                项目说明 markdown 
    |-- package.json                             node的包文件
    |-- .gitignore                               git管理忽略文件

4.前端技术选型

redux           :  框架
react-redux     :  数据管理器 
react-router    :  路由管理
redux-thunk     :  支撑react-router
antd            :  UI框架库
axios           :  网络请求
es6             :  编写语言