一张图读懂前端演进史(1995 ~ 2019)

本文通过一张图详细梳理了前端技术从1995年至今的发展历程,包括Browsers、HTML、CSS、JavaScript生态的演变,涉及各大浏览器、HTML标准、CSS语言及预处理器、JS框架和工具等关键节点。随着Vue、React、Angular等现代框架的崛起,前端技术日新月异。
摘要由CSDN通过智能技术生成

1994 年,网景发布了第一版 Navigator,这可以看作是前端历史的起点。如今,随着 Vue、React、Angular 等框架的兴起,前端发展得越来越快。一张前端演进史的图在 Reddit 上引起了热议,我们征得原图作者的同意,将这张图放在这里,希望和大家一起了解前端技术的历史,探讨前端圈的发展,共同学习进步!

内容涉及:

  • 浏览器的发展史
  • HTML 生态演进史
  • CSS 生态演进史
  • JavaScript 生态演进史

前端进阶史

Browsers

[1994] Netscape Navigator http://browser.netscape.com/

[1995] Internet Explorer https://www.microsoft.com/es-es/download/internet-explorer.aspx

[1995] Opera https://www.opera.com/es

[2002] Mozilla Firefox https://www.mozilla.org/en-US/firefox/new/

[2003] Apple Safari https://www.apple.com/safari/

[2008] Google Chrome https://www.google.com/chrome/

[2015] Microsoft Edge https://www.microsoft.com/en-us/windows/microsoft-edge

HTML Ecosystem

HTML Markup

[1997] HTML4 https://www.w3.org/TR/html401/

[2000] XHTML https://www.w3.org/TR/xhtml1/

[2004] Markdown https://daringfireball.net/projects/markdown/

[2006] HAML http://haml.info/

[2010] Handlebars https://handlebarsjs.com/

[2010] JADE https://pugjs.org/

[2012] HTML5 (Candidate Recommendation) https://www.w3.org/TR/html5/

[2014] JSX https://facebook.github.io/jsx/

[2015] PugJS (Previous JADE) https://pugjs.org/

[2017] Lit-HTML https://lit-html.polymer-project.org/

CSS Ecosystem

CSS Language & Interaction

[1996] CSS1 https://www.w3.org/TR/REC-CSS1/

[1999] CSS3 https://www.w3.org/TR/CSS/

[1996] Flash https://www.adobe.com/es/products/flashplayer.html

CSS Preprocessors

[2006] Sass https://sass-lang.com/

[2009] LESS http://lesscss.org/

[2010] Sass (SCSS) https://sass-lang.com/

[2010] Stylushttp://stylus-lang.com/

JS Tools & CSS-in-JS

[2013] PostCSShttps://postcss.org/

[2014] Autoprefixerhttps://autoprefixer.github.io/

[2014] Browserslist https://browserl.ist/

[2014] JSS https://cssinjs.org/

[2015] CSS Modules https://github.com/css-modules/css-modules

[2016] Styled Components https://www.styled-components.com/

[2017] Emotion https://emotion.sh/

CSS Methodologies

[2009] OOCSS http://oocss.org/

[2011] SMACSS http://smacss.com/

[2012] BEM http://getbem.com/

[2013] ACSS https://acss.io/

[2016] ITCSS https://itcss.io/

CSS Frameworks

[2006] YUI https://yui.github.io/yui2/

[2011] Twitter Bootstrap https://getbootstrap.com/

[2011] Foundation https://foundation.zurb.com/

[2012] Pure CSS https://purecss.io/

[2013] Semantic UI https://semantic-ui.com/

[2013] Materialize CSS https://materializecss.com/

[2014] Tachyons https://tachyons.io/

[2015] Milligram https://milligram.io/

[2015] Bulma https://bulma.io/

[2015] UIKit https://getuikit.com/

[2017] Tailwind CSS https://tailwindcss.com/

Javascript Ecosystem

Third-party & Others

[1995] Java Applets* https://www.java.com/es/

[1996] ActiveX http://activex.microsoft.com/

[1996] XML https://www.w3.org/XML/

[1997] ActionScript https://www.adobe.com/devnet/actionscript.html

[2004] Adobe Flex https://www.adobe.com/es/products/flex.html

[2007] Silverlight https://www.microsoft.com/silverlight/

[2008] Adobe AIR https://www.adobe.com/products/air.html

[2011] WebGL https://www.khronos.org/webgl/

[2015] WebAssembly https://webassembly.org/

* Not Javascript

Javascript Vanilla

[1995] Javascript Not standard yet

[1997] Javascript ES1 Edition

[1999] Javascript ES3 Edition

[2001] JSON https://json.org/

[2009] Javascript ES5 Edition

[2015] Javascript ES2015/ES6 Edition

[2016] Javascript ES2016/ES7 Edition

[2015] Javascript ES2017/ES8 Edition

[2016] Javascript ES2018/ES9 Edition

[2017] Javascript ES2019/ES10 Edition

JS Libraries

[2004] Dojo toolkit https://dojotoolkit.org/

[2005] Prototype http://prototypejs.org/

[2006] jQuery https://jquery.com/

[2006] ExtJS https://www.sencha.com/products/extjs/

[2007] MooTools https://mootools.net/

[2009] Underscore https://underscorejs.org/

[2012] Lodash https://lodash.com/

JS Superlanguage & Transpilers

[2009] CoffeeScript https://coffeescript.org/

[2009] Closure Compiler https://developers.google.com/closure/compiler/

[2011] Traceur https://github.com/google/traceur-compiler

[2012] Elm https://elm-lang.org/

[2012] 6to5 transpiler https://github.com/6to5

[2012] Typescript https://www.typescriptlang.org/

[2015] BabelJS (previous 6to5) https://babeljs.io/

JS Frameworks

[2010] Knockout https://knockoutjs.com/

[2010] Backbone https://backbonejs.org/

[2010] AngularJS https://angularjs.org/

[2011] EmberJS https://emberjs.com/

[2013] RiotJS https://riot.js.org/

[2013] React https://reactjs.org/

[2014] Aurelia https://aurelia.io/

[2014] Mithril https://mithril.js.org/

[2014] Marko https://markojs.com/

[2015] Vue https://vuejs.org/

[2015] Preact https://preactjs.com/

[2016] HyperApp https://github.com/JorgeBucaran/hyperapp

[2016] Angular https://angular.io/

[2016] Svelte https://svelte.dev/

Mobile JS Frameworks

[2013] Ionic https://ionicframework.com/

[2014] Native Script https://www.nativescript.org/

[2015] React Native https://facebook.github.io/react-native/

[2018] Vue Native https://vue-native.io/

Web Components Ecosystem

[2011] WebComponents v0

[2014] Polymer https://www.polymer-project.org/

[2016] HybridsJS https://hybrids.js.org/

[2017] WebComponents v1 https://www.webcomponents.org/

[2018] Lit-Element https://lit-element.polymer-project.org/

Build/Bundler Tools

[2010] NPM https://www.npmjs.com/

[2010] Browserify http://browserify.org/

[2012] Bower https://bower.io/

[2012] Grunt https://gruntjs.com/

[2013] Webpack https://webpack.js.org/

[2014] Gulp https://gulpjs.com/

[2015] Rollup https://rollupjs.org/

[2016] Yarn https://yarnpkg.com/

[2017] Parcel https://parceljs.org/

*本文转载于 GitHub,已取得原作者 Manz 授权,原文链接:https://github.com/ManzDev/frontend-evolution,感谢 Manz 对 GitChat 的支持!


如今,随着 Vue、React、Angular 等框架的兴起,前端发展得越来越快,必备技能也在不断迭代。你认为一个合格的前端工程师需要掌握哪些必备的前端知识?欢迎在读者圈里留言告诉我们,我们会挑选其中 5 位幸运读者,向其赠送《透视前端工程化》《前端开发核心知识进阶》两门 GitChat · 达人课优惠券!快来留言参与吧~

阅读全文: http://gitbook.cn/gitchat/activity/5d3802ee74053b7dc5cf8026

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ,阅读更多 GitChat 专享技术内容哦。

FtooAtPSkEJwnW-9xkCLqSTRpBKX

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值