【干货】产品经理从零到一技术进阶：不懂代码也能愉快地与开发相

　　这是NEXT产品经理从零到一技术进阶：不懂代码也能愉快地与开发相处线下活动的笔记。主讲者张元一，产品原型工具墨刀的创始人，见证了Web开发从99年HTML4。0到去年12月HTML5最终定稿这之间整个Web开发变迁史的15年码龄全栈工程师。
　　概览
　　以下这张图就是元一分享的干货内容，它基本涵盖了一个初级码农需要知道的所有基础入门知识。但这张图的目的并非用来吓人，这其中的所有技术名词，将以最通俗易懂的方式串联起来即我们上网时的慢动作解析：打开一个网页或App，这背后都运用了那些技术来让这个网页和App的内容呈现在浏览器和手机上；驱动这些动作背后的技术名词都是什么，各自有着怎样的优缺点，彼此间是如何协作和运转的，以及怎样合理地评估技术能力和开发难度。当然，元一也推荐了丰富的学习资料。
　　这中间涉及的技术知识，前端包括HTML，CSS，JavaScript，jQuery以及B后端包括HTTP服务器，后端编程语言，数据库以及Cookie和S移动开发分为原生，混合式，HTML5，以及不同的移动端技术选择在功能和开发成本上的比较。
　　什么是前端？什么是后端？二者是如何配合运转的？
　　前后端的划分，可以简单地理解为凡是运行在用户设备上的技术都可以称为前端技术（比如HTMLCSSJS，甚至移动设备的ObjCSwift）；而后端的作用就是负责将这些东西封装在HTTP的数据包中然后通过网络传送到前端。当然除了这些前端文件，后端还有一个更重要的职能，即保存和提供用户数据，比如移动端常见的JSON就是目前最流行的在后端和前端之间传输的一个文件格式。
　　前端与后端是如何配合的？如上图，以Web端为例，在浏览器输入一个网址后，浏览器向服务器发送了一个HTTP请求；服务器通过一个HTTP响应，把显示这个网页所需要的资源传回给了浏览器。而需要在浏览器中执行的技术，HTMLCSSJavascript等就叫做前端；需要在服务器端执行的、通常我们看不到技术就叫做后端。
　　Web前端的运行逻辑
　　假设我们要访问Google，从我们在浏览器输入Google。com到最后这个页面出现在眼前，这其中涉及许多前端的技术反应和代码组合，总体而言可以简化为两步：
　　1浏览器向Google的服务器发送了一个请求。
　　2服务器收到了一个HTTP响应，这个响应中就包含了执行这个命令所需要的所有资源（注：可以通过Chrome浏览器的开发者工具来进一步观察HTTP协议的运行情况；下图为Google的HTTP协议运行情况）。
　　上图这个界面看起来很复杂，但对于非程序员而言，HTTP协议运行情况只要关注其中的几个关键部分：第一列，即资源的URL；第四列是这个资源的类型。在第一个请求和后续的请求之间有一根蓝线，即进度条。而HTTP协议中运行的项目越少，浏览器加载的速度越快。图中Google就处理得很好，只有10个左右的请求。
　　Web前端技术语言介绍
　　HTML和带样式的HTML
　　HTML就是一组标签和文本的组合，是一个最基本的网页。它已经包含了网页常见的元素，实际上在Web早期的很长一段时期内，网页都是这个样子。后来随着使用网络的人群越来越广泛，在HTML3。0中引入了对网页样式的定义，某种程度上可以说，也是从这个时候开始产生了网页设计师的角色。
　　CSS
　　带样式的HTML也拥有一个缺点，它需要为每个标题和文字都设定样式，工作量非常庞大。CSS就是在这样的情况下诞生了。CSS，又称叠层样式表，简言之是一种用来表现HTML文件样式的样式设计语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制，实现基础的静态的交互设计；而CSS目前的最新版本CSS3能够真正做到网页表现与内容分离。
　　Javascript
　　差不多在CSS诞生的同一时间，大家开始觉得这样静态的网页似乎略显无聊，能不能给网页加入一些可以动起来的元素？比如点击一个按钮之后变个颜色。当时网景公司的工程师BrendanEich就给他们自家的浏览器引入了这种实现动态效果的脚本语言，这就是Javascript（简称JS）的诞生。所以通俗来说，Javascript就是用来给HTML网页增加动态功能，实现更炫酷的交互。
　　提到Javascript，就得提一下jQuery。jQuery是一个优秀的Javascript库。jQuery使用户能更方便地处理HTML，它能够使用户的HTML页面保持代码和HTML内容分离，通过jQuery，可以不用在HTML里面插入一堆JS来调用命令，只需要定义ID即可。此外，由Twitter设计师MarkOtto和JacobThornton合作开发的Bootstrap也是一个受欢迎的前端框架。
　　HTML5简史和响应式设计
　　HTML在刚诞生的前10年发展是非常迅速的，在1999年，我们现在常说的HTML5的上一个版本HTML4。0。1就已经发布了，那么为什么从4。0到5。0会拖了15年之久？
　　首先，HTML4的发布时间和门户时代（即Web1。0时代）是基本吻合的，也就是说HTML4实际上是为门户型网站设计的。在门户网站经历的4，5的年发展之后，大家开始觉得只是单一接受信息的互联网太过无聊枯燥了，差不多2004、2005年开始，大家希望在网页中加入更多的互动元素，也就是我们常说的Web2。0。
　　但是这个时候大家就发现，为Web1。0设计的HTML4无法胜任这个工作，但是有另外一个技术却非常适合，那就是Flash。所以在Web2。0的早期，当时最炫酷的网站有很多是完全用Flash开发的，在以后的很长一段时间里，有很多网站都是HTML和Flash的混合式网站。所以在20052010年这段时间，HTML5中的新标准主要是为了取代Flash。
　　刚刚搞定了Flash，又进入了移动开发时代，所以HTML5又花了5年时间制定各种针对移动平台的标准。但是到目前为止，虽然HTML5已定定稿，但是对移动平台的适应其实还在进行中，所以在未来很长一段时间内，就像当初的Flash一样，我们会看到越来越多的混合式应用。
　　在iPhone出现之前，大家访问Web的主要方式还是通过桌面浏览器，所以设计网页时只要考虑桌面浏览器的显示效果就足够了。但是在iPhone和iPad出现之后，就需要考虑同一个网页在不同设备上的显示效果，第一个问题的答案就是响应式，响应式的核心就是让同一个网页可以在不同设备上呈现出不同的显示效果，主要是通过CSS来实现的。
　　除了响应式设计，HTML在移动端遇到的另外两个问题就是如何利用移动设备的各种传感器，比如GPS，摄像头等等；以及性能问题。为了解决这些问题，HTML5中添加了地理位置，拍照，3D动画加速等等API，可以部分的利用手机设备的一些新硬件，并且新的API还在不断的加入进来，这也是为什么现在的HTML5应用可以越来越炫酷的原因。但是，HTML5并不是专为移动设备设计的，它是由HTML5，CSS3以及大量的JavascriptAPI共同组成的一个标准合集，微信中的HTML5应用只是HTML5应用场景中的很小一部分。
　　如何判断一个前端的能力？
　　关于前端，可以简单的把它理解为，凡是在我们的电脑，手机上运行的技术，HTML，CSS，Javascript，这些都属于前端技术，使用这些技术的我们就称为前端工程师。如何判断一个前端的能力呢？下面是一个简单的前端能力链：
　　1只会HTMLCSS的，这种我们俗称切图的，基本上就是淘宝几十块切一张图的；
　　2懂一些简单的Javascript，主要是使用一些现成的框架，比如jQuery，bootstrap等等；
　　3知道jQuery和Bootstrap的局限，必要时能写一些原生的JSCSS代码；
　　4对JSCSS非常了解，执着于使用浏览器的各种最新特性来实现各种炫酷效果，这种我们成为炫技派；
　　5可以自己写出类似jQueryBootstrap这样的前端框架供其他人使用。
　　前端学习资料
　　http：www。w3schools。com
　　http：onemonth。com
　　http：www。codecademy。com
　　https：github。comalexwhathappenswhen
　　https：qdan。melistVNBugw7ObupFRdlE
　　大家可能比较关心如果我要开发一个网站需要多少时间？这个问题虽然很难回答，元一还是来试着回答了。现在前端有了jQuery，bootstrap这样的框架，后端又有了RubyonRails这样的快速Web开发框架，如果从头学的话，像是一个简易的Pinterest，大概一个月就可以了。如果是一个有经验的程序员，可能1个星期就可以开发出一个大概的原型出来。
　　后端服务器
　　后端的任务实际上就是向前端提供需要显示网页和APP内容的数据，可能是HTML，也可能是JSON数据，也可以是音视频或者PDF文件。简单的来划分，一个服务器包含3个部分：
　　1HTTP服务器
　　2应用服务器
　　3数据库
　　HTTP服务器的唯一任务就是把需要返回给客户端的资源文件封装在HTTP数据包里，这个资源有可能是它后面的应用服务器动态生成的，也有可能是保存在硬盘上的静态文件。这是所有后端程序都必须有的，也是直接和我们的浏览器通信，返回给我们数据的程序。它的作用就是把它后面的编程语言生成的各种HTMLCSSJavascript，打包成一个HTTP请求，然后再封装到一个TCPIP的数据包里发回给我们。而最常用的两个HTTP服务器叫做Apach和Nginx。
　　应用服务器就是通常意义上所说的码农负责的部分。他们的职责就是生成前端需要的HTMLCSSJS交给浏览器。
　　后端语言
　　1。netjava
　　庞大，复杂。但Java的优点就是适合处理特别大的数据量，如果你的项目会很快实现大爆发，需要处理海量的请求，那么Java是一个不错的选择。
　　2PHP
　　可以快速上手，相比其他语言，可以更快的为应用添加各种新功能。当然，可维护性就另当别论了。
　　3Ruby
　　非常接近自然语言，基本上即使不懂编程，也能看明白70或80。04年出现了一个用Ruby编写的Web开发框架RubyonRails，当时的效果是非常震撼的，以前需要一个团队才能搞定的事情，使用RubyonRails后1个人就可以胜任了，所以RubyonRails在极短的时间内就成为了Ruby的代名词，也成为了新手学习Web开发的不二选择，但是Ruby语言也并非十全十美，快的同时，他的最大短板就是性能。Twitter最早就是使用RubyonRails开发的，但是随着用户数的逐步增长，Twitter的宕机开始变得非常频繁，后来他们迫不得已将整个系统从Ruby迁移到到了一个从Java派生出来的语言Scala。
　　4node。js
　　简单来说，可以把node。js理解为跑在服务器上的javascript，再直白一点，就是一个跑在服务器上的浏览器，因为node。js最早就是从chrome浏览器的Javascript引擎V8中剥离出来的。相比Ruby，Node。js程序可以获得更高的并发性能，这在一些高并发的场景下（比如群聊，多人协作等）会很有优势。
　　5其它（python，closure等）
　　6无后端（leancloud）
　　无后端编程是最近的一个新趋势，但她并非说是真的没有后端，而只是把后端交给一些第三方的云平台，比如Leancloud，Firebase等。如果你开发一个手机App，这样的好处就是你可以在早期没有后端程序员的情况下快速开工，像Leancloud这样的云平台已经可以胜任大部分的应用场景，如果后期业务逻辑复杂之后再寻找合适的后端工程师迁移也不迟。
　　7最强编程语言Lisp
　　如果要评选一个最强的编程语言，该是哪个呢？答案就是Lisp。为什么是Lisp？Lisp的作者在很早以前就从数学的层面总结了一个完美的编程语言应该具备的9种能力，而Lisp就是为了配合他的这个理论而产生出来的语言。HackerNews是由YC的创始人PaulGraham开发的，而PaulGraham本身就是一个Lisp程序员，他为了开发HackerNews，专门发明了一种新语言叫做Arc，但因为它是基于Lisp的，所以也被归为了Lisp的方言之一。
　　数据库
　　我们平常访问的大部分网站都是需要登录操作的，登录之后我们看到的就是只和自己相关的那部分内容。这些用户信息是保存在什么地方的呢？这就需要用到数据库。关于数据库，代表性的有两个：
　　1MySQL
　　2MongoDB
　　MySQL是最常用的结构化数据库，也是大多数创业公司的选择。为什么是结构化的？就是说它的表的结构是固定的，比如我们常见的User表在MySQL中就是这样的：
　　如果我们需要取得一条用户记录来检查他输入的密码是否正确，这时我们就需要使用SQL，SQL就是结构化查询语言。
　　简单来说，SQL数据库保存的是结构化数据，NOSQL数据库则可以保存非结构化数据。举个例子，还拿上面的用户表来举例，如果我们现在想要给产品集小妹增加一些额外的属性，比如她给某个产品点赞可以效果x2，那么如果是SQL数据库，我们就需要给数据库增加一个新的字段来保存这个属性：
　　但是如果是MongoDB这样的NOSQL数据库，我们就不需要给所有用户都增加一个x2的属性，只需要给产品集小妹单独增加就可以了，NOSQL中保存到数据是如下这个样子的：
　　Cookie和Session
　　服务器要处理成千上万用户的请求，那么他是如何区分每个用户，并返回给每个用户他所需要的内容的？这就要涉及到Cookie和Session。我们可以将Cookie理解为是服务器给每个用户分配的唯一ID，这个ID由用户浏览器保存，而Session则是服务器为了维护这个会话在服务器端保存的与cookie对应的用户数据。
　　移动端开发
　　移动端和浏览器的区别就在于，大部分App，我们打开的一瞬间，就已经看到了它的界面，而不用再去向服务器来拿显示界面的HTML等文件。所以移动端，开发原生应用所运用到的技术（比如ObjectiveC，swift）就相当于前端的HTML，只不过它是直接保存在应用本地的。这样就产生了一个问题：如何来获取应用数据？如果是网页应用，我们可以直接将数据包含在HTML中一并反馈给浏览器；但是对于移动应用就需要有一个专门的协议来传送应用需要的数据，这就是JSON。
　　移动应用的前端技术，目前来说主要有以下三种：
　　1原生
　　2混合式
　　3HTML5
　　HTML5必经要经过浏览器这个中间层，所以在性能上多少会有些损失，所以如果你的应用对性能特别敏感，原生就会是比较好的选择；对于普通的性能要求没那么严格的应用来说，HTML5是完全可以满足的。而如果已经有了一个移动端的网站，这种情况下混合式就会是一个比较好的选择，它可以最大程度的利用已有的资源。如果说你是从头开发一个移动应用，并且这个应用对用户体验的要求也不是特别严格，那么HTML5就会是一个很好的选择，HTML5移动应用比较显著的应用就是Dailycost。
　　如果说开发一个原生应用需要46周，那么同样功能的应用如果我们把其中的一部分用HTML来实现，那么可能就只需要34周的时间，但是如果我们全部使用HTML，可能就只需要12周。