Modern JS

A guide to help you learn Modern JavaScript

What is JavaScript ? What is modern JavaScript ?

JavaScript is a programming language that first appeared in 1995 [1] to give browsers their first type of smart functionality. At the time, web browsers were in dire need of some type of programming language, because without it, browsers acted as 'dumb' consoles that required to constantly communicate with remote web servers to change their workflow. With programming language support, it became possible for browsers to execute actions locally & dynamically -- on a user click, a mouse hover or key stroke -- without the need to constantly communicate with a remote web server. Thus the first JavaScript generation was born.

As the web grew -- with e-commerce, interactive content & video media -- the expectations on browsers also grew and with it those of JavaScript. Suddenly, that first generation of JavaScript that delivered 'modern' functionality for its time, started to appear a little rough. So JavaScript changed, the JavaScript language itself got a facelift like other web languages (e.g. HTML 5, CSS 3), a series of other techniques emerged to make JavaScript more powerful and JavaScript libraries were created to avoid having to reinvent the wheel for everyday JavaScript tasks.

As the web continued its evolution, newer and larger demands were placed on web pages, browsers and its now staple language called JavaScript. Single page applications (SPA) became a common theme with every functionality under the sun packaged into one page, smartphones took over as the most popular device to access the web and real-time web functionality became an almost default expectation. So once again, that 'modern' JavaScript of yesteryear started to appear dated. JavaScript components made their appearance to ease the creation of more complex JavaScript user interfaces (UI), JavaScript libraries soon became full-fledged JavaScript frameworks and the JavaScript language became so limited for certain functionalities, that entirely new languages came into existence that were later converted into what else, JavaScript!

So modern JavaScript is really a wide and moving target. You may have learned JavaScript five years ago and some of those techniques may be considered old by today's standards, just as you may know JavaScript techniques from 20+ years ago that are still considered modern best practices. My intent is to take you on a guide through JavaScript's various ins and outs to learn modern JavaScript as it's known today.

Modern JavaScript essentials: Concepts, language syntax & tools

If there's one thing modern JavaScript has it's variety. From the handful of JavaScript projects used by 99% of users, there are hundreds more that cover glaring omissions in these major projects. And from these broader JavaScript projects, there are thousands more that cover edge cases that only a small percentage of users or only their owners know about. This leads to what many in the JavaScript community call JavaScript fatigue: A daily occurrence of new JavaScript projects that creates an almost endless learning curve.

While learning curves are a natural part of technology, the reality is nobody has the time to keep up with thousands of projects of anything no matter how good or what they have to offer. If you've ever felt overwhelmed or intimidated by the amount of JavaScript projects, you're not alone. The good news is you don't need to give up on JavaScript just because you can't keep up with every JavaScript project that offers a better, greater or faster way of doing things. What you need to do is learn modern JavaScript essentials, to not only help you understand and write better JavaScript, but also to help you quickly weed out thousands of JavaScript projects that don't fit your needs.

React tutorial: Components with and without ES6, including tooling with Babel, Npm and Webpack

React is a JavaScript library designed to create UI (User Interface) components. However, because React is small and excels at what it does, it's inevitably used with hundreds -- perhaps even thousands -- of other JavaScript libraries and frameworks. Therefore seeing project spin-offs named React-<blank> or writings titled React with <blank> has become the norm rather than the exception. What you'll read next is exclusively focused on React and is based on the assumption your're familiar with some of JavaScript's earliest concepts like events, DOM & jQuery -- reading the previous section What is JavaScript ? What is modern JavaScript ? should be enough to get you through this React tutorial.

React components are relatively easy to understand, but what steepens React's learning curve is there are multiple ways to develop React components, as well as multiple ways to deploy React. React started prior to ES6, which was a major JavaScript milestone version that introduced simpler syntax to work with OOP (Object Orientated Programming) classes, objects and inheritance. Because ES6 is still not mainstream, React components continue to support their old ad-hoc class syntax, as well as a newer ES6 class syntax. In addition, React components use a markup language called JSX that must be converted to plain JavaScript, which in turn creates multiple deployment alternatives. So learning React concepts accounts for at most 30% of the work, while the remaining 70% consists of learning different React syntax styles and tools required for deployment.