Learn Modern JavaScript

Cure your JavaScript fatigue using this weekly publication!

An interactive course focused on teaching you everything that a modern JavaScript developer must know!

Learn More Register Now

JavaScript has changed

it can be confusing and scary — it should not be

JavaScript landscape has been completely changed — long gone are the days when we used to simply include jQuery in our project and hammered down all the nails with it. Agreeably, with the tons of possibilities around, the JavaScript ecosystem is confusing today. It could easily startle anyone entering or trying to up their game.

Join me in this interactive course where I will be teaching you how to build real world applications using modern JavaScript. We will be learning everything about modern JavaScript.

I recently scribbled down a set of roadmaps stating how to become a developer in 2017 which clearly hit a nerve. Most of the feedback and questions that I got was regarding JavaScript; people still seemed to be really confused about where and how to start. And with *367th email that I got today asking the same question, I decided to start working on this interactive course where I will be helping you conquer the JavaScript ecosystem in a fun and approachable way. We will not only be learning but also we will be building real world applications along the way.

A most concise course for the modern JavaScript with practical examples!

We will start from one end and cover everything that you need to know. No need to purchase another course!

The course is specifically going to be written for Humans, filled with practical solutions to the problems that you are going to tackle while working on the real world projects – and you will learn by doing.

Publication is for everyone

wanting to get ahead of their game

We will start from ES6 and learn everything that you may need to know. The only assumption is that you already know the basics of JavaScript. If you don't already know JavaScript, don't worry, go ahead and take the basics from this codecademy course.

We will start with ES6 — build and launch some real world applications with it, then slowly move up the ladder towards React ecosystem, while learning all the tooling during the way — week by week. Then once we have covered the React ecosystem including everything about testing your React applications and making PWAs and have made some real production ready applications with it, we will learn about TypeScript and after that there will be a detailed series on tooling in depth i.e. regarding webpack, eslint, babel etc. After that we will do some backend development using NodeJS and GraphQL and keep exploring the intricacies of the ecosystem.

To give you a better idea, I have given the outline for the first steps below.

When do we start!

First publication on November 15, 2017

The first publication will be out on November 15, 2017. Subscribe yourself below or follow me on twitter and I will announce it when it is out.

Meet Kamran

Author of this publication

I am a full stack developer working as a lead engineer at tajawal. I am a JavaScript (on the frontend and backend) and PHP veteran who takes solace from getting to walk across the borders and experience the other territories every once in a while. I am an Open Source enthusiast and in my spare time, you can find me toying around at GitHub or writing.

And if I may be so bold, I have a natural ability of taming the complex topics and make them easily understandable. You might know me from some of my publications — mainly Design Patterns for Humans or Developer Roadmap

Follow

What to expect

outline for the first few weeks

ES6 is the pillar of the modern web. First of all, we will be learning and practicing the modern features of ES6. I assume that you already know the basics of JavaScript. If you don't already know JavaScript, don't worry, go ahead and take the basics from this codecademy course.

📖 ES6 — Preparing for the Battle

Variable Scopes
Strings enhancements
All about functions
Destructuring
Object Literals
Spread and Rest
ES Modules
Classes
Iterators
Generators
Proxies
Symbols
Sets and Weaksets
Map and Weakmap
Promises
Async / Await

🔥 ES6 — Get your hands dirty

Basic Tooling — Webpack, Babel, NPM scripts, ESLint and co.
Let's make a Chrome Extension
Let's make a toast library using Vanilla JS and publish on NPM

And that wraps our journey into uncovering ES6. If you have been following along, you should have a good understanding of the nuts and bolts of the modern JavaScript applications. However, if you still have confusions about some parts, follow along, we will fix this while going through the next parts of this course

Also, if you are anything like me, your soul might be telling you that you need to get a good grasp of Webpack, babel, ESLint and all the tooling around before you go on to the next step. Although it is good to know but keep in mind that, at this point, you don't need to know the ins and outs of all the tooling and setup; it will come with time. In-fact, Angular, Vue, React etc all have cli-apps that let you create apps with no build configuration whatsoever. Plus we are going to cover that in the future weeks.

Getting Jiggy with React

Now that we have got ES6 under our belt. Lets make you one of the cool kids; for the next three/four weeks we will be learning React, Redux and learn how to make a production ready application with it. First of all we will be focusing mainly on React, JSX and everything related to react. Then we will look into how to manage state in your react applications with redux and next we will look at how to tie react and redux together and make our application state aware.

💪 ReactJS — Firing up our React Engines

Introduction to React and what makes it different?
Tooling ad Setup
Creating Components
JSX is that simple!
Styling Components
Thinking in React
Child Components and Props
Validating Props
Components State
Stateful vs stateless Components
Bi-directional Data Flow
Routing with React Router
Lifecycle Hooks
HTTP calls with Axios
Presentational Components and Container Components
High Order Components
Performance Optimizations
Application Architecture

💾 Redux — Managing State with Redux

Managing State - Different Options
Why Redux?
How Redux works
Immutability in JavaScript
Basic Redux Introduction
Multiple Redux Reducers
Redux Middleware
Async Actions in Redux
Connecting React with Redux
Redux DevTools

🔥 React / Redux — Real World Application

A bookmark manager where people can register and login to their account, add valid bookmarks, get a paginated list of bookmarks that they added, search for other registered users and share bookmarks with them, update and delete bookmarks.

With this, you should have a pretty good understanding of the entire React frontend stack and should be reasonably productive with it. Coming up! we will be learning how to effectively test your React applications using.

Testing your Applications

Testing is one of the most important parts of the development process that is mostly overlooked by developers. In this section we will be discussing how you can write tests for your React applications.

We will begin with a detailed overview of the Jest API, accompanied by the examples demonstrating how it works. Once we are done with that we will be testing the application that we built while learning React in the sections above.

📷 Testing — Testing React Applications

Shallow Rendering
Snapshot Testing
Jest and Enzyme for the win
Setting things up
Testing Basic Component Rendering
Testing Props
Testing Events
Testing Event Handlers
Testing Redux
Calculating Test Coverage

And that wraps it up for testing React applications. You have officially everything that you need to develop React applications as per the industry standards.

Let's look at TypeScript

TypeScript is the superset of JavaScript — it adds everything that we learnt in ES-6 section plus features such as static typing, interfaces, allowing you to write maintainable and mess-free code. In this section we will be looking at Typescript in detail and see how we can use it in our React applications.

👮 TypeScript — TypeScript for the win

Why use TypeScript?
Features of TypeScript
Installation and Basics
Variables and Functions
Classes and Interfaces
Modules and Namespaces
Generics
Type Definitions
Using TSLint
Compiler Options and Project Configuration
Using TypeScript in React Applications

And many more topics

Whats written above is just a subset of topics, over my head, that we will cover in the initial few weeks; that I put just to give you an idea. We will go into much more detail about everything.

If you have any questions don't hesitate to email me.


Subscribe

Prove your email below and I will reach out to you when it is ready

pssst... the page ends here. scroll up if you want to learn more.

Follow