前端历史
今天偷懒，看看ruanyf老师的全栈工程师培训课程
前端开发的历史和趋势
什么是前端
- 前端：针对浏览器的开发，代码在浏览器里面运行
- 后端：针对服务器的开发，代码在服务器里面运行
前后端不分的时代
这个时候多好哈哈哈，前端开发的复杂度这么低。
在互联网发展的早期时代，前后端开发是一体的，前后端是后端代码的一部分。
- 后端收到浏览器的请求
- 生成静态的页面
- 发送到浏览器
后端MVC的开发模式
那时候的前端，采用的是后端MVC模式。
什么是MVC模式？winter大佬在前端进阶训练营给我们布置了一个课，用追溯法和***法详解下MVC模式(五一写)
- model
- view
- control
前端只是MVC中的View
拿PHP中的Laravel来说
前端工程师的角色
那时的前端工程师，实际上是模板工程师，负责编写页面模板。
后端代码读取模板，替换变量，渲染出页面。
典型的 PHP 模板
<html>
<head><title>Car {{ $car->id }}</title></head>
<body>
<h1>Car {{ $car->id }}</h1>
<ul>
<li>Make: {{ $car->make }}</li>
<li>Model: {{ $car->model }}</li>
<li>Produced on: {{ $car->produced_on }}</li>
</ul>
</body>
</html>
Ajax
Ajax技术，拿来调用接口获取数据的，这个技术的诞生，改变了一切。
- 2004 年： Gmail
- 2005 年：Google地图
前端说白了，成了一个跑在浏览器里面的独立的应用程序
前端不再是模版，可以独立得到各种数据
Web2.0
Ajax技术促成了Web2.0的诞生
- web1.0：静态网页，纯内容展示
- web2.0: 动态网页，富交互，前端数据处理
然后呢，前端就变的越来越复杂，前端工程师不再是页面仔
前端MVC框架
前端通过Ajax得到数据，也就有了处理数据的需求
前端代码变得需要保存数据、处理数据、展示数据（生成视图），然后前端MVC框架就诞生了
2010年，Backbone.js
Backbone.js
Backbone 将前端代码分成两个部分
- Model：管理数据
- Viw：展示数据
前端Controller
Backbone只有M和C，没有C。因为，前端Controller与后端不同。
- 不需要，也不用处理业务逻辑
- 只需要处理UI逻辑，响应用户的一举一动
所以，前端的Controller比较简单。因此Backbone.js没有C，只有事件来处理UI逻辑。
var AppView = Backbone.View.extend({
// ...
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
});
Router
前端还有一种天然的方法，可以切换视图，那就是 URL
通过URL切换视图，这就是Router（路由）的作用。拿Backbone.js来举例
App.Router = Backbone.Router.extend({
routes: {
'': 'index',
'show': 'show'
},
index: function () {
$(document.body).append("调用了 Index 路由");
},
show: function () {
$(document.body).append("调用了 Show 路由");
},
});
(function() {
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
};
App.Router = Backbone.Router.extend({
routes: {
'': 'index',
'show/:id': 'show',
'download/*random': 'download',
'search/:query': 'search',
'*other': 'default'
},
index: function() {
$(document.body).append("调用了 Index 路由<br>");
},
show: function(id) {
$(document.body).append("调用了 Show 路由，id 等于 " + id + "<br>");
},
download: function(random) {
$(document.body).append("调用了 Download 路由，参数等于 " + random + "<br>");
},
search: function(query) {
$(document.body).append("调用了 Search 路由，参数等于 " + query + "<br>");
},
default: function(other) {
$(document.body).append("你访问的 " + other + " 路由未定义<br>");
}
});
new App.Router();
Backbone.history.start();
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Backbone Demo</title>
</head>
<body>
<h1>Backbone Routing Demo</h1>
<ul id="menu">
<li><a href="#">Index</a></li>
<li><a href="#show/1">Show</a></li>
<li><a href="#download/1">Download</a></li>
<li><a href="#search/1">Search</a></li>
<li><a href="#other">Other</a></li>
</ul>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/main.js"></script>
</body>
</html>
通过匹配HTML中的标签来进入对应的router展示数据
MVC发展着发展着，MVVM大法来了
另外的框架提示出了MVVM模式，用View Model来代替Controller
- Model
- View
- Model-View：简化的Controller，唯一的作用就是为View提供处理好的数据，不含其他的逻辑
本质: view 绑定 model，视图与数据强耦合。数据的变化会自动展现在视图上，不需要手动的来处理。
SPA
单页面应用程序就来了，这个时候，前端可以做到
- 读写数据
- 切换视图
- 用户交互
这个时候，网页成了一个独立的应用程序，哪怕没有后端，你也可以自己Mock数据，哪怕没有后端，你也可以自己学Node.js
SPA = Single-page application
2010年后，前端工程师从开发页面，编程了开发前端应用（跑在浏览器里面的应用程序）
传统的架构
单页面应用的架构
多了一个前端的MVC层
Angular
Angular我以为国内基本上没有几个公司在用，刚开始接触MVVM的时候，就觉得国内大多是用vue和react，结果大大超出了我的意料（不是说学习曲线抖吗）
Vue
Vue.js是现在非常热门的一种前端MVVM框架
它的基本思想和Angular一致，但是用法更加的简单，而且引入了响应编程的概念。
Vue 的模板与数据，是双向绑定的。自己对Vue处于初步能写的阶段，也还行了。
HTML代码
<div id="journal">
<input type="text" v-model="message">
<div>{{message}}</div>
</div>
JS 代码
var journal = new Vue({
el: '#journal',
data: {
message: 'Your first entry'
}
});
前后端分离就来了
- Ajax - > 前端应用兴起
- 智能手机 - > 多终端支持
这两个原因，导致了前端开发方式根本的变化（学不动了啊）
前端不再是后端MVC中的V，而是单独的一层。
REST接口
前后端分离了以后，它们之间是通过接口来通信的
后端暴露出接口，前端消费后端提供的数据
后端接口一般用的都是REST方式，前后端的通信一般都是HTTP
Node
2009年，Node项目诞生，它是服务器上的JavaScript运行环境
Node = JavaScript + 操作系统Api
Node的意义
- JavaScipt成为服务器脚本语言，与Python和Ruby一样
- JavaScript成为唯一的浏览器和服务器都支持的脚本语言
- 前端工程师可以写后端程序了
- （前端工程师可以写ios程序了）
- （前端工程师可以写Android程序了）
- （前端工程师可以写windows程序了）
- （老子哭瞎了，学不动了）
前端开发模式的根本改变
- Node环境下开发
- 大量使用服务端工具
- 引入持续集成等软件工程的标准流程
- 开发完成后，编译成浏览器可以运行的标准，放上CDN
全栈工程师
前端工程师正在转变成全栈工程师
- 一个人负责开发前端和后端
- 从数据库到UI的所有开发
全栈技能
怎么样才能称为是全栈工程师？
- 传统前端技能：HTML、JavaScript、CSS
- 一门后端语言
- 移动端开发：Ios/Android/HTML5
- 其它技能：数据库、HTTP等等
软件行业的发展动力
历史演变：前后端不分 -》 前后端分离 - 》全栈工程师
动力：更加产业化、大规模地生产软件
- 效率更高
- 成本更低
- （太难了）
通用性好，能够快速产出的技术最终会赢（参考VUE）
HTML5就是一个很好的例子
为什么HTML5会赢得移动端？
- 开发速度快：Native需要重新编译才能看到结果，H5是即时性输出
- 开发成本低：Native需要两个开发团队，H5只要一个
- 快速发布：安卓Native新版本需要24小时，ios需要3～4天，H5随时可以更新
未来软件的特点
- 联网
- 高并发
- 分布式
- 跨终端
现在基于 Web 的前端技术，将演变为未来所有软件的通用的 GUI 解决方案。（ruanyf）
未来只有两种软件工程师
- 端工程师
-
- 手机端
- PC端
- TV端
- VR端
- 云工程师
学吧，同学，学不动，还不是要学
