图片 10

前端开发技术栈,NET开发知识体系

Web前端开垦大系大概浏览 (前端开垦技能栈卡塔 尔(英语:State of Qatar)

2015/08/12 · JavaScript
· Web开发

本文我: 伯乐在线 –
灵感之源
。未经小编许可,禁绝转载!
招待参与伯乐在线 专栏审核人。

记得N年前写过豆蔻梢头篇关于.NET开拓方面包车型大巴文化总括,但是随着技能的发展甚至本人技能理解的升官,感觉有至关重要对那篇小说加以更新和完美。

新近在园子里也见到有人写关于.NET知识类别的作品,特别是灵感之源写的两篇文章,后生可畏篇是关于web前端的Web前端开荒大系概览(前端开采工夫栈卡塔尔国,和意气风发篇关于.NET服务端的.NET技能大系概览(迄今甘休最全的.NET本领栈卡塔 尔(阿拉伯语:قطر‎,都计算得老大好。今后自个儿将前端和服务端都总计成一个xmind思维导图的样式,当然有成百上千地点仿照效法了unruledboy兄弟的稿子,在这里地向他表示感激。

末端笔者也将这几个剧情作为项目开源了,放在GitHub上,小编期望我们能够生机勃勃并去康健它。

图片 1

Web前端技巧栈

相比康健的浏览器、平台、类库、框架、工具等。

图片 2

前言

网络建设构造50多年了,网址开辟技术步步高升,但web前端始终离不开浏览器,最后仍旧HTML+JavaScript+CSS那3个基本,围绕那3个着力而付出出来一大波技巧框架/应用方案。

自己从2000年终最初做网址开拓,使用的本事不断迭代,一些未有了,越多的现身了。

近些日子写过  .NET本事大系大概浏览(于今结束最全的.NET才干栈卡塔尔 ,相信广大网络亲密的朋友感叹不已领会的.NET技能远未有这几个工夫栈里面所描述的多。

GitHub开源地址

DotNetFullStack

电动转移预览图

爆栈三部曲

  •  Web前端开发大系大概浏览(前端开垦手艺栈卡塔尔国 ,包涵大概176个技能点
  •  数据库开采大系能力栈
    (300多手艺点卡塔 尔(阿拉伯语:قطر‎
  •  .NET技能大系大概浏览(到现在截至最全的.NET技能栈卡塔 尔(英语:State of Qatar)

参照他事他说加以考察资料

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技巧栈卡塔 尔(英语:State of Qatar),二个简便易懂的栈图能够归纳.NET这几个特大的本领生态圈里面底子本领:

图片 3

 

还有数据库本事栈:

图片 4

那正是说,Web前端开荒是不是也理应犹如此的手艺栈大概浏览图呢?

查找了相当久,未有找到一个符合自身需求的“较为圆满”地球表面明Web前端技能大系的图形。

互联网络来往都以那个大约的,譬喻那些:

图片 5

依旧这几个:

图片 6

只怕这一个:

图片 7

不过那个都远远未有惊人回顾整个Web前端开拓本事,和自家急需的差异等。

运维命令

npm start 运维服务并一贯张开主html文件。

npm run build 生成预览图。

Web前端开荒才具栈

今昔风行贰个说法,是Full Stack
(全栈卡塔 尔(阿拉伯语:قطر‎,轻易地正是万金油,说得美观一点便是前面三个、后台、存款和储蓄、框架结构等都懂,作者以为自家不是全栈,而是爆栈(stack
overflow),开玩笑了。。。。

其风华正茂Web前端开荒技巧栈,大概19个层级,大约九二十个手艺点,从尾巴部分一直到最顶层:

  • 浏览器
  • 渲染引擎、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

发表评论

电子邮件地址不会被公开。 必填项已用*标注