/awesome-javascript

A starter guide for both JavaScript beginners and intermediate programmers.

Primary LanguageJavaScript

Awesome JavaScript

JavaScript是一个仅在一周就被发明出来的小玩意，所以，它有着有多的缺陷，即使是这样，它已经存在了20年，全世界几乎每台电脑都至少装有一个JavaScript解释器，况且今天这个当初的小玩意的目标是编写大型的企业应用。如果你对JavaScript的理解仅限于DOM操纵，页面动画，jQuery等等，本列表将为你展现JavaScript的更多的令人震撼的功能。

这份列表是一些优秀的网络资源的汇总，部分资源可能需要翻墙（梯子）访问。本列表不追求大而全，而追求寻找那些对JavaScript中的某些知识点有着独到见解的网络资源，希望这些资料的汇集能够为您在寻找类似资料的时候带来一点便利。

JavaScript

Books

  1. Eloquent JavaScript Online Book
  2. Speaking JavaScript: An In-Depth Guide for Programmers
  3. JavaScript高级程序设计，第三版
  4. JavaScript秘密花园
  5. JavaScript精粹
  6. 阮一峰： JavaScript 标准参考教程

Readings

  1. 同构JavaScript应用
  2. 知乎：大公司是如何开发和部署前端代码的
  3. Learn javascript in one picture

Blogs

  1. @ality - JavaScript and more
  2. Blog: Ariya Hidayat
  3. Code as Craft

Abstract Syntax Tree

Basic Knowledge

  1. 美团：抽象语法树在JavaScript中的应用
  2. 轻松搞定JavaScript预解析机制
  3. JavaScript编译运行原理
  4. PPT： Building JavaScript Tools
  5. SlideShare: JavaScript: Abstract Syntax Tree
  6. SlideShare: Esprima, what is that

Tools

  1. SpiderMonkey: Reflect.parse - Mozilla's Parser API
  2. Esprima: most popular ECMAScript parser in JS
  3. Acorn - faster alternative ECMAScript parser in JS
  4. UglifyJS - has own parser with custom AST format
  5. Estraverse - taraverse and update the AST
  6. Escodegen - generates code from an AST

Esprima解析得到的抽象语法树AST遵循SpiderMonkey的API。

Helpers

  1. Esprima Online Parser
  2. ESLint - The pluggable linting utility for JavaScript and JSX
  3. aster - AST-based code builder

Tutorial

  1. Esprima tutorial
  2. Fun with Esprima and Static Analysis
  3. Parsing and modifying JavaScript code with Esprima and Scodegen

Functions

  1. JavaScript Immediately-Invoked Function Expression

Promise

  1. Browser-side: bluebird, a full featured promise library
  2. Nodejs-side: co - he ultimate generator based flow-control goodness for nodejs (supports thunks, promises, etc)

Modular

Reading

  1. PPT：JavaScript 模块化七日谈
  2. 从零开始实现一个JavaScript模块化加载器
  3. Eloquent JavaScript, chapter 10, Modules
  4. 详解JavaScript模块化开发
  5. 图文：SeaJS与RequireJS最大的区别
  6. 模块化开发，SeaJS简单总结
  7. Why AMD?
  8. 百度EFE：玩转AMD
  9. 异步模块定义AMD API中文版
  10. CommonJS规范 中文版
  11. RequireJS in Node
  12. 前端模块及依赖管理的新选择：Browserify
  13. Browserify Handbook
  14. 前端工程与模块化框架
  15. 前端模块化开发那点事

Design Patterns

  1. 极客学院：学用JavaScript设计模式
  2. 什么是掺合模式（Mixin）

Tutorial

  1. Understanding RequireJS for Effective JavaScript Module Loading
  2. Writing Modular JavaScript With AMD, CommonJS & ES Harmony

ES 5

  1. Object.create()
  2. Object.defineProperty
  3. getter
  4. setter
  5. 严格模式
  6. JSON
  7. Array.prototype.map()
  8. Array.prototype.filter()

React.js

Reading

  1. Online Book: React and Webpack
  2. 颠覆式前端UI开发框架：React
  3. ReactJS傻瓜教程
  4. React: Create maintainable, high-performance UI components
  5. Navigating the React Ecosystem
  6. Flux: An Application Architecture for React
  7. Smart and Dumb Components
  8. Container Components
  9. React 入门教程
  10. Thinking in React
  11. An opinionated guide to React.js best practices and conventions
  12. Best practices for building large React applications
  13. From AngularJS to React: The Isomorphic Way
  14. Understanding the React Component Lifecycle

InfoQ: React-in-depth

  1. 深入浅出React.js（一）简介
  2. 深入浅出React.js（二）WebPack
  3. 深入浅出React.js（三）JSX和组件

Flux

  1. Flux傻瓜教程
  2. What is the Flux Application Architecture?
  3. 结合React, Flux & WebComponents
  4. Flux solutions compared by example
  5. Beyond the to-do app: writing complex applications using Flux & ReactJS
  6. Flux React Router Example

Libraies

  1. React: complementatry tools
  2. React-Bootstrap: css framework
  3. React-Router: routing in react app
  4. formsy-react: a form input builder and validator for React JS

Tutorial

  1. React.js Introduction For People Who Know Just Enough jQuery To Get By
  2. Building The Facebook News Feed With Relay
  3. React.js Starter Kit
  4. Flux Quick Start: manage data and state for react app
  5. Getting started with Facebook's React.js
  6. Youtube: Trying webpack with React.js
  7. React with WebPack - part 1
  8. 基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用

Isomorphic JavaScript

  1. PPT: Going Isomorphic with React
  2. Isomorphic JavaScript: The Future of Web Apps
  3. 在服务器端渲染React组件
  4. Serverside Reat Rendering: Isomorhpic JavaScript with ReactJS + Node
  5. 使用ReactJS + Node实现服务器端响应渲染
  6. Creating Isomorphic Apps with Node.js, React, and Express

Others

  1. 跟 Web Components 打个啵

ECMAScript 6

Reading

  1. Learn ES2015, a detailed overview of ECMASCRIPT 6 features
  2. 阮一峰： ECMAScript 6入门
  3. Exploring ES6: Upgrade to the next version of JavaScript
  4. InfoQ专栏：深入浅出ES6(更新中)
  5. Mozilla: ES6 in Depth
  6. Gettting started with ECMAScript

Speech

  1. Youtube: John Paul - ES6 Right Now
  2. Youtube: PeterHallam & AlexRussell: Traceur: JS to JS compiler

Tutorial

  1. Using the ES6 transpiler Babel on Node.js
  2. Traceur, Gulp, Browserify and ES6

Libraries

  1. Github: es6-shim, ECMAScript 6 (Harmony) compatibility shims for legacy JavaScript engines
  2. Babel is a JavaScript compiler.
  3. Github: Traceur, a JavaScript.next-to-JavaScript-of-today compiler
  4. Traceur REPL
  5. Babel REPL
  6. Github: grunt-traceur
  7. Github: gulp-traceur
  8. Github: broccoli-traceur
  9. Github: es6ify

Questions

  1. StackoverFlow: Differences between Babel and Traceur

ES6 Iterators/Generator

  1. Iterators gonna iterate
  2. Youtube: ES6 Generator Tutorial
  3. The Basics Of ES6 Generators
  4. 学习ES6生成器
  5. Workshop: Learn Generators
  6. ECMAScript 2015: Generators and Iterators

ES6 Promise

  1. 谈谈ES6的Promise对象
  2. 异步流程控制：7 行代码学会 co 模块

WebSocket

Reading

  1. Book: The definitive guide to HTML5 WebSocket
  2. Stream Updates with Server-Sent Events

Tutorial

  1. Real time online activity monitor example with node.js and WebSocket

Node.js

Reading

  1. Book: Node.js In Action
  2. Node.js概述
  3. List: Awesome nodejs
  4. Eleoquent JavaScript, chapter 20, Node.js
  5. 七天学会Node.js
  6. Node.js Manual & Documentation
  7. Node.js Process对象
  8. Node编码规范
  9. ES6 on node.js
  10. 美团酒店Node全栈开发实践
  11. 阮一峰:require() 源码解读
  12. Online Book: stream-book, teach you how to write node.js programs with streams
  13. GraphQL Overview - Getting Started with GraphQL and Node.js
  14. Reading: Building With Node.js At eBay
  15. Building a GraphQL Server with Node.js and SQL

Node.js Tutorial

  1. Creating and Publishing Node.js Modules
  2. Node.js Tutorial Collection
  3. NodeSchool

Node.js Modules

Module fs

  1. fs模块简介
  2. How do I write files in node.js?
  3. Create Simple Text File in Node.js Using 'fs' Module
  4. Making directory along with missing parents in Node.js

Module path

  1. path模块简介

Module events

  1. 深入浅出Node.js（四）：Node.js的事件机制

NPM

  1. How to Build an npm Package
  2. A Facade for Tooling with NPM Package Scripts
  3. How to Use npm as a Build Tool
  4. How npm handles the "scripts" field

Koajs

  1. Koajs - 下一代Node.js Web框架
  2. Koa中文文档
  3. PPT: Co and Koa Talk
  4. Getting Started With Koajs
  5. Koajs开发最佳实践
  6. Koajs中间件开发最佳实践和应用架构建议
  7. Why you should and shouln't use Koa
  8. Kick-Off-Koa - An intro to koa via a set of self-guided workshops
  9. Workshop - A workshop to learn the the basics of koa, Express's spiritual successor
  10. Koajs quick start guide

Node with MySql

  1. Github: node-mysql
  2. Node.js MySql Tutorial
  3. sitepoint: Using MySql with Node.js & the node-mysql JavaScript Client

Template Language

Nunjucks

  1. Nunjucks 快速上手
  2. doc: Nunjucks 可用模版列表

Jade

  1. Jade - a Node Template Engine, Language Reference
  2. Jade Syntax Documentation

Tools

Editor

  1. WebStrom
  2. Visual Studio Code
  3. Visual Studio Community

Tutorial

  1. Hello Visual Studio Code (with Node.js)
  2. John Papa: Debugging with Visual Studio Code

Build

Build Tools

  1. Grunt
  2. Gulp, the streaming building system
  3. Browserify
  4. WebPack

Reading

  1. PPT: Build Wars
  2. The State of JS Build Tools 2015
  3. Gulp vs Grunt. Why one? Why the Other?
  4. Grunt vs Gulp - Beyond the Numbers
  5. 腾讯：Browserify运行原理分析
  6. Getting started with webpack
  7. WebPack怎么用
  8. github: webpack-howto: a simple cookbook

Git/ Github/ Gitlab

If you use Github, just use Github for Windows; If you use Gitlab in a internal network, you can use TortoiseGit as a GUI tool for git.

  1. Youtube: TortoiseGit Tutorial