NET开垦文化系统,Web前端开辟大系大概浏览
分类:前端技术

Web前端开荒大系大概浏览 (前端开垦才干栈)

2015/08/12 · JavaScript · Web开发

正文小编: 伯乐在线 - 灵感之源 。未经小编许可,禁止转发!
接待出席伯乐在线 专辑作者。

记念几年前写过一篇关于.NET开辟方面包车型客车学问总括,可是随发轫艺的向上以及和睦技艺驾驭的提高,感到有不能缺少对那篇小说加以立异和健全。

多年来在园子里也看看有人写关于.NET知识系统的文章,极其是灵感之源写的两篇作品,一篇是关于web前端的Web前端开采大系概览(前端开拓本领栈),和一篇关于.NET服务端的.NET技艺大系概览(迄今截至最全的.NET工夫栈),都总结得不得了好。以往本身将前端和服务端都计算成三个xmind思维导图的情势,当然有相当多地点参谋了unruledboy兄弟的小说,在此地向她表示感激。

末端笔者也将那些剧情作为项目开源了,放在GitHub上,小编希望我们能够共同去完善它。

图片 1

Web前端手艺栈

正如健全的浏览器、平台、类库、框架、工具等。

图片 2

  1. 综合类

    • 前端知识系统
    • 后面贰个知识结构
    • Web前端开辟大系大概浏览
    • Web前端开采大系概览-粤语版
    • Web Front-end Stack v2.2
    • 免费的编制程序中文图书目录
    • 前者书籍
    • 前面三个无偿图书大全
    • 后面一个知识体系
    • 无偿的编制程序普通话图书目录
    • 智能社 - 精通JavaScript开发
    • 再度介绍 JavaScript(JS 教程)
    • 俄亥俄州立高校公开学:计算机科学及编制程序导论
    • JavaScript中的this陷阱的最全搜罗–未有之一
    • JS函数式编制程序指南
    • JavaScript Promise迷你书(中文版)
    • Tencent运动Web前端知识库
    • Front-End-Develop-Guide 前端开荒指南
    • 前端开垦台式机
    • 大前端工具集 - 聂微东
    • 前者开垦者手册
  2. 入门类

    • 前端入门教程
    • 瘳雪峰的Javascript教程
    • jQuery基础教程
    • 前面叁个技术员必备的PS技巧——切图篇
    • 组成个人经历总计的前端入门方法
  3. 效果类

    • 弹出层
    • 要害图轮播特效
  4. 工具类

    • css sprite 百事可乐图制作
    • 版本调节入门 – 搬进 Github
    • Grunt-beginner前端自动化学工业具
  5. 慕课专项论题

    • 张鑫旭 - 慕课体系
    • lyn - 慕课体系
    • 艾伦 - 慕课连串
    • 碧仔 - Hello,移动WEB
  6. 周报类

    • 有惊无险科学和技术活动支付二队本事周报

前言

网络创设50多年了,网址开垦本领生机勃勃,但web前端始终离不开浏览器,最后依旧HTML JavaScript CSS那3当中央,围绕那3个大旨而支出出来大批量本领框架/应用方案。

自个儿从3000年底最早做网址开拓,使用的能力不断迭代,一些破灭了,越多的面世了。

多年来写过  .NET技巧大系概览(迄今截止最全的.NET技能栈) ,相信广大网络朋友感慨良深掌握的.NET本领远未有那个本领栈里面所描述的多。

GitHub开源地址

DotNetFullStack

电动转移预览图

爆栈三部曲

  •  Web前端开拓大系大概浏览(前端开荒手艺栈) ,满含大概176个技能点
  •  数据库开垦大系本事栈 (300多本领点)
  •  .NET才能大系大概浏览(迄今截止最全的.NET能力栈)

参谋资料

1,作者前面包车型客车那篇小说:让大家都创建筑组织调的学识树啊

2,王福朋的,友好计算的web前端知识系统完备【款待补充】

3,灵感之源的两篇作品:.NET本领大系大概浏览(迄今停止最全的.NET技艺栈),Web前端开垦大系概览(前端开辟技能栈)

希图条件

您应该安装Visual Studio 二零零六 。

  1. 安装 nodejs.

  2. 安装 Phantomjs.

  3. 安装 Python 2.7.

  4. npm install

倘使出现错误,您能够检查 [phantomjs-node] 的依赖(), node-gyp.

问题

世家是或不是想过:

  • Web前端开荒毕竟含有哪些技艺呢?
  • 笔者所调整的技术那些子集,在Web前端才具大系这一个超集里面占的百分比是稍微吧?
  • 本人终究还并未通晓多少Web前端本领吗?
  • 面试的时候会考哪些技巧吗?

深信不疑广大网络朋友看过作者后面写的.NET技能大系概览(迄今截止最全的.NET本领栈),三个轻易易懂的栈图能够归纳.NET那个庞大的本领生态圈里面基础技能:

图片 3

 

还有数据库技巧栈:

图片 4

那就是说,Web前端开拓是或不是也应当有这么的才能栈大概浏览图呢?

检索了比较久,未有找到二个符合本身须要的“较为圆满”地球表面述Web前端技巧大系的图形。

互联英特网往返都以那一个大约的,譬喻这一个:

图片 5

抑或那几个:

图片 6

要么那么些:

图片 7

只是这么些都远远未有中度总结整个Web前端开采手艺,和本身索要的不均等。

运维命令

npm start 运营服务并一直展开主html文件。

npm run build 生成预览图。

Web前端开辟技艺栈

现今盛行一个说法,是Full Stack (全栈),简单地正是万金油,说得体面一点就是前边三个、后台、存款和储蓄、架构等都懂,作者认为本人不是全栈,而是爆栈(stack overflow),开玩笑了。。。。

以此Web前端开荒本事栈,大致十多个层级,差不离玖14个本领点,从尾部一贯到最顶层:

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

其一图片里的分类未必正确,相关技艺也难免会有遗漏,招待我们带领以便不断立异。

Web前端技能其实太好些个限于篇幅,,这里没有罗列一些本事。

以下是预览图:

图片 8

点击查看原尺寸大图

选项

  -h, --help                           Display this message.
  -p, --port number                    (Default: 3000) Set the port what express listening.
  -ues, --update_existed_stargazers    (Default: false) Update project's stargazers including existed.
  --phantomjs                          The task to generate the image.
  --readme                             The task to update readme.
  --updatestargazers                   The task to update the count of the stargazers.

GitHub开源

在GitHub开源了:WebFrontEndStack

 

为什么?

大家是或不是想过:

  • Web前端开拓终究含有怎么着技能吧?
  • 本身所左右的技术那个子集,在Web前端本领大系这么些超集里面占的比重是稍微吗?
  • 本身到底还平昔不调整多少Web前端技艺呢?
  • 面试的时候会考哪些手艺呢?

那正是说,Web前端开采是或不是也相应有诸有此类的本领栈大概浏览图呢?搜索了比较久,没有找到二个适合自个儿须求的“较为完美”地发挥Web前端才具大系的图纸。所以大家自行设计了这些Web前端技术栈。

本条图形里的分类未必精确,相关技艺也难免会有遗漏,款待我们教导以便不断革新。

Web前端本事其实太许多限于篇幅,,这里未有罗列一些本事。

您能够点击上面链接查看交互式预览图(用鼠标移动/缩放/点击节点展开相关网址):

交互式浏览

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

1 赞 8 收藏 评论

Web前端本事栈

  • Web前端开荒本事栈
    • 浏览器
      • Internet Explorer
      • Chrome
      • Firefox
      • Safari
      • Opera
      • Edge
      • Netscape ;-)
    • 协议
      • HTTP/1.1
        • 链接
        • 会话
        • 授权
        • 请求
        • 响应
      • HTTP/2
        • 压缩
        • 打包
        • 服务器端推送
      • WebSocket
    • Web三剑客
      • HTML (HyperText Markup Language)
      • CSS (Cascading Style Sheets)
      • JavaScript
    • 标准
      • W3C
        • HTML
        • CSS
        • XHTML
        • XML
    • 着力概念
      • HTML
        • DOM
        • Element
        • Attribute
      • JavaScript
        • Prototype
        • Scope
        • Closure
        • JSON (JavaSript Object Notation)
        • AJAX (Asynchronous JavaScript and XML)
      • CSS
        • Selector
        • Priority
        • Specificity
        • Box Model
    • 渲染引擎
      • Trident (IE))
      • Blink / prev. WebKit (Chrome)
      • Gecko (Firefox)
      • WebKit (Safari)
      • Blink / prev. Presto (Opera)
      • EdgeHTML (Edge)
    • 剧本引擎
      • JScript (IE8- / ASP)
      • Chakra (IE9 / Edge))
      • V8 (Chrome / Opera / Nodejs / MongoDB) [GitHub]
      • SpiderMonkey (Firefox)
      • Nitro (Safari)
    • 运行时
      • Cookie
      • Local Cache
      • Session Storage
      • Local Storage
      • Components
        • Extensions
        • Plugins
      • Resources
        • Images
        • Icons
        • Fonts
        • Audios
        • Videos
    • 编辑器
      • Sublime Text
      • WebStorm
      • Atom [GitHub]
      • Vim
      • Emacs
      • Brackets [GitHub]
      • Light Table [GitHub]
      • Visual Studio
      • Visual Studio Code
      • Dreamweaver ;-)
      • FrontPage / SharePoint Designer ;-)
    • 编写翻译义务
      • 精简
      • 编译
      • 合并
      • 混淆
      • 图像优化
      • 单元测量试验
    • 编写翻译工具
      • Grunt [GitHub]
      • Gulp [GitHub]
      • Brunch [GitHub]
      • Yeoman
      • Broccoli [GitHub]
    • 调试
      • Developer Tools
      • Firebug [GitHub]
    • 基本功工具
      • Node.js [GitHub]
      • Phantom.js [GitHub]
      • SpiderMonkey
    • 材质调节
      • JSLint [GitHub]
      • JSHint [GitHub]
      • jscs [GitHub]
      • Closure Linter
    • 包管理
      • npm [GitHub]
      • Bower [GitHub]
    • 测试
      • 工具
        • QUnit [GitHub]
        • Jasmine [GitHub]
        • Mocha [GitHub]
        • Selenium [GitHub]
        • WebDriverIO [GitHub]
        • Protractor
        • Chai [GitHub]
        • Sinon.JS [GitHub]
        • Karma [GitHub]
        • nodeunit [GitHub]
        • tape [GitHub]
        • speckjs [GitHub]
      • 在线工具
        • Sauce Labs
        • Browser Stack
        • Browser Shots
        • Browserling
        • Browser Sandbox
        • Cross Browser Testing
        • Browsera
        • SortSite
    • 库 / 框架
      • 基础库
        • jQuery [GitHub]
        • Prototype [GitHub]
        • Zepto [GitHub]
        • MooTool [GitHub]
      • 模块化
        • ES6 Module
        • CommonJS
          • webpack [GitHub]
          • browserify [GitHub]
        • AMD
          • RequireJS [GitHub]
        • UMD
          • umd [GitHub]
      • 框架
        • AngularJS [GitHub]
        • Backbone [GitHub]
        • Knockout [GitHub]
        • Ember [GitHub]
        • React [GitHub]
        • polymer [GitHub]
        • Deft.js [GitHub]
        • Vue [GitHub]
        • Riot [GitHub]
      • UI框架
        • Bootstrap [GitHub]
        • Semantic UI [GitHub]
        • Foundation [GitHub]
        • Material UI [GitHub]
        • WinJS [GitHub]
        • Pure [GitHub]
        • Amaze UI [GitHub]
      • WebSocket
        • Socket.io [GitHub]
        • web-socket-js [GitHub]
      • 数量可视化
        • D3 [GitHub]
        • Echarts [GitHub]
        • HighCharts [GitHub]
        • Vis.js [GitHub]
        • Flot [GitHub]
      • WebGL
        • Three.js [GitHub]
        • Babylon.js [GitHub]
        • Pixi.js [GitHub]
      • CSS3 动画
        • Animate.css [GitHub]
        • bounce.js [GitHub]
        • Effeckt.css [GitHub]
        • move.js [GitHub]
      • 流程序调节制
        • ES6
          • Promise
          • Generator
        • ES7
          • yield
          • await
        • async [GitHub]
        • co [GitHub]
        • Promise
          • Bluebird [GitHub]
          • q [GitHub]
          • when.js [GitHub]
      • 函数式编制程序
        • bacon.js [GitHub]
        • immutable.js [GitHub]
        • ramda [GitHub]
        • underscore.js [GitHub]
        • lodash [GitHub]
        • ReactiveX [GitHub]
      • 手机 UI 框架
        • jQuery Mobile [GitHub]
        • Jo [GitHub]
        • Dojo Mobile
        • Lungo [GitHub]
    • CSS 预处理器
      • LESS
        • LESS [GitHub]
        • Hat [GitHub]
      • Sass(SCSS)
        • Compass [GitHub]
        • Bourbon [GitHub]
        • Gumby [GitHub]
      • Stylus
        • nib [GitHub]
    • 前程专门的工作
      • babel [GitHub]
    • 模板引擎
      • Handlebars [GitHub]
      • Haml [GitHub]
      • Slim [GitHub]
      • Jade [GitHub]
      • Ejs
      • Spacebars
      • mustache [GitHub]
    • 统一化
      • Normalize [GitHub]
      • Reset
    • 极品实施
      • SEO
      • Responsiveness
      • CDN
    • 安全
      • Sandbox
      • XSS
      • CORS
    • 中间语言
      • CoffeeScript [GitHub]
      • TypeScript [GitHub]
      • ClojureScript [GitHub]
      • JSX (Facebook)
    • 活动选择开辟
      • PhoneGap / Cordova [GitHub]
      • MUI [GitHub]
      • React Native [GitHub]
      • Ionic [GitHub]
    • 桌面应用开荒
      • Electron [GitHub]
      • NW.js [GitHub]

至于小编:灵感之源

图片 9

智能实验室创办者。做过开源,写过相对化下载量软件,爱美国大片电影音乐美眉。定居澳国芝加哥。twitter加unruledboy。移民澳新的去freeoz论坛中夏族民共和国域名hioz 个人主页 · 小编的篇章 · 6 ·   

图片 10

本文由pc28.am发布于前端技术,转载请注明出处:NET开垦文化系统,Web前端开辟大系大概浏览

上一篇:中需要做的事情,这些经验值得你看看 下一篇:没有了
猜你喜欢
热门排行
精彩图文