Web前端开发大系概览 (前端开发技术栈)
前言
互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案。
我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了。
最近写过 .NET技术大系概览 (迄今为止最全的.NET技术栈) ,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多。
爆栈三部曲
- Web前端开发大系概览 (前端开发技术栈) ,包含大约180个技术点
- 数据库开发大系技术栈 (300多技术点)
- .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的交互式图示 (鼠标拖动/滚轮缩放)
Web前端开发大系概览 (前端开发技术栈)相关推荐
- 关于前端会用到的一些技术栈
基础技术 Html+Css:HTML(超文本标记语言--HyperText Markup Language)是构成 Web 世界的一砖一瓦.它定义了网页内容的含义和结构.层叠样式表 (Cascadin ...
- 前端学习(2374):技术栈的使用
- .Net Web开发技术栈
有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net web开发技术栈,以此帮助那些想学,却不知 ...
- .Net Web开发技术栈 收藏
原文:http://www.cnblogs.com/1996V/p/7700087.html#!comments 有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎 ...
- 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? .Net Web开发技术栈...
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先 ...
- Spring Security技术栈学习笔记(十三)Spring Social集成第三方登录验证开发流程介绍
开发第三方登录,我们必须首先要了解OAuth协议(本文所讲述的OAuth协议指的是OAuth2协议),本文首先简单介绍OAuth协议,然后基于Spring Social来阐述开发第三方登录需要做哪些准 ...
- 总结 10 年前端经验,谈谈前端人如何更快地成长
常言道:三十年河东.三十年河西.这句话放到前端领域,就要变成 "十年河东.十年河西",甚至每隔三五年,前端行业的技术格局就会大面积翻新.对于资深的前端开发者来说,已经适应了这种更新 ...
- python手机app开发_H5 手机 App 开发入门:技术篇
新人学习手机 App 开发,一开始总要选择一条学习路径. 如果你熟悉 Java 语言,可以学习安卓开发:如果熟悉脚本语言(比如 Python 或 Ruby),可以学习 Swift 语言,进行 iOS ...
- 开发规范及具体开发任务分工
开发规范及具体开发任务分工 CSDN发布时间:2018年03月22日 14:49:03 小组第七次会议于3月21日晚举行,我们确认了上次会议提出的后端架构的完整性.订立了开发规范,并且确定了每个人所负 ...
最新文章
- RunLoop的学习
- 当女朋友学会「监视」男朋友......
- 主机文件复制到Ubuntu系统中
- 软件测试中的存根程序
- 遍历列表python_Python 遍历List的三种方法
- 【opencv】通过摄像头进行实时边缘检测
- python api框架 hook_python学习之hook钩子的原理和使用
- 【MyBatis笔记】10-多对一左连接查询分步查询(查询所有订单及订单对应的客户)
- 蓝桥杯省赛2018年Java组B组
- 代码整洁之道—技术分享
- JMP系列-基础操作(一)
- 自己封装特定的Windows系统镜像
- 去除win10快捷方式的小箭头
- ARCGIS中坐标转换及地理坐标、投影坐标的定义(转载)
- 【软件应用】福昕pdf阅读器回退到上次阅读的位置
- 【身体这些部位不舒服的时候,你知道意味着什么吗?】收藏起来吧,震惊!实在是太...
- python爬虫:爬取猫眼TOP100榜的100部高分经典电影
- 【open3d】安装open3d.whl之后,import报错ModuleNotFoundError: No module named ‘open3d.cpu‘
- 刷表法 和 填表法(DP)
- [ZT]入门级磁带机使用方法
热门文章
- 学会shell 基本语法,玩转linux
- oracle11g关闭库,Oracle11g中SYS连接阻止关闭数据库
- python modbus tk 库_python modbus_tk模块学习笔记(rtu slaver例程)
- centos 文件夹网络连接_CentOS的网络配置的命令详解
- ipconfig默认网关为空_网络工程师之IPCONFIG命令详解
- primal and dual linear problem
- 数值分析书籍以及Intel性能分析工具
- linux的相关网站,与Linux相关的一些网站
- grafana默认用户名密码_提升运维格调?Grafana整合Zabbix
- java github关联登录_没错,用三方Github做授权登录就是这么简单!(OAuth2.0实战)...