前端技术栈

一、PC端WEB项目

1. 前台项目：

   • 为让页面在服务端渲染(首屏)且前后端分离，需引入nodejs作为web中间层。
   • 前端开发使用mvvm框架 vue/react，提高开发效率，（组件化）使项目易维护和扩展。
   • webpack/gulp 现实模块打包和自动化构建。

2. 中后台项目： 一般后台项目都为内部管理系统，无需SEO和极致的响应时间。一般是以单页应用为主的纯前端项目。

二、PC端桌面项目

客户端开发使用开源框架：Electron，它是基于 webkit + node.js + html5 技术来快速实现桌面开发且跨平台（Windows、Mac）。

三、移动端WebApp

移动端开发框架使用vuejs（根据项目复杂度可选），终端适配使用rem加媒介查询或viewport。

四、移动端NativeApp

使用基于HTML5的移动APP开发技术，都有快速开发和跨平台的优势，但根据项目需求和使用场景，可以再从下面两方面做选择：

• 性能优先（原生体验）

  1. Facebook的：React Native（react）
  2. 阿里的开源框架：WEEX（vue）NativeScript（vue）
  3. Google的：Flutter（dark）

• 快速开发（基于Webview） 内容开发还类似于webapp方式，打包和底层调用使用HBuilder 或者 cordava实现。

五、小程序

小程序的开发生态不断地在完善，从最开始的原生框架，到腾讯自己开发类vue规范的wepy，再到美团开发近vue写法的mpvue，再到最近O2实验室推出的遵循React规范的Taro。

到现在，有多种开发微信小程序的方式，主要有原生，wepy，mpvue，Taro，uni-app等5种框架，对比分析也是在这几种方式中，我们可以根据业务类型和规模选择适合团队的框架。

uni-app类似taro，是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

六、技术栈

•  HTML5/CSS3/ES6
•  Vue.js
•  React.js
•  Webpack
•  Node.js

Vue技术选型

• vue-cli
• fetch
• vue-router
• vuex
• webpack4, splitChunksPlugin模块拆分 (vendor/runtime等), 异步组件
• eslint (standard), precommit (husky)
• vw

React技术选型

• create-react-app (PWA)
• fetch
• react-router
• redux, redux-actions, redux-saga, immutable
• typescript
• webpack4, react-app-rewired, splitChunksPlugin模块拆分 (vendor/runtime等), 异步组件
• eslint (standard), precommit (husky)
• css in js (styled-components), vw

前端开发所需掌握知识点概要：

• HTML&CSS：

对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas）；

• JavaScript：

数据类型、运算、对象、Function、继承、闭包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP;

• 其他：

主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等；

【GIT】

>>Git 问题和操作清单

【工具】

代码质量审查工具：ESLint/TSLint

在团队协作中，为避免低级Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

【调试】

• PC 端： 可直通过浏览器开发工具进行页面分析和调试，也可安装 Charles 或 Fiddler 等抓包工具进行数据分析。

• 移动端： 在PC上调试手机端页面，可通过 Weinre、AlloyLever、Safari 等工具实现。