eggheadio-projects/rxjs-beyond-the-basics-creating-observables-from-scratch: null

.DS_Store

# RxJS Beyond the Basics: Creating Observables from scratch

![](https://camo.githubusercontent.com/6e3da72d2ed5c99387968dcb7c19d3d661ec5521/68747470733a2f2f6432656970397366336f6f3663322e636c6f756466726f6e742e6e65742f7365726965732f7371756172655f636f766572732f3030302f3030302f3033392f66756c6c2f72786a732d6f627365727661626c65732d66726f6d2d736372617463682d7371756172652e706e673f31343936343336343131)

## Course Description
There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.
In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.
Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.
If you're new to RxJS, we highly recommend this Async JS course from Jafar Husain to get a solid intro to the concepts. From there, you can watch this Introduction to Reactive Programming using RxJS, and you will be prepared for this course!

## Instructions
Each lesson's code is in its corresponding lesson folder. Plunks are drawn from the lesson's branch.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
	<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script>
	<script src="script.js"></script>
</body>
</html>

// Function
// function foo() {
//   console.log('Hello');
//   return 42;
// }

// console.log(foo.call());

// Observable (PUSH)
// Producer determines when the values are sent
var bar = Rx.Observable.create(function (observer) {
  console.log('Hello') || displayInPreview('Hello');
  observer.next(42);
  observer.next(100);
  observer.next(200);
  setTimeout(function () {
    observer.next(300);
  }, 1000);
});

// Consumer
bar.subscribe(function (x) {
  console.log(x) || displayInPreview(x);
});

// Generator (PULL)
// Producer
function* baz() {
  console.log('Hello') || displayInPreview('Hello');
  yield 42;
  yield 100;
  yield 200;
}

// Consumer determines when the value are sent
var iterator = baz();
console.log(iterator.next().value) || displayInPreview(iterator.next().value);
console.log(iterator.next().value) || displayInPreview(iterator.next().value);
console.log(iterator.next().value) || displayInPreview(iterator.next().value);



// noprotect

// display in plunker preview
function displayInPreview(string) {
  var newDiv = document.createElement("div"); 
  var newContent = document.createTextNode(string); 
  newDiv.appendChild(newContent);
  document.body.appendChild(newDiv)
}