惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
IT之家
IT之家
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
N
News | PayPal Newsroom
Cloudbric
Cloudbric
Webroot Blog
Webroot Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Simon Willison's Weblog
Simon Willison's Weblog
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
V
Vulnerabilities – Threatpost
Attack and Defense Labs
Attack and Defense Labs
C
Cyber Attacks, Cyber Crime and Cyber Security
Cisco Talos Blog
Cisco Talos Blog
C
Cybersecurity and Infrastructure Security Agency CISA
H
Hackread – Cybersecurity News, Data Breaches, AI and More
P
Proofpoint News Feed
阮一峰的网络日志
阮一峰的网络日志
S
Secure Thoughts
T
Tor Project blog
Latest news
Latest news
aimingoo的专栏
aimingoo的专栏
V2EX - 技术
V2EX - 技术
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
Securelist
T
Tenable Blog
N
Netflix TechBlog - Medium
Google Online Security Blog
Google Online Security Blog
博客园 - Franky
T
Troy Hunt's Blog
量子位
大猫的无限游戏
大猫的无限游戏
T
Threat Research - Cisco Blogs
T
The Exploit Database - CXSecurity.com
MongoDB | Blog
MongoDB | Blog
H
Heimdal Security Blog
D
Docker
W
WeLiveSecurity
Stack Overflow Blog
Stack Overflow Blog
G
Google Developers Blog
博客园 - 叶小钗
腾讯CDC
The Hacker News
The Hacker News
WordPress大学
WordPress大学
人人都是产品经理
人人都是产品经理
Project Zero
Project Zero
Martin Fowler
Martin Fowler

博客园 - 灵感之源

.NET的前世今生与将来 技术人生的职场众生相 - 十多年的经验与心得 爆栈之旅 - 从接触到成为经理,从中国到澳洲 - 我这10年来的开发历程 我的软件开发生涯 (10年开发经验总结和爆栈人生) 我的回忆录-青年 爆栈三部曲:数据库开发大系技术栈 (300多技术点) .NET技术大系概览 (迄今为止最全的.NET技术栈) 澳洲生活宝典 (兼我的2013总结) 某连锁酒店泄露数据的分析 我的回忆录 WaterfallTree(瀑布树) 详细技术分析系列 C#开源磁盘/内存缓存引擎 基于STSdb和fastJson的磁盘/内存缓存 怎样记住Integer的最大值(有趣的思维和搞笑的回答) STSdb,最强纯C#开源NoSQL和虚拟文件系统 4.0 RC2 支持C/S架构 在ASP.NET MVC 无需Web Form和Report Viewer 预览SSRS报表解决方案 STSdb,最强纯C#开源NoSQL和虚拟文件系统 C#写的NoSQL开源项目/系统(系列) 老调重弹:年龄大了,码农何去何从
Web前端开发大系概览 (前端开发技术栈)
灵感之源 · 2015-08-06 · via 博客园 - 灵感之源

2015-08-06 17:25  灵感之源  阅读(104585)  评论()    收藏  举报

前言

互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案。

我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了。

最近写过  .NET技术大系概览 (迄今为止最全的.NET技术栈) ,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多。

爆栈三部曲

问题

大家是否想过:

  • Web前端开发究竟包含哪些技术呢?
  • 我所掌握的技术这个子集,在Web前端技术大系这个超集里面占的比例是多少呢?
  • 我究竟还没有掌握多少Web前端技术呢?
  • 面试的时候会考哪些技术呢?

相信很多网友看过我之前写的.NET技术大系概览 (迄今为止最全的.NET技术栈),一个简单易懂的栈图可以概括.NET这个庞大的技术生态圈里面基础技术:

然后我也写了数据库开发大系技术栈 (300多技术点),一个简单易懂的栈图可以概括数据库这个庞大的技术生态圈里面基础技术:

那么,Web前端开发是否也应该有这样的技术栈概览图呢?

搜索了很久,没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。

互联网上来去都是那几个简单的,譬如这个:

或者这个:

 或者这个:

不过这些都远远没有高度概括整个Web前端开发技术,和我需要的不一样。

Web前端开发技术栈

现在流行一个说法,是Full Stack (全栈),简单地说是万金油,说得体面一点就是前端、后台、存储、架构等都懂,我觉得我不是全栈,而是爆栈(stack overflow),开玩笑了。。。。

这个Web前端开发技术栈,大约20个层级,大约100个技术点,从底层一直到最顶层:

  • 浏览器
  • 渲染引擎、JavaScript引擎
  • HTML/JavaScript/CSS三支柱
  • 编辑器
  • 编译任务
  • 编译工具
  • 打包、调试、质量
  • 测试
  • JS基础类库
  • JS类库
  • UI框架
  • CSS预处理器
  • 模板
  • 现代化
  • 安全/模式
  • 中间语言
  • 跨平台解决方案

这个图表里的分类未必准确,相关技术也难免会有遗漏,欢迎大家指点以便不断改进。

Web前端技术实在太繁多限于篇幅,,这里没有罗列一些技术。

以下是预览图:

 

因为内容太多,要看完整技术栈图的,可以访问GitHub。

GitHub开源

在GitHub开源了:WebFrontEndStack

交互式浏览

点击 这里 查看基于HTML的交互式图示 (鼠标拖动/滚轮缩放)