前端历史

2024-04-08 22:59:22

今天偷懒，看看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端
云工程师

学吧，同学，学不动，还不是要学

码农公寓