Web开发概述-历史发展与技术栈_第1页
Web开发概述-历史发展与技术栈_第2页
Web开发概述-历史发展与技术栈_第3页
Web开发概述-历史发展与技术栈_第4页
Web开发概述-历史发展与技术栈_第5页
已阅读5页，还剩53页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web开发概述lichunping目录什么是Web开发Web开发的历史演变Web开发内容与技术栈Web开发模式与分层结构Web开发流程与分工Web开发未来与发展什么是Web开发？什么是Web开发-概要Web开发是基于产品需求与设计稿通过Web技术对来自客户端的请求进行业务逻辑处理并实现界面交互功能的整个过程JSCSSHTTPPythonNodeJS什么是Web开发-访问基本流程通过网址返回网页内容发送访问请求呈现内容什么是Web开发-基本模型HTTP/HTTPSRequestResponseBrowserServerB/SvsC/S

?Web

vs

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

HeadersRequestURL: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:200Response

Body<!DOCTYPEhtml><html>

<head><title>Page

Title<title></head>

<body>Page

Content</body></html>HTTPLine消息行GET

/

HTTP/1.1Headers消息头若干Host:

xxxContent-type:

xxxUser-agent:

xxxBody实体内容HTML/JSON/Binary2进制push什么是Web开发-基本数据流程业务展现展现/业务数据处理流程Web开发的历史演变Web开发历史演变-互联网行业/history-of-the-internet-timeline-an-ever-evolving-digital-world/新浪网易搜狐瀛海威曙光BBS四通利方优酷京东360腾讯阿里百度爱奇艺小米美团

199519962000

20052010

2012

2015

滴滴头条快手拼多多摩拜商汤科技发展萌芽成熟Web开发历史演变-几个阶段蒂姆·伯纳斯-李万维网诞生1991第一阶段静态HTML1993第二阶段CGICommon

GatewayInterfaceApache/IIS1995第三阶段后台脚本Dynamic

ScriptASP/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开发历史演变-技术升级2000年前从无到有，混乱江湖2000-2010快速发展，黄金十年2015-今天趋向成熟，移动云端1995HTTP1.0Java/ServletJavaScriptPHP/ASPIENetscapeApache2000J2EE/EJBStruts1IE6HTML4JavaScript1.5Flash5PHP4HTTP1.12004Spring1.0Struts2Ajax/PrototypeFirefoxSafari/WebkitJavaScript1.6PHP5Java1.4.net2.0RubyDjangoAcrionScript22008JavaScript1.8Chrome/V8jQuery1.3HTML5草案3G推出2010前端模块化前端MV*NodeJSJava1.7JavaScript1.8ECMAScript5IE9iPhone42015Chrome40HTML5普及Kotlin/Java9Spring

Boot/CloudECMAScript6Angular/React/Vue/svelteElectronWebpack4G普及全栈/移动化2019Chrome70Edge换引擎Flash退出PWASSR流行小程序普及JS

V8

7.xES2019Go语言TypeScript5G元年Web开发历史演变-桌面浏览器份额Chrome

70%IE

65%Firefox

30%IE

5%

Firefox

10%Web开发历史演变-移动浏览器份额Chrome

60%Safari

40%Safari

20%Opera

30%Web开发内容与技术栈Web开发内容与技术栈-前后端工作内容前端开发后台开发HTMLJS/FlashCSSBrowserInteractionControllerTemplateWeb

ServerJava/NodePHP/PythonCacheMySQLNoSQLRPC/Message页面展现交互逻辑用户体验数据处理业务逻辑性能稳定UI界面设计交互设计HTMLCSSJQueryVue/ReactJavaScriptNode/PHPJava/GoC/C++系统与硬件Front-EndDevelopersWeb开发内容与技术栈-浏览器基本结构网络连接资源加载网络连接浏览器插件用户界面浏览器引擎JS解析引擎DOM创建HTML解析CSS解析用户安全数据持久渲染引擎Web开发内容与技术栈-前端三要素<body>

<h1>title</h1>

<div

id="Block">block</div></body>.highlight

{

color:

red

font-size:

2em

}(arr=>{

return

arr.reduce((acc,value)=>{

return

acc+value})})([1,2,3])HTMLJSCSSStructural结构/标签Presentational样式/外观Behavioral逻辑/交互TagNameDOMAttributesSelector

PropertiesBox

ModelDOM/BOMEventsXHR/FetchWeb开发内容与技术栈-前后端数据交互方式Form

GET/POSTXHR/FetchJSONPWeb

Socket/EventSource<form

action="/"

method="post"><input

type="text"

name="name"><input

type="file"

enctype="multipart/form-data"><input

type=“submit”

value="提交"><form>Form

dataJavaScriptXML/JSONMessageconst

url

=

"/jsonp?cb=xxx"$('head').src

=

url$('head').onload

=

()

=>

{//doSomething}

const

xhr

=

new

XMLHttpRequest()xhr.open('get',

'data.xml',false)xhr.send()fetch('/json').then((res)

=>

{

return

res.json()})const

ws

=

new

WebSocket('ws://xxx:443')

ws.onopen

=

()

=>

{ws.send(data)}ws.onmessage

=

(evt)

=>

{}const

sse

=

new

EventSource('/api/sse')sse.addEventListener('notice',

(evt)

=>

{})Web开发内容与技术栈-前端相关Web开发内容与技术栈-前端框架NPM下载量截止2019年8月/react-vs-vue-vs-@angular/core-vs-jquery/react-vs-vue-vs-@angular/core-vs-jqueryWeb开发内容与技术栈-前端框架github统计Web开发内容与技术栈-JS框架占比https://2018./front-end-frameworks/overview/2018

JS框架使用调查Web开发内容与技术栈-后台相关后台相关DatabaseCache/ORMRPC/消息服务发现Web

ServerFrameworksWeb安全Java:JettyTomcatWildFlyJava:SpringJSFNettyPython:WSGITornadoGunicornNode:HTTP

ModulenjsExpress?Python:FlaskDjangoPyramidNode:ExpressKOANestDB:MySQLPostgreSQLMongoDBCache:RedisCouchbaseMemcachedORM:MybatisSQLAlchemyMongooseRPC:ThriftgRPCDubbo发现:ZookeeperEtcdConsul消息:ActiveMQRabbitMQRocketMQ攻击:SQL

injectCSRFDDoS框架:SpringSecurityExpress-jwt/CSRFDjangosecurityHTTP:NginxApacheIISVarnishsquidWeb开发内容与技术栈-10大Web开发框架https://hackr.io/blog/top-10-web-development-frameworks-in-2019Web开发内容与技术栈-JS移动与桌面等其他桌面开发移动开发H5PWA小程序React

NativeFlutterWebView/XWebJSCore/V8JSX->JSJS

Core/JSC.soNative

ViewFlutter

RenderDartVMBrowserElectronNW.jsChromium+NodeProton

NativeMeteorElectronMeteor

UIFullStackReactNodeLibui嵌入式AIJerryScript

IoT.jsQuick.jsTensorFlow.jsBrain.jsCordovaWebView+Native

APIsVRAframeWebVRSearchFlexSearch.jselasticsearch-jsLunrjsWeb开发内容与技术栈-关联知识领域自动构建与包管理框架与组件库JavaWeb框架NodeJSWeb框架模板引擎网络协议CookieSession压缩合并浏览器内核RPC/消息Web安全Web服务器应用服务器网络服务器代理服务器Linux服务器数据可视化图像编辑3D全景视频播放视频编辑音频编辑本地存储数据库缓存文件系统分布式大数据计算相似度分析内容特征提取索引与排序视频编解码JavaScriptTypeScriptJava/GoNodeJSPythonShell/AWKC/C++设计模式CSS动画H5新标签动作手势排版布局框架组件网络与通信服务器多媒体存储大数据/算法开发语言交互体验UI交互设计Web开发内容与技术栈-具体工作单元需求分析/方案设计界面布局规划切图与页面搭建界面交互功能开发网络数据接口定义HTTP请求拦截处理模板映射与接口开发展现逻辑开发业务逻辑与领域模型开发数据库/缓存操作消息通信/日志监控软件与系统调用Web开发模式与分层结构Web开发模式与分层结构-开发思想与项目开发模式开发思想分层分模块面向对象面向过程函数式编程事件/数据驱动面向接口面向服务/微服务领域驱动项目开发模式瀑布迭代螺旋敏捷Web开发模式与分层结构-开发模式演进HTMLCSSJSJSPWeb

Server混和时代DatabasesControllerModelHTMLCSSJSJSPView后端MVCDatabasesServletJava

BeanService

ServerServiceRPC/DatabasesController/JSON

APIModelHTMLCSSJSAjax前端RIA/SPAServiceServiceModelInfrastructureRESTful

APIMicro

ServiceView

ComponentViewModelWebApp/MVVMMicro

ServiceTemplate1995200020052015RouterNode

SSR/薄UIMiddle

LayerMicro

ServiceMicro

ServiceWeb开发模式与分层结构-分层模型ViewControllerModelMVCmappingmanipulatesvisitdisplayfiresupdateViewPresenterModelMVPupdateactionmanipulatesvisitfiresupdateViewViewModelModelMVVMupdatefireseventsupdatevisitnotifychangeDOM

listenerData

bindingdispatchcompositeproxyStructs

Spring

MVC

BackboneactionRiotJS

AndroidMVP

WinformsVueJS

ReactJS

AngularJSWeb开发模式与分层结构-MVC代码示例(Basic)/jarry/design-pattern/blob/master/mvc_mvp_mvvm.htmlWeb开发模式与分层结构-MVC代码示例(JS)Web开发模式与分层结构-MVC代码示例(Java)Web开发模式与分层结构-MVP代码示例(JS)Web开发模式与分层结构-MVVM代码示例(JS)Web开发模式与分层结构-TinyMVVM代码示例(JS)Web开发模式与分层结构-分层架构-经典View/TemplateControllerBusiness

Service/Transaction

ManagerORMframework/MiddlewareDatabasesCacheWebAppServerDataServerBusiness

ModelsHTML/CSS/JS控制器数据业务模型视图requestMVC单体应用Web开发模式与分层结构-分层架构-流行ViewModelRouterNodeJS

SSR/Java

ThinUIServices/Adapters前端后端View

Component(HTML/CSS/JS)

ViewModelRPC/API业务模型静态资源requestRouter领域SSR/薄UI

ServerGraphQL

APIRESTful

API模块化/微服务前后端分离SOAServices/AdaptersDomainLayerEntitiesServicesRepositoryInfrastructureLayerDatabasesCacheMQRPCORMPersistenceWeb开发模式与分层结构-分层架构-趋势ViewModelRouterNode

SSR/ThinUIEvents

Dispatch前台中台View

Component(HTML/CSS/JS)

ViewModelBFF静态资源requestRouter事件分发SSR/薄UI

ServerGate

APIGate

API函数计算前后端分离ServerlessLambdaServicesDatabasesFileMQMicro

ServiceBase

ServiceBFFGate

API微服务函数计算基础服务Gate

APIBackend

For

FrontendFunctionStore……SearchUploadLambdaFunction前端云服务ServelessMonolithicApplicationWeb开发模式与分层结构-分层结构对比MicroServiceMicroServiceMicroServiceFunctionFunctionFunctionFunctionFunctionFunction单体应用模块化/微服务FaaSApplication

ServerNetworkServerServerlessSaaS函数计算BaaSWeb开发流程与分工Web开发流程与分工-基本流程需求分析功能设计编码单测/代码审查联调提测修复Bug发布分批提测持续集成循环迭代需求设计开发测试上线Web开发流程与分工-前后端边界问题如何分工协作才更高效？做自己该做的事情我懂你最好的沟通是不用沟通做最擅长的事情不要给自己设限谁定义的接口？参数传错了？你改了调用方式？联调简直比开发还累！前后端都可以做兼容，要不你改吧？你重启啦？！你版本没更新!你懂的你不看wiki和文档啊流程混乱分层不清机制比人靠谱，但不要拘泥NB的人不需要约束Web开发流程与分工-前后端分工演进不区分区分专业区分全栈1995-20052005-20102010-今2015-今混合部署动静分离后端APISSR/BFF前端渲染前端渲染混合渲染后端渲染后端入口后端入口前端入口前端入口后端微服务后端服务化Web开发流程与分工-前后端分工模式不区分前后端统称Web开发工程师，类似全栈从前端交互到后端逻辑再到数据库等适用快速创新的小公司适用对工程师能力有较高要求的大公司区分在同一个团队前后端有分工，但在同一个团队里管理。有的分工界限明确，有的不太明确，要看团队里是否有专门的前端小组。前端负责从前到后的全部展现开发，后端负责业务逻辑与数据库设计适用中小型规模的产品线，对效率和专业都有一定程度的要求区分不在同一个团队分属不同的研发团队，严格分工，各自发挥自己的技术优势。一种是同一产品或事业部下分设前后端团队，共同维护业务另一种是统一的前端大部门负责众多产品线乃至整个公司的前端研发前端负责展现与渲染，后端提供API，DBA负责数据库设计适用中大型公司且对前后端有高专业性要求的情况全栈开发包括后端开发、前端开发、界面设计、产品设计、数据库、算法、运维等面面俱到者鲜，按领域区分有：Web全栈、客户端全栈、系统软件全栈、运维全栈等全栈更多只为了提升人效的独当多面，对人的要求很高适用于要求很高的各种公司，尤其是顶级互联网公司，对人才要求精通专业且触类旁通公司早期公司发展期公司成熟期适合各阶段Web开发流程与分工-前后端边界需求文档信息架构功能结构交互设计视觉设计用户研究……中间件/驱动搜索推荐大数据加密安全模式识别图像/音频识别机器学习深度学习……Browser/Client

WebAppSSR/ThinUI/BFFPersistence/ORMGateAPINetworks/HTTPVirtualMachine/App

EngineDatabase/Store

InfrastructureLinux

OSModelDomainMicroService

人人文库> 全部分类> 应用文书 > 研究报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论