前端技术栈
一、PC端WEB项目
-
前台项目：
- 为让页面在服务端渲染(首屏)且前后端分离，需引入nodejs作为web中间层。
- 前端开发使用mvvm框架 vue/react，提高开发效率，（组件化）使项目易维护和扩展。
- webpack/gulp 现实模块打包和自动化构建。
-
中后台项目： 一般后台项目都为内部管理系统，无需SEO和极致的响应时间。一般是以单页应用为主的纯前端项目。
二、PC端桌面项目
客户端开发使用开源框架：Electron，它是基于 webkit + node.js + html5 技术来快速实现桌面开发且跨平台（Windows、Mac）。
三、移动端WebApp
移动端开发框架使用vuejs（根据项目复杂度可选），终端适配使用rem加媒介查询或viewport。
四、移动端NativeApp
使用基于HTML5的移动APP开发技术，都有快速开发和跨平台的优势，但根据项目需求和使用场景，可以再从下面两方面做选择：
-
性能优先（原生体验）
- Facebook的：React Native（react）
阿里的开源框架：WEEX（vue）NativeScript（vue）- 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】
【工具】
代码质量审查工具：ESLint/TSLint
在团队协作中，为避免低级Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。
【调试】
-
PC 端： 可直通过浏览器开发工具进行页面分析和调试，也可安装 Charles 或 Fiddler 等抓包工具进行数据分析。
-
移动端： 在PC上调试手机端页面，可通过 Weinre、AlloyLever、Safari 等工具实现。
