精华内容
下载资源
问答
  • web开发技术栈(框架)总结
    万次阅读 多人点赞
    2020-06-30 11:52:15

    原文 web开发技术栈(框架)总结

    Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis……

    天呐,好多……

    小编虽说出身工业软件,但心里一直藏着一个UI梦。近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框架大概都摸了摸看了看,趁着五一假期有点时间,做个总结。

    本文提到的前端,是指通俗语义下web开发的前端,主要内容是视图层的开发,包括UI布局、用户交互及后端数据请求展示。

    本文提到的后端,是指web开发的后端,内容包括模块路由和数据库存取。注意,这里的后端不是指大数据开发领域的Hadoop、Storm那些。

    前端

    JavaScript(后文统称为js)、css、HTML是前端开发的语言基础,如果想能将前端框架用好还是需要将水平提高到大概能用的程度。html负责网页的内容和基本结构,css负责UI样式,js负责将用户请求传送到后端并将后端数据在html页面中展示。

    前端的框架分两类,UI样式库和js库。有些UI样式为了实现动态效果,会使用js库如jQuery。

    前端开发的编程工作JS为主,还有近几年出的TypeScript(JS的超集)。

    奇怪的是,最近各官网下载的开发包里都不带jQuery库,如有专业人士路过请稍作指点。

    UI样式库

    前端框架中有很大一部分是UI样式库。这些样式库的关注点是视图。对于纠结(患有强迫症)的开发者,不建议使用UI样式框架,真的是哪哪都看着不爽,到最后还不如自己css造轮子来的爽快。自己css造,不一定好看,但可以满足强迫症。

    Bootstrap

    小编认为Bootstrap是一个非常好的入门选择,教程示例非常丰富,颜值也还过得去。
    栅格布局自带响应式,常用的颜色都有类可以直接调用。
    Bootstrap中文网:http://www.bootcss.com/

    用法示例:

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">导航</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li> 
        </ul>
      </div>  
    </nav>
    

    示例代码可以看出,引入类的方式来定义控件样式,使用方便而且语义清晰。

    Layui

    和Bootstrap差不多的东西,个人感觉色系看起来稍显寡淡。
    Layui官网:https://www.layui.com

    Amaze-UI

    俗称妹子UI,也是一款样式框架。
    妹子官网:http://amazeui.org/

    Font Awesome

    图标字体库和CSS框架,毕竟只有图标字体和CSS,所以一般配合其他的样式框架使用。
    Font Awesome官网:http://fontawesome.dashgame.com/

    js库

    js库是实现功能的主要手段。常规的js库中都会包含DOM(或虚拟DOM)操作、ajax异步get和post请求封装实现、页面渲染刷新等。

    相比原生js,使用库优点在于方便,缺点在于js库文件通常动辄数百kb,在带宽紧张的环境会拖慢页面的加载速度。

    小编现在喜欢用vue.min.js,轻快又方便。为啥不用vue-cli方式呢?讲真,对于php流个人业余全菜开发者来说,npm run dev带来的不方便比方便更多些。

    这年头,不用npm都不好意思说自己是前端框架,不信请看vue、React、AngularJS,全都是这套玩法。

    jQuery

    对于传统开发者来说,js为主的前端框架与其说是框架像是库。对C/C++开发者来说,就像是

    #include <stdio.h>
    ……
    

    jQuery最具特色的操作是 $(“yixzm”) 等价于 document.getElementById(“yixzm”),以及ajax,就像这样:

    $.ajax({ url: "/api", context: document.body, success: function(){
        console.log("test");
    }});
    

    DOM操作真的很方便。

    jQuery官网:http://jquery.com/

    vue

    只需要用一下下,就会很爽的库。
    职业玩家都使用npm的方式,业余玩家嘛用用link引入也就可以了。vue对开发者最大的便利是不用频繁的DOM操作,数据只需要赋值给定义的对象元素即可同步刷新页面内容。

    据jsp玩家讲,和jsp差不多?据php玩家讲,和 <?php 差不多?

    但小编感觉方便程度上还是差很多的,毕竟请求到的数据可以直接进页面,写在js里怎么看都更好些。

    vue-cli模式开发,可以让js代码工程化。或许,这时候的前端工程师需要调整鄙视链层级。(C >> C++ >> java >> php >> js?)

    小编说,js主要负责请求交互和动态刷新,但有人不讲规矩。比如vue中的vue-element,不仅能处理交互,还能生成UI的组件模块。

    vue-cli模式开发,有个叫做模板的东西,文件后缀格式如filename.vue,这玩意将每一个独立的HTML模块连同CSS和JS代码一起封装在一个文件里,用的时候直接引入,相当方便。

    用法示例代码:

    <div id="app">
      <ul>
        <template v-for="key in objs">
          <li>{{ obj.txt }}</li>
          <li v-html="obj.html">--------------</li>
        </template>
      </ul>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        objs: [
          { txt: 'yixzm', html: '<h1>yixzm</h1>' },
          { txt: 'dream', html: '<h2>dream</h2>' },
          { txt: 'stone', html: '<h3>stone</h3>' },
        ]
      }
    })
    </script>
    

    怎么样?够方便吧~

    v-for 这玩意,小编第一次看到时被惊呆了,还能这么写页面?用起来好舒服~

    vue官网:https://cn.vuejs.org/

    React

    这玩意和vue的类似之处是也能工程化的管理js开发项目。既能引入的方式使用,也能npm方式构建项目。

    用法示例代码:

    <div id="example"></div>
    
    <script type="text/babel">
    function UserGreeting(props) {
      return <h1>欢迎回来!</h1>;
    }
    
    function GuestGreeting(props) {
      return <h1>请先注册。</h1>;
    }
    
    function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;
      if (isLoggedIn) {
        return <UserGreeting />;
      }
      return <GuestGreeting />;
    }
    
    ReactDOM.render(
      // Try changing to isLoggedIn={true}:
      <Greeting isLoggedIn={false} />,
      document.getElementById('example')
    );
    </script>
    

    通过示例代码中的这两句:

    document.getElementById('example')
    
    return <h1>请先注册。</h1>;
    

    可以发现,React的开发渲染风格和原生JS相似度很高,和vue区别很大。

    React官网:https://reactjs.org/

    AngularJS

    AngularJS和vue代码相似度很高。

    <div ng-app="">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
    </div>
    

    和vue相比,几乎就是换了各变量名…… 当然,hello world 只是表象,更多区别还需要深入使用才能感受到。

    AngularJS官网:https://angularjs.org/
    AngularJS中文网:http://www.angularjs.net.cn/

    后端

    除了专注视图活跃在用户面前的前端框架,还有一些默默在后台奉献的后端框架。web后端框架做的事一般来说,是提供http请求服务接口,实现请求路由、数据存取、模块后台功能实现等。

    新时代的前端框架如vue和React,本身自带路由功能,大家将其叫做前端路由。前端路由一般使用在开发SPA(单页应用)的场景,路由时会异步加载数据渲染至页面但不会重新加载整个页面。而后端路由会重新向服务端提交请求。

    后端框架一句话总结:存取数据分模块,各种语言都能用。

    Php有ci、tp、Yii和laveral,java有springMVC,Python有Django,JS有node,可谓百家争鸣、百花齐放。

    这时候,C/C++出身的小编秉着不靠天不靠地轮子自己造的精神,对各框架普遍采取读源码试用而不用的态度。了解、学习,但写写东西还是喜欢自己撸。强撸和借鉴(抄袭)有益理解别人的闪光点。

    php框架

    ci和tp上手极快,Yii和Laravel稍微有点学习成本。

    ci

    ci即优雅的CodeIgniter,很mini的一款框架,相对容易入门。

    CI中文网:https://codeigniter.org.cn/

    thinkphp

    传说中的培训班神器,据说上手极快?

    官网:http://www.thinkphp.cn/

    Yii

    没啥好说的,看起来和ci、tp貌似差不多…… 好久没翻Yii源码,记得貌似是传统的<?php code ?>的方式写模板?没啥特别的映象。

    Yii中文网:https://www.yiichina.com/

    Laravel

    本菜感觉上手好麻烦,夹杂的东西太多。(正在使用laravel的大神请尝试理解小编着重提到的“菜”字)
    Composer安装模块效率很高,据说是冲锋枪?学习成本还是蛮高的。

    Laravel中文网:https://www.golaravel.com/

    Python框架

    Django

    Python版的Laravel……

    Django小编写自动化、爬虫的时候也会用到,但拿来写web总感觉不习惯…… 谁让Php是世界上最好的语言呢~

    Django官网:https://www.djangoproject.com/

    Java框架

    Spring MVC,额,没写过Java,小编如果说这是Java的web开发框架,不知是否有专家会留言批评呢?

    HTTP服务

    以上后端框架关注应用和数据,对HTTP服务监听关注的并不多。服务监听工作一般由Apache或者Nginx来承担,负责请求响应、并发和数据返回。关于HTTP服务,小编除了Apache用的比较多,Nginx搭过几个系统外,了解的并不多。所以,小编暂且总结接触过的这三个。

    对于apache和nginx的比较,网上有很多帖子有讲而且很详细。比如这篇:Apache和Nginx的区别 就讲的很好

    后端流的JS

    node-js,额,只用node写过一个socket server,没啥可总结的。node写在这里是否合适也有待学习。
    nodejs中文网:http://nodejs.cn/

    apache

    老牌的HTTP服务提供者。在小编写C++的时代,传说中的LAMP、WAMP犹如迷雾中的灯塔一般,在知识的海洋里引领着小编。

    apache动态请求响应效率高,httpd.conf配置也极其方便。

    apache官网:http://www.apache.org/

    nginx

    据说更擅长静态文件响应?需要配置反向代理才能正常使用Php、Python等语言开发的工程,小编个人感觉有些麻烦,不怎么喜欢用。

    nginx官网:http://nginx.org/

    数据库

    存数据,mysql很方便。redis在内存里,数据请求时加载超级快!

    mysql VS redis?

    关系型和非关系型,索引方便和响应快速……
    一起用吧,就像硬盘和内存。

    不过,现在mysql一般用MariaDB来替代。
    mariadb官网:https://mariadb.org/
    mysql官网:https://www.mysql.com/
    redis中文网:http://www.redis.cn/

    开发环境及工具

    vscode

    这玩意写前端代码还不错,良心工具。

    vscode官网:https://code.visualstudio.com/

    ……

    还有很多,小编这次先总结这些。

    #写在最后

    web开发内容很多,也很有趣。

    小编将求索以图成长。

    更多相关内容
  • Web开发技术架构图

    千次阅读 2020-09-24 21:07:05
    Web开发技术架构图 大型web系统架构动态应用,是相对于网站静态内容而言,是指以c/c++、php、Java、perl、.net等服务器端语言开发的网络应用软件,比如论坛、网络相册。1、学习Web开发原理,包括MVC/MTV等Web框架; 2、...

    Web开发技术架构图

    大型web系统架构动态应用,是相对于网站静态内容而言,是指以c/c++、php、Java、perl、.net等服务器端语言开发的网络应用软件,比如论坛、网络相册。1、学习Web开发原理,包括MVC/MTV等Web框架; 2、学习Django Web框架,从技术原理到项目实践; 3、学习Djan...

    软件开发周期

    软件生命周期(Software Life Cycle,SLC)是软件的产生直到报废或停止使用的生命周期。软件生命周期内有问题定义、可行性分析、总体描述、系统设计、编码、调试和测试、验收与运行、维护升级到废弃等阶段一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、衰亡等阶段,一般称为软件生存...

    软件开发流程图

    软件开发流程即软件设计思路和方法的一般过程,包括对软件先进行需求分析,设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编码和调试、程序联调和测试。软件项目开发流程图是用来详细描述了软件在开发过程中产品调研、设计、开发、测试等各个阶段中各个角色,包含产品经理、研发、测试、用户等需...

    产品开发流程图

    产品开发流程(Product Development Process)产品开发流程是指企业用于想像、设计和商业化一种产品的步骤或活动的序列。产品开发流程涉及的人员从产品经理到设计师、前端、后端等等一系列人员,这篇文章主要关于产品开发的完整流程,希望对各个工作岗位上的人有借鉴意义。很多产品经理不...

    前台登录注册流程图

    1.页面字段,手机号,输入框;,图形验证码,输入框+验证码图片,短信验证码,输入框。2.默认状态,默认【获取验证码】按钮可点,【登录】按钮不可点。3.未输入状态,首先从手机号开始判断,当手机号/图形验证码未输入时,点击【获取验证码】。4.验证输入内容,~若手机号/图形验证码已输入时,点击【获取...

    程序设计流程图

    遵循这种方法的程序设计,就是结构化程序设计。相应地,只要规定好三种基本结构的流程图的画法,就可以画出任何算法的流程图。程序设计流程图,流程图是一款网络图绘制软件,新颖小巧,功能强大,可以很方便的绘制各种专业的业务流程图/程序流程图/数据流程图/网络拓扑图,操作简单,一键绘制.分析问题,对于接受...

    程序流程图

    程序流程图又称程序框图,是用统一规定的标准符号描述程序运行具体步骤的图形表示。程序框图的设计是在处理流程图的基础上,通过对输入输出数据和处理过程的详细分析,将计算机的主要运行步骤和内容标识出来。程序基本结构的流程图实例讲解,不论什么程序设计语言,程序设计都有3种基本结构:顺序结构、选择结构和循...

     

    算法流程图

    设计算法是程序设计的核心。为了表示一个算法,可以用不同的方法。常用的有自然语言,流程图,伪代码,PAD图等。这其中以特定的图形符号加上说明,表示算法的图,称为算法流程图。算法流程图包括传统流程图和结构流程图两种。流程图就是一种描述算法的图形化描述,用流程图可以清晰地描述出算法的思路和过程。众所...

    支付系统功能架构图

    支付业务的基础系统的复杂性和稳定性是支付业务是否能够及时安全处理的根本,该支付系统功能架构图收集了支付宝的系统架构。完整的支付系统整体架构! 从产品分类、模块功能和业务流程,了解支付产品服务的设计。支付系统要兼并合规性、易用性、安全性为一体,在前期设计时一定要综合考虑。支付系统架构图为通用支付...

    研发流程图

    产品研发流程图项目内容需求提交 责任部门市场部、运营部、产品部、 总经理及公司其他领导层,程序、职责说明需求提交依据: 领导层——战略规划与目标 市场、运营部。一个产品的研发需要多个不同工种配合完成,如果没有好协同机制必然引起混乱,造成产品研发的拖延:1.产品研发规划阶段。公司最高决策层根据客...

    展开全文
  • 软件+源码下载地址: http://www.javathinker.net/javaweb.jsp

    软件+源码下载地址:

    http://www.javathinker.net/javaweb.jsp

    在这里插入图片描述

    展开全文
  • 精通jsp-web开发技术与典型应用

    热门讨论 2008-11-12 21:27:38
    张新曼的精通jsp-web开发技术与典型应用 代码齐全 适合学生学习使用
  • java web技术开发大全(最全最新)

    千次下载 热门讨论 2012-10-10 07:21:38
    和已经出版的同类图书相比,《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》讲解由浅入深,涵盖更多内容,列举了大量典型实例具有超强的实用性,另外,《Java Web开发技术大全:JSP+Servlet+...
  • Web开发技术发展历史

    千次阅读 2018-02-26 16:53:07
    Web的诞生 提到Web,不得不提一个词就是“互联网”。Web是World Wide Web的简称,中文译为万维网。“万维网”和我们经常说的...抛开那些纷繁凌乱的商业化概念,回归技术本身,互联网就是指通过TCP/IP协议族互相连接...

    Web的诞生

            提到Web,不得不提一个词就是“互联网”。Web是World Wide Web的简称,中文译为万维网。“万维网”和我们经常说的“互联网”是两个联系极其紧密但却不尽相同的概念。今天“互联网”三个字已经承载了太多的内涵,提到互联网,我们通常想到的一种战略思维,或者是一种颠覆传统的商业模式。抛开那些纷繁凌乱的商业化概念,回归技术本身,互联网就是指通过TCP/IP协议族互相连接在一起的计算机网络。而Web是运行在互联网上的一个超大规模的分布式系统。Web设计初衷是一个静态信息资源发布媒介,通过超文本标记语言(HTML)描述信息资源,通过统一资源标识符(URI)定位信息资源,通过超文本转移协议(HTTP)请求信息资源。HTML、URL和HTTP三个规范构成了Web的核心体系结构,是支撑着Web运行的基石。用通俗的一点的话来说,客户端(一般为浏览器)通过URL找到网站(如www.google.com),发出HTTP请求,服务器收到请求后返回HTML页面。可见,Web是基于TCP/IP协议的,TCP/IP协议把计算机连接在一起,而Web在这个协议族之上,进一步将计算机的信息资源连接在一起,形成我们说的万维网。大家开发的Web应用本质上就是可以提供信息或者功能的Web资源,成为Web这个全球超大规模分布式系统中的一部分。在技术层面进一步理解Web和互联网,建议找一本计算机网络的书去看看,了解一下计算机网络的分层结构和发展历史。

            1991年8月6日,Tim Berners Lee在alt.hypertext新闻组贴出了一份关于World Wide Web的简单摘要,标志了Web页面在Internet上的首次登场。最早Web主要被一帮科学家们用来共享和传递信息,全世界的Web服务器也就几十台。第一个Web浏览器是Berners Lee在NeXT机器上实现,也只能跑在NeXT机器上,苹果和乔布斯的粉丝对NeXT的历史肯定耳熟能详。真正使得Web开始流行起来的是Mosaic浏览器,这便是曾经大名鼎鼎的Netscape Navigator的前身。Berners Lee在1993年建立了万维网联盟(World Wide Web Consortium,W3C),负责Web相关标准的制定。浏览器的普及和W3C的推动,使得Web上可以访问的资源逐渐丰富起来。这个时候Web的主要功能就是浏览器向服务器请求静态HTML信息。95年的时候马云在美国看到了互联网,更准确的说他其实看到的就是Web,阿里早先做的黄页也就是把企业信息通过进行HTML展示的Web应用。

    Static-Page

    动态内容的出现:CGI

            最初在浏览器中主要展现的是静态的文本或图像信息,GIF图片则第一次为HTML页面引入了动态元素。不过人们已经不仅仅满足于访问放在Web服务器上的静态文件,1993年CGI(Common Gateway Interface)出现了,Web上的动态信息服务开始蓬勃兴起。CGI定义了Web服务器与外部应用程序之间的通信接口标准,因此Web服务器可以通过CGI执行外部程序,让外部程序根据Web请求内容生成动态的内容。Perl因为跨操作系统和易于修改的特性成为CGI的主要编写语言。当然,CGI可以用任何支持标准输入输出和环境变量的语言编写,比如Shell脚本,C/C++语言,只要符合接口标准即可。比如你用C语言编写CGI程序,你把希望返回的HTML内容通过printf输出就可以发送给Web服务器,进而返回给用户。

    CGI

    Web编程脚本语言:PHP/ASP/JSP

            这个时候我们已经可以在Web上提供动态功能了,比如网站访问的计数,表单的处理。CGI对每个请求都会启动一个进程来处理,因此性能上的扩展性不高。另外,想象一下用在Perl和C语言中的程序中去输出一大堆复杂的HTML字符串,是不是有点蛋疼,可读性和维护性是个大问题。为了处理更复杂的应用,一种方法是把HTML返回中固定的部分存起来(我们称之为模版),把动态的部分标记出来,Web请求处理的时候,你的程序先生成那部分动态的内容,再把模版读入进来,把动态内容填充进去,形成最终返回。举个例子,搜索一个关键词,搜索引擎的Web服务器可以先从后台索引服务器里拿到数据,然后把这些数据填充到返回结果的HTML模版中,返回给浏览器。但是这件事情自己来做显然太繁琐而且是重复劳动。于是1994年的时候,PHP诞生了,PHP可以把程序(动态内容)嵌入到HTML(模版)中去执行,不仅能更好的组织Web应用的内容,而且执行效率比CGI还更高。之后96年出现的ASP和98年出现的JSP本质上也都可以看成是一种支持某种脚本语言编程(分别是VB和Java)的模版引擎。96年W3C发布了CSS1.0规范。CSS允许开发者用外联的样式表来取代难以维护的内嵌样式,而不需要逐个去修改HTML元素,这让HTML页面更加容易创建和维护。此时,有了这些脚本语言,搭配上后端的数据库技术,Web更是开始大杀四方了,像电子商务这样的应用系统也可以通过Web技术来构建。Web已经从一个静态资源分享媒介真正变为了一个分布式的计算平台了。反过来看,你也应该知道,不是只有当今这些流行脚本语言可以写Web应用,C语言一样可以做这件事情。前面举的搜索引擎通过C语言来获取数据和渲染Web页面的例子在追求极致访问速度的互联网公司是非常常见的,但是脚本语言在开发效率上更胜一筹。

    PHP

    分布式企业计算平台:J2EE/.Net

            Web开始广泛用于构建大型应用时,在分布式、安全性、事务性等方面的要求催生了J2EE(现在已更名为Java EE)平台在1999年的诞生,从那时开始为企业应用提供支撑平台的各种应用服务器也开始大行其道。Java Servlet、Java Server Pages (JSP)和Enterprise Java Bean (EJB )是Java EE中的核心规范,Servlet和JSP是运行在服务器端的Web组件,EJB运行在服务器端的业务组件,是一种分布式组件技术。2000年随之而来的.net平台,其ASP.net构件化的Web开发方式以及Visual Stidio.net开发环境的强大支持,大大降低了开发企业应用的复杂度。ASP.Net第一次让程序员可以像拖拽组件来创建Windows Form程序那样来组件化地创建Web页面,Java平台后来出现的JSF也承袭了这一思想。两大平台在相互竞争和模仿中不断向前发展。

    J2EE

    框架横飞的年代:MVC,ORM

            两大平台诞生之后,组件化编程技术盛极一时,Web技术的发展开始了一段框架横飞的年代,各种辅助Web开发的技术框架层出不穷。虽然脚本语言大大提高了应用开发效率,但是试想一个复杂的大型Web应用,访问各种功能的URL地址纷繁复杂,涉及到的Web页面多种多样,同时还管理着大量的后台数据,因此我们需要在架构层面上解决维护性和扩展性等问题。这个时候,MVC的概念被引入到Web开发中来了。2004年出现的Struts就是当时非常流行的Java Web开发的MVC框架。MVC早在1978年就作为Smalltalk的一种设计模式被提出来了,应用到Web应用上,模型Model用于封装与业务逻辑相关的数据和数据处理方法,视图View是数据的HTML展现,控制器Controller负责响应请求,协调Model和View。Model,View和Controller的分开,是一种典型的关注点分离的思想,不仅使得代码复用性和组织性更好,使得Web应用的配置性和灵活性更好。这是Spring MVC的示意图,典型的MVC架构。

    Spring-MVC

            此外,数据访问也逐渐通过面向对象的方式来替代直接的SQL访问,出现了ORM(Object Relation Mapping)的概念,2001年出现的Hibernate就是其中的佼佼者,已经成为Java持久层的规范JPA的主要参考和实现。更多的全栈框架开始出现,比如2003年出现的Java开发框架Spring,同时更多的动态语言也被加入到Web编程语言的阵营中,2004年出现的Ruby开发框架Rails,2005出现的Python开发框架Django,都提供了全栈开发框架,或者自身提供Web开发的各种组件,或者可以方便的集成各种组件。比如Spring基于IoC和AOP思想可以方便得整合出全套Web开发组件,SSH(Struts+Spring+Hibernate)一度成为Java Web开发的标配。值得一提的时Rails这个MVC框架,26岁的丹麦大神David Heinemeier Hansson在开发著名项目管理软件BaseCamp的过程中形成,Ruby语言本身在快速开发上的优势,加上Rails诸如崇尚DRY(Don't)Repeat Yourself)原则, 约定优于配置,拥抱REST等特性,使其迅速成为一个极其流行的Web开发框架。

    MVC

    回归Web本质:REST

            注意,看到这里的时候,你会发现Web开发的重点已经不在于HTTP/HTML/URL这样的Web基础架构了,而是各种平台下的各种框架和组件技术(MVC/ORM/分布式组件技术等等)。所以今天很多人可能会用一个MVC框架构建Web网站,但是可能并不了解Web本身。2000年的时候,Roy Fielding在他的博士论文中从构架风格的角度来剖析了Web本身,将Web内在的设计原则和思路系统得论述出来。Roy Fielding是HTTP协议的主要设计者,也是Apache服务器项目的联合创始人,他的这篇博士论文提出来的REST(Representation State Transformation)也成为一种流行的Web架构风格。REST鼓励基于URL来组织系统功能,充分利用HTTP本身的语义,而不是仅仅将HTTP作为一种远程数据传输协议。Web应用的开发应该回归Web的本质特征。Rails在发展过程中也完全拥抱REST,成为REST的坚定支持者。有些人认为REST和MVC是两种对立的风格,其实不尽然,两者是互为补充的,从Rails是一个全面支持REST的MVC框架这一点就可窥见。

    浏览器端的魔术:AJAX

            Web应用同时涉及到浏览器端和服务器端,之前的介绍除了简单提到了CSS规范之外,主要关注的是服务器端的技术发展。在客户端,1995年NetScape公司设计的JavaScript被用作浏览器上运行脚本语言为网页增加动态性。微软随后推出类似JScript,但是缺乏统一的语言规范,使得浏览器兼容性成为一个程序员的梦魇。JavaScript最终被提交到欧洲计算机制造商协会(ECMA),做为中立的ECMA开始了标准化脚本语言之路,并将其命名为ECMAScript。JavaScript可以响应浏览器端的用户事件,检测表单的正确性,动态修改HTML页面结构DOM,因此可以减少与服务器端的通信开销,并且做出很酷的页面动态效果。​2005年出现的AJAX这个概念使得JavaScript再次大放异彩​。AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术,可以基于JavaScript的XmlHttpRequest的用于创建交互性更强​的Web应用。AJAX是一种已有技术的mashup,多种技术组合在一起形成了其特色和优势,早在1998年就已经开始有人使用。Google在地图和Gmail等产品中对这项技术的深入应用,以及AJAX这个吸引眼球的名字的提出,使其正式站在了聚光灯下,开始吸引无数人的目光。我们知道Web应用中用户提交表单时就向Web服务器发送一个请求,服务器接收并处理传来的表单,并返回一个新的网页。而前后两个页面中的往往大部分HTML代码是一样的,每次都返回整个页面内容是一种带宽资源的浪费。而AJAX应用仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器响应,更新页面的局部信息。这样不仅浏览器和服务器的数据交换大大减少,而且客户端也可以更加快速地响应用户操作。如果你用Gmail就应该知道,Gmail从来都不刷新页面,所有的请求都是通过AJAX获取数据进行局部更新。AJAX的出现,以及诸如EXTJS、DOJO等一些前端开发框架的出现,也使得单页应用(Single Page Application)在这个时候流行起来。

    AJAX

    前端MVC:Angular/Backbone

            这种模式下,前后端的分工非常清晰,前后端的关键协作点是 Ajax 接口,规定好交互接口后,前后端工程师就可以根据约定,分头开工,开发环境中通过Mock等方式进行测试,同时在特定时间节点进行前后端集成测试。但是,随着业务功能的愈发复杂(看看现在的Gmail),这种模式本质上和JSP时代的Web开发并无本质区别,只不过是将复杂的业务逻辑从JSP文件转移到了JavaScript文件中而已。现在,对于一个前端功能、交互复杂的SPA,JavaScript代码很容易膨胀(超过10万行)。很自然地,像服务端从JSP向MVC框架转换的过程一样,前端开发也出现了大量的MVC框架,比较典型的包括BackboneJS, AngularJS, EmberJS, KnockoutJS。总的来说,MV*框架的提出是为了解决前端开发的复杂度,提供一套规则组织代码、分层(MVC),通过合理的组织和分层,前端的代码职责明确、清晰,便于开发与测试。

    Frontend-MVC

    JavaScript在服务器端的逆袭:Node

            各大浏览器的竞争,使其引擎的性能不断提升,至今Google V8引擎的性能已经足以运行大型Javascript程序。在V8之上加以网络、文件系统等内置模块,形成了如今的Node.js。

            随着Node.js的出现,JavaScript开始拥有在服务端运行的能力,它的异步本质使得Node.js在处理I/O密集型业务中优势凸显,而大多Web业务中I/O性能都是瓶颈。eBay、Yahoo、甚至Microsoft Azure纷纷引入Node.js以提升性能。Node.js的package每天都有几千万的下载量。这对前端工程师来说可是一个好消息,精通JavaScript的他们也能够做服务端开发了!虽然现实中并不是这样美好(服务端开发涉及的不仅仅是语言层面),但一种新的开发模式也因此兴起:浏览器端处理展现层逻辑、而服务端Controller这一层以及相关的模板渲染、路由、数据接口以及Session/Cookie先关处理实际上交给了Nodejs来做。通过Nodejs, 意味着前后端很多代码可以复用(例如数据验证逻辑),在需要SEO的场景下也可以选择服务端模板渲染。

            但另一方面,JavaScript刚被引入到服务器端开发,其生态环境还未成熟,甚至大量的常用package主版本号都是0。长期用来实现页面逻辑,天生自由的JavaScript,在服务器端开发中,仍未形成统一的开发范型。不同开发原则和编码风格的应用,都将对Node.js项目的性能、可维护性产生重大影响。现在而言,服务器端javascript开发究竟是魔鬼还是天使,仍取决于团队中的开发者。

    Node

    结语

            Web技术依然在快速发展,Web本身的基础规范也在不断完善,HTML5和CSS3引入了更多激动人心的特性。回顾Web的发展历史,从某个角度看,就是抽象层次不断提高的一个过程,更高的抽象层次屏蔽更低层的复杂性,从而提高开发效率。每当技术发展到一定程度,出现某些局限性的时候,就会有更优秀的技术出现来突破这些局限性。其实这是计算机技术发展的一个普遍规律,比如高级语言的出现屏蔽了汇编语言的复杂性,帮助我们更快速的编程;数据库技术的出现使得我们无需关心物理存储和访问细节,写简单的SQL语句就能搞定,更进一步,ORM框架使得我们通过一条语句调用一个类的一个方法就能方便就行数据操作。我们应该让自己的技术视野具备一定的高度和广度,看到一门技术的发展规律和发展历程,这是一种技术修养的体现,其实跟人文修养是一样的。同时也应该具有一定的深度,因为我们往往站在比较高的抽象层次,比如今天你写几行代码就能把数据库创建好,增删改查的功能也自动生成好了,但是成为高手需要你对底层的原理机制有更透彻的理解,真正遇到问题的时候才能抽丝剥茧迎刃而解。


            本文转自David博士关于《Web开发技术发展历史》的文章

    展开全文
  • 《Tomcat与Java Web开发技术详解(第2版)》结合最新的Tomcat 6版本,详细介绍了开发Java Web应用的各种技术。主要内容包括:Tomcat和Java Web开发的基础知识、Java Web开发的高级技术、在Java Web应用中运用第三方...
  • 在接下来的几个月时间里,我打算写一系列关于完整web开发的文章。这第一篇文章虽然有所粗略,但也能够充分概括了在之前15年或者更久的时间里web应用程序如何进行演变。并且最后我会囊括下这段时间内所写的相关技术。...
  • Tomcat与Java.Web开发技术详解(PDF)Tomcat与Java.Web开发技术详解(PDF)
  • 主流Web开发技术简介

    千次阅读 2014-03-06 22:15:28
    目前使用的主流Web开发技术主要有四种:ASP、ASP.NET、JSP、PHP。 1、ASP ASP(Active Server Pages)动态服务器页面,使用VBScript脚本语言,可以将脚本语言直接嵌入HTML文档中,不需要编译就可以直接运行。 优点...
  • Java Web开发技术方案

    千次阅读 2017-07-14 08:58:07
    Java Web开发技术方案 Java Web开发分前端、后端: Java Web前端: —就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 —前端开发主要使用ajax/jQuery...
  • 这是我自己买的书里送的光盘拷上来的,保证完整,但是实在是太大了,压缩以后还有30多MB,只能分成两个包,这是part2.........part1的地址如下http://download.csdn.net/source/1675826
  • Web开发的历史发展技术演变

    千次阅读 多人点赞 2020-08-24 15:36:51
    简介:本文对Web开发的历史发展的了解很有裨益,推荐给大家。本文尝试从历史发展角度,说说各种研发模式的优劣。 一、简单明快的早期时代,二、后端为主的 MVC 时代,三、Ajax 带来的 SPA 时代,四、前端为主的 MV* ...
  • Web前端开发技术包括哪些?

    千次阅读 2021-07-29 16:44:09
    想要成为一名合格的Web前端开发工程师,首先需要做好的就是熟练掌握Web前端开发技术,那么Web前端开发技术包括哪些呢? 前端开发工程师就业前景如何? 1、HTML HTML称为超文本标记语言,是一种标识性的语言,制作...
  • (完整word版)web前端开发技术试卷三

    千次阅读 2020-12-22 02:22:37
    Web前端开发技术课程考试试卷(三)总分100分考试时间:120分钟考试形式:闭卷一、选择题(每题1分,共20分)1.HTML指的是__________。(A)超链接的文本标记语言(B)超文本标识语言(C)家庭工具标记语言(D)以上都不是2....
  • web开发框架技术有哪些?

    万次阅读 2018-11-07 16:07:30
    如果你是做Web开发的,Web框架一定会很熟悉,框架是Web架构开发中必不可少的工具,不仅可以提高开发效率,还能让开发项目更成熟,并且可以提升代码的可再用性,Web框架开发离不开相应的开发语言,以下是常用的Web...
  • 做网站设计、网页界面开发 做网页界面开发 做网页界面开发、前台数据绑定和前台逻辑的处理 设计、开发、数据处理 附:素材 Web前端开发工程师工作内容 web前端工程师在不同的公司,会有不同的职能,但称呼都是类似...
  • .net web开发技术路线图

    千次阅读 2012-06-13 14:00:15
    如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步  掌握一门.NET面向对象语言,C#或VB.NET。 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET。 ASP.NET是一个全面向对象的...
  • Web开发技术发展历程

    千次阅读 2017-02-09 18:05:50
    Web开发技术发展历程 互联网就是指通过TCP/IP协议族互相连接在一起的计算机网络。而Web是运行在互联网上的一个超大规模的分布式系统。 Web设计初衷是一个静态信息资源发布媒介,通过超文本标记语言(HTML)描述信息...
  • 简单介绍一下web开发中用到的一些技术

    万次阅读 多人点赞 2018-01-06 18:02:31
    一、标准通用标记语言(SGML) ...是基于.NET Framework的web开发 平台 。一般前端用HTML+css,后端用C#。 .NET Framework: 是.NET开发的软件运行所必需的框架(framework)、运行环境。
  • web应用开发的主流技术有哪些

    千次阅读 2019-07-11 10:41:50
    前端: Bootstrap, JQuery, angularJS, Echarts, highcharts ...现在移动时代发展越来越快,所以很多人都想要开发好w应用开发,因此大家需要熟练掌握上面的这六大技术,这是开发好wap应用的基础和保障。
  • 段落、字体标记应用strong> <p> 隶书" size="5" color="blue"> 网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。font> p> <strong>...
  • 本书根据了web前端开发所需的知识,规划了12次实验,设计了36个实验项目,将CSS技术贯穿所有的实验项目,实现了HTML、CSS、DIV、JavaScript、DOM完全地融会。全书分为上下两篇。上篇为实验(课内实验),包括HTML基础...
  • Tomcat与Java Web开发技术详解(第二版)源代码 光盘

    千次下载 热门讨论 2009-09-18 15:12:06
    这是我自己买的书里送的光盘,绝对完整,但是实在是太大了,压缩以后都有30多MB,只能压成两个包,这是part1 part2的地址如下http://download.csdn.net/source/1675852
  • 《 关于“第十三届蓝桥杯全国软件和信息技术专业人才大赛个人赛 (软件类)Web 应用开发组竞赛”》 赛事必知: 有关于组别: 具有正式学籍的在校全日制研究生、本科、高职高专及中职中专学生(以报名时状态为准)...
  • 第1章 大规模Web服务的开发定位——掌握整体 第2章 大规模数据处理入门 第3章 操作系统的缓存和分布式 第4章 数据库的横向扩展策略 第5章 大规模数据处理“实践”入门 第6章 压缩编程 第7章 算法实用化 第8章 Hatena...
  • 大规模Web服务开发技术(PDF)-第1部分

    千次下载 热门讨论 2016-03-21 14:13:38
    第1章 大规模Web服务的开发定位——掌握整体 第2章 大规模数据处理入门 第3章 操作系统的缓存和分布式 第4章 数据库的横向扩展策略 第5章 大规模数据处理“实践”入门 第6章 压缩编程 第7章 算法实用化 第8章 Hatena...
  • 嵌入式开发Web配置页面开发

    千次阅读 2020-05-22 19:37:46
    文章目录1.PHP是最好的语言2.CGI3.废话结束,直接看东西3.1 Web Server3.2 haserl3.3 jshon4....  简而言之,CGI就是让web server调用其他语言开发的程序生成html的技术 3.废话结束,直接看东西   we

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 899,899
精华内容 359,959
关键字:

web开发技术

友情链接: 9224060.zip