浅谈我对前端框架的理解

一，初识框架

有次参加公司的cloudbase活动，要求就是用相关的设施做一个项目。于是我和同事一拍即合，同事写前端，我写后端。当我去窥屏的时候，只看到了什么npm, install 这些难懂的东西。更让我匪夷所思的是，为什么前端还需要开一个server，难道不是直接index.html直接在浏览器打开就可以了吗。读了半本《head first html》的我，回到工位上，开始思考着前端。究竟是人性的泯灭还是道德的沦丧，前端为什么会变成这个样子。而且我这位同事自己也不太熟悉前端，直接把node_modules给一起打包发给我，更加深了我对前端的刻板印象

二，再识框架

新学期，看到学校开了一门‘网页应用开发’的课，读了半本《head first html》的我信心满满的选了这门课，想着还不是白拿。结果上课第一天我就傻眼了，老师直接从创建react项目开始。没有办法，只能硬着头皮上课了。经过一学期的学习，我觉得我勉强算是入门了前端，因此在这分享，希望能帮到更多不了解前端的人

三，为什么要用框架

我觉得用框架最主要的原因就是提高开发速度。举个例子，一个网页需要提供一个折线统计图的视图。在传统的前端开发中，需要从网上找相应功能的代码，或者自己写。然后把这些代码复制粘贴到html代码里。但是在框架的加持下，可以直接使用折线统计图的模块，或者说函数。比如<Chart></Chart>,而不是长长的一大段代码。而且还支持传入参数，比如<Chart data={[1,2,3,4,5]}></Chart>. Npm, yarn 等就是管理’chart’这些包的软件。在用框架编写好代码后，就可以打包了。打包就是由程序去寻找<Chart>对应的代码，然后把这些代码写到html文件或者js文件里。从前端加载时，浏览器实际渲染的还是传统html的形式。 Html和框架的关系有点像二进制程序和c++的关系，通过c++编写程序，转换成二进制执行。而开发者并不需要输入0101去编写程序。
在抓包的时候，经常看到一些文件格式如main.da2kla.css 或 main.ahk22a.js 的文件。刚开始还在疑惑，到底是哪个开发写的乱七八糟的unreadable文件，现在才知道，这些其实是由框架生成的文件。

四，为什么前端也需要开一个server

开server的目的是为了实时渲染代码。当代码有变动时，server会感受到，并且更新改动的代码。通过websocket传给浏览器，从而实现浏览器显示的画面随着代码的更新自动变化

五，单页应用(Single-Page Application)是什么

要理解单页应用是什么，我觉得可以从‘应用’这个关键词开始。在我们使用一个app的时候，第一步是下载并安装这个app。打开app后，app再从后端获取需要的数据。一个app里有很多的页面，比如home页，detail页。在我们下载app的时候，同时下载了所有的页面，所以在后续的使用中我们只需要获取数据，而不需要获取页面。
但是在传统的web中，一个网站是以‘页’为单位的。当你访问/home的时候，浏览器向后端请求home页的html和数据，访问/detail的时候，浏览器向后端请求/detail的数据.即使是使用ajax去更新数据，而不是获取整个页面，但是在跨页面的请求时，也会重新获取如 header, footer 等资源。
在SPA中，当用户首次访问页面的时候，就会将整个网站都发送过去。假设此时用户在默认的/home页，当用户想要访问/detail页面时，浏览器并不会再去向后端请求detail这个页面，因为在初次访问的时候浏览器已经拿到detail这个页面了。只有在获取detail里的内容时，浏览器才会向后端发送请求。此时整个页面就像是一个app一样。
理论上说，后端只需要路由 ‘/’ 并将打包好的html发送给前端就可以了，不需要路由/detail. 但实际上，用户可能从/detial进行初次访问，所以后端也需要做相应的返回
在SPA中，整个网站就像是一个app.所以，打包后的html其实和jpg.mp4这些静态资源无异，可以直接由nginx返回。