From eb021c22fe74c6e25dcae94a8006e22bd847657d Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 26 Jun 2017 21:35:33 -0400
Subject: [PATCH] Demonstrate when a normal promise is not optimal

---
 day3/README.md                                   | 16 ++++++++++++++++
 .../src/app/search/search.component.html         |  3 +--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/day3/README.md b/day3/README.md
index 386d77a..c80a8e0 100644
--- a/day3/README.md
+++ b/day3/README.md
@@ -3,6 +3,7 @@
 ## Lesson Objectives
 
 1. Describe publish/subscribe model and how it relates to Observables
+1. Demonstrate when a normal promise is not optimal
 
 ## Describe publish/subscribe model and how it relates to Observables
 
@@ -11,3 +12,18 @@ In programming pub/sub (publish/subscribe) model is a situation in which a singl
 A lot of times, communication between components is done through component properties (passing values in as custom attributes).  This can be a pain when you need to pass a property from a component to a grand child component.  Also, if you have multiple components that depend on that value, you'll need to pass it to all of them.  With a pub/sub model, you can simply have one component publish an event, and the other components are responsible for subscribing to the publisher.  This makes everything much more modular.
 
 An observable is our publisher model.  It will broadcast events that happen, and we can then tell components to `subscribe` to this publisher.  They will be notified when an event happens, and they can choose to do what they want at this point.  The other thing our observables do is allow us to deal with streams of events.  We can perform operations on them to optimize the performance of our application.
+
+## Demonstrate when a normal promise is not optimal
+
+We're going to be optimizing our star wars app from the previous day.
+
+Firstly, we want it to search as the user types into the input (like how google autocompletes).  Edit the first `section` of `src/app/search.component.html`:
+
+```html
+<section>
+    <h2>Search For A Star Wars Character</h2>
+    <input [(ngModel)]="name" type="text" placeholder="Character Name" (keyup)="findCharacter(name)" />
+</section>
+```
+
+Test it out.  In the network tab of your Chrome Developer Tools, see how a request goes out for every letter?  And they don't always come back in order, either.  With Observables, we can fix this.
diff --git a/day3/starwars/src/app/search/search.component.html b/day3/starwars/src/app/search/search.component.html
index 5020947..4dde908 100644
--- a/day3/starwars/src/app/search/search.component.html
+++ b/day3/starwars/src/app/search/search.component.html
@@ -1,7 +1,6 @@
 <section>
     <h2>Search For A Star Wars Character</h2>
-    <input [(ngModel)]="name" type="text" placeholder="Character Name"/>
-    <input (click)="findCharacter(name)" type="submit" value="Search"/>
+    <input [(ngModel)]="name" type="text" placeholder="Character Name" (keyup)="findCharacter(name)" />
 </section>
 <section *ngIf="results">
     <h2>Search Results</h2>