前端开发的历史和趋势PPT文档格式.pptx

前端开发的历史和趋势PPT文档格式.pptx

《前端开发的历史和趋势PPT文档格式.pptx》由会员分享，可在线阅读，更多相关《前端开发的历史和趋势PPT文档格式.pptx（43页珍藏版）》请在冰豆网上搜索。

后端代码读取模板，替换变量，渲染出页面。

天地初现,天地初现,1999年W3C发布第四代HTML标准同年微软推出用于异步数据传输的ActiveX，随即各大浏览器厂商模仿实现XMLHttpRequest。

这标识着Ajax的诞生。

但是Ajax这个词是在六年后问世的，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。

Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。

前端不再是后端的模板，可以独立得到各种数据。

Web1.0：

静态网页，纯内容展示Web2.0：

动态网页，富交互，前端数据处理,AJAX,AJAX即“AsynchronousJavascriptAndXML”（异步Javascript和XML），是指一种创建交互式网页应用的网页开发技术。

以前加载数据的时候，都是通过后端模板或者其他方式一次性将数据全部读取。

每次加载数据都必须刷新整个页面有了AJAX以后，就可以在不刷新页面的情况下请求或提交数据。

提升用户体验，减轻了服务器负担。

蓬勃发展,蓬勃发展,2009年AngularJS诞生，随后被谷歌收购。

2010年backbone.js诞生。

2011年React和Ember诞生。

2014年Vue.js诞生,前端MVC框架,前端通过Ajax得到数据，因此也有了处理数据的需求。

前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端MVC框架的诞生。

Backbone.jsBackbone将前端代码分成两个基本部分Model：

管理数据View：

数据的展现,前端Controller,Backbone只有M和V，没有C。

因为，前端Controller与后端不同。

不需要，也不应该处理业务逻辑只需要处理UI逻辑，响应用户的一举一动所以，前端Controller相对比较简单。

Backbone没有C，只用事件来处理UI逻辑。

MVVM模式,另一些框架提出MVVM模式，用ViewModel代替Controller。

View-Model：

简化的Controller，唯一作用就是为View提供处理好的数据，不含其他逻辑。

本质：

view绑定view-model，视图与数据模型强耦合。

数据的变化实时反映在view上，不需要手动处理。

Angular,Google公司推出的Angular一个MVVM前端框架。

它的风格属于HTML语言的增强，核心概念是双向绑定。

Vue,Vue.js是现在很热门的一种前端MVVM框架。

博取众长，在轻量易于使用的同时，可以以渐进增强的形式开发不同规模的应用它的基本思想与Angular类似，但是用法更简单，而且引入了响应式编程的概念。

React,Facebook出品核心是组件化，虚拟DOM拥有ReactNative作为移动端支持,SPA（Single-pageapplication）,前端可以做到：

读写数据切换视图用户交互,Router,前端还有一种天然的方法，可以切换视图，那就是URL。

通过URL切换视图，这就是Router（路由）的作用。

优点：

便于用户定位自身，用户下次通过URL进入的时候仍然是这个页面便于分享便于SPA施展拳脚,Node,2009年，Node项目诞生，它是服务器上的Javascript运行环境。

Node=Javascript+操作系统API,Javascript成为服务器脚本语言，与Python和Ruby一样Javascript成为唯一的浏览器和服务器都支持的语言前端工程师可以编写后端程序了,前端开发模式的根本改变Node环境下开发大量使用服务器端工具引入持续集成等软件工程的标准流程开发完成后，编译成浏览器可以运行的脚本，放上CDN,新的挑战,最好的时代与最坏的时代,HTTP/2的持续普及放弃InternetExplorer8ES6&

ES7promise、generator与async/await框架纷争打包工具：

Rollup、Webpack2、Grunt、Gulp包管理：

npm、yarnWebVR、WebAR、WebAssembly、WebComponents、智能硬件、游戏,框,架纷争,大前端,Web前端+移动端+桌面端+服务端移动端：

Android端+iOS端Weex/ReactNative+Native桌面端：

Electron服务端：

Node.js,WebAssembly,谷歌、苹果、微软和Mozilla等公司合力研发，这是能够运用在未来浏览器中承诺可带来20倍更快性能的字节码好处：

大幅度提高Javascript的性能，同时也不损失安全性。

允许任何语言编译到它制定的ASTtree,InstantApp&

PWA&

小程序,AndroidInstantApp：

一种用户无需安装即可运行Android应用的全新方式。

可通过Google搜索，共享连接，NFC等技术提供给用户PWA（ProgressiveWebApp）：

利用现代浏览器的能力来达到类似APP的用户体验的技术如果用户需要，网页可以渐进式地变成App，比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。

小程序,WebGL（WebGraphicsLibrary）,https:

/threejs.orghttp:

/examples.html,Web前端修仙指南,上手篇,主讲人：

沈馨悦,目录,学习React、Vue等框架,0基础,引用框架+JS学习,熟悉前后端交互,2.w3school！

=w3c,w3c是万维网联盟，也是是Web技术领域最具权威和影响力的国际中立性技术标准机构，发布了一系列包括最初的www，html5,canves等等标准。

w3school只是W3C的中国社区成员，但上面的资源一直没有得到更新，如果你去看w3school的更新信息会发现，他最近一次更新在2009年。

而MDN是Mozilla开发者网络（MDN），它为为一切开源的东西提供完整的、准确的、有用的文档，所以至今为止也一直在更新。

（讲道理看两者的页面也能比较出来吧，强调：

不要过度沉迷css,0基础实践+知识点：

1.3天看完HTML+CSS基础html常用标签css常用属性2.了解切图、reset、响应式、布局解决3.写出自己的第一个页面,方案养兴趣，切勿沉迷）即可，后面的可以换教材了）,相关资料：

HeadFirstHTML与CSS（培网易前端微专业（看到页面架构百度IFE（前端技术学院）MDN,Javascript高级程序设计这本书讲得更好一些，没有犀牛书那么枯燥。

引,习，结合Javascript再写一个,上的页面,用框架+JS学实践+知识点：

Javascript语法学习Dom树操作裸写Javascript学习BootstrapUI框相关资料：

架以JavascriptDom编程艺术（大致了解Dom的各类操作）Javascript权威指南（犀牛书，重点为全书第二部分客户端Javascript）Javascript高级程序设计百度IFE（前端技术学院）,熟悉前后端交互,实践+知识点AJAXPOST、GET、fetch等方法为自己的页面添加后台传递过来的数据，实现登录登出功能相关资料：

MDN官方文档,nodejs语言的环境和平台npm包管理grunt，gulp前端工具，合并、压缩、编译,学习React、Vue等框架,实践+知识点理解webpack、babel、npm等理解组件化思维理解路由、store、状态管理等官方文档相关资料：

官方Tutorial视频教程（慕课网等）一些大牛的简要上手教程StackOverflow,正确的打怪升级姿势,中央高校5000-2w一校一带应该是2w-5w竞赛一般分为现场型和作品型，现场型比如说ACM，黑客马拉松，这类的更多参加的是作品型。

这些都是需要提前拿出作品来的。

一般是建议要提前开始准备。

比如说微软创新杯2月开始，这个我们上学期就开始准备了，寒假一直在做，所以到了2月报名的时候就比较稳。

现在应该是已经进了复赛了。

除了这些之外，还有一些校赛。

可以拿来练手。

不要浪费自己的每一点努力,然后VScode其实还是vs家的传统思路，即提供一个好用的，高性能的，功能丰富、质量可控的IDE。

sublime优点胜在轻量级。

和atom一样都是以插件架构为主。

这位Atom死忠党的学长表示，因为atom写代码的时候有很酷炫的特效，因此无法割舍。

但是如果你比较懒的话，不想自己手把手配插件，建议直接用vscode，超级爽，谁用谁知道。

欲善其事，必利其器。

技术类问题首选Google+API文档+githubReadMe.md（ctrl+F搜索）配置专属开发环境,采用ESLint避免低级错误和统一代码的风格,WebstormVScodeSublimetext3用Git管理自己的代码,Atom,关注前端资讯,掘金,InfoQ,前端早读课,前端外刊评论,论坛,公众号,联系我,QQ：

490098776微博：

左左薇拉veraBlog：