Web开发概述-历史发展与技术栈.pptx

Web开发概述-历史发展与技术栈.pptx

《Web开发概述-历史发展与技术栈.pptx》由会员分享，可在线阅读，更多相关《Web开发概述-历史发展与技术栈.pptx（58页珍藏版）》请在冰豆网上搜索。

Web开发概述,lichunping,目录,什么是Web开发Web开发的历史演变Web开发内容与技术栈Web开发模式与分层结构Web开发流程与分工Web开发未来与发展,什么是Web开发？

什么是Web开发-概要,NodeJS,什么是Web开发-访问基本流程,什么是Web开发-基本模型,Browser,Server,B/SvsC/S?

WebvsSoftware?

W3C,什么是Web开发-网络传输过程,获取IP,建立Socket,服务端,浏览器,ISP,DNS查询,TCP握手,初始化请求,等待传输内容,建立连接,发送首字节,发送尾字节,传送,接收首字节,接收尾字节,内容下载,TCP挥手,关闭Socket,断开连接,什么是Web开发-HTTP协议,TCP/IP,TLS/SSL,多路复用,HTTP,HTTPs,安全,加密,HTTP1.x,HTTP2,RequestHeadersRequestURL:

https:

/RequestMethod:

GETcontent-type:

text/html:

scheme:

httpscookie:

key=valueuser-agent:

Mozilla/5.0,ResponseHeaderscache-control:

max-age=300content-encoding:

gzipcontent-type:

text/htmldate:

Sun,25Aug201914:

08:

43GMTserver:

nginxstatus:

200ResponseBodyPageTitlePageContent,HTTP,Line消息行GET/HTTP/1.1,Headers消息头若干Host:

xxxContent-type:

xxxUser-agent:

xxx,Body实体内容HTML/JSON/Binary,2进制,push,什么是Web开发-基本数据流程,业务,展现,展现/业务数据处理流程,Web开发的历史演变,Web开发历史演变-互联网行业,http:

/,Web开发历史演变-几个阶段,蒂姆伯纳斯-李,万维网诞生,1991,第一阶段静态HTML,1993,第二阶段CGI,CommonGatewayInterface,Apache/IIS,1995,第三阶段后台脚本,DynamicScriptASP/PHP/JSP/JavaScript,Apache/IIS,Nexus,Mosaic,Netscape/IE,2000,第四阶段后台应用,MVC框架J2EE/PHPJS1.5,Apache/Tomcat,IE,后台软件生成HTML网页无动态效果信息展示,后台脚本生成HTML网页简单动态效果信息共享,后台应用生成HTML网页基本动态效果信息浏览,Web1.0,Web1.0,2005,第五阶段交互应用,MVC/ORMJ2SE/PHP/.NetAjax,Apache/Tomcat,IE/Firefox,后台生成结构混合渲染富客户端应用社交互动,Web2.0,2015,第六阶段WebApp,MVVM框架ES6/7/8FP/lambda,Nginx/Tomcat/Node,Chrome/Safari,微服务前端渲染单页面应用小程序,Web2.0Web3.0?

Web1.0,Web开发历史演变-技术升级,2004,Spring1.0Struts2Ajax/PrototypeFirefoxSafari/WebkitJavaScript1.6PHP5J2.0RubyDjangoAcrionScript2,2008,JavaScript1.8Chrome/V8jQuery1.3HTML5草案3G推出,2010,前端模块化前端MV*NodeJSJava1.7JavaScript1.8ECMAScript5IE9iPhone4,2015,Chrome40HTML5普及Kotlin/Java9SpringBoot/CloudECMAScript6Angular/React/Vue/svelteElectronWebpack4G普及全栈/移动化,2019,Chrome70Edge换引擎Flash退出PWASSR流行小程序普及JSV87.xES2019Go语言TypeScript5G元年,Web开发历史演变-桌面浏览器份额,Chrome70%,IE65%,Firefox30%,IE5%Firefox10%,Web开发历史演变-移动浏览器份额,Chrome60%,Safari40%,Safari20%,Opera30%,Web开发内容与技术栈,Web开发内容与技术栈-前后端工作内容,前端开发,后台开发,HTMLJS/FlashCSSBrowserInteraction,ControllerTemplateWebServer,Java/NodePHP/PythonCacheMySQLNoSQLRPC/Message,页面展现,交互逻辑,用户体验,数据处理,业务逻辑,性能稳定,Web开发内容与技术栈-浏览器基本结构,网络连接,资源加载,网络连接,浏览器插件,用户界面,浏览器引擎,JS解析引擎,DOM创建,HTML解析,CSS解析,用户安全数据持久,渲染引擎,Web开发内容与技术栈-前端三要素,titleblock,.highlightcolor:

redfont-size:

2em,（arr=returnarr.reduce（acc,value）=returnacc+value）（1,2,3）,HTML,JS,CSS,Structural结构/标签,Presentational样式/外观,Behavioral逻辑/交互,TagNameDOMAttributes,SelectorPropertiesBoxModel,DOM/BOMEventsXHR/Fetch,Web开发内容与技术栈-前后端数据交互方式,FormGET/POST,XHR/Fetch,JSONP,WebSocket/EventSource,Formdata,JavaScript,XML/JSON,Message,consturl=http:

/=url$（head）.onload=（）=/doSomething,constxhr=newXMLHttpRequest（）xhr.open（get,data.xml,false）xhr.send（）,fetch（http:

/=returnres.json（）,constws=newWebSocket（ws:

/xxx:

443）ws.onopen=（）=ws.send（data）ws.onmessage=（evt）=,constsse=newEventSource（/api/sse）sse.addEventListener（notice,（evt）=）,Web开发内容与技术栈-前端相关,Web开发内容与技术栈-前端框架NPM下载量,截止2019年8月,https:

/,https:

/,Web开发内容与技术栈-前端框架github统计,Web开发内容与技术栈-JS框架占比,https:

/,2018JS框架使用调查,Web开发内容与技术栈-后台相关,后台相关,DatabaseCache/ORM,RPC/消息服务发现,WebServer,Frameworks,Web安全,Java:

JettyTomcatWildFly,Java:

SpringJSFNetty,Python:

WSGITornadoGunicorn,Node:

HTTPModulenjsExpress?

Python:

FlaskDjangoPyramid,Node:

ExpressKOANest,DB:

MySQLPostgreSQLMongoDB,Cache:

RedisCouchbaseMemcached,ORM:

MybatisSQLAlchemyMongoose,RPC:

ThriftgRPCDubbo,发现:

ZookeeperEtcdConsul,消息:

ActiveMQRabbitMQRocketMQ,攻击:

SQLinjectCSRFDDoS,框架:

SpringSecurityExpress-jwt/CSRFDjangosecurity,HTTP:

NginxApacheIIS,Varnishsquid,Web开发内容与技术栈-10大Web开发框架,https:

/hackr.io/blog/top-10-web-development-frameworks-in-2019,Web开发内容与技术栈-JS移动与桌面等,其他,桌面开发,移动开发,H5PWA,小程序,ReactNative,Flutter,WebView/XWebJSCore/V8,JSX-JSJSCore/JSC.soNativeView,FlutterRenderDartVM,Browser,Electron,NW.js,Chromium+Node,ProtonNative,Meteor,ElectronMeteorUIFullStack,ReactNodeLibui,嵌入式,AI,JerryScriptIoT.jsQuick.js,TensorFlow.jsBrain.js,CordovaWebView+NativeAPIs,VR,AframeWebVR,Search,FlexSearch.jselasticsearch-js,Lunrjs,Web开发内容与技术栈-关联知识领域,自动构建与包管理,框架与组件库,JavaWeb框架,NodeJSWeb框架,模板引擎,网络协议,CookieSession,压缩合并,浏览器内核,RPC/消息,Web安全,Web服务器,应用服务器,网络服务器,代理服务器,Linux服务器,数据可视化,图像编辑,3D全景,视频播放,视频编辑,音频编辑,本地存储,数据库,缓存,文件系统,分布式,大数据计算,相似度分析,内容特征提取,索引与排序,视频编解码,JavaScriptTypeScript,Java/Go,NodeJSPython,Shell/AWK,C/C+,设计模式,CSS动画,H5新标签,动作手势,排版布局,框架组件,网络与通信,服务器,多媒体,存储,大数据/算法,开发语言,交互体验,UI交互设计,Web开发内容与技术栈-具体工作单元,Web开发模式与分层结构,Web开发模式与分层结构-开发思想与项目开发模式,Web开发模式与分层结构-开发模式演进,HTML,CSS,JS,JSP,WebServer,混和时代,Databases,Controller,Model,HTML,CSS,JS,JSP,View,后端MVC,Databases,Servlet,JavaBean,ServiceServer,Service,RPC/Databases,Controller/JSONAPI,Model,HTML,CSS,JS,Ajax,前端RIA/SPA,Service,Service,Model,Infrastructure,RESTfulAPI,MicroService,ViewComponent,ViewModel,WebApp/MVVM,MicroService,Template,1995,2000,2005,2015,Router,NodeSSR/薄UIMiddleLayer,MicroService,MicroService,Web开发模式与分层结构-分层模型,View,Controller,Model,MVC,mapping,manipulates,visit,display,firesupdate,View,Presenter,Model,MVP,update,action,manipulates,visit,firesupdate,View,ViewModel,Model,MVVM,update,firesevents,update,visit,notifychange,DOMlistener,Databinding,dispatch,composite,proxy,StructsSpringMVCBackbone,action,RiotJSAndroidMVPWinforms,VueJSReactJSAngularJS,Web开发模式与分层结构-MVC代码示例（Basic）,https:

/,Web开发模式与分层结构-MVC代码示例（JS）,Web开发模式与分层结构-MVC代码示例（Java）,Web开发模式与分层结构-MVP代码示例（JS）,Web开发模式与分层结构-MVVM代码示例（JS）,Web开发模式与分层结构-TinyMVVM代码示例（JS）,Web开发模式与分层结构-分层架构-经典,View/Template,Controller,BusinessService/TransactionManager,ORMframework/Middleware,Databases,Cache,WebAppServer,DataServer,BusinessModels,HTML/CSS/JS,控制器,数据,业务,模型,视图,request,MVC单体应用,Web开发模式与分层结构-分层架构-流行,ViewModel,Router,NodeJSSSR/JavaThinUI,Services/Adapters,前端,后端,ViewComponent（HTML/CSS/JS）,ViewModel,RPC/API,业务,模型,静态资源,request,Router,领域,SSR/薄UIServer,GraphQLAPI,RESTfulAPI,模块化/微服务,前后端分离SOA,Services/Adapters,DomainLayer,Entities,Services,Repository,InfrastructureLayer,Databases,Cache,MQ,RPC,ORM,Persistence,Web开发模式与分层结构-分层架构-趋势,ViewModel,Router,NodeSSR/ThinUI,EventsDispatch,前台,中台,ViewComponent（HTML/CSS/JS）,ViewModel,BFF,静态资源,request,Router,事件分发,SSR/薄UIServer,GateAPI,GateAPI,函数计算,前后端分离Serverless,Lambda,Services,Databases,File,MQ,MicroService,BaseService,BFF,GateAPI,微服务,函数计算,基础服务,GateAPI,BackendForFrontend,Function,Store,Search,Upload,Lambda,Function,前端,云服务,Serveless,MonolithicApplication,Web开发模式与分层结构-分层结构对比,MicroService,MicroService,MicroService,Function,Function,Function,Function,Function,Function,单体应用,模块化/微服务,FaaS,ApplicationServer,NetworkServer,Serverless,SaaS,函数计算,BaaS,Web开发流程与分工,Web开发流程与分工-基本流程,分批提测,持续集成循环迭代,需求,设计,开发,测试,上线,Web开发流程与分工-前后端边界问题,如何分工协作才更高效？

做自己该做的事情,我懂你,最好的沟通是不用沟通,做最擅长的事情,不要给自己设限,谁定义的接口？

参数传错了？

你改了调用方式？

联调简直比开发还累！

前后端都可以做兼容，要不你改吧？

你重启啦？

！

你版本没更新!

你懂的,你不看wiki和文档啊,流程混乱,分层不清,机制比人靠谱，但不要拘泥,NB的人不需要约束,Web开发流程与分工-前后端分工演进,不区分,区分,专业区分,全栈,1995-2005,2005-2010,2010-今,2015-今,混合部署,动静分离,后端API,SSR/BFF,前端渲染,前端渲染,混合渲染,后端渲染,后端入口,后端入口,前端入口,前端入口,后端微服务,后端服务化,Web开发流程与分工-前后端分工模式,公司早期,公司发展期,公司成熟期,适合各阶段,Web开发流程与分工-前后端边界,需求文档信息架构功能结构交互设计视觉设计用户研究,中间件/驱动搜索推荐大数据加密安全模式识别图像/音频识别机器学习深度学习,Browser/ClientWebApp,SSR/ThinUI/BFF,Persistence/ORM,GateAPI,Networks/HTTP,VirtualMachine/AppEngine,Database/StoreInfrastructure,LinuxOS,Model,Domain,MicroService,网络,测试,运维,etc.,Web开发流程与分工-NodeJS全栈开发,Vue/React/Angular,NodeJSServer,Nginx,MongooseODM,Express/KOA/Nest,MongoDB,MEVNstack|MERNstack|MEANStack,request,response,parserequest,parserequest,returnrequest,getdata,returndata,SSR/API,XHR/Fetch,displayrender,viewdata,businessdata,Web开发流程与分工-工作职责,Web开发未来与发展,Web开发未来与发展-技术改进点,Web开发未来与发展-趋势关键词,WebComponents,NodeFullstack,WebAssembly,Lambda,NodeDesktop,Serverless,函数式,跨平台,TypeScript,微服务,SSR,CloudApp,事件驱动,数据驱动,PWA,NestJS,GraphQL,Kotlin,Web开发未来与发展-Web架构与合作改进,细粒度松耦合服务化,减少沟通减少流程减少约束,展现与技术分离数据与技术分离业务与技术分离,增强理解增强信任增强交流,简单灵活高效,Web开发未来与发展-应用展望,Web开发未来与发展-趋势展望,浏览器OS化，软件云端化，资料云端化,JS成为目标语言，浏览器字节码成为标准,Web3.0？

网页,网站,应用、小程序,软件、CloudApp,谢谢,