产品浅层技术概念分享

本文主要是在元一的技术分享的基础上，整合而来的。里面由于整合了较多的人的知识点，所以出处太多了，就没写，请看到的作者原谅下啊。对于灵魂手残党，本文的核心就是文章最后的灵魂手稿，哈哈哈哈！

1 前后端概述

1.1 前后端划分

在你手机、电脑（客户端）上跑的代码是前端，在机房里（服务器端）跑的代码，加存取数据工作的是后端。

1.2 前后端交互

前端与后端是如何配合的？如上图，以 Web 端为例，在浏览器输入一个网址后，浏览器向服务器发送了一个 HTTP 请求；服务器通过一个 HTTP 响应，把显示这个网页所需要的资源传回给了浏览器。而需要在浏览器中执行的技术，HTML / CSS / Javascript 等就叫做前端；需要在服务器端执行的、通常我们看不到技术就叫做后端。

打个比喻：

现在有个家具工厂，在外面开了个门店（客户端）。一天，有个用户要买张床（产品）。店里没有，把装在文件袋的产品要求（客户端HTTP请求），快递给工厂（服务端）。工厂收到后，根据要求开始加工，把原料加工成床的零件（服务端返回的响应），发给门店。门店收到货后，把床组装好给用户，最后用户得到了自己要求的床了。

2 前端

2.1 前端开发语言相关

Html：全称HyperText Markup Language 超文本标记语言，搭建网页的基础语言。文档写起来并不复杂，但是功能很强大，而且什么平台都能用，什么电脑都能用。

（2）CSS：但是想网页更精美更酷炫，就需要用到CSS语言了。CSS能够对网页中对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

（3）Javascript：如果想要网页有更酷炫的交互，就要用到Javascript。它是通过嵌入到html中来实现自身功能，主要用于添加交互行为，可以在多平台下运行（如Windows、Linux、Mac、Android、iOS等）,还可以控制cookies，等等吧。

（4）jQuery：这是一个时下最流行的Javascript 工具库，主要面向查询（Query）。简单理解，就是javascript里面那些需要用一行行代码实现的体力活，在jQuery里面可以直接打包成模块，调取对应的接口使用，解放了开发者更多的时间。这种模块化的使用方式让开发者可以很快就开发出酷炫的页面。

（5）Bootstrap：受欢迎的前端框架，它包含了十几个可重用的组件，比如导航栏、下拉菜单、按钮；十几个自定义的jQuery 插件，定义好了样式和交互，如滚动条、弹出框等，直接成套拿来用就行了。

给个总结：

打个比喻：

就好比产品是一个妹纸，HTML是一个不化妆，穿便服的妹纸（有妹纸，才有基础啊）；CSS就像是个妹子穿好看的衣服，化魅力的妆；但只有HTML和CSS，你只能看到静止的妹纸，就像照片一样，妹纸呢一动不动；Javascript就是让妹纸动起来，给你一个活的妹纸； jQuery就像是我们设计好的舞蹈动作，妹纸跟随跳舞动作舞动起来，魅力四射啊！而Bootstrap则像是一个辅导老师，她教穿衣和化妆的技巧，让妹纸衣服和化妆更搭配；还可以帮你设计多套舞蹈动作，让妹纸表演。

———————————————————————————————————————

扩展1：Bootstrap内容

（1）基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。

（2）CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。

（3）组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

（4）JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。

（5）定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

———————————————————————————————————————

扩展2：架构、框架、模式、模块、组件、插件、控件、中间件

（1）架构：软件架构，也成称为软件体系结构，简单地说就是一种设计方案，将用户的不同需求抽象成组件，且能够描述组件之间的通信和调用。软件架构会分析工程中的问题，针对问题设计解决方案，针对解决方案分析应具有的功能，针对功能设计软件系统的层次和模块及层次模块之间的逻辑交互关系，确定各个功能如何由这些逻辑实现。开发人员可以根据软件架构分析出来的层次和架构进行软件编写。

（2）框架：软件框架，是软件开发过程中提取软件的共性部分形成的体系结构。框架不是现成可用的应用系统，而是一个半成品，是一个提供了诸多服务，供开发人员进行二次开发，实现具体功能的程序实体。

框架与架构的关系：框架不是架构，框架比架构更具体，更偏重于技术，而架构更偏重于设计；架构可以通过多种框架来实现。

（3）模式：设计模式强调的是一个设计问题的解决方法，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

框架与设计模式的关系：设计模式研究的是对单一问题的设计思路和解决方法，一个模式可应用于不同的框架和被不同的程序语言所实现；而框架则是一个应用的体系结构，是一种或多种设计模式和代码的混合体。设计模式的思想可以在框架设计中进行应用。

架构与设计模式的关系：设计模式研究的是对单一问题的设计思路和解决方法，范畴比较小；而架构是高层次的针对体系结构的一种设计思路，范畴比较大。一个架构中可能会出现多个设计模式的思想。

（4）模块：根据不同的标准，通常会说程序模块或功能模块，程序模块指的是一段能够实现某个目标的成员代码段，功能模块则用来说明一个功能所包含的系统行为。定义模块的原则是：高内聚和低耦合。

（5）组件：组件是封装了一个或多个程序模块的实体。组件强调的是封装，利用接口进行交互。组件也称为构建。插件是组件的一个子类，就是将组件中具有某些特点的组件归为插件。

（6）插件：插件属于组件，插件是组件的一个子类，就是将组件中具有某些特点的组件归为插件。插件是一种电脑程序，通过和应用程序的互动，来为应用程序增加一些特定的功能，仅靠插件是无法正常运行的，需要依赖于应用程序才能发挥自身功能。插件和应用程序之间通过接口进行交互。

（7）控件：可视化的组件。

（8）中间件：通过系统软件和应用软件之间连接的软件，以便于软件各部件之间的沟通。

———————————————————————————————————————

2.2 HTML5标准

HTML5 是HTML的最新标准，设计目的是为了在移动设备上支持多媒体,因为以前的HTML4和Flash进行配合的。

后来进入了移动开发时代，所以 HTML5 又花了5年时间制定各种针对移动平台的标准。但是到目前为止，虽然 HTML5 已定定稿，但是对移动平台的适应其实还在进行中。

在 iPhone 出现之前，大家访问 Web 的主要方式还是通过桌面浏览器，所以设计网页时只要考虑桌面浏览器的显示效果就足够了。但是在 iPhone 和 iPad 出现之后，就需要考虑同一个网页在不同设备上的显示效果，第一个问题的答案就是响应式。响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。响应式的核心就是让同一个网页可以在不同设备上呈现出不同的显示效果，主要是通过CSS来实现的。

除了响应式设计，HTML在移动端遇到的另外两个问题就是如何利用移动设备的各种传感器，比如 GPS，摄像头等等；以及性能问题。为了解决这些问题，HTML5中添加了地理位置，拍照，3D 动画加速等等 API，可以部分的利用手机设备的一些新硬件，并且新的 API 还在不断的加入进来，这也是为什么现在的HTML5应用可以越来越炫酷的原因。但是，HTML5并不是专为移动设备设计的，它是由HTML，CSS3 以及大量的Javascript API共同组成的一个标准合集，微信中的HTML5应用只是HTML5应用场景中的很小一部分。

2.3 前端能力划分

关于前端，可以简单的把它理解为，凡是在我们的电脑，手机上运行的技术，HTML，CSS，Javascript，这些都属于前端技术，使用这些技术的我们就称为前端工程师。如何判断一个前端的能力呢？下面是一个简单的前端能力链：

Level 1：只会 HTML/CSS 的，这种我们俗称切图的，基本上就是淘宝几十块切一张图的；

Level 2：懂一些简单的 Javascript，主要是使用一些现成的框架，比如 jQuery，bootstrap 等等；

Level 3：知道 jQuery 和 Bootstrap 的局限，必要时能写一些原生的JS/CSS 代码；

Level 4：对JS/CSS非常了解，执着于使用浏览器的各种最新特性来实现各种炫酷效果，这种我们成为炫技派；

Level 5：可以自己写出类似 jQuery / Bootstrap 这样的前端框架供其他人使用。

3 后端

后端的任务实际上就是向前端提供需要显示网页和 APP 内容的数据，可能是 HTML，也可能是JSON 数据，也可以是音视频或者 PDF文件。简单的来划分，一个服务器包含3个部分：(1)HTTP 服务器；（2）应用服务器；（3）数据库。

3.1 HTTP 服务器

HTTP 服务器唯一任务就是把需要返回给客户端的资源文件封装在 HTTP数据包里，这个资源有可能是它后面的应用服务器动态生成的，也有可能是保存在硬盘上的静态文件。这是所有后端程序都必须有的，也是直接和我们的浏览器通信，返回给我们数据的程序。它的作用就是把它后面的编程语言生成的各种 HTML/CSS/Javascript，打包成一个 HTTP 请求，然后再封装到一个TCP/IP 的数据包里发回给我们。而最常用的两个 HTTP 服务器叫做 Apache和Nginx。

———————————————————————————————————————

扩展3：前端HTTP请求

前端可直接使用JS发送和接收http请求。

———————————————————————————————————————

3.2 应用服务器

应用服务器就是通常意义上所说的码农负责的部分，进行逻辑处理。他们的职责就是生成前端需要的HTML/CSS/JS交给浏览器。

给个总结：

———————————————————————————————————————

扩展4：后台语言补充

（1）无后端（leancloud）

无后端编程是最近的一个新趋势，但她并非说是真的没有后端，而只是把后端交给一些第三方的云平台，比如Leancloud，Firebase等。如果你开发一个手机App，这样的好处就是你可以在早期没有后端程序员的情况下快速开工，像Leancloud这样的云平台已经可以胜任大部分的应用场景，如果后期业务逻辑复杂之后再寻找合适的后端工程师迁移也不迟。后台功能模块化，提供接口使用。

（2）最强编程语言 Lisp

如果要评选一个最强的编程语言，该是哪个呢？答案就是Lisp。为什么是 Lisp？Lisp 的作者在很早以前就从数学的层面总结了一个完美的编程语言应该具备的 9 种能力，而Lisp就是为了配合他的这个理论而产生出来的语言。Hacker News 是由 YC 的创始人 Paul Graham 开发的，而 Paul Graham 本身就是一个 Lisp 程序员，他为了开发 Hacker News，专门发明了一种新语言叫做 Arc，但因为它是基于 Lisp 的，所以也被归为了 Lisp 的方言之一。

———————————————————————————————————————

3.2 数据库

数据库(Database)是按照数据结构来组织、存储和管理数据的仓库。

当前主流的关系型数据库有Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL等。非关系型数据库有 非关系型、Cloudant、redis、redis。

3.2.1 数据库划分

（1）关系型数据库（Mysql和Oracle）

表和表、表和字段、数据和数据存在着关系

优点:

1.数据之间有关系，进行数据的增删改查的时候是非常方便的

2.关系型数据库是有事务操作的，保证数据的完整性和一致性。

———————————————————————————————————————

扩展5：事物的意义

事务由一个或多个sql语句组成一个整体，如果所有的语句执行成功那么修改将会全部生效，如一条sql语句将销量+1，下一条再+1，倘若第二条失败，那么销量将撤销第一条sql语句的+1操作，只有在该事务中所有的语句都执行成功才会将修改加入到数据库中。

———————————————————————————————————————

缺点：

1.因为数据和数据是有关系的，底层是运行了大量的算法

大量算法会降低系统的效率，会降低性能

2.面对海量数据的增删改查的时候会显的无能为力

3.海量数据对数据进行维护变得非常的无力

场景：

适合处理一般量级的数据（银行转账和钱）

（2）非关系数据库的（redis和MangDB）

为了处理海量数据，非关系数据库设计之初就是为了替代关系型数据库的关系

优点：

1.海量数据的增删改查是可以的

2.海量数据的维护和处理非常轻松，性能更好

缺点：

1.数据和数据没有关系，他们之间就是单独存在的

2.非关系数据库没有关系，没有强大的事务关系，没有保证数据的完整性和安全性

场景：

实际开发中，有很多业务需求，其实并不需要完整的关系型数据库功能，非关系型数据库的功能就足够使用了。

适合处理海量数据，保证效率，不一定安全（统计数据，例如微博数据）

简单总结：

用一种不精确但容易理解的方法来说：

关系型数据库 = 非关系数据库 + 关系功能

并且，【关系功能】会占用掉90%的硬件资源以及90%的计算时间。

很多互联网公司，有大量业务，不需要关系功能，非关系数据库就能搞定。因此，非关系型数据库就火起来了。

3.2.2 数据库示例

举个例子：

选2类数据库：

MySQL（关系型）：

redis（非关系型）：

MySQL是最常用的结构化数据库，也是大多数创业公司的选择。为什么是结构化的？就是说它的表的结构是固定的，比如我们常见的 User 表在 MySQL 中就是这样的：

User 表

company的表

如果我们需要取得一条用户记录来检查张三所属的公司类型，这时我们就需要使用 SQL，SQL 就是结构化查询语言，查询User和company两张表。

简单来说，SQL数据库保存的是结构化数据，非关系型数据库则可以保存非结构化数据。在redis这样的非关系型数据库中，以人名为主体，保存的数据是这样的：

查询的张三所属的公司类型时，根据K-V键值对，查就可以了。

举个例子，还拿上面的用户表来举例，如果我们现在想要给张三增加一些额外的属性，比如她给添加个邮箱email，那么如果是 SQL 数据库，我们就需要给数据库增加一个新的字段来保存这个属性：

但是如果是 redis 这样的非关系型数据库，我们就不需要给所有用户都增加一个email的属性，只需要给张三单独增加就可以了，数据库中保存的Value值是如下这个样子的：

3.2.3 其他相关

大部分的产品，大量的数据不需要进行相互关联，使用非关系型也就减少了上面所提到的功能关系对资源和运算的消耗。

而关系型数据中，有些字段虽然定义了，但是里面没有值。不过null值，类似于对象初始化，也是占有一定空间的。而非关系型数据库则可以不用null值。当数据众多时，可以降低存储空间，提高利用效率。

现有一些项目，重要的基础数据使用mysql数据库进行存储，如账号、密码。程序运行中产生的数据，如统计数据等，则保持在redis的非关系型数据库中。

视频、图片、文件，可以通过编码和指定路径存储，一般通过指定路径，来进行存储。

4 APP

移动端和浏览器的区别就在于，大部分App，我们打开的一瞬间，就已经看到了它的界面，而不用再去向服务器来拿显示界面的HTML等文件。所以移动端，开发原生应用所运用到的技术（比如 Objective C，swift，他们都是OS X和ios系统上的专用语言）就相当于前端的HTML，只不过它是直接保存在应用本地的。

这样就产生了一个问题：如何来获取应用数据？如果是网页应用，我们可以直接将数据包含在HTML中一并反馈给浏览器；但是对于移动应用就需要有一个专门的协议来传送应用需要的数据，这就是JSON。

移动应用的前端技术，目前来说主要有以下三种：

（1）原生

（2）混合式

（3）HTML5

HTML5必经要经过浏览器这个中间层，所以在性能上多少会有些损失，所以如果你的应用对性能特别敏感，原生就会是比较好的选择；对于普通的性能要求没那么严格的应用来说，HTML5是完全可以满足的。而如果已经有了一个移动端的网站，这种情况下混合式就会是一个比较好的选择，它可以最大程度的利用已有的资源。如果说你是从头开发一个移动应用，并且这个应用对用户体验的要求也不是特别严格，那么HTML5就会是一个很好的选择，HTML5移动应用比较显著的应用就是Dailycost 。

如果说开发一个原生应用需要4-6周，那么同样功能的应用如果我们把其中的一部分用HTML来实现，那么可能就只需要3-4周的时间，但是如果我们全部使用HTML，可能就只需要1-2周。

———————————————————————————————————————

Tips：APP开发语言

1.Objective C，swift，他们都是OS X和ios系统上的专用语言。

2.安卓原生可以使用JAVA和Kotlin，同时进行前后端编程，只是参数和配置不一样。

———————————————————————————————————————

打个贯彻始终的比喻：

现在有个家具工厂，在外面开了个门店（客户端）。一天，有个用户要买张床（产品）。店里没有，把装在文件袋的产品要求（客户端HTTP请求），快递给工厂（服务端）。工厂大致分为3块：收发部（HTTP服务器）、加工车间（应用服务器）、原料仓库（数据库）。收发部先确认下订单，让加工车间根据要求开始加工，把原料（原料可能是数据库的数据，也可能是前端请求中带的一些数据）加工成床的零件。零件完成后，再通过收发部打包好发给门店。门店收到货后，把床组装好给用户，最后用户得到了自己要求的床了。

如果店里直接有拼好的，就不用向工厂下订单了，直接就把床给客户。这就是前端写死或者直接读取前端缓存进行前端程序运行的，不用与后端程序交互。

门店发订单时，自己进行订单文件装在一个文件夹里，这就是js将前端的数据打包成HTTP请求。

而工厂发货时，收发部确认订单和把加工好的床的零件打包好，这就是相应的后端的HTTP服务器的工作。

因为html必须经过浏览器这层，而原生APP不用，所以性能更好，这就是没有中间商赚差价的好处，多一层流转就少一点效率。

5 系统对接

API：应用程序编程接口（Application Programming Interface），一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

SDK：软件开发工具包（Software Development Kit），包括广义上指辅助开发某一类软件的相关文档、范例和工具的集合。

打个比喻：

API 就是乐高积木的各种颗粒。

SDK就是一大包乐高积木，里面有颗粒（API），有各种小工具。

APP就是最后你搭出来的一艘飞船。