Web前端技巧栈,Web前端开采大系大概浏览

By admin in 4858美高梅 on 2019年9月17日

Web前端开辟大系概览 (前端开采手艺栈)

2015/08/12 · JavaScript
· Web开发

本文我: 伯乐在线 –
灵感之源
。未经小编许可,禁止转发!
接待出席伯乐在线 专栏撰稿人。

记念几年前写过一篇关于.NET开荒方面包车型大巴学识总括,不过随着本事的迈入以及本人手艺精通的进级,认为有必要对那篇文章加以更新和周到。

前段时间在园子里也观察有人写关于.NET知识类别的篇章,特别是灵感之源Web前端技巧栈,Web前端开采大系大概浏览。写的两篇小说,一篇是关于web前端的Web前端开采大系概览(前端开荒技术栈),和一篇关于.NET服务端的.NET技术大系概览(迄今截至最全的.NET手艺栈),都计算得十一分好。以后本身将前端和服务端都计算成三个xmind思维导图的款式,当然有非常多地点仿照效法了unruledboy兄弟的稿子,在这里向她表示谢谢。

前面笔者也将这几个内容作为项目开源了,放在GitHub上,作者盼望我们能够一同去完善它。

4858美高梅 1

Web前端才能栈

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

4858美高梅 2

以下是种种前端职务任职资格的列表和认证。最常被大家誉为的三个职位名称是前端开发者或者前端工程师。请记住,只假使称呼和浩特中学蕴藏前端client-sideweb UIHTMLCSS或者JavaScript多个字的称为,一般都印证这厮领会了一定水准的HTML、CSS、DOM和JavaScript方面的专门的工作知识。

前言

互连网组建50多年了,网址开荒技巧新生事物正在蓬勃发展,但web前端始终离不开浏览器,最后还是HTML+JavaScript+CSS那3个大旨,围绕那3个核心而开荒出来大批量技能框架/技术方案。

本人从两千年终初始做网址开辟,使用的手艺不断迭代,一些收敛了,更加多的产出了。

最近写过  .NET技能大系概览(迄今停止最全的.NET技能栈) ,相信广大网络好朋友惊叹精晓的.NET技能远未有这么些手艺栈里面所描述的多。

GitHub开源地址

DotNetFullStack

活动转移预览图


爆栈三部曲

  •  Web前端开采大系概览(前端开采技能栈) ,包蕴大致1捌12个本领点
  •  数据库开荒大系技术栈
    (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.

那是用来描述多少个前端开采职员的通用称呼,代表着他们在某种程度上熟悉通晓了HTML,CSS,DOM和JavaScript,并在网络平台上用到了这个手艺。

问题

大家是或不是想过:

  • Web前端开荒毕竟含有怎么样技艺呢?
  • 自个儿所主宰的技巧那些子集,在Web前端工夫大系这几个超集里面占的比重是有个别啊?
  • 自个儿到底还不曾调整多少Web前端技艺吗?
  • 面试的时候会考哪些本事吗?

深信广大网民看过作者前面写的.NET技能大系概览(迄今甘休最全的.NET才具栈),三个大概易懂的栈图能够归纳.NET那几个庞然大物的工夫生态圈里面基础手艺:

4858美高梅 3

 

还有数据库技巧栈:

4858美高梅 4

那么,Web前端开拓是不是也相应有与上述同类的本领栈大概浏览图呢?

查找了十分久,未有找到二个合乎小编供给的“较为周全”地球表面明Web前端技艺大系的图形。

互联网络来往皆以那么些大约的,例如这些:

4858美高梅 5

仍然这一个:

4858美高梅 6

恐怕那些:

4858美高梅 7

唯独这一个都远远未有惊人总结整个Web前端开垦技能,和本人索要的不等同。

运维命令

npm start 运营服务并平素张开主html文件。

npm run build 生成预览图。

前面一个程序员(又名JS开辟者只怕全栈JS开荒者)

本条称呼用来陈诉那三个来自Computer科学工程背景并将此领域的技术与前端开采本领相结合的开采者们。那些剧中人物一般要求Computer科学领域的学位和多年的软件开辟经验。当专门的学问头衔中蕴涵了“JS应用”的时候,那将意味开拓人士应该是具备高端编制程序,软件开采和应用程序开拓工夫的高等JavaScript开辟人士(可能说具备多年前端接纳的付出经历)。

Web前端开辟技艺栈

近日盛行一个说法,是Full Stack
(全栈),轻松地说是万金油,说得得体一点正是前面叁个、后台、存款和储蓄、框架结构等都懂,作者感觉自家不是全栈,而是爆栈(stack
overflow),开玩笑了。。。。

以此Web前端开垦才具栈,大约二十一个层级,大致九18个技艺点,从底层一向到最顶层:

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

以此图形里的归类未必正确,相关技艺也难免会有遗漏,迎接我们指引以便不断创新。

Web前端技能其实太多数限于篇幅,,这里未有罗列一些技术。

以下是预览图:

4858美高梅 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.

CSS/HTML开发者

陈说具备HTML和CSS手艺的开采职员的前端职位称呼,不需要驾驭JavaScript和应用程序相关的学问。

GitHub开源

在GitHub开源了:WebFrontEndStack

 

为什么?

大家是还是不是想过:

  • Web前端开拓究竟包蕴如何技能吗?
  • 自身所主宰的手艺那几个子集,在Web前端本事大系这一个超集里面占的百分比是不怎么啊?
  • 自己毕竟还尚无调节多少Web前端技艺吧?
  • 面试的时候会考哪些技术吧?

那正是说,Web前端开垦是不是也应有有那般的技艺栈大概浏览图呢?搜索了十分久,未有找到贰个顺应小编供给的“较为圆满”地表明Web前端手艺大系的图形。所以大家自行设计了那一个Web前端技能栈。

其一图片里的归类未必正确,相关本事也难免会有遗漏,款待大家引导以便不断革新。

Web前端技巧其实太非常多限于篇幅,,这里未有罗列一些手艺。

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

前端web设计师

当“设计员”一词含有在职位名称中时,那将象征设计员具备前端手艺(即HTML和CSS),並且还具备标准企划(视觉设计和相互设计)技巧。

交互式浏览

点击 这里 查阅基于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]
        • 4858美高梅,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]

移步前端开辟者

当职位中隐含“移动”或“平板Computer”一词时,那将代表开采职员有在运动器具或平板设备上开采应用程序(原生或web平台上,如浏览器上)的前端经验。

关于小编:灵感之源

4858美高梅 9

智能实验室开创者。做过开源,写过相对化下载量软件,爱美国片电影音乐美人。定居澳国阿姆斯特丹。twitter加unruledboy。移民澳新的去freeoz论坛中夏族民共和国域名hioz

个人主页 ·
作者的稿子 ·
6 ·
  

4858美高梅 10

前端SEO专家

当“SEO”一词含有在岗位名称中时,那象征开荒职员具备在前端本领中采纳SEO计策的丰硕经验。

前端扶助成效专家

当职位中带有“帮助效能”一词时,那将标记开拓职员有拉长的经历来制订帮助无障碍须要和专门的学业的前端技艺。

前端开垦运营

当事情名称中带有“开垦运行”一词时,那将代表开荒职员在南南合作,集成,陈设,自动化和度量方面享有丰富的软件开采经验。

前端测量检验/QA

当职位中含有“测量试验”或“QA”一词时,这将评释开荒职员有加上的测验和保管经验,富含单元测量试验,功能测量检验,顾客测验和A
/ B测量检验。


请小心,假使你遭受职位名称中含有“全栈”或“Web开辟职员”时,那么雇主可能会期待这厮可以扮演网络/应用开采种种方面包车型地铁剧中人物,即需求承担前端开荒(有十分的大希望还包含布置)和后端开拓的具有职业。

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有