这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战
MVC架构原理
Martin Folwer在《企业应用架构模式》（2004年出版）一书中，介绍了最初的MVC架构的三个层次的作用。
在前端看来则是：
◎ Model（模型层），用来获取、存放所有的对象数据。
◎ View（表现层），呈现信息给用户。
◎ Controller（控制层），模型和视图之间的纽带。
前端框架选型
选型时要考虑的问题：
选定一个前端框架时，我们还要考虑的因素有：
◎ 框架是否能满足大部分应用的需求？如果不能，那么需要使用哪个框架？
◎ 框架是否有丰富的组件库？如果没有，我们的团队和组织是否有独立开发的能力？
◎ 框架的社区支持怎样？在遇到问题时能否快速方便地找到人解答？
◎ 框架的替换成本如何？假如我们的新项目将使用B框架，那么我们还需要额外学习什么内容？
启动前端应用
选择好前端框架后就可以进行下一步开发了：
（1）寻找合适的脚手架，编写出第一个“Hello, world”。
（2）选择合适的UI框架，以快速开发前端页面。
（3）确认浏览器的支持范围，以明确测试边界。
（4）明确响应式设计的需求，以明确在编码的过程中支持哪些设备。这部分只是那些独立于组织、公司的通用内容。对于流程规范化的组织内部，还会更复杂。
服务端渲染
非JavaScript语言的同构渲染
同构渲染，即前后端共享模板文件，由各自的模板引擎结合数据来渲染出页面。
在这种场景下开发单页面应用时，需要寻找一个后端支持的模板类型，如果我们使用的后端语言是Java，模板引擎是Mustache，那么就要寻找一个Java语言的Mustache引擎。在用户或爬虫通过链接访问URL时，会由后端获取数据及对应的模板文件，然后渲染出HTML提供给用户或爬虫。最后，后端通过
这种渲染方式的优势是，不需要修改现有的后端技术栈就可以直接使用，缺点是需要手动地将后端的状态同步给前端。
基于JavaScript语言的同构渲染
与非JavaScript语言的同构渲染相比，基于JavaScript语言的同构渲染，更容易将后端的状态提供给前端。这些状态都可以直接在同一个代码中处理，如果是非JavaScript语言的同构渲染，那么我们需要在后端语言中保持状态，又在JavaScript中处理状态。
这种渲染方式也存在一定的问题：
◎ 服务端内存溢出的风险。
◎ 组件及模块需要兼容浏览器和后端Node.js环境。
◎ 提供状态的获取机制。
预渲染
预渲染（PreRender）指的是预先渲染HTML，并针对爬虫返回特定的HTML。这种类型的渲染方式并不常见，一方面是因为不适合数据量大的应用，另一方面是因为更新比较麻烦。
有如下方法可以尝试采用：
◎ 爬虫生成静态页面。在本地运行应用，用爬虫抓取所有页面，再上传到文件存储服务器即可。
◎ 程序生成静态页面。在本地运行应用，内部带有真实的线上数据，由PhantomJS/Chrome Headless来渲染页面，再保存为对应的页面。
◎ 静态站点生成器。编写一个独立的应用程序，该应用程序将从服务器获取数据，再通过模板来渲染出静态页面。
