Learning Path: JavaScript: Reactive & Functional JavaScript
3.1 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
27 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: JavaScript: Reactive & Functional JavaScript to your Wishlist.

Add to Wishlist

Learning Path: JavaScript: Reactive & Functional JavaScript

Make your JavaScript code efficient, maintainable, & scalable using best practices of reactive & functional programming
3.1 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
27 students enrolled
Created by Packt Publishing
Last updated 5/2017
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 8 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn JavaScript's basic syntax
  • Discover the Document Object Model and how to manipulate it with JavaScript and jQuery
  • Change CSS classes on HTML elements on-the-fly
  • Introduction to reactive programming + Rx in depth
  • Create operators and perform various operations such as transform, filter, combine, and error handling
  • Discover the principles of functional programming
  • Write elegant code with chaining and context binding
  • Translate SQL queries into chained map and reduce calls
View Curriculum
  • A basic knowledge of HTML and CSS.
  • Familiarity with ECMAScript

Although JavaScript has many diverse applications, it has become ‘the programming language for the Web’ in the recent times. Almost always, when you see something working smoothly and interactively on the Web, you can assume that there is some JavaScript code running in the background.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

JavaScript: Reactive and Functional JavaScript begins with describing what JavaScript is and how browsers use it. We get started with the essentials—the JavaScript syntax. This includes comments, operators, variables, conditionals, loops, and functions. With the basics in place, we move on to learn about reactive programming, understand its need, and also look at building simple apps with good understanding of Rx. We will start off with Bacon.js and then move on to using Rx.js for both client-side and server-side applications. The final part of this Learning Path will look at writing maintainable code. You will experience the benefits of functional programming even if your code is not purely functional. You will also learn how to write code that's easy to understand, extend, test, and debug. Hands-on practice on how to use currying, partial evaluation, map, reduce, filter, recursion, and other functional programming concepts in ES6 is also covered.

By the end of this course, you will be able to optimize your JavaScript code.

This course is authored by some of the best instructors in this field:

About the Author 

 Chip Lambert has been developing websites and web applications for almost 20 years. He is currently a software engineer for Jenzabar Inc. and an online instructor for Bluefield College, teaching courses in web and mobile application development.

Shriyans Bhatnagar uses Rx.js on a daily basis in work, mostly combining it with React and redux. Being a full stack developer, he often finds himself using Rx on Node too. He is extremely passionate about writing functional reactive code. He started out as a backend engineer writing Ruby applications using rails, but quickly moved on to using JavaScript for both the backend and frontend.

Zsolt Nagy is a web development team lead, mentor, and software engineer living in Berlin, Germany. As a software engineer, Zsolt continuously challenges himself to stick to the highest possible standards when improving his own knowledge. He believes that the best way of learning is to create a meaningful product on the way.

Who is the target audience?
  • Anyone with a basic knowledge of HTML, CSS, and ECMAScript looking to learn JavaScript and learn how to optimize their coding skills in JavaScript can take up this course.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
71 Lectures
Beginning JavaScript and jQuery
21 Lectures 02:54:44
This video will give an overview of entire course
Preview 05:32

How do we get started with JavaScript?
Introduction to JavaScript

What is the syntax of the JavaScript language?
Basic JavaScript Syntax

You need to store the data in the script and use it at various points.


So far, you have learned how to store data to use again, but what about a series of statements that we may use over and over again?

How can I make certain parts of my code execute a given number of times?
Preview 05:36

Is there an alternative to the for loop?
While and Do While Loops

There could be times when you need to execute your code only if certain conditions are true.
if Statement

After seeing how the if statement, there could be a requirement where you need to check multiple conditions and each condition has its own code execution.
Switch Statement

The Document Object Model DOM is a critical component of the JavaScript language. You need to learn what it is before you can use it.
Preview 07:46

The DOM seems so daunting; how can we get the pieces we need to use?
Accessing the DOM

Being able to select nodes is fun but not very productive on its own. You need to learn how to make changes to the DOM after you select the element.

Manipulating the DOM

What is jQuery and how can it be used in the place of traditional JavaScript?

Preview 06:55

jQuery can be used from the local file system or via a Content Delivery Network CDN. What is the difference between the two, and which is better?
Using jQuery: Local Versus CDN

We have been talking about jQuery and the power behind it, but we have not seen it in action yet.
Basic jQuery Example

We know how to access the different elements of the DOM with JavaScript, but it seems clunky. Can jQuery make it easier?
Preview 07:12

It is easier to select the nodes of the DOM with jQuery, but just selecting them is no fun. How can we manipulate them?
Updating the Elements and Content

The final piece we need to manipulate the DOM is to add elements as needed.
Inserting the Elements and Content

jQuery is very powerful, but it seems to be lacking in form validation. How can we use jQuery to validate web forms?
Preview 09:50

You have learned how to change HTML or the text of DOM elements; can we change the CSS? Also, it would be nice to add some neat effects to elements.

jQuery events look much simpler to use compared with JavaScript events. How can we use them?
A Quick Look at Events
Reactive JavaScript Programming
28 Lectures 02:20:13
This video provides an overview of the entire course.
Preview 02:19

Asynchronous programming is really useful, but it is tough to manage asynchronous code.
The Need for Going Reactive

Learn using a reactive programming library.

First Bite into bacon.js

Making viewers familiar with building reactive applications.
Building a Reactive Application

What Rx.js is and why to use another functional reactive programming library?
Preview 01:31

Learn to understand how to manipulate streams using operators.
Dealing with Operators

Understand the basics of streams in Rx.js.
Playing with Streams

Using Rx.js in day-to-day tasks.
Preview 16:34

Learn how to implement drag and drop using only Rx.js.
Implementing Drag and Drop

How to create observables in Rx.js?

Preview 04:24

How to transform observables in Rx.js
Transform Operators

How to filter observables in Rx.js?
Filter Operators

How to use combine observables in Rx.js?
Combine Operators

How to use error handling operators in Rx.js?
Error Handling Operators

Count the number of multiple clicks the user performs.
Click Control App

Understand that observables are just made up of generalized functions.
Preview 04:10

Understand how observables handle error and, also, how they complete.
Error Handling and Completion

Making a general abstraction for creating observables.
Adding the Creation Operator

Add different operators to our custom observable.
Adding Other Operators

How to share the execution of an observable across many observers?

Preview 04:28

How to get the last value from a shared observable.
Behavior Subject

How to get all the values from a shared observable.
Replay Subject

How to get the last value from a shared observable after its completion.

Async Subject

Better APIs to use subjects.

If a shared execution doesn’t compete, then it would leave to memory leaks.
Stopping a Shared Execution

How to automatically subscribe and unsubscribe from shared observable.

Automate Subjects

Manage concurrency with schedulers.
Preview 02:01

Understand the different types of schedulers.
Types of Schedulers
Deep Dive into Functional JavaScript
22 Lectures 02:47:39
This video gives an overview of the entire course.
Preview 04:50

Our objective is to get a feel of the differences between functional programming and other programming styles such as object oriented programming, via a demonstrated code example.
Imperative and Declarative Programming by Example

We learn the principles of writing code in functional programming in depth: avoiding side effects by writing pure functions, and using immutable data structure. A code example introduces techniques used in functional programming.

Principles of Writing Code in Functional Style

We will summarize the advantages and disadvantages of functional programming, and we will also offset some of the disadvantages with some optimization techniques.
Benefits and Drawbacks of Functional Programming

ES6/ES2015 is introduced from a functional perspective, so that we can build on these fundamentals to write clear, compact functional code.
Preview 11:06

Using immutable data structures is a cornerstone of functional programming. Yet, the JavaScript support for immutability is not that obvious. This video raises awareness on the different types of cloning, and makes sure we don't end up mutating our data.

Deep and Shallow Cloning in JavaScript

Functional programming techniques are mixed with other techniques in JavaScript. When it comes to handling events, timeouts, and other callbacks, we have to use techniques to connect functional code with its context. This video demonstrates how context binding is used as a connector.
Context Binding by Example

Reading pure functional code is often a riddle. We increase readability with object-oriented and functional techniques: chaining and function composition.

Chaining and Function Composition

JavaScript functions are values. Therefore, functions can be passed to other functions, and they can also be return values of functions. This is how we create higher order functions, giving us a powerful way to write loops and callbacks in functional style.
Preview 05:02

In functional programming, we often use higher order functions on arrays instead of using loops. Therefore, it is beneficial to learn about ways of handling JavaScript arrays.
Handling JavaScript Arrays with Higher Order Functions

Even though forEach looks like a functional utility, it is not usable when our goal is to write side-effect free code. We should still substitute loops with proper functional constructs. Therefore, it is now time to introduce the map, reduce, and filter operations.
Introducing Map, Reduce, and Filter

We will take some SQL SELECT statements and translate them to queries written using JavaScript higher order functions such as map, reduce, and filter. You will not only learn how to perform inner joins of two tables but you will also see an example performing a left join. We will also learn how to group our results.

Joins with Map-Reduce

SQL queries often contain filtering conditions. As we will see filtering in action, we will first implement the filter function using reduce. Then we will apply various conditions on our queries to filter our results. We will filter regular joins as well as aggregated results
Filtering Examples

This practical exercise will make you think out of the box a bit for understanding how advanced reduce functions can be implemented. We will use the reduce function to create a tree data structure from an array of nodes.
Converting an Array of Nodes to a Tree

You will learn some basic definitions and JavaScript constructs that we will use throughout the rest of the section.

Preview 05:05

When writing higher order functions in functional style, you will often encounter the technique of currying. You will also need to understand currying for the purpose of understanding a partial application.

Deep Dive into Currying

We will start with a comparison between currying and partial application. We will then implement partial application in JavaScript. After the implementation, we will revisit the bind function of JavaScript for the purpose of partially applying arguments of a function. We will conclude this video with writing a partially applied map function.
Partial Application

We will use the principles of partial application in this section to implement a template renderer in JavaScript without using any external libraries.
Rendering Templates Using Partial Application

You will learn what recursion is in mathematics and in software development. You will also find out about different types of recursion. At the end of this section, we will see how to transfer iterative solutions to recursive solutions using accumulator variables.

Preview 06:49

This section introduces some optimization techniques combating the drawbacks of using recursion. These optimization techniques are mixing functional and non-functional elements of JavaScript, tail call optimization, and memoization.
Optimization Techniques with Recursion

You will review the main points learned in this volume in order to place them in your functional programming utility belt.
Preview 06:28

In this last video, you will construct a learning plan for yourself based on your own goals. You will also get some recommendations that will accelerate your learning curve.
Your Learning Path
About the Instructor
Packt Publishing
3.9 Average rating
7,196 Reviews
51,462 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.