Web前端修仙指南课件

Web前端修仙指南前世今生篇Web前端修仙指南前世今生篇1什么是前端前端：针对浏览器的开发，代码在浏览器运行后端：针对服务器的开发，代码在服务器运行什么是前端前端：针对浏览器的开发，代码在浏览器运行2混沌初开混沌初开3混沌初开1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，TimBerners-Lee创建了W3C；这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP诞生。1995年网景推出了JavaScript至此，前端三大基础：HTML，CSS，JavaScript均已诞生混沌初开1994年可以看做前端历史的起点，这一年10月13日4Web前端修仙指南课件5前后端不分的时代互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。后端收到浏览器的请求生成静态页面发送到浏览器那时的前端工程师，实际上是模板工程师，负责编写页面模板。后端代码读取模板，替换变量，渲染出页面。前后端不分的时代互联网发展的早期，前后端开发是一体的，前端代6天地初现天地初现7天地初现1999年W3C发布第四代HTML标准同年微软推出用于异步数据传输的ActiveX，随即各大浏览器厂商模仿实现XMLHttpRequest。这标识着Ajax的诞生。但是Ajax这个词是在六年后问世的，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。前端不再是后端的模板，可以独立得到各种数据。Web1.0：静态网页，纯内容展示Web2.0：动态网页，富交互，前端数据处理天地初现1999年W3C发布第四代HTML标准8AJAXAJAX即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。以前加载数据的时候，都是通过后端模板或者其他方式一次性将数据全部读取。每次加载数据都必须刷新整个页面有了AJAX以后，就可以在不刷新页面的情况下请求或提交数据。提升用户体验，减轻了服务器负担。AJAXAJAX即“AsynchronousJavascr9蓬勃发展蓬勃发展10蓬勃发展2009年AngularJS诞生，随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生蓬勃发展2009年AngularJS诞生，随后被谷歌收购。11前端MVC框架前端通过Ajax得到数据，因此也有了处理数据的需求。前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端MVC框架的诞生。Backbone.jsBackbone将前端代码分成两个基本部分Model：管理数据View：数据的展现前端MVC框架前端通过Ajax得到数据，因此也有了处12前端ControllerBackbone只有M和V，没有C。因为，前端Controller与后端不同。不需要，也不应该处理业务逻辑只需要处理UI逻辑，响应用户的一举一动所以，前端Controller相对比较简单。Backbone没有C，只用事件来处理UI逻辑。前端ControllerBackbone只有M和V13MVVM模式另一些框架提出MVVM模式，用ViewModel代替Controller。View-Model：简化的Controller，唯一作用就是为View提供处理好的数据，不含其他逻辑。本质：view绑定view-model，视图与数据模型强耦合。数据的变化实时反映在view上，不需要手动处理。MVVM模式另一些框架提出MVVM模式，用View14AngularGoogle公司推出的Angular一个MVVM前端框架。它的风格属于HTML语言的增强，核心概念是双向绑定。AngularGoogle公司推出的Angular一个15VueVue.js是现在很热门的一种前端MVVM框架。博取众长，在轻量易于使用的同时，可以以渐进增强的形式开发不同规模的应用它的基本思想与Angular类似，但是用法更简单，而且引入了响应式编程的概念。VueVue.js是现在很热门的一种前端MVVM框架。16ReactFacebook出品核心是组件化，虚拟DOM拥有ReactNative作为移动端支持ReactFacebook出品17SPA（Single-pageapplication）前端可以做到：读写数据切换视图用户交互SPA（Single-pageapplication）前端18Router前端还有一种天然的方法，可以切换视图，那就是URL。通过URL切换视图，这就是Router（路由）的作用。优点：便于用户定位自身，用户下次通过URL进入的时候仍然是这个页面便于分享便于SPA施展拳脚Router前端还有一种天然的方法，可以切换视图，那就是U19Node2009年，Node项目诞生，它是服务器上的JavaScript运行环境。Node=JavaScript+操作系统APIJavaScript成为服务器脚本语言，与Python和Ruby一样JavaScript成为唯一的浏览器和服务器都支持的语言前端工程师可以编写后端程序了Node2009年，Node项目诞生，它是服务器上的Ja20前端开发模式的根本改变Node环境下开发大量使用服务器端工具引入持续集成等软件工程的标准流程开发完成后，编译成浏览器可以运行的脚本，放上CDN前端开发模式的根本改变Node环境下开发21新的挑战新的挑战22最好的时代与最坏的时代HTTP/2的持续普及放弃InternetExplorer8ES6&ES7promise、generator与async/await框架纷争打包工具：Rollup、Webpack2、Grunt、Gulp包管理：npm、yarnWebVR、WebAR、WebAssembly、WebComponents、智能硬件、游戏最好的时代与最坏的时代HTTP/2的持续普及23框架纷争框架纷争24大前端Web前端+移动端+桌面端+服务端移动端：Android端+iOS端Weex/ReactNative+Native桌面端：Electron服务端：Node.js大前端Web前端+移动端+桌面端+服务端25WebAssembly谷歌、苹果、微软和Mozilla等公司合力研发，这是能够运用在未来浏览器中承诺可带来20倍更快性能的字节码好处：大幅度提高Javascript的性能，同时也不损失安全性。允许任何语言编译到它制定的ASTtreeWebAssembly谷歌、苹果、微软和Mozilla等公司26InstantApp&PWA&小程序AndroidInstantApp：一种用户无需安装即可运行Android应用的全新方式。可通过Google搜索，共享连接，NFC等技术提供给用户PWA（ProgressiveWebApp）：利用现代浏览器的能力来达到类似APP的用户体验的技术如果用户需要，网页可以渐进式地变成App，比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。小程序InstantApp&PWA&小程序Android27WebGL(WebGraphicsLibrary)https:/threejs.orghttp:/