Reproduced Frontend Knowledge Structure

Source: Internet
Author: User

Https://github.com/JacksonTian/fks

http://code.csdn.net/news/2819224

This article has compiled a series of common tools for JavaScript, including common tools, front-end and back-end tools, from test to build, rich in content and worth collecting. The following is a mind map based on the recommended tools.

Click here to see the big picture

General Tools

Scaffolding tools

    • Yeoman: It is designed to provide developers with a range of robust tools, libraries, and workflows to help developers quickly build beautiful web applications.

Build tool (Auto)

    • Grunt.js: Strong ecological, rapid development, there are a large number of optional plug-ins;
    • Gulp.js: Streaming project building tools;
    • Browserify.js: node. js module, mainly used to rewrite the existing COMMONJS modules, so that the browser can also use these modules;
    • Uglify.js: JavaScript Parser, compression tool, and code beautification library.

Package Management Tools

    • Homebrew (Mac OS): Software Installation tool under Apple Mac OS;
    • Apt: Debian, Ubuntu and other Linux System Package management tools, can be used to install, delete, upgrade software, etc.;
    • NPM: node. JS 's official Package manager;
    • Bower: an open source project on Twitter for Web package management.
Front End

MVC Framework

    • Backbone.js: A framework for Web development that provides a model (models), collection (collections), view (views) structure for complex JavaScript applications;
    • Ember.js: You can create a feature-rich Web application and provide a standard application architecture JavaScript framework;
    • Angular.js: A set of frameworks, templates, and data binding and rich UI components for developing Web pages, without manual dom manipulation, and extending the HTML class library for apps.

Template

    • Handlebars.js: JavaScript page Template Library, can provide the necessary semantic template for the developer;
    • Mustache.js: Is the mustache template system JavaScript implementation, syntax logic is relatively simple, applicable to C + +, Clojure, Erlang, Go, Java, JavaScript and other languages;
    • Jade: node template engine, used primarily for server templates in node. js;
    • Haml-js: Allows the use of Haml syntax in JavaScript projects, with the same functionality as native Haml;
    • Eco: Can be used to embed coffeescript logic into a tag.

Test

    • Casper.js: Casperjs is a navigation script and test tool prepared for PHANTOMJS and Slimerjs;
    • Zombie.js: Zombie.js is a lightweight framework that allows you to test the client's JavaScript code in a simulated environment without the help of a browser.
back end

Server

    • Express: Node's Web application framework;
    • Node: node. JS is a platform built on the chrome JavaScript runtime to quickly build Web applications.

Database

    • MongoDB: Open source Document Storage database, is also a leading non-relational database;
    • Postgresql: Open Source Object-relational database server;
    • SQL: Structured Query language that can be used to access data and query, update, and manage relational database systems.

Architecture

    • RESTful: The current popular Internet software architecture, the structure is clear, easy to understand, easy to expand.

Test

    • Cucumber.js: Takes a popular behavior-driven development tool and applies it to the JavaScript stack.
    • Jasmine: A behavioral-driven development testing framework that is not dependent on the browser, DOM, or any other JavaScript architecture, and is better suited for Web sites, node. JS projects, or applications where JavaScript can be run.
    • Mocha: Runs on node. JS and the browser, primarily for asynchronous testing.
    • Q-unit: Unit Testing framework, commonly used in jquery, jquery UI, and jquery mobile projects, can also be used to test regular JavaScript code.

Assertion Library (Assertion Libraries)

    • Chai: A BDD/TDD Assertion library (assertion Libraries) for node that can be paired with any JavaScript test framework.

Functional Programming tools

    • Underscore.js: JavaScript Library, which provides a number of useful function programming tools without the need to extend any built-in objects;
    • Lo-dash: A JavaScript library that provides customization, performance, and consistency.

You can view the latest status of this recommendation list on GitHub.

Via codefellows

Extended Reading

Front-End Skills Summary: https://github.com/JacksonTian/fks

---------------------------------------------------------

Frontend Knowledge Structure Project origins

Remember the @jayli of the front-end knowledge structure map.

The form of the picture has many inconveniences. We can't contribute anything to this graph because of the missing source graph, and over time, there may be some technical points that might change, so with this GitHub project. We can work together to maintain this project in a collaborative way. Git's history can also witness some of the changes in the front-end industry.

Visual effects

Front-end development knowledge structure
  • Front End Engineer

    • Browser
      • IE6/7/8/9/10/11 (Trident)
      • Firefox (Gecko)
      • Chrome/chromium (Blink)
      • Safari (WebKit)
      • Opera (Blink)
    • Programming languages
      • Javascript/node.js
      • Coffeescript
      • TypeScript
    • Tangent page
      • html/html5
      • css/css3
      • photoshop/paint.net/fireworks/gimp
      • /ul>
    • Development Tools
      • editor and IDE
        • vim/sublime Text2
        • notepad++/ EditPlus
        • webstorm
        • Emacs emacswiki
        • Brackets
        • Atom
        • Lime Text
        • Light Table
        • Codebox
        • textmate
        • neovim
        • Komodo ide/edit
        • Eclipse
        • Visual Studio
        • NetBeans
        • Cloud9 IDE
      • Debugging Tools
        • firebug/firecookie
        • YSlow
        • iedevelopertoolbar/ietester
        • Fiddler
        • Chrome Dev Tools
        • Dragonfly
        • Debugbar
        • Venkman
      • version Management
        • git/svn/mercurial
        • github/bitbucket/google code/gitorious/gnu Savan Nah/launchpad/sourceforge
    • Code Quality
      • Coding style
        • Jslint/jshint/jscs
        • Csslint
        • Markup Validation Service
        • HTML validators
      • Unit Test
        • Qunit/jasmine
        • Mocha/should/chai/expect
        • Unit JS
      • Automated testing
        • Webdriver/karma Runner/sahi
        • Phantomjs
    • Front End Library/framework
      • 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
      • Knockout
    • Front-end 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
        • Wcag
        • Role Attribute
        • Wai-aria
    • Performance
      • JSPerf
      • YSlow rules
      • Pagespeed
      • HttpWatch
      • DynaTrace ' s Ajax
      • High-performance JavaScript
    • Seo
    • Programming Knowledge Reserve
      • Data
      • Oop/aop
      • Prototype chain/Scope chain
      • Closed Package
      • Programming paradigm
      • Design Patterns
      • Javascript Tips
    • Deployment process
      • Compress merge
        • YUI Compressor
        • Google clousure complier
        • Uglifyjs
        • Cleancss
      • Document output
        • JSDoc
        • Dox/doxmate/grunt-doxmate
      • Project Building Tools
        • Make/ant
        • Gyp
        • Grunt
        • Gulp
        • Yeoman
        • FIS
        • Mod
    • Code Organization
      • Modularity of class libraries
        • Commonjs/amd
        • YUI3 Module
      • Modularity of business logic
        • Bower/component
      • File loading
        • Labjs
        • Seajs/require.js
      • Modular Preprocessor
        • Browserify
    • Safety
      • Csrf/xss
      • Csp
      • Same-origin Policy
      • Adsafe/caja/sandbox
    • Mobile Web
      • Html5/css3
      • Responsive web-Design
      • Zeptojs/iscroll
      • V5/sencha Touch
      • PhoneGap
      • JQuery Mobile
      • Mobile Web Initiative
      • Mobileok Checker
      • Open Mobile Alliance
    • Cutting-edge technology community/Conference
      • D2/webrebuild
      • NODEPARTY/W3CTECH/HTML5 Dream Factory
      • jsconf/Shanghai JS (jsconf.cn)
      • Qcon/velocity/sdcc
      • Jsconf/nodeconf
      • Cssconf
      • Ydn/yuiconf
      • Hybridapp
      • WHATWG
    • Computer Knowledge Reserve
      • Compilation principle
      • Network
      • Operating system
      • Algorithm principle
      • Engineering/Software Testing principles
      • Unicode
    • Soft Skills
      • Knowledge Management/summary sharing
      • Communication Skills/Team collaboration
      • Demand Management/PM
      • Interactive design/usability/accessibility knowledge
    • Visualization of
      • Svg/canvas/vml
      • Svg:d3/raphaël/snap.svg/datav
      • Canvas:createjs/kineticjs
      • Webgl/three.js
  • Back-end Engineer

    • Programming languages
      • c/c++/java/php/ruby/python/...
    • Web server
      • Nginx
      • Apache
      • Lighttpd
    • Database
      • Sql
      • Mysql/postgresql/oracle/db2
      • Mongodb/couchdb
    • Data caching
      • Redis
      • Memcached
    • File Cache/Proxy
      • Varnish
      • Squid
    • Operating system
      • Unix/linux/os x/windows
    • Data
Front-end Books recommended

★ The less the simpler, the more suitable for the introduction, ★ More than the difficulty is higher, or is more suitable in the back to see, such as the performance of the book.

Css
    • Eric Meyer about CSS (vol. II) ★
    • CSS authoritative Guide (3rd edition) ★
    • Proficient in css★★★
Javascript
    • JavaScript DOM Programming Art (2nd edition) ★
    • JavaScript Advanced Programming (3rd edition) ★
    • Sharp jquery★★.
    • High Performance javascript★★★
    • JavaScript Language Essence ★
    • JavaScript authoritative guide ★ ¡ï
    • Write javascript★★★ that can be maintained
    • JavaScript language Essence and Programming practice ★
    • Effective javascript★★★
    • Secrets of the JavaScript ninja★★★
    • JavaScript mode ★
    • JavaScript design mode ★★★★
    • Development of JavaScript Web rich application based on MVC ★
Performance practices
    • Web Performance Practice Log ★
    • Web Performance authoritative Guide ★
Version control tools
    • Version control path (GIT) ★
    • Pro git★★★
    • git authoritative guide ★★★★
Back-end books recommended Linux management
    • Linux System Management Technical Manual
    • Brother Bird's Linux private cuisine
    • Linux 101 Hacks
    • UNIX Shell Scripting
    • The Linux Command Line
    • Linux Network Administrator ' s Guide
Linux Programming
    • Linux Programming
    • Linux system programming
    • Advanced Programming for UNIX environments
    • UNIX Programming Art
    • The Linux programming Interface
    • Self-cultivation of programmers
    • Deep understanding of the Linux kernel
    • UNIX Network programming
    • TCP/IP Advanced Programming
C + +
    • Linux C Programming One-stop learning
    • C and Pointers
    • C Pitfalls and pitfalls
    • C Expert Programming
    • C Language Core Technology
    • Take care of the C pointer completely
    • Conquer C pointer
    • C + + programming ideas
    • High-quality Programming Guide---C + + language
    • Inside the C + + Object Model
    • A Tour of C + +
    • The C + + programming Language
    • The C + + standard library-a Tutorial and Reference
    • The C + + standard (Incits/iso/iec 14882-2011)
    • Overview of the New C + +
Front-End Job interview
    • Front-End Job interview questions

Reproduced Frontend Knowledge Structure

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.