Skip to content

Latest commit

 

History

History
46 lines (23 loc) · 5.4 KB

2-what-is-webapp.md

File metadata and controls

46 lines (23 loc) · 5.4 KB

什么是WebApp？

WebAPP 到底是什么？WebAPP 是近年来比较流行的词。

相信大家对网站都很熟悉，我们每天都在浏览网页。网站技术从最早的静态网页发展到可交互的动态网页。在以前只能通过 PC 浏览器浏览网页，现在还可以使用手机浏览器，甚至有的手机 APP 内置了浏览器内核，通过手机 App 也可以访问网页。

说到手机，大家每天用的微信称为 NativeApp。NativeApp 是一种基于手机操作系统 iOS、Android 来开发的应用程序。NativeApp 一般在下载后，在没有网络的情况下也可以在手机上独立运行、计算，比如计算器、音视频播放器，日历、单机版游戏等。NativeApp 有独立的安装包。相对于网站，网页并没有安装包，通过浏览器并输入网址，这个过程是从浏览器发了一个请求给服务器并从服务器获得网址对应的页面，网页绝对依赖于网络。

网页就是 HTML 页面，传统的 HTML 页面只能在 PC 浏览器上运行，在手机上运行显示上会出现格式问题。但是，现在 CSS 技术的发展足以保证 HTML 页面无论是在 PC 浏览器还是手机浏览器上都能正常显示，加上手机浏览器的手势操作，在手机上操作网页变得非常的简单。

网页在手机上像 NativeApp 一样显示和操作，从用户的角度网页和 NativeApp 的页面似乎没太多差异，更像一个 APP。但是光从网页显示形态和手势操作两点并不能增强网页的能力。如今，浏览器技术的发展非常快，通过浏览器提供的能力，网页还能获得设备操作系统很多权限，比如：文件系统权限、摄像头访问权限、音频访问权限、传感器设备权限等等。有了这些操作权限，网页才能像 NativeApp 一样发挥更多的作用。所以，我们把这种Web技术的应用称为 WebApp。

下面比较一下 WebApp 和 NativeApp 之间的特点。

  1. NativeApp 和 WebApp 都能在手机上完美显示，NativeApp 使用操作系统提供的 UI 框架构建页面，WebAPP 使用 HTML 和 CSS 技术构建页面。

  2. NativeAPP 的运行依赖设备操作系统，WebAPP 依赖浏览器运行。

  3. NativeAPP 有独立的安装包，WebAPP 的页面需要从服务端获取并在浏览器运行。

  4. NativeAPP 在无网络的情况下也可以单机运行，WebAPP 没有网络页面都打不开。

  5. NativeAPP 不一定需要 Server 的支持，WebAPP 一定需要一个 Server 提供页面和数据。

从开发 WebAPP 的角度，WebAPP 包含两部分，Client 端和 Server 端。Client 端提供用户可见的部分 — HTML 页面，Server 端提供用户不可见的部分 — 数据。在技术圈常听到前后端分离的概念，其实指的就是 Client端和 Server 端的分离，但不管怎么分离，Client 端一定需要一个 Server 来提供页面，还要有一个 Server 端为 Client 端提供数据。所以，Client端和 Server 端分离只是把提供数据的 Server 分离出来而已。

Client 端需要一个 Server 来提供页面这种行为还可以利用其它一些技术，比如，利用 Nginx 直接返回 HTML 文件，Apache 也可以做到，部署到 CDN 上也可以做到。这三种技术都比自己运行 Server 返回页面要更快。但弊端就是不够灵活，需要人工手动更新。一般各个公司的主页为了加载更快都采用 CDN 技术。

前后端分离并不是唯一的技术选择，在一些中小型项目前后端还是可以一体的，怎么进行技术选型完全看项目而定。

当你想独自开发一款 WebAPP，不管采用哪种技术，所有事情都是你自己干。那开发一个 WebAPP 都要干些什么事呢？

下面通过一些行为来分析开发 WebAPP 都需要做什么？

  1. 处理路由能力。一个网站都会提供多个地址的访问能力，比如 https://xinshengdaxue.com 可以访问新生大学的主页，https://web.xinshengdaxue.com/home/lessons 可以访问所有课程页面。一个地址代表一个访问路径，一般称为路由，WebAPP 必须具备分析不同路由的能力。

  2. 构建页面能力。WebAPP 提供页面是最基本的能力，构建 HTML 就是开发中最重要的工作，也是最繁重的工作。正因为繁重，在技术上才会采用前后端分离的开放模式，提供 HTML 页面的 Client 端由前端工程师完成，提供数据的 Server 端由服务端工程师完成。

  3. 操作浏览器能力。浏览器提供了很多功能，常见的有 Cookie 和 Storage。Cookie 和 Storage 都是浏览器的存储技术，利用这些技术可以在浏览器端缓存一些必要的信息。这些技术都可以通过查阅 Web API 文档获得。

  4. 提供页面和数据能力。如果前后端一体化开发时，WebAPP 的 Server 端必须提供页面和数据，以供 Client 端可以构建丰富的页面，以及存储用户操作带来的变化数据。

  5. 持久化数据能力。Server 端存储数据是基本的能力，一般采用第三方数据库来完成。常用的数据库有 mysql，sqlite，mongodb 等。开发中小型项目，选择一个最熟悉的数据库即可。

如果想学习开发 WebAPP，以上 5 点将是学习的主要方向，至于采取什么形式来构建 WebAPP 就无所谓了，选择一门感兴趣的技术即可。