01 
前面的话

如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器。其实服务器,并没有什么特别的,也就是一台昼夜不停运转的电脑罢了。每一台入网的机器,都会被分配一个ip,我们可以通过ipconfig / ifconfig这样的命令,知道我们电脑的ip地址。服务器本身,运行着服务器程序,他们监听着来源于网络的请求,并对请求进行响应。

比较常见的服务器程序,比如apache / Nginx / IIS等等,我们可以通过以下这样的一个小的实验,来了解网络中的客户端与服务器,是如何进行交互的。

实验:一个小的局域网

第一步:运行你电脑上的服务器程序(以apache为例,建议使用xampp / wamp这样的软件包,win下一键安装,能省不少事。当然,喜欢折腾的同学和SA们肯定要一个一个装啦),在apache的www目录下放入一些网页文件,然后在浏览器的localhost下浏览网页。

第二步:在电脑上打开wifi共享软件,通过ipconfig / ifconfig命令查看本机在内网的ip,让手机连接电脑共享的wifi(或者是两者同连一个路由器的wifi),在手机浏览器的地址栏输入电脑的ip,进入电脑的服务器并浏览网页。

上面的小实验的第二步,就模拟了一个简单的浏览器+服务器系统(BS系统),也在一定程度上反映了网站基本的访问原理。同时,这也是Web前端开发中真机测试移动端页面的一个行之有效的方法;当然,你也可以通过这种方式,实现局域网络的文件共享。

继续深入一步,我们在浏览网站的时候很少使用ip直接访问的,而是用www.baidu.com这样的域名,域名与提供对应服务的服务器的ip地址通过DNS服务器相互对应。我们可以通过ping命令,也可以通过一些在线的工具,如http://ping.chinaz.com来获取一个网站的ip地址,有时候ping出来的ip是不一样的,一般和你使用网络的地点有关,这主要是为了将对服务器的请求分流,减轻服务器的压力,保证网站的访问速度(比如可以了解一下CDN)。(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

02 
开发的过程与设计的艺术

如何从0建立一个网站,这就涉及到软件产品的开发了。一般,会有以下几个职位。

产品(PM):负责对软件产品的功能,目标用户等许多部分,进行一个详细的归纳整理,包括前期的功能地位和后期的功能修缮;

设计(UE):对用户使用的产品界面、交互方式进行统筹和设计;

前端(FE):活跃于前端的程序员,负责使用代码实现设计师的设计,并与后端协调数据在客户端的渲染工作;

后端(BE):活跃于服务器端的程序员,为前端的渲染提供所需的数据;

系统(SA):保证开发过程中,对于服务器权限的管理与协调,以及服务器运行环境的提供,同时保证网站在生产环境中的平稳运行。

限于个人能力,我在此仅从前端和后端这两个角度,探讨网站实现的技术细节,其中会涉及许多具体的解决方案,供大家参考。

现在我们从这样的角度去看一个网站,我将他分为三层,视图层,数据层,以及控制数据在视图上的显示方式的控制器。

举个例子,一个留言板,他的数据层会包括留言者的留言内容、留言时间、留言者的信息等内容。这些数据,就像一张excel表格一样,存储在我们的服务器。而我们的用户肯定不希望看到一个简陋的表格,他们希望看到的至少是一个界面,数据内容被清新美观的显示在我们的浏览器上,而这个界面,也会随着数据内容的增删修改而做出相应的调整。存储表格数据的,就是数据层;用户看到的,就是视图层;让界面随数据产生改变,则是控制器的使命。

现在,从技术的角度我们去实现他。首先,前端工程师根据设计师的设计,做出视图层的模板,后端工程师也做好相应的数据存储工作,包括设计创建数据库、数据表等等。现在,基本的工作完成。继续下去,我们则有很多的选择。

选择一:后端渲染数据到视图

这种方法,就是前端将模板交给后端,告诉后端具体在哪个位置放什么样的数据,放的时候有什么具体的要求,剩下的渲染工作完全交给后端处理。这样的方法实现起来门槛低,而且由于服务器计算性能一般情况下强于客户机,后端来刷模板简单粗暴速度快,没有任何争议。缺点是后端工程师由于处理了数据填写的工作,相当于涉及了视图层(即前端)的工作内容,导致分工不够明确;同时,由于是后端更新数据,而后端代码是运行在服务器上的,每次要更新都要刷新页面重新请求一个完整的页面,某种意义上来说,用户体验相对较差。

选择二:后端将数据生成为小的数据文件,前端获取数据并由前端更新视图。

这种方法,涉及到前端的Ajax。说白了就是在后台异步加载另外一个页面,在加载过程中用户不会看到任何变化,而加载完成后,相当于在前端程序里获取了一个字符串,剩下的任务就是将这个字符串解析取出里面的数据并将对应内容渲染到相应的位置上。通过这种方式,首先可以保证视图层显示的内容都完全由前端工程师负责,分工明确,实现了一定程度上的前后端分离;同时,与服务器交互的文件大小,从一整个页面缩小到了一个仅仅包含要更新的数据的小文件,交互的量减小,带来性能上的提升;另外,由于交互文件一般使用json这种多数编程语言都可以解析的数据格式,不仅可以给网页前端使用,也可以给移动端app的前端开发使用,统一了接口,扩展时减小了工作量。

选择三:单页应用(SPA)

我先解释一下单页应用,和传统网站相比,他更接近于移动端应用程序,其核心就是将路由控制在前端工程师的手里。核心技术除了上面的Ajax,还有pushState,又有人将两者合称为PJAX。

先说什么是路由,路由可以理解为你网站域名后面的内容,比如www.abc.com/p/123这样的网址,后面的/p/123就标明了一个路径。可以类比于我们电脑的磁盘,当我在路径的位置输入C:/p/123的时候,我希望看到C盘下p文件夹下123文件夹的内容,当123变成了456,显示的内容应该有些变化。如果456文件夹存在,显示该文件夹的内容;如果不存在,则会弹出错误信息提示不存在。对应我们的网站,如果当/p/123变成/p/456的时候,也应该给出对应的显示。路由由前端控制的含义,就是说,网站url的变化与对应的显示由前端处理。你的整个网站实际上只有一个页面,前端根据url的变化,通过Ajax异步加载需要的数据,然后通过pushState操作浏览器的历史记录,达到与浏览普通网站同样的效果。

SPA最大的优点,大概就是响应速度了。当然,使用SPA对前端的技术提出了相对比较高的要求。使用SPA的一般情况,是你要做一个类似于安卓app的网站,如淘宝的手机站和Gmail,都是相当典型的SPA。不过,虽然现在SPA很多,并不是所有的场景都适合使用SPA的。

淘宝收藏夹的架构:

作为访问量如此高的网站,淘宝是怎么做的。(首先,php的后台肯定是担负不起这样的访问量的。)在淘宝UED,他们介绍了“中途岛”项目,基本架构是:前端工程师使用Node.js进行模板渲染,保证模板的渲染由服务器完成提高效率;Node.js访问由java后台封装的高级数据接口,而java在访问数据库的时候,则是使用C语言来实现最有效率的访问。技术细节可以参考淘宝UED的博客。

03 
项目开发中值得一提的点

关于查阅资料和提问:

遇到问题先问搜索引擎,这我想应该都没有什么意见。用不了谷歌,可以从laod.cn下个hosts,翻出去的话,方法太多,不废话了。

当然了,找不到具体问题问人是不可避免的。但是当问题比较复杂的时候,比如前端这边处理浏览器兼容问题的时候,一定要有在线demo,一定要把问题描述的很清楚并且真的是自己解决不了了再问。关于提问的艺术,可以看看张鑫旭大神的博客(个人非常喜欢,强烈推荐前端同学关注),如何提问才能进阶成为前端大神?,这篇文章对提问需要注意的点说的非常明确,请大家,无论是不是做前端,最好都看看。

任务进度管理:

虽然在学校里做东西,很少会有严格的工期安排、进度计划这些,但是在公司里,这些问题肯定是会遇到的。推荐几个工具,大家可以了解一下:tower和微软的project。

版本控制:

几乎没有任何成功的软件项目,是一个敲代码敲出来的,况且,就算是一个人敲代码,也应该对自己所做的改动有所记录和备份。在这里,我将介绍两种使用git进行版本控制的方式,供大家参考。

分支管理:

整个项目是一个大的仓库,这个大的仓库由于不同的修改而有不同的分支。一般来说,有master(稳定发布版本) / dev(开发中的相对稳定版本) / 开发人员个人分支(集中个人的修改)这些。一般的工作过程为,个人会在个人的分支上修改,然后push到dev分支,稳定下来的dev分支作为新的版本再合并到master分支。那一部分出了问题,就在哪一部分进行修改。git在你每次更新分支的内容时都要求你输入一段描述修改的文字,这在将来的版本控制和回退上都会很有帮助。

仓库管理:

个人理解其实是扩大化的分支管理,项目负责人建立项目仓库,项目开发人员fork母仓库,做了自己的修改后,对母仓库发出pull request,申请合并到母仓库。这一方法最大的优点,就是方便负责人进行code review,保证代码质量;同时也可以方便对开发人员的贡献度进行考核。通常公司里会选取这种方式。

项目的持续集成:

持续集成大家在学校也很少会接触到,但是当你在公司里,遇到大项目的时候,就肯定会接触到持续集成这方面的需求和工具。个人认为持续集成更像是一种思想,在项目的开发过程中,前端和后端在开发过程中不断的对接,测试样例提前都做好,然后自动化构建项目,自动化测试等等。每当代码库更新(当然,本地构建失败的代码是不允许提交到仓库的)的时候,自动构建脚本、自动测试脚本都会跑出一个更新后的产品给大家看,方便团队中的每一个人掌握项目的情况和目前的进度。

实现这种思想,就需要与之配合的工具,关于持续集成这方面现在在企业中目前还没有“最佳实践”,不过确实有很多前人的经验供咱们借鉴,如《持续集成最佳实践》里面对于持续集成实践进行了思考

04 
几点建议

在学习开发技术的过程中,个人给大家一点建议:

  • 前期初学的时候,千万不要求多

道理大家都明白,什么都想学肯定什么都学不好。如果一个人都能学过来,那么我们还搞这么多方向做什么。有些东西,当你需要的时候,自然就会接触到;而那个时候你再学,你肯定是在实际项目中遇到了什么问题。有问题导向的学习是非常有效率的,所以千万不要求多,稳住。

  • 千万不要刚刚入门就觉得自己什么都会了

这是我经历过的阶段,当时被一位学长拉了回来,也是非常幸运。这个阶段你觉得自己清楚很多东西了,感觉只要查查资料自己什么都能解决。其实想一想,这么多人研究这个领域,你怎么可能马上就看透了他呢。每个领域,都有很多坑,每一个坑也都会有至少一个与之对应的解决方案,而处理项目和解决方案,是一条漫长的道路。知识是越学越细的,本来你以为前端只能写写页面,深入学习以后,你才会发现,js可以写机器人;可以调系统API做桌面应用;哪怕只是在写页面这部分也有着页面渲染时间、内存泄漏等各种各样的问题和与之对应的层出不穷的解决方案。所以,低调,前面的路还很长。

  • 学到一定程度,可以多去看看

我们知道书本上的知识肯定不是最新的,技术在不断的发展。可能你现在用的书上的代码都已经过时到运行不了了。这个,其实很正常,毕竟做网络这方面,怎么可能光靠书来追踪技术呢。所以多去看吧,github,各种社区、论坛,线下的技术交流,这些可以给你带来最新鲜的养分。所以,世界这么大,出去多看看。

05 
结语

写代码,按照自己的意愿去构建一个产品,一个项目,哪怕再小,依然是自由的。哪怕是在实现别人的需求,可以做好,做精,做出一套最佳的解决方案(没有最佳,只有最适合项目),给别人留下轮子去做好二次开发,依然是自由的,是有意义的。

学web前端开发写给新手的建议,超实用!的更多相关文章

  1. 学web前端开发有前途吗

    web前端开发现在如此火爆,可以说是引领了IT培训行业的一个潮流,那么web前端开发都要学些什么知识呢?为什么这么火有前途吗?现在行业很需要这种人才吗?还是大家盲目跟风,随大流,下面小编对web前端做 ...

  2. 学Web前端开发,选择培训学校是关键--青岛思途

    互联网+的提出,催生了Web前端开发行业更大的就业空间,其行业热度也正呈爆炸式增长.专业人才供不应求导致了从业者薪资的居高不下,一般来说Web前端工程师的年薪可达15w以上,工作3~5年后通常可达到1 ...

  3. Web前端开发好学吗?谈谈一位学姐的前端工程师之路

    我的第一篇博客....... 我是一名工科女,因高考失利与理想的院校擦肩而过,从而选择了机电专业.毕业后找工作时才发现机电专业的工作并不太适合我.我的父母也支持我转专业求职,但这个过程有时会让我迷茫. ...

  4. 第十四章 web前端开发小白学爬虫

    老猿从事IT开发快三十年了,接触互联网也很久了,但自己没有做过web前端开发,只知道与前端开发相关的一些基本概念,如B/S架构.html标签.js脚本.css样式.xml解析.cookies.http ...

  5. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  6. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

  7. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  8. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  9. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

随机推荐

  1. update:我的Emacs配置文件

    ;;设置字体用的  防止中文变成无法识别的框框 (set-default-font "Consolas-11") (set-fontset-font "fontset-d ...

  2. 201521123080《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程: 操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己 ...

  3. 201521123001《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  4. 201521123028 《Java程序设计》第12周学习总结

    1. 本周学习总结 流与文件 I/O流:Input/Output处理的简称,本质上就是一个数据序列.分为输入流Input Stream和输出流Output Stream. 最基本的可处理数据单位-by ...

  5. 201521123030 《Java程序设计》 第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  6. 通过Excel认识POI

    1.POI是什么 Apache POI - the Java API for Microsoft Documents,顾名思义,Apache的三方包,用来操作微软office文档的,多数时候用来操作e ...

  7. websphere部署 hibernate jpa & Error 500: javax/persistence/OneToOne.orphanRemoval()Z

    WebSphere 7 & Javax/Persistence/OneToMany.OrphanRemoval() Error 文章出处:http://www.mkyong.com/websp ...

  8. docker应用笔记

    first install it: 首先安装: apt install docker.io 基本概念: 镜像:相当于虚拟机里的磁盘文件,里面有一套配置好的系统,应用程序 容器:相当于一个虚拟机实例,一 ...

  9. C#中的两把双刃剑:抽象类和接口

    问题出现: 这也是我在学习抽象类和接口的时候遇到的问题,从我归纳的这三个问题,不难看出这也许是我们大多数程序员遇到问题的三个阶段, 第一阶段(基础概念):就象问题1一样,这部分人首先需要扫清基础概念的 ...

  10. 【京东账户】——Mysql/PHP/Ajax爬坑之用户登录

    一.引言 实现京东的账户项目,功能模块之一,用户登录.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:登录表 添加三条记录 CREATE ...