Frontend Knowledge Structure

Original purpose

Once upon a time, there's a graph of Frontend Knowledge Structure original posted by @jayli ...

Frontend Knowledge

A shortcoming of releasing the graph in form of picture is, as the technology develops, we can't make any contribution to the graph without its source file -- That is why this GitHub repository comes. In this repository, every one could contribute to the project. The development of frontend profession will also be written to the history by Git.

Although the project would be maintained in plain text instead, I promise a small tool based on project DataV would be developed for us to generate more funny graphs.

Knowledge Structure of Frontend Development

Frontend Engineer
- Web browsers
  - IE6/7/8/9/10/11 (Trident)
  - Firefox (Gecko)
  - Chrome/Chromium (Blink)
  - Safari (WebKit)
  - Opera (Blink)
- Programming Languages
- Slicing
  - HTML/HTML5
  - CSS/CSS3
  - Sass/LESS/Stylus
  - PhotoShop/Paint.net/Fireworks/GIMP/Sketch
- Development tools
  - Editors and IDEs
    - VIM/Sublime Text2
    - Notepad++/EditPlus
    - WebStorm
    - Emacs EmacsWiki
    - Brackets
    - Atom
    - Lime Text
    - Light Table
    - Codebox
    - TextMate
    - Neovim
    - Komodo IDE / Edit
    - Eclipse
    - Visual Studio/Visual Studio Code
    - NetBeans
    - Cloud9 IDE
    - HBuilder
    - Nuclide
  - Debugging
  - Revision Control
    - Git/SVN/Mercurial
    - Github/GitLab/Bitbucket/Google Code/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
- Code quality
  - Coding style
  - Unit testing
    - QUnit/Jasmine
    - Mocha/Should/Chai/Expect
    - Unit JS
  - Auto-testing
- Frontend libraries / frameworks
  - jQuery/Underscore/Mootools/Prototype.js
  - YUI3/Dojo/ExtJS/KISSY
  - Backbone/KnockoutJS/Emberjs
  - AngularJS
    - Batarang
  - Bootstrap
  - Semantic UI
  - Juice UI
  - Web Atoms
  - Polymer
  - Dhtmlx
  - qooxdoo
  - React
  - Brick
- Frontend standards / specifications
  - HTTP/1.1: RFCs 7230-7235
  - HTTP/2
  - ECMAScript3/5
  - W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
  - CommonJS Modules/AMD
  - HTML5/CSS3
  - Semantic Web
    - MicroData
    - RDFa
  - Web Accessibility
- Performance
- SEO
- General programming knowledge
  - Data structure
  - OOP/AOP
  - Prototype chain/Scope chain
  - Closure
  - Programming paradigms
  - Design Patterns
  - Javascript Tips
- Deployment flow
  - Compressing and merging
  - Documentation generating
    - JSDoc
    - Dox/Doxmate/Grunt-Doxmate
  - Building
    - make/Ant
    - GYP
    - Grunt
    - Gulp
    - Yeoman
    - FIS
    - Mod
- Code organizing
  - Modularizing libraries
    - CommonJS/AMD
    - YUI3 Modules
  - Modularizing business logic
    - bower/component
  - File loaders
    - LABjs
    - SeaJS/Require.js
  - Modular preprocessor
    - Browserify
- Security
  - CSRF/XSS
  - CSP
  - Same-origin policy
  - ADsafe/Caja/Sandbox
- Mobile Web
  - HTML5/CSS3
  - Responsive web design
  - Zeptojs/iScroll
  - V5/Sencha Touch
  - PhoneGap
  - jQuery Mobile
  - W3C Mobile Web Initiative
  - W3C mobileOK Checker
  - Open Mobile Alliance
- Advanced technology communities/conferences
  - D2/WebRebuild
  - NodeParty/W3CTech/HTML5梦工厂(HTML5 Dreamworks)
  - JSConf/沪JS(JSConf.cn)
  - QCon/Velocity/SDCC
  - JSConf/NodeConf
  - CSSConf
  - YDN/YUIConf
  - HybridApp
  - WHATWG
  - MDN
  - codepen
  - w3cplus
  - CNode
- Computer science
  - Compilation principle
  - Computer network
  - OS
  - Algorithm principle
  - Software Engineering/Software testing principle
  - Unicode
- Soft skills
  - Knowledge Management/Sharing
  - Communication/Teamwork
  - Requirements Management/PM
  - Interaction Design/Availability/Accessibility
- Visualization
  - SVG/Canvas/VML
  - SVG: D3/Raphaël/Snap.svg/DataV
  - Canvas: CreateJS/KineticJS
  - WebGL/Three.JS
Backend Engineer
- Programming languages
  - C/C++/Java/PHP/Ruby/Python/...
- Web server
  - Nginx
  - Apache
  - Lighttpd
- Databases
  - SQL
  - MySQL/PostgreSQL/Oracle/DB2
  - MongoDB/CouchDB
- Data Caching
  - Redis
  - Memcached
- File Cashing/Proxying
  - Varnish
  - Squid
- OS
  - Unix/Linux/OS X/Windows
- Data structure

Book Recommendations for Frontend-ers

The ★ less and easier, the more suitable for starters

CVS

Book Recommendations for Backend-ers

Linux administration

Linux programming

C/C++

Front-end Developer Interview

Front-end Developer Interview Questions

Contributors

Thanks to Jayli who provided the original graph and contributors below. Generated by git-summary at 2014/01/03.


 project  : fks
 repo age : 1 year, 3 months
 active   : 53 days
 commits  : 108
 files    : 4
 authors  :
    56  Jackson Tian            51.9%
     9  吴晓兰               8.3%
     5  liyinkan                4.6%
     3  chriscai                2.8%
     3  fengxiaolong            2.8%
     3  XiNGRZ                  2.8%
     2  monkadd                 1.9%
     2  Johnny                  1.9%
     2  weiwenqing              1.9%
     2  Yinkan Li               1.9%
     2  Copypeng                1.9%
     2  左岸                  1.9%
     2  Jakukyo Friel           1.9%
     2  Glowin                  1.9%
     1  李亚川               0.9%
     1  Evan You                0.9%
     1  Mickey                  0.9%
     1  Mickey-                 0.9%
     1  Qi Junyuan              0.9%
     1  browsnet                0.9%
     1  doabit                  0.9%
     1  guoxiangyang            0.9%
     1  linkgod                 0.9%
     1  popomore                0.9%
     1  vipzhicheng             0.9%
     1  zhaqiang                0.9%
     1  Colin Luo               0.9%

Original purpose

Frontend Knowledge Structure

Original purpose

Knowledge Structure of Frontend Development

Book Recommendations for Frontend-ers

CSS

JavaScript

Performance && Practice

CVS

Book Recommendations for Backend-ers

Linux administration

Linux programming

C/C++

Front-end Developer Interview

Contributors