What to learn in 2017

• Top JavaScript Framework & Topics to Learn in 2017

JavaScript Online Books/Reference

• Explorer ES6
• Addy Osmani - Learning JavaScript Design Pattern
• Eloquent JavaScript
• Speaking JavaScript
• Principles Of Writing Consistent, Idiomatic JavaScript
• You-Dont-Know-JS
• You-Dont-Known-JS-Gitbook
• Programming JavaScript Application
• JavaScript - Refactoring Tale
• MSDN - JavaScript.aspx) ​

JavaScript Tutorial

• Airbnb - JavaScript Coding Style
• JavaScript Style Guide
• Tutorial Zine
• Google HTML5 Rocks
• Super Hero JS
• Barbarian Meets Coding
• envato tuts+ Code Tutorials - Web Development
• The JavaScript Tutorial
• Java The Right Way Simple JavaScript Inheritance: What you need to know
• Dhananjay Kumar
• Mastering the Arcane Art of JavaScript-Mancy for C# Developers
• JavaScript High Way

Javascript Learning

• MSDN - JavaScript.aspx)
• Course Repository For JavaScript Application Course
• Eric Elliott - Essential JavaScript Links
• rstacruz - bookmarks
• Medium.com/Javascript
• Essential JavaScript Links
• Leveling Up your JavaScript
• 15 free JavaScript Books
• JavaScript Survival Guide
• Microsoft Script Junkie
• You Don't Know JS
• IBM developerworks - Web
• Pluralsight - Mastering JavaScript Course Code
• How to Become a Great JavaScript Developer
• Learn Intermediate/Advanced Javascript
• Learn Modern Development (Javascript Career)
• Reddit Javascript learning
• Javascript Gardon
• Javascript.com
• Khanacademy, Javascript as first language
• Code Ademy
• How to learn Javascript properly
• MDN JavaScript Guide
• MDN JavaScript Reference
• Learning JavaScript Design Pattern
• Eloquent JavaScript
• Object-Oriented Javascript
  • MDN Working Object
• Optimizing Javascript for Extreme Performance and Low Memory
• Javascript.com

Github Repository

• Krasimir Tsonev

• Veera - Route Planner

• Rebecca Murphey

• Sandy Duan

Object Oriented JavaScritp

• The Case For Object-Oriented JavaScript
• Stackoverflow - How do I declare a namespace in JavaScript
• Prototypical Object-Oriented Programming using Javascript
• JavaScript classes

Functional JavaScript

• Functional JavaScript
• Thinking functionally in JavaScript
• Functional Programming in JavaScript
• Partial Application in JavaScript
• Ben Alman - Partial Application in JavaScript
• Lodash - function language library

Object Creation

• CodeProject - Understanding JavaScript Object Creation Patterns
• IBM - developerWorks - Embrace prototypal object-oriented programming
• Creating Objects with the JavaScript Language
• Get Started With Object-Oriented javascript code
• CodeProject - Javascript Objects
• Some Javascript constructor patterns, and when to use them
• Object Oriented JavaScript Pattern Comparison
• JavaScript Prototypal Inheritance

JSON

• Keep Claim and JSON
• A quick helper to work on JSON streams

Function

• Function Declaration
• Every Possible Way to Define a JavaScript Function

bind

• JavaScript bind function

Vanilla JS

• JavaScript Front-End Web App Tutorial
• Rediscovering MVC and How to Write without a Framework
• Vanilla JS
• Plain JS
• A Guide To Vanilla AJAX Without JQuery
• Google Vanilla JS

​

Promise

• Three Ways Understanding Promise
• Exploring Recursive Promises In JavaScript
• DWB - JavaScript Promise API
• DWB - Write Better JavaScript With Promise

Async

• Why RxJS Is The Hottest Way To Handle Async

Data Structure & Algorithm

• itsy bits data structure
• dsjs lib
• Buckets-JS
• Code Project Data Structure with JavaScript
• JavaScript data Structure - the binary tree
• github - JavaScript - Data Structure And Algorithms
• Best Books to learn javascript data structure and algorithm
• dsa-js

Memory Leak

• Memory Leaks
• Understand Memory Leaks in JavaScript applications
• Beyond Memory Leak in JavaScript
• Detached DOM and Memory Leak
• Taming The Unicorn: Easing JavaScript Memory Profiling in Chrome DevTools
• Use JavaScript Closure Efficiently ​

Best Practices/Patterns

• A Concise Introduction to JavaScript Design Pattern
• Patterns for Large-Scale JavaScript Application Architecture
• Front-end Driven Applications - A New Approach to Applications
• CodeProject - The High-Governance Of No-Framework
• Writing Testable JavaScript
• How to Write Clean JavaScript
• Introduction to clean javascript design
• JavaScript Best Practices
• Patterns for Large-Scale JavaScript Application Architecture
• Examples of Practical JavaScript Object Oriented Design Patterns
• Principals of Writing Consistent, Idiomatic javaScript
• JS Patterns
• Wrapping function in Javascript
• Immediately Invoked Function Expression
• Asynchronous Method queue chaining in Javascript
• Javascript Patterns
• Github Javascript Patterns
• shichuan Javascript Patterns Collection
• Pragmatic Standards: Javascript Coding Standard and Best Practices
• essential javascript design patterns

Javascript Patterns

• JavaScript Adapter Design Pattern
• Patterns in JavaScript
• Immediately-Invoked Function Expression (IIFE)
• Revealing Module Pattern - Techniques, Strategies and Patterns for Structuring JavaScript Code
• Revealing Prototype Pattern - Techniques, Strategies and Patterns for Structuring JavaScript Code
• Basic JavaScript Module Pattern
• The Module Pattern, A Little More Detail
• Using Method Chaining With The Revealing Module Pattern In JavaScript
• Module Best Practices
• JavaScript Module Patterns
• The Module Pattern And Inheritance: A better way
• Javascript Design Patterns
• Module Pattern in Depth
• JavaScript Module Pattern
• CodeProject JavaScript patterns Simplified
• Patterns For Large-Scale JavaScript Application Architecture
• []JSPattern.com - Archive for the ‘Object creation patterns’ Category
• Patterns for Large-Scale JavaScript Application Architecture
• BIILER PLATE JS ​

Module Pattern

• CSS-Tricks - How do you structure JavaScript? The Module Pattern Edition
• Preparing Yourself for Modern JavaScript Development

• JavaScript Modules: A Beginner's Guide

  Good summary. The first part is similar what I have written.

  The second discussed the module used in AMD and commonjs. Need to check.

• JavaScript Module Design Pattern

• JavaScript Module Pattern In Depth
• The Module Pattern in Javascript

• [Master Module Pattern by todd motto](https://toddmotto.com/mastering-the-module-pattern/

  Very nice overview and code example to illustrate what the module pattern is and its variations.

• StackOverflow - JavaScript Revealing Module Pattern Create Multiple Object

• THe Module Pattern, A Little More Detail & JavaScript Module Pattern, Memory and Colsure

  Provide some slight in term of how to create object using Closure (Module Pattern), why it is better than the classic object creation or using prototype

• JavaScript - Definitive Module Pattern

• CSS-TRICKS How do you Structure javascript? The Module Pattern Edition

• Module Pattern In Depth

  > Good material, Most of them are understandable. The only one is the last technique it brought that "Shearing" the private data among the files. Will come back to check again. 
  

• Modular Design Pattern: Private, Privileged and Protected Members in JavaScript

  Very advanced tutorial, discussing how to use Modular Pattern to protecting the methods and extending the modules

• Using Method Chaining With the Revealing Module Pattern

• Module Pattern Init
• Adding Micro-Constructors to a Moduler Design Pattern
• Github - UMD ​

JavaScript - Structure Code

• The Refactoring Tales
• Refactoring Towards Functional Programming in JavaScript
• In Vanilla JavaScript, How do I structure my app?
• Summary of Maintainable JavaScript Talk by Nick Zakas
• Writing Modular JavaScript With AMD, CommonJS & ES Harmony
• My Current JavaScript Design Pattern
• Maintainability Depends on Modularity: Stop using namespace
• How can I split a JavaScript application into multiple files?
• Module Pattern - How to split the code for one module into different files?
• Stackoverflow - How to define JavaScript NameSpace?
• Writing JavaScript Maintainable JavaScript
• Structure javascript Application
• Organizing JavaScript Code for WebSite
• Can you Organize javaScript Code?
• Using Objects to Organize Your Code
• The Design Of Code: Organizing javascript
• Dan Wahlin - Structuring Javascript code
• Tips for cleaning up spaghetti JavaScript
• look-ma-no-frameworks
• Techniques, Strategies and Patterns for Structuring JavaScript Code
• MVC Architecture for JavaScript Applications
• The Classic Game of Life in JavaScript With Framework-less MVC
• CSS-TRICKS How do you structure Javascript? The Module Pattern Approach
• JavascriptMVC
• When does it make sense to use an MVC framework for JavaScript
• [Frameworkless Javascript] (https://muut.com/blog/technology/frameworkless-javascript.html)
• [Toward MVC Without a Framework] (http://www.lighthouselogic.com/lightweight-mvc-with-rivets-js/)
• Rolling My OWn very simple, MVC Patterned Javascript Application
• [JavaScript File & Folder Structures: Just Pick One] (https://lostechies.com/derickbailey/2012/02/02/javascript-file-folder-structures-just-pick-one/)
• [Using Objects to Organize Your code] (http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/)
• [Architecting JavaScript] (http://wildermuth.com/2012/01/20/Modern_Web_Development_-_Part_2)
• [A Way to organize your javascript code] (http://weblogs.asp.net/jaimedelpalacio/a-way-to-organize-your-javascript-code)
• [Javascript Best Practices for ASP.NET MVC Developers] (http://stackoverflow.com/questions/7169227/javascript-best-practices-for-asp-net-mvc-developers)
• 15 Pragmatic JavaScript Tips for ASP.NET Developers
• [How to Structure JavaScript Code, Part 1] (http://devproconnections.com/javascript/how-structure-javascript-code-part-1)
• [How Do You Structure JavaScript? The Module Pattern Edition] (https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/)
• Are there any OO-principles that are practically applicable for Javascript?
• Design Pattern of Javascript
• How to structure your Javascript- Learning JavaScript Design Patterns
• Pluralsight Structure Javascript
• The Design of Code: Organizing JavaScript
• The Design of Code Organization
• Organizing your JavaScript an introduction to Modules
• Pattern of Large JavaScript Code
• JavaScript Best Practices
• Use Object to Organize your code
• Planning A Front-end JavaScript Application
• How to remove duplicate code in Ajax Call
• elijah manor - framework-independent javascript component
• Refactoring a JavaSript video Store
• The Refactoring Tales
• Refactoring JavaScript Single Page App
• 7 Patterns to Refactor JavaScript Applications
• Updated 7 Pattern to Refactor JavaScript Applications
• Functional Refactoring in JavaScript
• Writing Testable Frontend JavaScript Part 1 - Anit-patterns and their Fixes
• Writing Testable Fronted JavaScript Part 2 - Refactor way anti-patterns
• Code Org, Take 2: Structuring JavaScript Application

  By Rebacca Murphey, a very good introduction about how to structure the JavaScript Application code by applying MVC pattern. The article provides good illustration regarding components of M-V-C. But it does not provide any source code. Check JavaScriptMVC to get more idea of how to separate M-V-C

Debug

• Tips and Tricks to debug Client-Side JavaScript Code
• What to Do when your website is Broken

Testing

QUnit

• Apress Practical JQuery - QUnit
• Packt - JavaSript Unit Testing
• JQuery Cookbook
• Microsoft Skill Project

Security

• Crossing The Site Domain With JavaScript

Samples

• Filterable Product Grid
• Creating a Client Side Shopping Cart
• Seeing through th eMatrix of Javascript MVC Framework
• JavaScript: How to Embed Private Members Into an Object
• Seven Surprising JavaScript 'Features'
• [Tail call optimization in ECMAScript 6] (http://www.2ality.com/2015/06/tail-call-optimization.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+2ality+%282ality+%E2%80%93+technology%2C+life%29)
• [Data Structures With JavaScript: Stack and Queue] (http://code.tutsplus.com/articles/data-structures-with-javascript-stack-and-queue--cms-23348)
• [Data Structures With JavaScript: Singly-Linked List and Doubly-Linked List] (http://code.tutsplus.com/articles/data-structures-with-javascript-singly-linked-list-and-doubly-linked-list--cms-23392)

JavaScript-Sample-ShoppingCart

• Creating A Client-Side Shopping Cart http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html http://www.smashingmagazine.com/2014/02/create-client-side-shopping-cart/ https://code.google.com/p/jscart/source/browse/jscart.js

  https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux https://code.google.com/p/jscart/wiki/Example

  http://simplecartjs.org/documentation

Javascript Libraries

• lodash

  JavaScript Utility Library

• pouchdb

  PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

  PouchDB was created to help web developers build applications that work as well offline as they do online.

• CommonJS

• Html 5 Boilerplate Wiki
• SweatAlert
• SweatAlert-Bootstrap
• syncfusion-1
• syncfusion-2
• The Modern Web Platform Jump Start
• Micro Framework
• rstacruz 101 - Javascript utility
• peasy-js

• recline

  A simple but powerful library for building data applications in pure Javascript and HTML.

• next

Chart Library

• 15 Best javascript Charting Libraries
• github pie graph
• pie
• Break Down - 1

Javascript-Ajax

• Using HMLHttpRequest

Development Tools

• Google Chrome Developer Tool
  • Manning Building Single Page Application - Chapter One

JavaScript Intellisense

• references.js

Application Architecture

• zero framework manifesto
• The High-Governance of No-Framework

JS Fiddle

• Derick Bailey
• Jared Williams
• Sgentile
• Andrew Pougher
• Cody Lindley

Read Source

• How to Read Source Code
  • Start with looking at an individual function that you are interested in, try to find the source that implements it. Search for the key words in entire source code and see everything in connected way. For Jquery you should try this: http://james.padolsey.com/jquery/ . You can search for a function, all related functions will be highlighted.
  • Write your own flow chart of the program, note everything makes you confuse or interested. Notes is very important because it makes you easily to follow what you're doing and when you forget something, you can trace it quickly.
  • Execute each statement step by step until you reach the end, by this way you can see how the parts work together.
  • Try to change the source code, debug and see the result (remove, add, change some lines...)
  • If possible try to answer some questions: Why do they implement that way? How will you do it? Rewrite it your own then compare them. You can always extract some particular functions into a separate program and play around with them.

Type Script

• TypeScript: Add Producivity and Manageability to your JavaScript Apps
• TypeScript: Add Producivity and Manageability to your JavaScript Apps - Part 2
• From JavaScript to TypeScript