微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

Web前端开发大系概览 (前端开发技术栈)

2015-08-18 20:36 前端大全

(点击上方,可快速关注)


作者:灵感之源(@灵感之源)

网址:http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html


前言


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


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


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


问题


大家是否想过:


  • Web前端开发究竟包含哪些技术呢?

  • 我所掌握的技术这个子集,在Web前端技术大系这个超集里面占的比例是多少呢?

  • 我究竟还没有掌握多少Web前端技术呢?

  • 面试的时候会考哪些技术呢?


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



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


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


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



或者这个:



或者这个:



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


Web前端开发技术栈


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


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


  • 浏览器

  • 渲染引擎、JavaScript引擎

  • HTML/JavaScript/CSS三支柱

  • 编辑器

  • 编译任务

  • 编译工具

  • 打包、调试、质量

  • 测试

  • JS基础类库

  • JS类库

  • UI框架

  • CSS预处理器

  • 模板

  • 现代化

  • 安全/模式

  • 中间语言

  • 跨平台解决方案


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


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


以下是预览图:



GitHub开源


在GitHub开源了:WebFrontEndStack:https://github.com/unruledboy/WebFrontEndStack




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 一图胜千言,数据可视化的响应式设计 Java程序员开发参考资源 Swift2.0版微信聊天 37-40集 (超清字幕) 大宝推荐读-大学时就能明白的6件事 Android 开发者选项详述