0% completed

Getting Started

Introduction to the Course Main Objectives

Introduction to Reactive Programming with RxJS

Why Do We Need to Learn Reactive Programming?Current Mechanisms for Handling Asynchronous Operations RxJS in Node.js

Understanding the Reactiveness

Introduction to Reactiveness Querying the Sequence Observer Pattern Iterator Pattern Rx Pattern and Observable Quiz Yourself on Reactiveness

Understanding the Observables

Creating Observables and Operators Making Ajax Calls With an Observable Handling the Operators Creating Observables From Javascript Data Types Concluding Observables Quiz Yourself on Observables

Understanding Sequencing and its Operators

Introduction to Sequencing and its Operators Visualizing Observables Map and Filter Operators of Sequencing Reduce, Aggregate and Flatmap Operators of Sequencing Explicit and Implicit Sequence Cancellation Observables That Wrap External APIs Sequence onError Handler Catching Errors With the Catch Operator Retrying the Sequences Quiz Yourself on Sequences

Make a Real-time Earthquake Visualizer

Preparing Our Environment for the Earthquake Visualizer Increasing the Reactiveness Using Operators The RxJS-DOM Method Interval Operator and Distinct Operator Operator Rundown Quiz Yourself on the RxJS Method

Building Concurrent Programs Through Pipelines

Introduction to Concurrent Programs Avoiding External State Using Observable Pipelines Efficiency Through Pipelines Quiz Yourself on Pipelines

RxJS Subject Class

Introduction to the RxJS Subject Class AsyncSubject of RxJS BehaviorSubject of RxJS ReplaySubject of RxJS Quiz Yourself on RxJS Subject Class

Building a Reactive Spaceship to Keep the Application Pure

Introduction to Keeping Application Pure Through Spaceship Game Creating the Starfield of the Spaceship Game Using Range Operator Adding the Player’s Spaceship in the Game Using Observables Generating Enemies in the Game Using Observables Controlling the Receiving Data Through Operators and Observables Implementing Shooting Through Operators and Observables Enemy Shots Using Operators and Observables Managing Collisions Using Operators and Observables Keeping Score Using BehaviorSubject Concluding Operators

Building a Complete Web Application Using RxJS

Introduction to RxJS Tools For Web Application Building a Real-time Earthquake Dashboard Adding a List of Earthquakes Using Observables Hot and Cold Observables Interval Observable in Hot and Cold Sharing a Cold Observable Adding Interaction Using Observables Increasing Efficiency by Attaching DOM to the Parent Element Quiz Yourself on Observables and Operators

Getting Real Time Updates from Twitter using Node.js

Introduction to Node.js Environment Client Server Communication in Node.js Retrieving and Sending Tweets in Node.js Showing Tweets on the Dashboard in Node.js Concluding Node.js

Schedulers

Introduction to Schedulers in Rx Programming General Use of Schedulers in RxJS ObserveOn and SubscribeOn Operators Immediate Schedulers of Rx Default Schedulers of Rx Current Thread Schedulers of Rx Scheduling for Animations in Rx The Test Schedulers in Rx Writing a Real-world Test Quiz Yourself on Schedulers

React Web Applications With Cycle.js and using Model View Intent

Introduction to Cycle.js

Installing Cycle.js

Basic Understanding of Cycle.js

The 'h' Function of Virtual Hyperscript

Using JSX to Write UI

Implementing the Search Term in Cycle.js

Revising the Main Function Using the JSONP Driver

Introducing Model View Intent and its Components

Reusing the Widgets of Model View Intent

Search Box Widget of Model View Intent

Wrapping Up Model View Intent

Quiz Yourself on Model View Intent and Cycle.js

Closing Remarks

Congratulations!

Reactive Programming with RxJS/

...

/

Using JSX to Write UI

Using JSX to Write UI

Learn how JSX is used to write the user interface.

We'll cover the following...

Instead of using the h function, we could write our UI using JSX, which is an XML-like syntax extension invented by Facebook that makes writing virtual DOM structures easier and more readable. Our vtreeElements function will look like this:

Press + to interact

function vtreeElementsJSX(results) 
{ 
    results = results.map(function(result) 
    {
        var link = WIKI_URL + result.title;
        return <div><a href={link}>{result.title}</a></div> 
    });
    return <div>
    <h2>Wikipedia Search</h2>
    <input className="search-field" type="text" /> <hr/>
    <div>{results}</div>
    </div>; 
}

Doesn’t it look nicer? JSX looks more familiar to developers because it ...