维基百科中关于前端 （Front-end web development ）的定义是
Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.
“前端开发”就是使用 HTML, CSS, 和 JavaScript,技术给一个网站或 Web 应用开发图形用户界面（graphical user interface）。
所以前端开发本质上是一个GUI应用程序，当前前端时间GUI应用程序主要有3中典型的形态：
Web : 以浏览器为运行环境，基于浏览器内核支持的编程语言、API 来实现，被浏览器解释执行
Native : 以操作系统为运行环境，基于操作系统原生支持的编程语言、API 接口实现，以二进制包的形式运行
Hybird: 基于 Native 应用提供的一个支持 HTML、CSS、JS 的容器（外壳）开发的应用，相当与用开发 Web 的方式开发 Native 应用
Hybrid ：apps are essentially web apps that have been put in a native app shell. Once they are downloaded from an app store and installed locally, the shell is able to connect to whatever capabilities the mobile platform provides through a browser that's embedded in the app.
当前3中形态主要分歧在量大GUI的技术流派 web 和 Native。他们的差异在于：
运行环境的不同，web运行在浏览器中，给前端带来了很多优势，比如：实时更新、跨平台、跨终端、开发成本低等；但也带来了很多不便，比如：无法最大程度利用设备的特性和能力、无法使用最新的语言特性、性能和体验没有 Native 应用好、浏览器兼容性问题等。
Native 技术研发大型复杂应用的经验和所能提供的精品体验对 Web 技术非常有借鉴意义。
Web 的特性也能帮助 Native 实现功能动态更新并提高开发效率。
不过随着flutter等新的尝试在不断进行，混合开发和大前端的理念也在日渐强盛
跨平台开发是 GUI 程序开发的一大问题，在移动端开发衍生出了应用的 N 种做法，见 聊聊移动端跨平台开发的各种技术 。这么多种做法背后有两种理念：
write once, run anywhere ：这是编程界长期以来的一个理念，跨平台的理想方案，Java、Web 是最成功的实践。
learn once, write anywhere：这个是 React 提出的一个理念，开发人员只要掌握一种 UI 开发的模式，然后使用这种模式去同时开发 Web、Native 应用的界面。这种理念承认平台的差异性，使用平台自带的 UI 组件保证体验。
关于前端常见的误区
1.前端 = 切图+写JS 脚本+ 调CSS 样式
2.前端技术总是变来变去 基础库从jQuery 到 Angularjs 到React Vue
打包工具从 grunt ->gulp->webpack
架构从 flux->redux->mobx/vuex
个人认为前端架构和技术在十年左右的发展中，不断尝试和发展，已经逐渐形成了完整的知识体系。了解这掌握前端发展的历史和脉络，对学习前端知识有很大的帮助。
前端的产品和服务是整个程序中直接呈现在客户面前的重要环节，直接联系用户与服务，关系到产品最直观的体验和品质。有着举足轻重的地位。
前端工作包的业务模型在工作中，前端是虚拟数据与现实客户直接对接的节点，无论业务与技术如何发展，这个业务模型是不会改变的 ，对于开发者凯说。输入->处理->输出 是最熟悉的模型，我们可以参考这个模型，了解到前端在整个项目中的业务模型
业务模型分为
| 输入（Input) | 加工（Process） | 输出（Outout) |
| 1.交互设计稿 2.视觉设计稿 3.数据服务（api接口） 4.业务需求文档 | 1.页面样式开发 2.页面行为逻辑处理 3.与服务器通信处理 | 终端应用 （客户端web页面） （app) |
输入：通常包含产品需求 + 数据服务，产品需求通常以：PRD + UI 的形式提供，UI 通常包含：视觉设计、交互设计。
数据服务的提供形式随着技术的进化在不断改变，大致路径为：
模板变量 -计算机网络-> HTTP接口 -内部服务-> 后端Service接口 ；
加工：利用前端技术对 输入的内容 进行加工，把它们转换成可运行在各个终端上的应用。这个过程中这用到的核心技术是浏览器技术，但是并不知有浏览器技术，在必要的时候是可以采用原生 Native 技术的，这也就衍生出前端的一个跨界方向 大前端开发；
输出：为运行在客户终端设备上的web或者app应用提供最终访问交互。
前端基础功能实现常见的web前端是web应用的逐层部分，一个经典的web 应用系统应该包括
静态资源服务： 提供前端程序运行时所需的 静态内容(Static Content)，JS、CSS、图片、视音频文件是最典型的代表。Nginx 是使用最广泛的静态资源 Server，和它配套的还有 CDN 服务。
后端服务 ： 提供前端程序运行所需的 动态内容，在收到用户发起的请求后，需要运行 Server 端程序进行一系列处理才能得到最终结果。需动态生成的 HTML 文档、JSON 数据是典型代表。Tomcat 就是一个典型的 Application Server。
浏览器端（客户端）： 负责加载并运行前端程序，Chrome 及基于 Chrome 内核打造的各种浏览器和容器是典型代表。
但是在实际使用中，可能更具使用和现实需求的不同，有不同的实现方案，比如一些静态展示网站可能只需要静态资源服务器，一些小型网站会将静态资源服务与后端服务合并在一组服务器中。而noBackend 和 Serverless 模式，使得 Application Server 逐步由为一些云服务来提供了，开发人员只需要专注于使用这些服务实现业务功能以及路由分配，无需在关注服务器的情况，节约了开发时间和学习成本。
前端需要的基础知识 1.运行环境（runtime)由终端设备操作系统提供对于HTML 、CSS和JS 芋圆的编程接口，根据web 和 native 两个主要分为：
1）浏览器内核：前端最核心的 Runtime，基于 Web 标准提供了一个跨平台的 Runtime，除了浏览器外，Electron、Node Webkit 等基于浏览器内核提供开发平台也属于这类
浏览器内核包含三大组成部分：
浏览器引擎（ Browser Engine）：负责渲染页面，有 Webkit、Googke Blink、Firefox Gecko、Microsoft EdgeHTML ，Webkit 和 Blink 使用最广
JS引擎（JavaScript Engine）：负责执行 JavaScript，基本上已经是 V8 的天下了，微软也开源了自家的引擎 ChakraCore
浏览器：也就是大家日常使用的 Firefox、Chrome、IE，负责调度硬件资源、与 Web Server 通信、处理用户操作等，包含：图形、网络、进程、界面、安全等模块，见 Chromium Design Documents
2) native容器 ：基于 Native 或 Webview 打造的运行容器，在跨平台开发 Native 应用中非常普遍，以另一种形式对终端设备进行封装，提供一个可以用前端编程语言编写应用的运行环境，Cordova、Weex、React Native 算是典型代表。微信、支付宝、手机百度等超级 App 都有一个这样的内置容器。
与后端不同，前端开发工程师并不能控制客户使用的运行环境，所以需要开发人员根据实际的开发和使用环境根据经验去判断解决兼容性等问题。
2.编程语言前端要掌握的基础编程语言是：HTML、CSS、JS，这三种语言背后都有规范支持，随着浏览器技术的进化也在持续进化，功能和易用性越来越好了。除此之外，前端开发还会涉及两类语言：
随着前端语言打发展，出现一写对基础语法进行增强的衍生语言，以提升其易用性的衍生语言：TypeScript、JSX、SASS、LESS就是典型代表
模板语言：负责根据数据动态构造 HTML （vue），JSX（react) ，Nunjucks、Mustache、Jade、Velocity 都属于这类语言。模版语言为前端业务开发提供了很大便利性。
3.数据通信数据需要通过数据通信，wifi 局域网，移动网络 将数客户端与服务端链接起来。
网络协议 HTTP。是最主要的协议，尤其是 HTTP/2，还有 HTTP 的几种请求方式：短连接、长连接、Stream 连接、WebSocket 连接、QUIC链接等。
4.应用开发应用是大多数前端开发的日常主要工作内容，专注在如何开发各种类别的应用，探索和实践 Web 应用的 N 做法，是前端最核心的一个技术领域：
1.基础库使用：提供网络操作、DOM 操作、日期、事件、Canvas 等功能，jQuery 、React、Vue、Angular等
2.UI 组件库：提供可被复用的原子级别的界面元素，AntD、Bootstrop、element-UI 为典型代表
3.业务组件库：提供一些包含业务属性的组件，比如：登录框、富文本编辑器等
4.业务框架：规范应用代码的拆分、组织、实现方式.
还有一些不常用，但是特殊开发会用到的技术
5.图形：根据数据绘制各种图形，地图、数据报表、大屏是其典型场景 canvas ,svg 等技术
6.实时应用：消息、聊天、Game、协同办公等类别的应用，这也是 Web 程序一直未能完美支持的地方
5.工程化管理工程花管理本书是为了加速coding 本身的过程，让开发一个应用更加的简单。
通过工程系统化的管理研发声明周期，上代码更加安全高效的发布。
一般上包括如下内容
源代码管理：如何管理源代码
代码规范：制定团队统一的代码规范，提供规范检查工具
构建：将源代码转变成目标代码
调试：如何在各个环境下测试程序
发布：如何保证程序高效、安全的发布出去给用户使用
质量：如何有效的保证代码质量
数据监控：如何监控前端程序运行过程中产生的一些有价值数据
6.系统评估（性能，安全）性能 系统的性能是在实际使用和测试中，直接关系到用户体验和体现程序员综合技术的关键指标。
性能指标体系：确定好该优化什么
监控：持续监测核心指标，为优化提供理论依据
评测：通过一套完整的工具或者监控体系，评估应用的运行性能是否符合预期
优化：制定并实施优化方案，解决产品遇到的性能问题
安全 系统安全在现有互联网开发中显得更加重要
用户隐私信息泄露：数据通常会以全集的的形式提供给前端，这些数据一不小心（比如 json 序列化）就会被输出到页面，所以在使用数据时，务必要提醒自己：遵循最小化原则、隐私信息只在必要时输出
防篡改：HTTP 协议本身的特性使得数据在从 Server 到浏览器端传递的过程中，可以被第三方劫持和篡改
7.用户体验用户体验并不和代码直接相关，但是是产品管理的重要环节，是一个持续迭代和优化的过程，需要设计与开发同时长时间的协同迭代可开发
交互 & 视觉设计的理念和原则
业界同类产品的界面设计
常见视觉、交互、动效效果的实现
