如今的前端(分享给团队后端)
前端语言的历史
以下为html,css,js的历史简略概要。
HTML
为了使欧洲各国的核物理学家能通过计算机网络及时沟通传递信息进行合作研究，Tim Berners-Lee博士开发出了第一台web服务器和web客户端，并命名为
WWW（World Wide web，万维网）
在发明万维网的同时，他也创建了 HTML（Hyper Text Markup Language，超文本标记语言），并推荐了将近20个用来编写网页的元素，就是我们现在说的标签。
W3C（World Wide web Consortinm，万维网联盟）成为了 HTML 后续标准的制定者。
W3C 希望 web 完全建立在 XML 规则上，着手开发 XHTML 2.0，这个版本与之前差别更加巨大，导致与现有的网页都不兼容，甚至与以前版本的 HTML 也不兼容。
HTML5
一股反抗势力在
W3C组织内壮大，他们希望那些支持创建web应用的特性能得到更多的关注，并以这个目标来扩展HTML，2004年他们建立了自己的组织：WHATWG（web Hypertext Application Technology Working Group，web超文本应用技术工作组），这是官网*WHATWG的大部分工作被分为：web Form 2.0和web Apps 1.0，都是基于HTML规范扩展的，这两个规范被合并之后，简单的称为HTML5规范
CSS
CSS（Cascading Style Sheets，层叠样式表）的发展史比较简单，这门语言的主要作用就是为文档中的标签添加大小、颜色、定位等特性。“层叠”的意思是可以多次写一个标签的样式，但是以一定的规则顺序来决定应用哪一句样式语言。
CSS3
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
JavaScript
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
ES6
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
浏览器
早期网景和微软的浏览器战争，以微软用 windows 操作系统捆绑 IE 的形式取得胜利而告终。而两家公司置 W3C 文档标准于不顾，互相不兼容对方浏览器，造成了如今网页开发需要处理棘手的兼容性问题，并让 IE 遗臭万年，甚至现代浏览器也存在不同的差异性。
2008年 Google Chrome 谷歌浏览器的推出，第二次浏览器大战开始，紧接着网景的后代 Firefox 火狐浏览器推出，IE 被围杀，又加上高速增长的移动互联网，IE 正在被彻底边缘化。
后端眼中的前端
每一个程序员应该都听说过程序员鄙视链，做c的看不起做c++的，做c++看不起做java的，做java看不起做.net的，这些所有都看不起搞前端的，可以说，前端程序员应该处于程序员鄙视链的底端。
image.png
前端在行业中，之所以被鄙视的原因，完全是因为，入门简单，早期的前端俗称美工、切图仔，每天的工作就是切图、写写html、写写css，在java亦或者c语言开发者眼中，就是渲染一下网页，没多大难度。
大部分后端还停留在jsp,php等前后端没分离的思想，觉得前端只要改改样式展示数据，没啥难度。随口就来句:"这个你改下，很难吗?" 😂
就算是有过对前端了解的后端，也不会特别深入，只是知道不再是以前写jquery的时代了，对于前端的全貌并不了解。
前端的今天
自从2009年node的出现，前端的发展出现了爆炸式飞跃，进入了大前端时代。
前端工程化、自动化
随着前端开发复杂度的日益增加，各种优秀的组件框架也遍地开花。同时，我们面临业务规模的快速发展和工程师团队的不断扩张。目前来说，Web业务日益复杂化和多元化，现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，我们希望能在日常开发中制订一个规范化的前端工作流，很好地规范统一项目的模块化开发和前端资源，让代码的维护和互相协作更加容易更加方便，令前端开发自动化成为一种习惯。
构建前端项目的几个阶段
第一阶段：库/框架选型
基本上现在没有人完全从0开始做网站，三大框架：React/Vue/Angular等框架横空出世，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑。
除了主流框架，还有许多UI框架来提高开发效率，如：bootstrap、antd、element UI，ionic等。
image.png
第二阶段：构建、管理工具
选型之后基本上就可以开始敲码了，不过光解决开发效率还不够。复杂的项目往往需要有大量的项目包/库的依赖、多人的协作，各类环境的调试。对代码进行压缩、校验、管理，之后再以页面为单位进行简单的资源合并（ps:以上排序不分排名先后）。
npm、yarn对项目依赖进行管理；
git对代码进行版本控制；
gulp、grunt优化项目构建流。
image.png
第三阶段：JS/CSS模块化开发
分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，模块化是目前前端最流行的分治手段。
JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module等，对应的框架和工具也一大堆，如：webpack、Parcel；
CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。
image.png
第四阶段：规范化
模块化和组件化确定了开发模型，而这些东西的实现就需要规范去落实。规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量：
目录结构的制定
编码规范
前后端接口规范
前端输入输出数据文档
文档规范
组件管理
Git分支管理
Commit描述规范
定期CodeReview
视觉图标规范
image.png
JavaScript 为什么需要 lint
JavaScript 本身设计上存在许多缺陷[3]，代码不严谨也可能就会触发神奇的错误。例如 == 和 === 的混用，可能会产生类型不一致引起的 Bug，经验不足的开发者很难察觉出异常。
因此我们需要通过jsLint、esLint、tsLint等代码规范。
前端还能做到什么
上面讲述了前端开发需要构建一个前端工程所需要的一些知识，那么下面再来看下前端还能做些什么。
服务端
上面提到有部分后端同学，觉得服务端业务逻辑是复杂的，所以比前端难。
但实际上我们有node，同样可以作为服务端语言。（当然没有哪个好的说法，完全看业务场景进行最优的选型）
常用的node框架有：express、koa
可能不少人对nodejs做服务端表示质疑，这是知乎中阿里node大佬的一篇文章，也许可以多少改变一下你们的看法。
https://www.zhihu.com/question/37379084
image.png
移动端开发
移动应用开发的方式，目前主要有三种：
Native App： 本地应用程序（原生App）
Web App：网页应用程序（移动web）
Hybrid App：混合应用程序（混合App）
image.png
我们可以通过react native、flutter等框架开发原生App，而不是必须用Android/Swift。
可以通过h5直接实现web app
可以通过WeX5、PhoneGap、Cordova等来实现hybrid App
微信小程序
我们可以用mpVue、Taro等框架来写小程序。
桌面应用
桌面应用的开发如今的前端也能占有一席
image.png
Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
ps:代表桌面应用如vsCode，为微软基于typescript和electron开发。
TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象。
TypeScript的设计目的是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。
前端也能做AI
image.png
随着AI技术的普及，前端也能插上一脚。再TensorFlow、ConvNetJS帮助下创建机器学习模型。
webVR/webGL
在线虚拟实现，前端依然有所表现。three.js，aframe等众多优秀技术。
aframe事例：https://aframe.io/examples/showcase/sky/
游戏
在浏览器中，基于HTML5技术的游戏引擎，我们可以用JS写出各种游戏。
不知道各位有没有发现chrome浏览器里自带的恐龙快跑小游戏呢?
chrome://dino/仔细找找，有惊喜。
image.png
动画
随着互联网普及，用户对页面的体验要求提高，各类动态效果的实现。在浏览器中通过css3、js实现动画也不是什么难事。不在是曾经flash的时代了，比起flash的耗性能，不安全，适配性问题，如今的前端完全可以更好地实现。
贴一个css3动画例子：https://www.html5tricks.com/demo/pure-css3-horse-run/index.html
前端还需要知道什么
除了上面叙述的技术知识，前端还需要知道哪些?
PWA
PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。
PWA并不是单指某一项技术，你更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。
PWA中包含的核心功能及特性如下：
Web App Manifest
Service Worker
Cache API 缓存
Push&Notification 推送与通知
Background Sync 后台同步
响应式设计
SEO
搜索引擎优化，又称为SEO，即Search Engine Optimization，它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。
浏览器兼容性
虽然如今chrome浏览器已经占据了霸主地位，但是我们仍然需要知道一些其他浏览器的兼容性问题，需要了解这些浏览器使用的内核，了解我们的前端项目在不同浏览器中可能出现的不同效果和问题。(万恶的IE)
网站安全
最典型的如XSS、CSRF攻击等。
XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。
设计工具
作为前端，我们需要实现达到预期的页面效果，要能够使用 PhotoShop，Sketch 或 Figma 等设计工具，精确还原设置稿。
前端与后端
image.png
环境不同
前端：代码主要在客户端（pc、手机、pad）运行。
后端的代码主要在服务端（某台机房服务器等）运行。
思考的方向是与用户交互不同
前端的首要目的是让用户觉得用起来更舒服，考虑界面布局、交互效果、页面加载速度等等，主要是偏向用户看得见的部分，客户端（pc、手机、pad）上浏览web。
后端更多是考虑业务逻辑、数据库表结构设计、服务器配置、负载均衡、数据的存储、跨平台API设计等等，更多的是考虑用户看不到的部分，保证业务逻辑处理数据的严谨，保证数据吞吐的性能。
image.png
稳定性不同
前端主要怕设计稿的频繁变更，布局样式、交互效果的需求变更；
后端主要怕业务逻辑变更，或者当使用规模增大之后的稳定性;
语言不同
前端：html、css、js
后端:java、php、C#、python...
追求
前端：前端工程师会把精力放在html5，css3，jquery，ES6 7，typescript，bootstrap，angularjs，reactjs，vuejs，webpack，less/sass，gulp，nodejs，模块化，组件化，设计模式，浏览器兼容性，性能优化等等。
后端：对于以Java工程师为代表的后台开发，基本上大部分精力会放在诸如Java基础，设计模式，Jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项目管理等等。
Javascript 和 JAVA
Java是一种真正地面向对象的语言，即使是开发简单的程序，也必须设计对象。
Javascript是一种脚本语言，它可以用来制作与网络无关的，实现与用户交互的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
强变量和弱变量
两种语言所采用的变量是不一样的。
Java采用强类型变量，即所有变量在编译之前必须作声明。
String y;
x=1234;
x=4321;
JavaScript中，采用弱类型，即变量在位用前不需作声明，而由解释器在运行时检查其数据类型.
let x=1234;
let y="4321";
typescript的出现使得可以对变量进行声明,单本质上还是弱类型语言：
let x:string = "1234";
let y:number = 1234;
class
java的class是类。
js里没有类的概念,js的继承是依靠原型链完成的，js的class本质上还是对象。ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖。
JS 中没有内部类，但 JS 可以在 function（方法）中定义类。
es6类的继承：
class Father {
constructor(){}
money(){
console.log("10000块");
}
}
// 子类Son使用 extends 继承父类Father
class Son extends Father {}
var ss = new Father();
ss.money();
// 10000块
作用域
java的作用域后端同学肯定比我熟，跳过。
JavaScript作用域es5及之前，只有全局变量和局部变量，以函数作为作用域。
es6之后有了块级作用域{}。
箭头函数 与 lambda表达式
在JDK8和ES6的语言发展中，在Java的lambda表达式和JavaScript的箭头函数这两者有着千丝万缕的联系；
箭头函数（arrow function），就是C#中的lambda表达式，据说Java8也把它加入了。但不管怎样，JS正在从其它语言吸纳优秀的特性（比如yield, class, 默认参数等等），且不论这些特性好坏，这件事本身就是极好的。
只是Java用->箭头，C#用的箭头与JS一样：=>，这个箭头叫“lambda运算符”，行话读作”goes to”
image.png
JavaScript 箭头函数 ：
const fun = function(x, y) {
return (x + y);
}
const fun = (x, y) => x + y;
——————————————
分享结束
