2020年前端学习体系与前端概述

前端学习目标

基础课程：HTML + CSS javaScript DOM BOM AJAX HTML5 + CSS3

应用课程：jQuery easyUI 移动端开发 响应式开发 PHP基础 H5UI bootstrap less/stylus 模板引擎 swiper iscroll select2

工程课程：ES5/6/7 git&GitHub nodeJS mongoDB mySQL webpack gulp babel VUE 微信小程序 REACT

学习前端所需要用到的工具

欲善其事必先利器，工具花样不在多，重点在人的技术本身。

最简化工具有 chrome浏览器、 editplus编辑器、pxCook量图器。后续随着课程推进，会慢慢介绍各种辅助工具，在这里就罗列，以免干扰新手小白。

浏览器

浏览器是网页的载体，是咱们前端工程师的主战场。浏览器常用的有 IE系列、火狐（FireFox）、谷歌（chrome）、Safari（苹果）、Opera等

浏览器

浏览器市场份额

在2020年，浏览器的霸主地位已经确立，Chrome凭借超简约的界面以及强大的扩展性夺得宝座，当然少不了国内浏览器大量使用chromium内核带来的二次推广的贡献

查看网站 : https://tongji.baidu.com/research/site

浏览器份额

开发工具

开发工具很多，用什么开发工具取决于你的个人喜好和业务所需平台。好的开发工具能够提升你的效率，但是无法提升你的技术实力。

Vscode Sublime Webstorm Editplus Atom Dreamweaver wechatDev

协助工具

除了写代码的工具之外，我们还需要一些其他辅助类型的工具帮助我们更好的完成项目内容。比如 切图工具 量图工具 数据监测工具 代码管理工具等等, 当前我们只需要掌握PS和pxCook的使用。

photoShop pxCook fiddler postMan git

前端全面技术构成

大体分为：状态管理、UI 组件、小程序、跨平台、框架层、编程语言、工程化、监控、测试和服务端。

技术组成分离

网页&前端

网页是构成网站的基础单元，是承载各种网站应用的平台。通俗地说，您每天通过浏览器甚至部分APP上网冲浪所看到的就是网页，网页主要由文字、图像、超链接、文本、多媒体等元素构成。

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及javaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。虽然现在前端技术栈百花齐放衍生出各种 工具 概念 技术 ;在工程化与现代化的路上高歌猛进,但本质上还是做网页。就跟我们能源技术发展到了核能阶段，依然只是为了“烧开水“。

WEB前端发展史

1991年8月6日 历史上第一个网页诞生了 互联网之父 蒂姆·伯纳斯·李 在alt.hypertext新闻组上贴了万维网项目简介的文章，这就是第一个运行在浏览器上的网页。

蒂姆·伯纳斯·李和第一个网页

1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，Tim Berners-Lee创建了W3C；这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP以及笔者本人诞生。

历史上第一个网页

随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得愈加丰富，因此早期网页的局限性也逐渐显露出来。网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。

1. 所有的网页都基于HTML页面，因为没有任何手段可以控制局部内容的显示和隐藏，因此任何局部的变化哪怕只多出一个标点符号，都只能重新下载一个新的页面。

2. 计算任务只能在服务端实现。由于网速限制，与服务器通信的过程是非常缓慢的，并且此过程是同步阻塞的，于是会出现这样的场景：用户提交一个表单，然后整个页面消失，浏览器呈现白屏，经过漫长的等待，浏览器渲染出一个和之前一模一样的页面，只不过输入框旁边多了一排红色小字：用户名错误。

3. 所有页面都是静态的，这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。

· 1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）, 看起来像是玩具的脚本语言。

JavaScript之父 Brendan Eich

· 1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化。

· 2006年，XMLHttpRequest被W3C正式纳入标准。John Resig发布了jQuery。

· 2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代!

· 2009年AngularJS诞生，随后被谷歌收购。

· 2009年Ryan Dahl发布了NODE，新的时代在这一天悄然开启。

· 2010年backbone.js诞生。

· 2011年React和Ember诞生。

· 2014年，第五代HTML标准发布。2014年Vue.js诞生, 前端进入了新时代。

当下

如今前端工程已经不再是角落里的小可怜，在最新2019年的GitHub的数据统计中显示 前端的主力语言 javaScript 早已稳稳的拿下了最受欢迎（使用最多）的语言排行榜 第一

GitHub 2019年终统计数据 JavaScript位列榜首

Stack Overflow 统计数据 使用率最高的语言

未来

随着5G的到来以及Web APP基于浏览器拥有跨平台的天然优势，开发周期，开发成本，维护成本全面下降，传统Native App面临严峻挑战。Geolocation API、Vibration API、Luminosity API、Orientation API、Camera API、Hybrid、nw.js、Electron、react native、weex如雨后春笋一般，只要你能看到的领域。我们终将插足！

模块化、组件化、前后端分离、工程化、全栈开发、微服务。每天都有大量的开发者在为前端的发展做出贡献。

WEB工程演化

前端框架百家争鸣

前端工程师的待遇和发展

初中级薪资待遇大概为： 1线城市 15K左右 2线城市 10k左右 三线城市8K左右 18线小城市 6-8k 在各行业横向对比也算是中等水平。

前端工程师薪资一览

职业发展路线也广阔，你可以选择在一个业务领域深入耕耘，也可以选择全面提升技术栈深度和广度成为全栈工程师，先天条件比较好的可以深入架构研究 进行 算法 架构 AI 图形等领域拓展。也可以走技术管理路线，产品路线。记住一句话 技术只是敲门砖 想要有更多的收获必然要靠自己去打拼，坐吃山空不管什么行业都必然会被淘汰