01.客户端框架介绍

当JavaScript在1996被发布后, 它给网络增加了少许的交互性和乐趣, 但是, 网页仍由静态文档组成. 网络应该不仅仅是阅读,更是创造的地方. 随着JavaScript的流行. 使用JavaScript的开发者们创造工具来解决他们遇到的问题, 并且将其打包成称为库的可复用组件, 这样就能和他人共享解决方案. 这种共享库的体系帮助塑造了网络的增长.

现在, JavaScript是网络的基本部分, used on 95% of all websites, 而且网络又是现代生活的基本部分. 用户在网络上写文章, 管理预算, 听音乐, 看电影,  以及和相隔万里的人通过文字, 音频, 视频聊天来瞬时交流. 网络让我们能够做到那些过去只能在电脑上安装本地应用程序才能做到的事. 这些现代的, 复杂的, 具有交互性的网站通常被称为 网络应用程序.

现代JavaScript框架的到来加快了打造高度动态化和交互性强的应用程序的速度.  框架 就是提供该如何构建应用程序的意见的库。这些意见能使应用具有可预测性和同质性。可预测性让软件能在扩展到很大规模的同时仍保持可维护性。可预测性和可维护性对于一个软件的长久健康运行是十分重要的。

Ember

Ember于2011年12月发布，最初作为SproutCore项目的延续而开始。比其新式的替代品（例如React和Vue），作为老框架它的用户人数要少得多。但因其稳定性、社区支持以及一些明智的编程原则，它仍然享有很高的知名度。

Angular

Angular 是一个开源 Web 应用程序框架，正式发布于2016年9月14日。它由构建 AngularJS 的团队完全重写，并由 Google 的 Angular 团队以及个人和公司社区共同领导。

Angular 是一种基于组件的框架，使用声明式的HTML模板。在应用构建时，框架的编译器将 HTML 模板转换为优化好的 JavaScript 指令，这一过程对开发者是透明的。Angular 使用 TypeScript，它是 JavaScript 的超集，我们将在下一章中对其进行更多介绍。

Vue

在工作和学习了 AngularJS 的源码之后，Evan You （尤雨溪） 在2014年第一次发布 Vue 。Vue 是“四大框架”中最年轻的，但在最近，它的人气迅速上升。

Vue，就像 AngularJS，用它自己的代码拓展了 HTML。除此之外，它完全依赖于现代的、标准化的 JavaScript。

React

Facebook 在 2013 发布了 React。在当时 React 已经被Facebook内部用来解决许多问题。 严格来说 React 本身并不是框架，而是一个用来渲染UI 组件的库。 React 被用来组合其它用来构建应用的库 —— React 和 React Native 让开发者能够用 JavaScript 构建移动应用； React 和 ReactDOM 使他们能够被用来制作 web 应用程序等。

因为 React 和 ReactDOM 被经常放在一起使用，通俗地讲，React 可以被理解为是一个 JavaScript 框架。当你通读了这个模块时，我们将使用这种口语化的理解进行工作。

React 用类似 HTML 的语法的 JSX 拓展了 JavaScript。

02.服务端网页编程

动态网页——服务器端编程 [Dynamic Websites – Server-side programming]

• 服务器端代码在服务器上运行，它的主要角色是控制什么信息应该发送给用户（然而客户端代码只要解决给用户的数据的结构和展示）。

• 它允许我们创建，可以高效地向个体用户传输定制化的信息的，网站。

• 服务器端代码可以用很多种编程语言进行编写。

服务端编程介绍

大多数的大型网站采用服务器端编程来在需要的时候动态展示不同的信息，这些信息通常会从服务器上的数据库中取出，然后发送给客户端，并通过一些代码（比如HTML和Javascript）展示在客户端。

静态网站

下面这张图展示了一个静态网站的基本架构。（静态网站是指无论何时当一个特定资源被请求的时候都返回相同的被硬编码的内容）当用户想要导航到某个页面时，浏览器会发送一个指定到这个页面的URL的HTTP“GET”请求。服务器从它的文件系统中检索被请求的文件，然后返回一个HTTP回应，该回应包括被请求的文件和一个状态码（通常200代表操作成功）。如果出于某些原因被请求的文件无法检索到，就会返回错误码。（具体可以参照客户端错误回应和服务器错误回应）

动态网站

动态网站是指，一些响应内容只有在被需要的时候才会生发的网站。在一个动态网站上，页面通常是通过将数据库的数据植入到HTML模板中的占位符中而产生的（这是一种比使用静态网站有效得多的存储大量内容的方式）。

动态网站可以基于用户提供的个人信息或者偏好设置来返回不同的数据，并且可以展示作为返回一个回应的内容的一部分的其他操作（比如发送通知）。

大多数支持动态网站的代码必须运行在服务器上。编写这些代码就是所谓的“服务器端编程”（有些时候也称“后端脚本编写”）。

• 动态网站对于静态资源的请求的处理方式和静态网站是一样的（静态资源是指那些不会改变的文件——最典型的就是：CSS，Javascript，图片，预先生成的PDF文件等）。

• 对于动态资源的请求则会指向（2）服务器端代码(在图中显示为Web Application（网络应用））。在处理“动态请求”时，服务器会首先解释请求，从数据库中读取被请求的信息，然后将这些被检索的信息组合到HTML模板中（4）,最后返回一个包含所生成的HTML页面的回应（5,6）。

服务器端编程和客户端编程的区别：

• 有着不同的目的和关注点；
• 通常使用不同的编程语言（js是特例）；
• 在不同的操作系统中运行。

在浏览器端运行的代码被称为客户端代码，并且主要涉及所呈现的网页的外观和行为的改进。这就包括选择和设计UI元素、布局、导航、表单验证等。

相反的，服务器端网站编程主要涉及，对于相应的请求，选择所要返回给浏览器的内容。服务器端代码解决这样一些问题，比如验证提交的数据和请求、使用数据库来存储和检索信息及发送给用户正如他们所请求的的正确内容。

服务端编程可以做什么？

1. 高效的存储和传输信息；

服务器端网络编程则允许我们在数据库中存储信息，并且允许我们动态地创建和返回HTML和其他类型的文件（比如，PDF文件和图片等）。我们也可以简单地传输数据 （JSON, XML等），来让合适的客户端框架呈现（这样就减少了服务器的处理压力和需要被传输的数据总量）。

2. 定制用户体验；
3. 控制对内容的访问；
4. 存储会话和状态信息；
5. 发送面向全体或者面向指定用户的通知；（例如，注册认证时，通过注册的邮件激活账号）
6. 数据分析：基于用户在网站上的行为数据的分析而细化回应，比如推送广告；

客户端服务端的交互

网络浏览器通过超文本标记语言传输协议（HTTP）与网络服务器（web servers）。 当你在网页上点击一个链接、提交一个表单、或者进行一次搜索的时候，浏览器发送一个HTTP请求给服务器。

这个请求包含：

• 一个用来识别目标服务器和资源（比如一个HTML文档、存储在服务器上的一个特定的数据、或者一个用来运行的工具等）的URL。 

• 一个定义了请求行为的方法（比如，获得一个文档或者上传某些数据）。不同的方法/动作以及与他们相关的行为罗列如下：

  • GET：获取一份指定（比如一个包含了一个产品或者一系列产品相关信息的HTML文档）。
  • POST：创建一份新的资源（比如给wiki增加一片新的文章、给数据库增加一个新的节点）。
  • HEAD:  获取有关指定资源的元数据信息，而不会得到像GET的内容部分。例如，您可以使用HEAD请求来查找上次更新资源的时间，然后仅使用（更“昂贵”）GET请求下载资源（如果已更改）。
  • PUT：更新一份已经存在的资源（或者在该资源不存在的情况下创建一份新的）。
  • DELETE：删除指定的资源。
  • TRACE、OPTIONS、CONNECT、PATCH等动作是为一些不常见任务设计的，因此我们在这里的讲解不会涉及到他们。

• 额外的信息可以和请求一起被编码（比如HTML表单数据）。信息可以被编码成如下：

  • URL参数：GET请求通过在URL末尾增加的键值对，来编码包含在发送给服务器的URL中的数据——比如，http://mysite.com ?name=Fred&age=11，你经常会用到问号（？）来将URL剩余的部分和URL参数分隔开来，一个赋值符号（=）将名称和与之相关的值分隔开来，然后一个“&”符号分割不同的键值对。当他们被用户改变然后提交时，URL参数具有与生俱来地“不安全性”。因此，一个URL参数或者GET请求是不会用来在服务器上更新数据的。
  • POST数据：POST请求会增加新的资源，这些数据将会在请求体中编码。
  • 客户端cookie：cookies包含与客户相关的会话数据，服务器可以用这些数据来判断用户的登录状态以及用户是否有访问资源的权限。

网络服务器等待来自客户的请求信息，当请求到达时处理它们，然后发给浏览器HTTP响应消息。回应包含一个HTTP响应状态码（HTTP Response status code）来暗示请求是否成功 (比如 “200 OK” 连接成功, “404 Not Found” 资源没有找到, “403 Forbidden” 用户没有被授权查看资源, 等等).  一个成功的响应主体，会包含GET请求所请求的资源.

当一个HTML页面被返时，页面会被网络浏览器呈现出来。作为处理工作的一部分，浏览器会发现指向其他资源的链接（比如，一个HTML页面通常会参考Javascript和CSS页面），并且会发送独立的HTTP请求来下载这些文件。

web框架简化服务器端的web编程

web 框架可以提供简单的机制，以将不同的资源和页面定位到具体的处理函数。这使得保持代码和各个不同形式的资源的联系变得简单。也非常利于代码的维护，因为你可以直接改变在一个地方用来传输特定功能的URL，而不用改变处理函数。

如何选择一个web框架

一些影响决定的因素有：

• 学习代价：学习一个web框架取决于你对底层语言的熟悉程度，它的API的一致性与否，文档质量，社区的体量和活跃程度。如果你完全没有编程基础的话，那就考虑Django吧（它是基于上面几条标准来看最容易学习的了）。如果你已经成为开发团队的一部分，而那个开发团队对某一种语言或者某一个框架有着很重要的开发经历，那么就坚持相关框架。

• 效率：效率是指一旦你熟悉某一个框架之后，你能够多块地创造一个新功能的衡量方式，包括编写和维护代码的代价（因为当前面的功能崩掉之后，你没法编写新的功能）。影响效率的大多数因素和学习代价是类似的——比如，文档，社区，编程经历等等。——其他因素还有：

  • 框架目的/起源：一些框架最初是用来解决某一类特定问题的，并且最好在生成app的时候顾及到这些约束。比如，Django是用来支持新闻网站的，因此非常适合博客或者其他包含发布内容的网站。相反的，Flask是一个相对来说轻量级的框架，因此适合用来生成一些在嵌入式设备上运行的app。
  • Opinionated vs unopinionated：一个opinionated的框架是说，解决某一个特定问题时，总有一个被推荐的最佳的解决方法。opinionated的框架在你试图解决一些普通问题的时候，更加趋向于产品化，因为它们会将你引入正确的方向，尽管有些时候并不那么灵活。
  • 一些web框架默认地包含了开发者们能遇到的任何一个问题的工具/库，而一些轻量级的框架希望开发者们自己从分离的库中选择合适的解决方式（Django是其前者的一个实例，而Flask则是轻量级的一个实例）。包含了所有东西的框架通常很容易上手因为你已经有了你所需要的任何东西，并且很可能它已经被整合好了，并且文档也写得很完善。然而一个较小型的框架含有你所需要（或者以后需要）的各种东西，它将只能在受更多限制的环境中运行,并且需要学习更小的、更简单的子集学习。
  • 是否选择一个鼓励良好开发实例的框架：比如，一个鼓励 Model-View-Controller 结构来将代码分离到逻辑函数上的框架将会是更加易于维护的代码，想比与那些对开发者没有此期待的框架而言。同样的，框架设计也深刻影响了测试和重复使用代码的难易程度。

• 框架/编程语言的表现： 通常来讲，“速度”并不是选择中最重要的因素，甚至，相对而言，运行速度很缓慢的Python对于一个在中等硬盘上跑的中等大小的网站已经足够了。其他语言（C++/Javascript）的明显的速度优势很有可能被学习和维护的代价给抵消了。

• 缓存支持： 当你的网站之间变得越来越成功之后，你可能会发现它已经无法妥善处理它收到的大量请求了。在这个时候，你可能会开始考虑添加缓存支持。缓存是一种优化，是指你将全部的或者大部分的网站请求保存起来，那么在后继请求中就不需要重新计算了。返回一个缓存请求比重新计算一次要快得多。缓存可以被植入你的代码里面，或者是服务器中（参见reverse proxy）。web框架对于定义可缓存内容有着不同程度的支持。

• 可扩展性： 一旦你的网站非常成功的时候，你会发现缓存的好处已经所剩无几了，甚至垂直容量到达了极限（将程序运行在更加有力的硬件上面）。在这个时候，你可能需要水平扩展（将你的网站分散到好几个服务器和数据库上来加载）或者“地理上地”扩展， 因为你的一些客户距离你的服务器很远。你所选择的框架将会影响到扩展你的网站的难易程度。

• 网络安全： 一些web框架对于解决常见的网络攻击提供更好的支持。例如，Django消除所有用户从HTML输入的东西。因此从用户端输入的Javascript不会被运行。其他框架也提供相似的功能，但是通常在默认情况下是不直接开启的。

可能还有其他一些原因，包括许可证、框架是否处于动态发展过程中等等。

Django (Python)

Django是一个高水平的python web框架，它鼓励快速的开发和简洁、务实的设计。它由非常有经验的开发者创建的，考虑到了web开发中会遇到的大多数难题，所以你无需重复造轮就能够专心编写你的应用。 

Django遵循“Batteries included”哲学，并且提供了几乎所有大多开发者们想要“开箱即用”的东西。因为它已经包含了所有东西，它作为一个整体一起工作，遵循着一致的设计原则，并且有扩展的、持续更新的文档。它也是非常快、安全和易于扩展的。基于python，Django代码非常容易阅读和维护。

使用Django的主流网站（从Django官网首页看到的）包括： Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

Flask (Python)

Flask是python的一个微型框架

虽然体量很小，Flask却可以开箱即用地创造出完备网站。它包含一个开发服务器和调试器，并且包含对于 Jinja2 模板的支持, 安全的cookie, unit testing, 和 RESTful request dispatching。它有很好的文档和一个活跃的社区。

Flask已经非常火爆了，部分因为那些需要在小型的、资源受限的系统中提供web服务的开发者们。(比如，在Raspberry Pi, Drone controllers等上面运行服务器)。

Express (Node.js/JavaScript)

Express 针对 Node.js 的快速的、unopinioned、灵活的、小型的web框架(node是用来运行Javascript的无浏览器的环境)。它为web和移动应用提供强大的系列功能，并且传输有用的HTTP工具、方法和middleware.

Express非常受欢迎，主要因为它减轻了客户端Javascript程序到服务器端开发的迁移，并且部分因为它是资源节约型（底层的node环境在单线程中使用轻量级多任务处理，而不是为每个web请求提供单独的进程）。

因为Express是一个小型的web框架，它几乎不包含任何你可能想要使用的组件（比如，数据库接口和对用户和会话的支持通过独立的库来完成）。有很多独立的、非常好的组件，但是有时候你可能很难决定对于特定目的而言哪一个是最好的！ 

 很多非常受欢迎的服务器端编程和全栈框架（同时包括服务器端和客户端框架），包括 Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN, 和 Sails.

大量的profile company使用Express，包括优步、Accenture、IBM等（这里是一张列表）.

Ruby on Rails (Ruby)

Rails （通常被称作”Ruby on Rails”）是一个为Ruby语言编写的web框架。

Rails遵循了和Django非常相似的设计哲学。正如Django一样，它提供了检索URLs的标准机制、从数据库中访问数据、从模板中生成HTML页面、格式化数据JSON 或者 XML。同样的，它也鼓励如 DRY （不要重复你自己）的设计模板——尽可能地只写一次代码、MVC（模板-视图-控制中心）以及很多其他的一些。

当然，还有很多由于因为具体设计决定和语言的特性导致的差异。

Rails被用在很多站点中，包括： ****Basecamp, GitHub,Shopify, Airbnb, Twitch, SoundCloud,Hulu, Zendesk, Square, Hi

ASP.NET

ASP.NET 是一个由微软开发的开源Web框架，用于构建现代的Web应用程序和服务。通过ASP.NET你能快速创建基于HTML、CSS、JavaScript的网站，并且能满足大量用户的需求，还可以很容易地添加诸如Web API、数据表单、即时通讯的功能。

ASP.NET的特点之一就是它建立在 Common Language Runtime (CLR公共语言运行时)之上。这使得程序员可以使用任何支持的.NET语言（如C#、Visual Basic)来编写ASP.NET代码。和很多微软的产品一样，它得益于出色的开发工具（通常是免费的）、活跃的开发者社区，以及详尽的文档。 

ASP.NET被微软、Xbox、Stack Overflow等采用。

Mojolicious (Perl)

Mojolicious是为Perl语言设计的新一代Web框架。 

在Web的早期阶段，许多人都为了一个叫做 CGI 的优秀的Perl库而学过Perl。它简单到即使你不是太懂这门语言也可以开始使用，而且也强大到足以让你可以用下去。Mojolicious通过最新的技术实现了这个想法。

Mojolicious提供的一些功能是：

• 实时Web框架，可轻松将单个文件原型，生成为结构良好的MVC Web应用程序；
• RESTful路由，插件，命令，Perl-ish模板，内容协商，会话管理，表单验证，测试框架，静态文件服务器，CGI /PSGI 检测，一流的Unicode支持；
• 全栈式 HTTP 和 WebSocket 客户机/服务器架構，由以下技术支持与实作－IPv6，TLS，SNI，IDNA，HTTP / SOCKS5 代理，UNIX 域套接字，Comet（长轮询），保持活动，连接池，超时，cookie，multipart，支持 gzip 压缩
• 具有CSS选择器支持的 JSON 和 HTML / XML 解析器和生成器；
• 非常干净，可移植且面向对象的纯 Perl API，没有任何隐藏的魔法；
• 全新的代码基于多年的经验，免费和开源。