ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

web发展史和对前后端分离的一些思考

2020-08-29 21:34:36  阅读:234  来源: 互联网

标签:web 发展史 浏览器 前端 JavaScript 模式 思考 服务端 页面


1989年,在欧洲粒子物理实验室的IT部门工作的Tim Berners-Lee向其领导提出了一项提议:使来自世界各地的远程站点的研究人员能够组织和汇集信息,在个人计算机上访问大量的科研文献,并建议在文档中链接其他文档,这就是Web的原型。1990年Tim以超文本语言HTML为基础在NeXT电脑上发明了最原始的Web浏览器。1994年底,由Tim牵头的万维网联盟(World Wide Web Consortium)成立,这标志着万维网的正式诞生。我们不难看出,由于项目上线之初的目的是解决文献的分享问题,所以早期的web是以HTML为基础的,纯静态的网页,也就是说网页不具备交互功能,我们只能单方面的接受服务器提供给我们的信息,我们称这之为web 1.0时代。

​ 由于先天不足,静态页面慢慢的已经不能满足用户的需求,动态页面技术如PHP、JSP、ASP.NET相继诞生。页面从此可以获取服务器数据信息。这也催生了论坛和搜索引擎的大爆发,互联网世界从此面目一新。但是在Web的早期阶段,前端页面要想获取后台信息需要刷新整个页面加之那个年代“令人捉鸡”的网速,用户体验非常糟糕。对于开发者来说这一时间段的前端开发重度依赖开发环境,开发效率低。这种架构下的前后端协作有两种模式:第一种是前端写 DEMO,写好后,让后端去套模板。好处是 DEMO 可以本地开发,很高效。不足是还需要后端套模板,有可能套错,套完后还需要前端确定,来回沟通调整的成本比较大; 第二种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发。好处是 UI 相关的代码都是前端去写就好,后端不用太关注,不足就是前端开发重度绑定后端环境,环境成为影响前端开发效率的重要因素。前后端职责纠缠不清也成为了程序员们工作中各种矛盾的导火线。

​ 2005年,AJAX(Asynchronous JavaScript And XML,异步 JavaScript 和 XML) 被正式提出并开始使用。AJAX是一项革命性的技术,极大的提升了用户体验。随着AJAX的流行,像Facebook这样的社交网络开始变得繁荣起来。随着AJAX和CDN(Content Delivery Network 内容分发网络) 的应用SPA(Single Page Application)单页面应用时代的时代来临了。SPA时代,前后端的分工一下子变得非常明确,前后端的关键协作点是接口回过头来看看的话,这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript,浏览器端变得很复杂。类似 Spring MVC,这个时代开始出现浏览器端的分层架构。

​ 随着浏览器之间竞争的白热化,各种浏览器你方唱罢我登场。市场的碎片化问题越发严峻,不同浏览器的不同标准的适配浪费了开发人员的大量精力。为了解决兼容性的问题,jQuery等前端框架迎来了长足的发展,尤其是jQuery,一时间成为了网站的标配。另外值得一提的是,在这一次的浏览器大战中,各家浏览器厂商都在提升JavaScript的运行效率。而谷歌开发的chrome浏览器凭借这其高效的JavaScript引擎V8脱颖而出。而正是得益于此,一年后事件循环的异步I/O框架—Node.js诞生。我们迎来了NodeJS全栈时代,NodeJS的兴起,JavaScript开始有能力运行在服务端。这意味着可以有一种新的研发模式:

  • Front-end UI layer 处理浏览器层的展现逻辑。通过 CSS 渲染样式,通过 JavaScript 添加交互功能,HTML 的生成也可以放在这层,具体看应用场景。
  • Back-end UI layer 处理路由、模板、数据获取、Cookie 等。通过路由,前端终于可以自主把控 URL Design,这样无论是单页面应用还是多页面应用,前端都可以自由调控。后端也终于可以摆脱对展现的强关注,转而可以专心于业务逻辑层的开发。

前后端的职责很清晰。对前端来说,两个 UI 层各司其职。通过 Node,Web Server 层也是 JavaScript 代码,这意味着部分代码可前后复用,需要 SEO 的场景可以在服务端同步渲染,由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足,通过这种模式几乎都能完美解决掉。与 JSP 模式相比,全栈模式看起来是一种回归,也的确是一种向原始开发模式的回归,不过是一种螺旋上升式的回归(马哲诚不我欺233)。当然基于 NodeJS 的全栈模式也不是完美的,他依旧面临很多挑战,比如:需要前端对服务端编程有更进一步的认识。比如TCP/IP等网络知识的掌握。NodeJS 层与 Java 层的高效通信。NodeJS 模式下,都在服务器端,RESTful HTTP 通信未必高效,通过 SOAP 等方式通信更高效。一切需要在验证中前行。

​ 前端代码的日益复杂,开发者们也将一些后端开发的解决方法带往前端,一时间大量的前端框架开始涌现,比如:AngularJS、React、Vue.js、EmberJS 等,这些框架总的原则是先按类型分层,比如 Templates、Controllers、Models,然后再在层内做切分。这样子的优点是前后端职责很清晰:前端工作在浏览器端,后端工作在服务端。清晰的分工,可以让开发并行,测试数据的模拟不难,前端可以本地开发。后端则可以专注于业务逻辑的处理,输出 RESTful等接口。前端开发的复杂度可控:前端代码很重,但合理的分层,让前端代码能各司其职。再就是部署相对独立: 可以快速改进产品体验。至于缺点呢,代码不能复用。比如后端依旧需要对数据做各种校验,校验逻辑无法复用浏览器端的代码。如果可以复用,那么后端的数据校验可以相对简单化。全异步,对SEO(Search Engine Optimization:搜索引擎优化)不利,往往还需要服务端做同步渲染的降级方案。性能并非最佳,特别是移动互联网环境下。SPA 不能满足所有需求,依旧存在大量多页面应用。URL Design 需要后端配合,前端无法完全掌控。
技术的发展迭代越来越快,web和他最初的样子相比发生了巨大的变化。我们的生活也与它的进步和迭代耦合的更加紧密。其实模式也好,技术也罢,没有好坏优劣之分,只有适合不适合;前后分离的开发思想主要是基于SoC(关注度分离原则),上面种种模式,都是让前后端的职责更清晰,分工更合理高效。作为行业的一份子,我也对行业未来的发展拭目以待。

参考文章:http://www.360doc.com/content/17/0601/20/35378950_659102709.shtml 前端发展史
Wiki百科相关页面

标签:web,发展史,浏览器,前端,JavaScript,模式,思考,服务端,页面
来源: https://www.cnblogs.com/ergoza/p/13583582.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有