之前有很多人都在问我，前端的定义是什么，包含哪些类别，还有现在已经成熟的前端工程化体系，在这里就简单的介绍下。

✨什么是前端？

💫定义

我们平常在电脑上用浏览器打开网站时，所浏览看到的部分就是网站的前台部分，这部分包括网站的表现层与结构层，这些每个网页的界面的展现和用户交互就是前端。

💫分层架构

一个网站的前端部分生成主要靠三种语言编写，也是我们前端的三大核心基础，HTML，CSS，JavaScript。

• HTML结构语言

  HTML是一种超文本标记语言，通过各种标记符号（标签），来代表网页中的内容元素，将网页的内容结构化。

• CSS样式语言

  层叠样式表，负责解决内容和表现分离的问题。

  负责静态的修饰网页，控制网页的视觉表现和简单交互。

• JavaScript脚本语言

  • 特点

    基于原型编程，多范式的动态脚本语言

    函数优先的轻量级语言

    解释型或即时编译型语言

    支持面向对象，命令式和声明式（如函数式编程）风格

  • 功能

    嵌入动态文本于HTML页面中

    对浏览器实践作出响应

    读写HTML元素

    数据提交服务器前进行数据验证

    检测访客的浏览器信息，控制浏览器本地存储

    基于node.js进行服务端编程

  • 组成

    ECMAScript：基本语法/基本对象

    DOM：文档对象模型

    BOM：浏览器对象模型

🎈前端包含哪些类别？

目前市面上的前端分为大概分为两类，一个是WEB前端开发，一个是应用程序前端开发。

💫WEB前端开发

• PC端开发

• 移动端开发

  • WEBAPP开发
  • 小程序开发
  • 小游戏开发
  • 混合H5开发
  • 微信公众号

💫应用程序前端开发

• Android开发
• IOS开发

💫补充

• 在评论区的小伙伴们的提醒纠正下，再补充一些，我们如今的大前端时代，不止是以上的web前端跟应用程序前端，还有像用electron开发的跨平台的桌面应用程序，还有一些设备仪器的终端机现实界面，大屏数据报表界面等等，都属于前端。

🛫前端工程化体系

在前后端开始分离，模块化标准实施以后，node，npm，webpack，等等一系列工程化的组成开始从崛起走向成熟，前端工程化也慢慢被完善，让我们一起来走入这庞大工程家园的每一个部分。

💫IDE

IDE指的是集成开发环境：集成代码编写功能，分析功能，编译功能，调试功能等一体化的开发软件服务套。

• 包括

  代码编辑器

  编译器

  调试器

  图形用户界面

• WEB开发十大利器

  • Visual Studio Code
  • PhpStorm
  • Atom
  • Pycharm
  • NetBeans
  • WebStorm
  • Sublime Text
  • Brackets
  • IntelliJ IDEA
  • HBuilderX

💫构建

能够把开发代码构建成生产代码的称之为构建工具。

• 前端构建工具

  • npm
  • yarn
  • Grunt
  • Gulp
  • Browserify
  • Webpack

💫打包

• 前端打包工具

  • webpack
  • parcel
  • rollup
  • gulp

• 代码构建后的输出格式有哪些

  • 在JS里用来使用“模块”的不同规则。

  • 类别

    • CJS
    • AMD
    • UMD
    • IIFE
    • ESM
    • SJS

💫集成

前端集成解决方案

• 探索的是如何用工程手段解决前端开发和部署优化的综合问题

• 将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求，所提出的一种解决问题的方案。

• 工程化鼻祖-FaceBook

• 静态资源优化方案

  • 配置超长时间的本地缓存 —— 节省带宽，提高性能
  • 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
  • 静态资源CDN部署 —— 优化网络请求
  • 更资源发布路径实现非覆盖式发布 —— 平滑升级

前端开发体系技术元素及其关联关系

• 开发规范

  包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。

• 模块化开发

  针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。

• 组件化开发

  在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。

• 组件仓库

  有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。

• 性能优化

  这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是 性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。

• 项目部署

  部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。

• 开发流程

  完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本，工作这些年见过很多独立的系统（cms系统、静态资源推送系统）将开发流程割裂开，对前端开发的效率有严重的阻碍。

• 开发工具

  这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性（未来我会单独写一篇文章介绍前端领域语言缺陷问题）。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统，要想把它们串联起来，才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。

💫灰度发布

将某个功能灰度发布（逐渐放量）给特定线上人群，避免新功能全量上线带来的风险。

💫测试

单元测试

• 必要性：JavaScript 缺少类型检查，编译期间无法定位到错误，单元测试可以帮助你测试多种异常情况。
• 正确性：测试可以验证代码的正确性，在上线前做到心里有底。
• 自动化：通过 console 虽然可以打印出内部信息，但是这是一次性的事情，下次测试还需要从头来过，效率不能得到保证。通过编写测试用例，可以做到一次编写，多次运行。
• 保证重构：互联网行业产品迭代速度很快，迭代后必然存在代码重构的过程，那怎么才能保证重构后代码的质量呢？有测试用例做后盾，就可以大胆的进行重构。

💫生产服务

• nginx
• 前端自动化部署