前端技术栈

前端技术栈关系 前端技术栈 前端技术栈 - 思维导图 前端开发者手册

思维导图

前端技术栈.svg

前端技术栈关系

ES6：全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念。vue 是基于 ES6 的 JS框架；
TypeScript：JavaScript 的超集，扩展了 JavaScript 的语法，支持 ES6 标准；
ES引擎：让机器识别、翻译、并运行 es 的，叫 ES引擎，例如 V8，Gecko；
宿主：为 ES 和 ES引擎提供运行以及相关API的所在环境，叫宿主，例如 浏览器，node；
webpack：可以对前端项目进行编译、压缩和打包，webpack是使用node开发，运行在node环境中的一个工具；
node：遵循 CommonJS 规范，Node.js 是运行在服务端的 JavaScript（Node.js 是 JavaScript 的服务器运行环境（runtime））。node 也是宿主，提供一系列操作计算机以及相关软硬件的api，常用于服务器和前端相关构建服务；
npm：node 的包管理器。淘宝镜像：npm install -g cnpm —registry=https://registry.npm.taobao.org；
nvm：是nodejs的版本控制器，全称 Node Version Manager。nvm windows download

前端技术栈

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种框架，对比分析也是在这几种方式中，我们可以根据业务类型和规模选择适合团队的框架。

• * mpvue 将通过 weex 支持移动端，Taro 将通过 React Native 支持移动端。
• 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 等工具实现。