Web开发概述-历史发展与技术栈.pptx
- 文档编号:18684230
- 上传时间:2023-09-08
- 格式:PPTX
- 页数:58
- 大小:40.82MB
Web开发概述-历史发展与技术栈.pptx
《Web开发概述-历史发展与技术栈.pptx》由会员分享,可在线阅读,更多相关《Web开发概述-历史发展与技术栈.pptx(58页珍藏版)》请在冰点文库上搜索。
Web开发概述lichunping目录什么是Web开发Web开发的历史演变Web开发内容与技术栈Web开发模式与分层结构Web开发流程与分工Web开发未来与发展什么是Web开发?
什么是Web开发-概要JSCSSHTTPPythonNodeJS什么是Web开发-访问基本流程通过网址返回网页内容发送访问请求呈现内容什么是Web开发-基本模型HTTP/HTTPSRequestResponseBrowserServerB/SvsC/S?
WebvsSoftware?
W3C什么是Web开发-网络传输过程获取IP建立Socket服务端浏览器ISPDNS查询TCP握手初始化请求等待传输内容建立连接发送首字节发送尾字节传送接收首字节接收尾字节内容下载TCP挥手关闭Socket断开连接什么是Web开发-HTTP协议TCP/IPTLS/SSL多路复用HTTPHTTPs安全加密HTTP1.xHTTP2RequestHeadersRequestURL:
https:
/RequestMethod:
GETcontent-type:
text/html:
scheme:
httpscookie:
key=valueuser-agent:
Mozilla/5.0ResponseHeaderscache-control:
max-age=300content-encoding:
gzipcontent-type:
text/htmldate:
Sun,25Aug201914:
08:
43GMTserver:
nginxstatus:
200ResponseBodyPageTitlePageContentHTTPLine消息行GET/HTTP/1.1Headers消息头若干Host:
xxxContent-type:
xxxUser-agent:
xxxBody实体内容HTML/JSON/Binary2进制push什么是Web开发-基本数据流程业务展现展现/业务数据处理流程Web开发的历史演变Web开发历史演变-互联网行业http:
/BBS四通利方优酷京东360腾讯阿里百度爱奇艺小米美团1995199620002005201020122015滴滴头条快手拼多多摩拜商汤科技发展萌芽成熟Web开发历史演变-几个阶段蒂姆伯纳斯-李万维网诞生1991第一阶段静态HTML1993第二阶段CGICommonGatewayInterfaceApache/IIS1995第三阶段后台脚本DynamicScriptASP/PHP/JSP/JavaScriptApache/IISNexusMosaicNetscape/IE2000第四阶段后台应用MVC框架J2EE/PHPJS1.5Apache/TomcatIE后台软件生成HTML网页无动态效果信息展示后台脚本生成HTML网页简单动态效果信息共享后台应用生成HTML网页基本动态效果信息浏览Web1.0Web1.02005第五阶段交互应用MVC/ORMJ2SE/PHP/.NetAjaxApache/TomcatIE/Firefox后台生成结构混合渲染富客户端应用社交互动Web2.02015第六阶段WebAppMVVM框架ES6/7/8FP/lambdaNginx/Tomcat/NodeChrome/Safari微服务前端渲染单页面应用小程序Web2.0Web3.0?
Web1.0Web开发历史演变-技术升级1995HTTP1.0Java/ServletJavaScriptPHP/ASPIENetscapeApache2000J2EE/EJBStruts1IE6HTML4JavaScript1.5Flash5PHP4HTTP1.12004Spring1.0Struts2Ajax/PrototypeFirefoxSafari/WebkitJavaScript1.6PHP5J2.0RubyDjangoAcrionScript22008JavaScript1.8Chrome/V8jQuery1.3HTML5草案3G推出2010前端模块化前端MV*NodeJSJava1.7JavaScript1.8ECMAScript5IE9iPhone42015Chrome40HTML5普及Kotlin/Java9SpringBoot/CloudECMAScript6Angular/React/Vue/svelteElectronWebpack4G普及全栈/移动化2019Chrome70Edge换引擎Flash退出PWASSR流行小程序普及JSV87.xES2019Go语言TypeScript5G元年Web开发历史演变-桌面浏览器份额Chrome70%IE65%Firefox30%IE5%Firefox10%Web开发历史演变-移动浏览器份额Chrome60%Safari40%Safari20%Opera30%Web开发内容与技术栈Web开发内容与技术栈-前后端工作内容前端开发后台开发HTMLJS/FlashCSSBrowserInteractionControllerTemplateWebServerJava/NodePHP/PythonCacheMySQLNoSQLRPC/Message页面展现交互逻辑用户体验数据处理业务逻辑性能稳定UI界面设计交互设计HTMLCSSJQueryVue/ReactJavaScriptNode/PHPJava/GoC/C+系统与硬件Front-EndDevelopersWeb开发内容与技术栈-浏览器基本结构资源加载网络连接浏览器插件用户界面浏览器引擎JS解析引擎DOM创建HTML解析CSS解析用户安全数据持久渲染引擎Web开发内容与技术栈-前端三要素titleblock.highlightcolor:
redfont-size:
2em(arr=returnarr.reduce(acc,value)=returnacc+value)(1,2,3)Structural结构/标签Presentational样式/外观Behavioral逻辑/交互TagNameDOMAttributesSelectorPropertiesBoxModelDOM/BOMEventsXHR/FetchWeb开发内容与技术栈-前后端数据交互方式FormGET/POSTXHR/FetchJSONPWebSocket/EventSourceFormdataJavaScriptXML/JSONMessageconsturl=http:
/Somethingconstxhr=newXMLHttpRequest()xhr.open(get,data.xml,false)xhr.send()fetch(http:
/res.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:
/开发内容与技术栈-前端框架github统计forksWeb开发内容与技术栈-JS框架占比https:
/JS框架使用调查Web开发内容与技术栈-后台相关后台相关DatabaseCache/ORMRPC/消息服务发现WebServerFrameworksWeb安全Java:
JettyTomcatWildFlyJava:
SpringJSFNettyPython:
WSGITornadoGunicornNode:
HTTPModulenjsExpress?
Python:
FlaskDjangoPyramidNode:
ExpressKOANestDB:
MySQLPostgreSQLMongoDBCache:
RedisCouchbaseMemcachedORM:
MybatisSQLAlchemyMongooseRPC:
ThriftgRPCDubbo发现:
ZookeeperEtcdConsul消息:
ActiveMQRabbitMQRocketMQ攻击:
SQLinjectCSRFDDoS框架:
SpringSecurityExpress-jwt/CSRFDjangosecurityHTTP:
NginxApacheIISVarnishsquidWeb开发内容与技术栈-10大Web开发框架https:
/hackr.io/blog/top-10-web-development-frameworks-in-2019Web开发内容与技术栈-JS移动与桌面等其他桌面开发移动开发H5PWA小程序ReactNativeFlutterWebView/XWebJSCore/V8JSX-JSJSCore/JSC.soNativeViewFlutterRenderDartVMBrowserElectronNW.jsChromium+NodeProtonNativeMeteorElectronMeteorUIFullStackReactNodeLibui嵌入式AIJerryScriptIoT.jsQuick.jsTensorFlow.jsBrain.jsCordovaWebView+NativeAPIsVRAframeWebVRSearchFlexSearch.jselasticsearch-jsLunrjsWeb开发内容与技术栈-关联知识领域自动构建与包管理框架与组件库JavaWeb框架NodeJSWeb框架模板引擎网络协议CookieSession压缩合并浏览器内核RPC/消息Web安全Web服务器应用服务器网络服务器代理服务器Linux服务器数据可视化图像编辑3D全景视频播放视频编辑音频编辑本地存储数据库缓存文件系统分布式大数据计算相似度分析内容特征提取索引与排序视频编解码JavaScriptTypeScriptJava/GoNodeJSPythonShell/AWKC/C+设计模式CSS动画H5新标签动作手势排版布局框架组件网络与通信服务器多媒体存储大数据/算法开发语言交互体验UI交互设计Web开发内容与技术栈-具体工作单元Web开发模式与分层结构Web开发模式与分层结构-开发思想与项目开发模式Web开发模式与分层结构-开发模式演进HTMLCSSJSJSPWebServer混和时代DatabasesControllerModelHTMLCSSJSJSPView后端MVCDatabasesServletJavaBeanServiceServerServiceRPC/DatabasesController/JSONAPIModelHTMLCSSJSAjax前端RIA/SPAServiceServiceModelInfrastructureRESTfulAPIMicroServiceViewComponentViewModelWebApp/MVVMMicroServiceTemplate1995200020052015RouterNodeSSR/薄UIMiddleLayerMicroServiceMicroServiceWeb开发模式与分层结构-分层模型ViewControllerModelMVCmappingmanipulatesvisitdisplayfiresupdateViewPresenterModelMVPupdateactionmanipulatesvisitfiresupdateViewViewModelModelMVVMupdatefireseventsupdatevisitnotifychangeDOMlistenerDatabindingdispatchcompositeproxyStructsSpringMVCBackboneactionRiotJSAndroidMVPWinformsVueJSReactJSAngularJSWeb开发模式与分层结构-MVC代码示例(Basic)https:
/开发模式与分层结构-MVC代码示例(JS)Web开发模式与分层结构-MVC代码示例(Java)Web开发模式与分层结构-MVP代码示例(JS)Web开发模式与分层结构-MVVM代码示例(JS)Web开发模式与分层结构-TinyMVVM代码示例(JS)Web开发模式与分层结构-分层架构-经典View/TemplateControllerBusinessService/TransactionManagerORMframework/MiddlewareDatabasesCacheWebAppServerDataServerBusinessModelsHTML/CSS/JS控制器数据业务模型视图requestMVC单体应用Web开发模式与分层结构-分层架构-流行ViewModelRouterNodeJSSSR/JavaThinUIServices/Adapters前端后端ViewComponent(HTML/CSS/JS)ViewModelRPC/API业务模型静态资源requestRouter领域SSR/薄UIServerGraphQLAPIRESTfulAPI模块化/微服务前后端分离SOAServices/AdaptersDomainLayerEntitiesServicesRepositoryInfrastructureLayerDatabasesCacheMQRPCORMPersistenceWeb开发模式与分层结构-分层架构-趋势ViewModelRouterNodeSSR/ThinUIEventsDispatch前台中台ViewComponent(HTML/CSS/JS)ViewModelBFF静态资源requestRouter事件分发SSR/薄UIServerGateAPIGateAPI函数计算前后端分离ServerlessLambdaServicesDatabasesFileMQMicroServiceBaseServiceBFFGateAPI微服务函数计算基础服务GateAPIBackendForFrontendFunctionStoreSearchUploadLambdaFunction前端云服务ServelessMonolithicApplicationWeb开发模式与分层结构-分层结构对比MicroServiceMicroServiceMicroServiceFunctionFunctionFunctionFunctionFunctionFunction单体应用模块化/微服务FaaSApplicationServerNetworkServerServerlessSaaS函数计算BaaSWeb开发流程与分工Web开发流程与分工-基本流程分批提测持续集成循环迭代需求设计开发测试上线Web开发流程与分工-前后端边界问题如何分工协作才更高效?
做自己该做的事情我懂你最好的沟通是不用沟通做最擅长的事情不要给自己设限谁定义的接口?
参数传错了?
你改了调用方式?
联调简直比开发还累!
前后端都可以做兼容,要不你改吧?
你重启啦?
!
你版本没更新!
你懂的你不看wiki和文档啊流程混乱分层不清机制比人靠谱,但不要拘泥NB的人不需要约束Web开发流程与分工-前后端分工演进不区分区分专业区分全栈1995-20052005-20102010-今2015-今混合部署动静分离后端APISSR/BFF前端渲染前端渲染混合渲染后端渲染后端入口后端入口前端入口前端入口后端微服务后端服务化Web开发流程与分工-前后端分工模式公司早期公司发展期公司成熟期适合各阶段Web开发流程与分工-前后端边界需求文档信息架构功能结构交互设计视觉设计用户研究中间件/驱动搜索推荐大数据加密安全模式识别图像/音频识别机器学习深度学习Browser/ClientWebAppSSR/ThinUI/BFFPersistence/ORMGateAPINetworks/HTTPVirtualMachine/AppEngineDatabase/StoreInfrastructureLinuxOSModelDomainMicroService网络测试运维etc.Web开发流程与分工-NodeJS全栈开发Vue/React/AngularNodeJSServerNginxMongooseODMExpress/KOA/NestMongoDBMEVNstack|MERNstack|MEANStackrequestresponseparserequestparserequestreturnrequestgetdatareturndataSSR/APIXHR/FetchdisplayrenderviewdatabusinessdataWeb开发流程与分工-工作职责Web开发未来与发展Web开发未来与发展-技术改进点Web开发未来与发展-趋势关键词WebComponentsNodeFullstackWebAssemblyLambdaNodeDesktopServerless函数式跨平台TypeScript微服务SSRCloudApp事件驱动数据驱动PWANestJSGraphQLKotlinWeb开发未来与发展-Web架构与合作改进细粒度松耦合服务化减少沟通减少流程减少约束展现与技术分离数据与技术分离业务与技术分离增强理解增强信任增强交流简单灵活高效Web开发未来与发展-应用展望Web开发未来与发展-趋势展望浏览器OS化,软件云端化,资料云端化JS成为目标语言,浏览器字节码成为标准Web3.0?
网页网站应用、小程序软件、CloudApp谢谢
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 开发 概述 历史 发展 技术