A look back at 2011, when I joined Drcom Health Group, I started struggling with JavaScript. I didn’t know where to start learning or debug , JavaScript is a black box to me. Although having many proficient guys around me but they couldn’t cover me every time. The only path to save my live is deep dive into JavaScript.

Up and down for over 2 years, I have gained many precious experiences. However, when looking back upon the past, I realize that I have taken a long and winding road to achieve my goal. Hence, I write this post to draw a straight learning path for newbies guy, hoping this will help fresh frontend devs less confusing at the very first days. I love to share and hear from you.

The 4-step process for mastering JavaScript:

1. Learning JS syntax

2. Mastering JavaScript design pattern

3. Understanding Framework philosophy

4. Using IDE, test, chrome dev tool, automated tool

Step 1: Learning JS syntax

Thanks Yusheng, he assembled the entire JavaScript programming syntax into one single all-encompassing image. It give me a overview of what material JavaScript is make of.

The above mind map only cover ES5, practice with them on online editor tool(jsbin, liveweave…) to see how they really work.

ES6 is a superset of ES5, which is complemented with some new data types and introduce syntactic sugars to deal with complicated application as well as reduce side effect, you can check them out here.

2. Mastering JavaScript design pattern

JavaScript is a loosely typed language, many things run implicitly under the hood. It’s easy to get us shoot on our foot. Design patterns come, offer developers ways to solve technical problems and prevent side effect.

“Design patterns are advanced object-oriented solutions to commonly occurring software problems. Patterns are about reusable designs and interactions of objects. Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions”

“Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we’re attempting to convey a way of structuring a solution in code form to others. “ Addy Osmani

Patterns help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we’re attempting to solve. This step lays foundation for me to conceive Frameworks with ease (on next step).

My favorite book on this part: Learning JavaScript Design Patterns

3. Understanding Framework philosophy

One thing you may notice that converting application to web version is a tendency. Therefore, more and more frameworks were spawned to serve this trend. You can build websites with Angular, React,.. ; build server with NodeJs, Express, Meteor; build mobile with Ionic, React Native, NativeScript; build desktop app with Electron, NW; to build robot with Johnny-Five, Cylon….It is not exaggerated to say that JavaScript can do anything.

A question for you “Can you master all of those framework?”. I sure you can't. Me too. You don’t need to do that. Essentially, all JS frameworks are pretty much like each others. If you have master syntax and patterns, it would cost you not much time to learn a new one. For short, I brief them in a expression:

Pattern + Philosophy = Framework

For instance, I am not shy to admit that it’s cost me over a year to understand Angular2’s tenets, at that time i have no idea pattern is, I was so wrong to try to replicate tuts and try to remember. It took me nowhere.

There are no shortcut to overcome this step, the only path is to get our hands dirty. It is definitely that you will face to face with many weird bugs. However, you are not alone, with the helpful IDE linter, chrome dev tool, testing framework, automated workflow tools, things will run more smoothly day after day.

Do you have any tips to speed up learning? Leave me a comment or give me a shout-out on Twitter!

….TO BE CONTINUES…..