Async and Streaming JS
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 163 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/50236 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 2015112 / 163
6
13
16
17
18
19
20
21
22
25
28
29
30
31
40
41
44
45
49
51
52
53
54
55
57
58
60
61
71
74
75
76
78
84
85
91
92
93
94
95
96
98
99
100
105
106
107
112
115
116
117
118
122
123
124
125
127
128
129
130
131
132
133
135
136
142
144
150
151
153
155
156
157
159
160
00:00
Open sourcePrincipal idealOpen setComputer programmingError messageFunction (mathematics)Process (computing)Scripting languageComputer programmingState of matterInformation securityExtension (kinesiology)NumberInformation privacyOpen sourceEvent horizonFinite-state machineProjective planeMoment (mathematics)BitReal-time operating systemParallel computingSoftwareSoftware engineeringWebsiteData miningGoodness of fitSource codeMetropolitan area networkMultilaterationRight angleTerm (mathematics)Set (mathematics)Vertex (graph theory)DeterminismPoint (geometry)CountingConcurrency (computer science)WordPRINCE2PlanningCodeWindowTouchscreenDemo (music)Service-oriented architectureElectronic mailing listDisk read-and-write headArithmetic meanError messageMcCarthy, John1 (number)Ocean currentMonad (category theory)FunktorMonoidWeightInternetworkingCategory of beingImage resolutionJava appletPrincipal idealSlide rulePeer-to-peerComa BerenicesComputer clusterLine (geometry)Computer animation
07:05
State of matterEvent horizonFunction (mathematics)Menu (computing)outputEmailWage labourExecution unitElectric currentCodeProgrammable read-only memoryWalsh functionLoginSocial classWeb browserGoodness of fitStandard deviationStreaming mediaDirac delta functionQuicksortComputer programmingState of matterGroup actionResultantWater vaporLogicProcess (computing)NumberBitSoftware repositoryVertex (graph theory)Object (grammar)Structural loadEvent horizonPoint (geometry)Run time (program lifecycle phase)MereologyDrag (physics)Phase transitionException handlingCovering spaceError messageProgrammer (hardware)ExistenceLibrary (computing)Natural numberOptical disc driveLine (geometry)AuthorizationCASE <Informatik>Boilerplate (text)Bit ratePower (physics)MathematicsOnline helpMultiplication signTrailComputer animation
14:10
Streaming mediaVideo game consoleAsynchronous Transfer ModeComputer programmingComponent-based software engineeringEvent horizonFunctional (mathematics)NumberReal numberDiscrete groupSemantics (computer science)Object (grammar)Speech synthesisGodReading (process)QuicksortFormal languageReal-time operating systemEvent horizonConnectivity (graph theory)Online helpComputer programmingField (computer science)Machine visionMultiplication signAnalytic continuationTerm (mathematics)WordNeuroinformatikWeb browserProgrammer (hardware)Streaming mediaBoilerplate (text)Primitive (album)StapeldateiLevel (video gaming)Integrated development environmentVertex (graph theory)Group actionBitSemantics (computer science)AlgebraSlide ruleArithmetic meanDifferenz <Mathematik>Network topologyHacker (term)Virtual realitySoftware design patternPattern languageState of matterAuthorizationDependent and independent variablesUser interfaceView (database)Point (geometry)Different (Kate Ryan album)Optical disc driveNumberPositional notationBit rateFigurate numberRight angleFunctional (mathematics)DiagramOffice suiteGamma functionSystem callState observerCodeTouchscreenMatching (graph theory)Computer animation
21:15
Pattern languageLogarithmVideo game consoleState observerMathematicsState of matterFunction (mathematics)Event horizonAbstractionFundamental theorem of algebraDuality (mathematics)Interface (computing)OvalError messageEvent horizonLogicIterationPattern languageExtension (kinesiology)State observerPay televisionMotion captureTouchscreenMultiplication signSequenceEndliche ModelltheorieNumberDiagramDifferent (Kate Ryan album)Quantum stateServer (computing)Scripting languageComputer animation
24:20
Event horizonArray data structureBoolean algebraAbelian categoryPattern languageState observerInterface (computing)Symbol tableOvalError messageDuality (mathematics)Domain nameConnected spaceMereologyMathematicsSystem callMoment (mathematics)Term (mathematics)Query languageIterationEvent horizonCategory of beingDatabaseComputer programmingDifferent (Kate Ryan album)Symbol tableUltraviolet photoelectron spectroscopyResultantRight angleTheoryError messageKey (cryptography)Complete metric spaceState observerJSONXMLUML
26:10
CodeFunction (mathematics)Singuläres IntegralVideoconferencingElectronic mailing listDigital filterEvent horizonStreaming mediaFreewareObject (grammar)Data structureVariable (mathematics)Parameter (computer programming)Run time (program lifecycle phase)Independence (probability theory)TheorySymbol tableLevel (video gaming)Control flowData typeState observerLevel (video gaming)CodeTerm (mathematics)Uniform resource locatorStreaming mediaForm (programming)BitMereologyDifferent (Kate Ryan album)CuboidComplete metric spaceSequenceFormal languageMultiplication signEmailMassCircleVideoconferencingFilter <Stochastik>Operator (mathematics)MappingServer (computing)Reverse engineeringProgramming paradigmUser interfaceResultantOrder (biology)Line (geometry)Type theoryWeb 2.0Functional (mathematics)Block (periodic table)Element (mathematics)Event horizonBit rateSymbol tablePower (physics)Optical disc driveReading (process)Single-precision floating-point formatPlastikkarteHecke operatorSocial classMoment (mathematics)Computer programmingSet (mathematics)DemosceneNumberObject (grammar)RhombusSemiconductor memoryFacebookTotal S.A.State of matterComputer-assisted translationCurvatureElectronic mailing listMultiplicationSynchronizationSoftware testingQuery languageCartesian coordinate system
34:23
Control flowData typeoutputLevel (video gaming)Term (mathematics)Pay televisionOnline helpElectronic mailing listVideoconferencingFunction (mathematics)Error messageUser interfaceArrow of timeParallel computingLevel (video gaming)TouchscreenPower (physics)Row (database)AuthorizationCodeType theoryCurvatureSemiconductor memoryPoint (geometry)CuboidGame controllerKey (cryptography)Term (mathematics)SynchronizationMultiplication signException handlingMappingMoment (mathematics)State observerBand matrixMereologyoutputStreaming mediaSet (mathematics)Computer programmingInternetworkingEvent horizonState of matterMathematicsBitServer (computing)Computer hardwareUltraviolet photoelectron spectroscopyDeterminantLine (geometry)DivisorProduct (business)FreewareCountingSpacetimeNumberSequenceCellular automatonOperator (mathematics)Constraint (mathematics)Musical ensembleProcess (computing)File formatJSONXML
42:37
GoogolFunction (mathematics)Dependent and independent variablesComputer filePay televisionLevel (video gaming)Electric generatorLogarithmComputer programmingStreaming mediaLetterpress printingSinguläres IntegralEvent horizonDigital filterData modelKeyboard shortcutConvex hullVideo game consoleDemo (music)Software developerOperations researchAbstractionBlock (periodic table)BuildingSequenceCondition numberWeb browserFunctional (mathematics)Interactive televisionOpen sourceQuicksortWeb browserState observerRun time (program lifecycle phase)Library (computing)Text editorCategory of beingScripting languageNeuroinformatikMultiplication signPoint (geometry)BitChainLevel (video gaming)Exception handlingStreaming mediaFormal languageLogicMereologyFunctional (mathematics)Different (Kate Ryan album)State of matterSource codeMacro (computer science)Keyboard shortcutPrimitive (album)Capability Maturity ModelGoogolElectric generatorStandard deviationEvent horizonOperator (mathematics)Default (computer science)Element (mathematics)Connectivity (graph theory)Facebook2 (number)Cycle (graph theory)Process (computing)Core dumpJava appletSubsetNumberDirected graphMassStack (abstract data type)Electronic mailing listDirection (geometry)Entire functionExt functorSign (mathematics)ArmWeightSingle-precision floating-point formatJSON
50:50
Computer programmingState observerPattern languageMIDIWechselseitige InformationBroadcast programmingMachine visionMaxima and minimaPay televisionGame theoryKey (cryptography)Arrow of timeSource codeHome pageGame theoryFormal languageOperator (mathematics)State observerFlock (web browser)Software repositoryKey (cryptography)Pay televisionLevel (video gaming)Visualization (computer graphics)Term (mathematics)CodeBinary fileFamilyFluxInheritance (object-oriented programming)QuicksortMultiplication signCartesian coordinate systemGravitationMetropolitan area networkProcess (computing)Computer animation
54:14
Execution unitMIDIGraphic designData analysisReal-time operating systemMultiplication signArrow of timeEvent horizonSuite (music)Text editorComputer animation
55:19
Alphabet (computer science)Insertion lossComputer programmingGame theoryMedical imagingComplex (psychology)Software developerEvent horizonNumberState of matterFormal languageCollision detectionJava appletSingle-precision floating-point formatProgrammer (hardware)Quicksort.NET FrameworkData managementState observerRun time (program lifecycle phase)Form (programming)Different (Kate Ryan album)CollisionScripting languageProcess (computing)Graph coloringLogicRing (mathematics)Computer animation
57:22
Streaming mediaCodeState observer1 (number)MereologyLibrary (computing)Cartesian coordinate systemLevel (video gaming)CASE <Informatik>Error messageTerm (mathematics)Address spaceGraph coloringMachine visionLogicMoment (mathematics)Functional (mathematics)Game controllerFamilyElement (mathematics)Process (computing)Standard deviationAbsolute valueSoftware testingRight angleTask (computing)Different (Kate Ryan album)Formal languageMaxima and minimaPower (physics)Computer clusterControl flowDivisorVotingConsistencyComputer animation
Transcript: English(auto-generated)
00:01
All right, nobody's completely passed out from food coma yet after after lunch, so this is definitely good Maybe I'll get you some of you to fall asleep by the end of this so Here's hoping Anyways, you are here to tell for me to tell you everything that you've been doing is absolutely incorrect and
00:23
That's always a good pleasure of mine to do that and always is great to have one of my idols John McCarthy Of lisp fame to always tell us that we're doing programming completely wrong If you want to follow along at home, I have all of the slides and all of the resources available
00:41
For me for you and all of that What I really wanted to do Was what originally was to kind of troll the audience here and do a monad demo But I thought that'd be a little cruel after lunch But you know All I have to do to explain monads is really just a monad as a monoid in the category of end of functors
01:03
Is there a problem with that? I don't think so So no a loss. This is not a a monad tutorial Unfortunately one of these days. I'll get a chance to do that Anyways, so really what we're trying to do here is we're going to try and look at patterns and see what we're doing
01:22
Currently and what we can do to kind of improve them along the way So I like alternative titles for my talks as well as because well the the original ones are kind of boring so instead what I really like to talk about is is really You know stopping worrying about
01:42
Asynchronous programming and learn to love the observable because that's really what we're going to be talking about today And just because I can't get enough of these kinds of things or I thought to myself I had a problem I thought I know I'll solve it with callbacks and events have now two problems. I
02:02
Oops, yes, good old concurrency jokes. They never get old So you might wonder why I am why my I'm up here why I wear this ridiculous hat and so forth. I Am a principal software engineer at a company you'll most likely have heard of I
02:24
Am unoriginal in my any of my account names Chances are if you can find me on one social network you can find me in another one But I am a self-described open source for what I mean by that is the fact that everything that I do For my said company is open source. There's nothing that I hide or anything like that
02:43
And I and I've led such initiatives as getting node node supported on Windows So I do work for this this rather small company That's based in in the u.s. Not in Silicon Valley, but just for the Norwegian audience I thought I'd just add a little bit of metal to it
03:04
Because well, you know that that's just the way they roll here So one of the projects that I do work on right now other than the reactive extensions, which I'll be talking about in in some detail is is called the Tally project and for those who are really concerned about privacy and
03:21
And and security in today's Modern internets would be very interested in what we're doing there with peer-to-peer networking and so forth from device to device Anyways, what I've really worked on and what I'm really passionate about is is the reactive extensions And we've have it in any number of flavors whether it's JavaScript dot nets
03:45
the C++ Ruby Python Java you name it we have it And you can find us at reactive X and reactive X I oh, I'll show you the website a little bit later But I am in fact an RX pusher
04:02
In fact, I can try I try to push it into many places as humanly possible Now what we're dealing with in in today's world especially in the JavaScript world is that we're dealing with real-time data just about everywhere and That data comes from any number of sources whether it's our GPS GPS feeds our
04:25
our accelerometers every everything else So this data will come at you at just enormous speed and at a certain point you just give up and just start shoving the events Somewhere else but because you just can't keep up. So there's really got to be a better answer on how we manage it all
04:42
But let's face it the what we have today is terrible It's just that we have no ways of Really dealing with concretely with with asynchronous programming in such a way that That it becomes very easy to manage things Especially with this guy trying to manage three things of state at once and feeling miserable at all of it
05:06
Yes, I love animated gifs by the way, they're just fantastic So we have this we've had this problem obviously for a while Since the days, you know when when programming was brand new. In fact, we actually had a fairly prominent
05:24
President back in the 1960s in the US and he said we choose to solve Asynchronous programming and do other things not because they're easy, but because they are hard and now What I realize is this was kind of a first draft because He ultimately changed it to go to the moon because at least that was physically possible
05:47
So anyways, oh Citation needed oh well It was it was worth a shot Anyways, what we deal with in in dealing with JavaScript today is we deal with what's known as callback hell and
06:04
Anyone know what that rather term really means other than just this pyramid of code walking out Well, what we're dealing with is building these large finite state machines We're not really quite sure where the next thing happens. So you're like, okay I have this movie ticket and this play error just sitting out here somewhere and at some point it gets
06:25
Initialized and somewhere I handle all of my errors I just don't know where quite honestly and then when I throw an error, where does it go who handles it? I don't know So what you end up with is not what I call the pyramid of doing but more along the lines of a cow's head And in the fact that it kind of just walks off the screen and suddenly just it just just walks right back to the left again
06:50
And so yeah You can easily see people who just don't know any better and just by looking at their JavaScript code how indented it happens to be and and yes, it's it's so easy to
07:03
You know, you're playing with fire in other words when you're dealing with callback hell in so much So that you know, it could cause bodily damage That's and that's a shame that's that's something we really need to fix as JavaScript programmers
07:21
So how do we do that? Well, we'll we'll cover that in just a little bit We have also a number of problems when it comes with with event based programming as well With event based programming. All you get is is basically you you have to add individual handlers for safe if you're going to do a If you're going to do something as simple as a as a mouse drag
07:44
Well, you have to have some sort of state whether the mouse is down and some sort of state where where we happen to be And then on the other mouse down we go Okay, it's down and start up the state on a mouse move We say well if it's not down and just return do nothing Then we calculate the deltas and do something with it and on mouse up
08:04
We clear up everything then we have to of course dispose add our event handlers and remove our event handlers and that's fairly tedious And really non compositional because as soon as you want to add in other things such as other events and so forth It becomes another sea of callbacks. So really it just makes you want to run away and the fact that's
08:25
It's just so many juggling things that you have to deal with But you just really don't want to deal with it at all And in fact, we can do a lot better than what we've been doing all along here So, I don't know if anyone attended today's session on ES6
08:45
But there was probably a good amount of talk on promises Coming to a to a runtime near you and chances are it's already in the browsers that you use today So the idea here is that you have this first this notion of this first class This first class
09:02
Object which encompasses this callback behavior So chances are you're not going to have this callback hell And in fact, we can take a lot of those things that we did with with the the movie example that we showed earlier and we can go ahead and And initialize the movie then authorize it if there's a problem with the
09:25
Login then we when you kick it out that way via error and then we play the movie or else It's an unauthorized movie pretty simple kind of logic When you when it comes down to it But there are some very big downsides as to the way that's that promises are designed right now
09:46
For example in the current ES6 or ES2015 spec There is no I there is no notion of a cancellation for I don't care about a given results from a promise so for for example, if you're using the new fetch API and you're using a
10:05
Venable after that there's really no way to say I don't care Don't update There is no way to to stop a promise. It's already in action There is no way to abort the XHR. There is nothing there to help you
10:21
So at a certain point you're like well That's kind of sucks. What can we do about that? And there are other problems as well Along that lines, but when I went when I mentioned fetch so fetch was a was a kind of a a dream to replace the
10:42
XML HTTP request and and so you could have this nice little Nice little way instead of having to deal with all those on load or on ready state change Kind of events that you could have this nice little fluent thing with fetch and so forth Oops, we forgot to put in a boarding of fetch
11:03
So that was the biggest issue so far on the on the the what wig GitHub repo and in fact The When I when I took a snapshot of this, this is a couple of months ago. There were 182 comments
11:21
So you could easily break it down and say how many engineers does it take to cancel a promise? quite a bit actually Which is which is kind of kind of funny when you think about it But there really isn't they don't know They don't know if when you hit cancel, does it cancel everything up the stream?
11:42
Does it cancel everything down the stream? Does it report an error? Nobody knows and and what's worse is is that in? ES7 or yes 2016 that we're already working on there is no That there is no proposal yet for how to deal with aborting a
12:02
Fetch so I think I'll stick with a semi XML HTTP request for now. Thank you And even still with major Major libraries such as bluebird. They have some problems with cancellation as well as because they they don't quite know Exactly how to do it. Well either in fact, they threw out their entire design and start it over again and
12:27
There's another problem that comes up with with promises. For example Imagine if you're trying to do some sort of thing where you're doing try catch finally using using promises
12:40
No such thing exists Their their success and catch or then and catch but there is really no duck there's no notion of done They basically What they did is they kind of punted on the most difficult parts of building a promise and just said maybe we'll work about We'll worry about it a little bit later after all those are edge cases, right?
13:05
But no I think really it's a more fundamental problem in the design process that really it was unsafe at any speed quite honestly And maybe that's a bit harsh But at the same point I'd like things actually usable that so that come out of the standardization committee
13:24
So what about stream processing could stream processing the way that we know it's Solve a lot of our problems and when people think about stream programming. Well, they think about node But let's face it the streams and node were terrible
13:40
the pause method didn't data started immediately whether you were ready for it or not and So you couldn't just I want four bytes eight bytes. What have you? And pause and resume just were impossible to get right So what you ended up with was pretty much what this kid is trying to do, which is catch the water after the fact Doesn't work out very well and then so they said okay
14:07
We'll create a bunch of new classes so you can deal with readable writeable transform and so forth And all will be good now. I still think it's a lot that you have to implement yourself
14:21
There's a lot of boilerplate that you yourself have to implement when when implementing a stream So there's a lot to really trip over and with with streams 3 It doesn't get any easier because now they've added more methods in there in terms of adding batch updates and so forth So it's really easy to get tangled up in what you're trying to do
14:43
And so as if they hadn't learned enough, they've they've taken this idea now From from node and now applying it to to the browser So I imagine if it were now that we can start doing streaming directly using
15:02
Using pretty low-level Primitives to say I'm going to pipe this readable stream to this writeable stream Then I'm going and it's just basically node with promises added in That's pretty much it with a lot more with a lot more Infrastructure involved with that
15:23
You know, it could be it could be fantastic it couldn't be you know, it's it's kind of too early to tell But what I'm really passionate about is is reactive programming and Yes, there's there's been a lot of hype around the term everyone, you know says reactive this reactive that you can't go on to NPM
15:44
Or Bauer or you know, just on Hacker News without finding something that has the word reactive in it What does it really mean? Is it just a bunch of hype or is it something more than that? So When people think oh, yeah reactive that means react, right?
16:01
No React is basically just a way of representing a virtual is representing a DOM tree in In virtual space. So if you update something for example Some of your your binding state it will do a diff for you and figure out what it needs to do and and nicely
16:23
Update your user interface, but there's really nothing what we would consider reactive programming about it So really what is reactive programming, you know If we look at the dictionary It's not really all that much help because all we're seeing here is it's defining as
16:41
Readily responding to a stimulus. So meaning that its components are actives and always ready to receive events Great, I guess But we've already been doing that for such a long time now even in jQuery where we can just say on this paragraph click You know slide up Done, so there's really not much more than hype to this particular thing. Although
17:06
you know people have been trying to to you know to make a lot of money on on these sorts of things with things like the reactive manifesto and So forth where you know, they want these these broad Broad terms about what reactive programming is whether you're responsive to the user
17:24
responsive to load responsive to failures and so forth It's it's more to me more marketing speech Speak than it is actual technical know-how But when people think about reactive programming, you know, they're like you hipsters we've been doing this forever
17:44
You know since the days of Excel I mean after all when you go in there and you update a few fields what happens to your chart? Well, duh it it updates its reactive It's been you know, it's the oldest I know of reactive environment out there
18:03
So you really want to know what it's all about? So there is a where the term reactive Programming actually came from was a was a paper called real-time programming special purpose or general purpose languages I know that's a mouthful, isn't it? But it's by Gerard Berry and you can get to it's at bit.ly
18:24
reactive dash paper and I know that there's going to be some sort of reaction like this when I say here's an academic paper go read it But but get I guarantee you at least it's something worth worth reading and and I know
18:43
certain certain Immortal gods among us in terms of programmers take a look at the a lot of these things like our papers and just are utterly utterly shocked that we actually read these these kinds of things and I would say even the Germans are really good about
19:03
Dealing with these sorts of things. They have a word for pretty much everything for example the the fear of academic papers they could completely put into one word of computer vision shaft academic academic a
19:20
paper phobia, I think My Germans not not that great but but at the same points, yes, I can create a German word for pretty much anything It's beautiful When people tend to talk about reactive programming though, they tend to talk about functional reactive programming Which is not what they're ending up talking about at all because it's it's really just a concept of
19:46
continuous time where you have behaviors over time and you have Events which are discrete phenomena with a value and a time and it really it's all about the notational semantics Which means you have to have a formal algebra behind what you're doing or else it really doesn't mean all that much
20:05
And so that's really the term what functional reactive programming really means it's not just adding map and filter And reduce on to on to events. It's a lot more than that. It's a very very very precise term that goes back to
20:23
1997 so I'd kind of prefer if people would would would start using FRP as to what it really really means So Let's step back just a little bit before we started really getting into code. Let's let's step back into the year 1994 I don't know how many people here were actually born then but
20:43
I I certainly was and I remember those days just great And there was this book that came out Called design patterns and was by a group of authors We call the gang of four with Eric Gama Richard Helm Ralph Johnson and John
21:01
Felicities As as the authors, but it was the first time really that we thought about design patterns and got them all into a single book and which was great because it's still very very useful to this day and When they started to do a lot of these these kind of diagrams They wanted to kind of say well, this is is related to this one, but they kind of missed one
21:25
They missed the iterator and the observer patterns Unfortunately, and what we saw when we were designing what would become the reactive extensions We said, you know, there really is something to this between the two So for example, if you if you saw in the EF6 talk today
21:44
You'll see about iterators. So iterators are a great way to be able to to To iterate over infinite sequences as it were So for example, we can call get numbers and then call next and each time we call next We would get a value and whether it's done. So go through keep going
22:04
Value three about and then finally we're done Now the subject observer pattern was slightly different in the fact that what you were doing is you were largely dealing with with callbacks in the way that once You register a callback with this subject and when the subject was ready to yield a value it would
22:25
So we could go ahead move our mouse around and we would start to get all of this data coming out on our screen That's awesome So what we what we kind of see in JavaScript today is we see that subject
22:40
That subject observer pattern everywhere any event target in the DOM is basically following the subject observer pattern You've got the add event listener and you've got the remove event listener Each takes an event a handler and whether to use capture or not But it's not very compositional in the fact that what we showed earlier with the with the events
23:02
It's not very it's not very easy to add on additional events or compose them all together in a nice and meaningful way, unfortunately So what we did is we came up with this idea and said you know what we're going to turn this model slightly around here So what we're going to do is we're going to adapt the subject observer pattern
23:24
So it's kind of make it look like the the iterator pattern that we saw before but with a more compositional approach so for example here we could have this in a and you'll pardon if I if I write here in typescript, but if we have I This observable and what it would have is it would have a single subscribe method
23:43
And so instead of having this subscribe and unsubscribe pattern that we have traditionally in the subject observer pattern we have all of the unsubscribe logic built into that return value of that disposable and Then we can start listening to it by registering an observer into that
24:00
But that real compositional approach is because now we've got the all of that disconnect logic built into that subscription And that's very useful when we're starting to combine together events And then we want to tear it all down at once is the fact that we can call We can call dispose and then suddenly all of the handlers just disappear
24:21
So let me ask you a quick question then What's the difference between an array and? an event and Really what I'm going to tell you is the fact that since we were looking at them kind of in the same way in Terms of that that connection is the fact that they're both collections
24:41
So this so not only is is an array of values a collection But also your mouse movements are a collection your your mouse clicks are a collection Your your key downs or your key ups are collections therefore You should be able to query them just as you would query a database
25:01
And that's what I thought was the really kind of the oh my gosh This is awesome moments when when thinking about it is the fact that we could now start thinking about event based programming in a very In a very different way that we had before
25:20
So we said alright, so what we're going to do is we're going to take and and take a more mathematical approach Yes, you can avoid the category theory if you if you want to But the idea here is is on the on the right here We have the iterable which is part of ES6 Which has the symbol iterator?
25:41
Method onto it where we can get the iterator call next and that returns us the iteration result as we saw before and Then we basically married that up and said alright well So we have a something that throws tell us tells us are done. We're done, or we get a value Well, we distilled that into the knowledge of what we did for observable
26:00
So now we could do on error on next or on completed with 0 to infinite on next followed by an on error or on completed Now now let's actually get into some code enough enough talk here The majority of your asynchronous code can be written with just a very few amount of functions
26:22
You don't really have to reinvent the wheel here so besides flip can cat map we have Map which is basically if you're familiar with all of the es Five particular methods such as map filter and reduce well all of that pay plays into this as well
26:42
So you can transform a collection? By applying a single method over each one of them so for example here. We can say turn the turn the Circle into a diamond And with the with the filter we can then filter items
27:01
By a collection so we can say okay. I only want the the circles here, so everything else gets taken out Now merge all is a little bit different in the fact that We can now start taking streams that so what you can start to think about when you when you're thinking about Observables is you're thinking about collections over time because this mouse movement doesn't necessarily have a current
27:26
Location or this mouse click doesn't have an and necessarily a current value But it will over time so merge all is the idea that we can take a couple of streams and as they're emitting values we can just kind of merge them all into a single stream as they go along and
27:44
Flat map is kind of a way of doing that is is so that we can start to compose together These these operations, so it's basically a map and then emerge all And and the last one I want to talk about is kind of a really kind of a neat one
28:01
Which is the idea that you can do a take until which says okay? I'm going to start listening to this particular sequence and as soon as something happens on this other sequence We're done. That's it, and it's really kind of nice because It will save us a heck of a lot of work as you'll see here So let's start looking at some code here
28:21
So for example if I wanted to get the top-rated films so for example orange is new black or house of cards or anything like that from Netflix How would I do that well for a given user? I can go through their video list and then map through Which takes each video list and then goes through each video and says okay?
28:42
Using filter we can say we're all that the each video has a rating of five Then merge it all together and flatten it out So all we get are the videos that have the top rating of five, and then we can basically for each or subscribe through through there and display the movie and
29:02
Of course I can just instead of doing the map and merge all I can just call flat map here Now what if I told you this very same code that we saw here for doing Now for doing the the simple query of movies in Netflix we could do
29:23
Something with mouse drag events as well, and it's really kind of the same piece of code here So we can say get element drags so for a given element. We can say for the mouse down on that element Map it to the mouse movement and instead of the filter that we had before we can sound now say take until
29:44
Mouse up on that given element so suddenly we're able to kind of describe exactly how these these Operations are going to happen. It's literally saying is mouse down and mouse move until mouse up in that kind of language So as you see here we get rid of them the merge all and we're good to go
30:03
But take a look at the code differences between the two and you won't see all that much difference flat map here Take until there. That's it You have now the the ability to to do some very very powerful things
30:22
using using this kind of knowledge to build some very very powerful user interfaces and in fact To kind of make it a little bit more concrete for you for example all of all of Netflix's UIs are Which is a very you know big company in the US all of their their user interfaces
30:44
Use rx in some form or fashion At Microsoft we have a number of Applications that use that use it as well in terms of a lot of these DOM these DOM manipulations and so forth
31:01
But even things like slack for example are also using rx And you'll find a lot more things coming online such as Adam will also start to use rx in terms of how we deal with events So really we're talking about total proton Reversal here. We're talking about you know mind-blowing stuff that you know only ghostbusters could think of
31:25
So where you we kind of reach this this zen like state as it were where you realize that everything is really a stream and So when you kind of realize that you're like well, okay So now I can I can use maps and filters and all of this pretty much on the same way that I would I would
31:44
I could just start to combine these things like Lego blocks now that you've kind of reached that nirvana as it were you kind of just have that that moment of peace of like this is this is awesome and Now we what we have here is we have this idea of first-class asynchronous objects for both events and and
32:05
And single-shot values so first class what I really mean by that is the fact that we're not dealing with these callbacks anymore I can physically hand you a promise just as I can hand you an observable and you can both deal with them
32:21
That you can create them and you can return them from methods and so forth which is great for mocking purposes Testing purposes etc that you can feed in fake data as you want to But that's really the powerful thing so Really when we start to look at the programming landscape
32:43
We kind of think about it in a couple of different ways We think about it as you know, it's synchronous values versus asynchronous values and single value and multi value So for single values, obviously, you know Maybe a function or something like that. Whereas iterable we have
33:00
Stocks where we can filter out where the where the symbol is Facebook map over get the quote and for each over the data Now when we're talking about single asynchronous values We already have that promise as I've already told you about it as as as such as it may be but it's still that's that single value and If you take a look at the iterable and observable code, it's exactly the same code
33:25
so it's it doesn't really matter whether it came from a remote server somewhere or If it's just a single array sitting on is sitting in memory you get the same programming model from the from both places
33:41
so let's actually Take some code and and once again put that into practice How many people have done a kind of a type ahead or autocomplete box as part of your web solution? fair number of you how many of you got it, right a Lot less hands went up that time And I wonder why well it's actually fairly difficult and I mean
34:03
I see it on every device every single day is the fact that I'm typing along and I was like, oh gosh all these all of these things are eventually coming in and Sometimes they'll come out of order in the fact that I've already hit delete and and I've stopped that particular result But yet those results come in. I'm like no no, no, no, that's not what I meant. That's not what I meant
34:22
I wanted those to be canceled That's a real problem when you're dealing with asynchronous programming when there's this kind of lag I want to cancel and I want to stop caring about a particular value So we can do that by doing the following so we can take our key ups as they happen and then get that input value
34:42
So basically as we're as we're going along we're going to get the inputs value. So our tech particular text box as we're typing And the real important part here is because time, you know time and bandwidth is money So what you want to do is you want to debounce it So basically saying okay, I want to add a little bit of lag because I'm a really fast typer
35:03
I don't want every single little thing that I'm doing sent off to the server You know to Azure Amazon, etc, because that's bandwidth costs that I have to pay for So that's bad and and not only that but we only wanted to send over distinct Changes because remember when you hit the key up
35:23
It could be any key that does absolutely nothing So for example, if I hit control if I start hitting the left and right arrows Those are still key ups, but the fact is the input never changed So what you're doing there is you're now specifically saying I don't care about all of those other keys that happen to happen
35:42
Because the value itself never changed. So I really just want to want to stop listening to it At that point and now here's the really the the secret sauce here is is the flat we've already seen flat map Okay, and flat map was the idea. We were going to do a map and emerge So we're going to map over we're going to get that and then we're kind of kind of merge them as they come together
36:05
Well, what flat map latest does is the fact that it does that map that map that mapping and that flattening But it also goes along as each individual mapping Comes along and it's starting to merge it says Oh, there's another one just that just came in i'm going to cancel you i'm going to cancel you
36:22
I'm going to cancel you and so forth. So Only the latest value ever gets through So that means there is no chance at all of an out of sync out of sync Variable getting in there in terms of getting into your code And then you can go ahead and you can subscribe that data to the to your user interface in any which way you want to
36:45
So for example, if you're using react you can call set state etcetera or an angular you just you set the value But that's the key part here is you now have this this this Very valuable piece of code that you didn't really have to write all that much There's no set timeouts that she had to write. There's no value checking to see whether things are equal or not
37:06
You didn't have to write any of that. In fact, all you had to write was about four lines something like that And that's the value of observables is the fact that you can now start to tie all these things together when you're dealing with Events when you're dealing with with
37:23
intervals and so forth You don't have to do any of that low-level programming anymore Now here's an even more interesting challenge Now, I don't know how many people have dealt with really hardware constrained devices But what you really want to do is when you're when you're programming with these these smaller devices or even hardware constrained devices
37:46
What you really want to do is you only want to keep what's in in Memory is what's on on your particular screen at the moment and of course there there are times when you're going to want to add a little bit of fudge factor as it were because you know, you could be going up and going down and I don't necessarily want to
38:04
To get rid of all of that data as it comes along So I just really want to to be able to once that thing is off the screen I want all of that data gone. I want it all cleaned up by the dom How do I do that? Well, this this code might actually look a little complicated
38:22
But if I if I explain it to you, it won't be as much So what we can do is we can start listening for that document scroll So when that thing starts to scroll we can start listening to it What we're going to do is we're going to bounce it by 50 so 50 uh 50 ticks as it were so uh So just allowing for that fudge factor of when you're going up and going down is the fact that if if you do it
38:44
within that 50 50 ticks it won't do anything And then what you're going to do is on that scroll event determine whether your current row is visible or not So we're only going to get it distinct until changed Once again, because we only want it says okay true true true true true true false false false false
39:03
We don't care. We only want true or false And then we share it out to the world and and the world is good Then what we can do is we can then separate basically Fork this particular stream into two whether the row is is hidden or the row is
39:21
The row is currently visible or not So what we can do now we have this kind of way of determining whether our things are visible or not visible And then what we can do is then we can start to be by doing taking the row shows as it were uh, which Uh, which is basically whether uh, it's going to keep on saying true true true false false true, etc
39:46
Uh, and what we're going to do is we're going to start to do an interval in the background To to basically keep checking on the state of our row And as soon as that row data changes where it says, okay the get we're going to get that row data and take until it that row hides so that
40:03
When it when it immediately goes out of scope goes out of out of screen It is gone that take until says basically you're done. I'm going to clean up everything Uncompleted will tear down all of your event handlers and all of that Make sense? I know it's a lot of code to really look at but if we're starting to think about these these really hard problems that we're trying
40:25
To solve and we can think about these in very very simple ways Once again, you know the code will be available to you to take a look at Even the netflix player when we looked at the the code that we had before It was very convoluted and very hard to understand once again
40:43
we had that kind of uh, Callback hell that we were dealing with in in so much so that you know We couldn't really find out whether where the next thing was going to happen With observables, it's actually a lot easier than that. So for example, we can initialize the player
41:01
And then take that flat map to the play attempts With our movie, which gives us our movie id we can then authorize that movie id Try three times basically and take until someone hits cancel Because as soon as someone hits cancel, we don't want to do things anymore. We have now just compositionally said
41:23
All right, keep on going keep on going. Oh cancel. All right, we're going to stop all of the We're going to stop the retries. We're going to stop the Authorizations and so forth and then we can listen for the authorizations to play the movie Or we can say you're out of luck That's the kind of powerful things that you get with observables
41:44
So instead of burning yourself like you did before you kind of have this nice this warm glow feeling, you know It's not going to burn as much Necessarily because you have all of these these things at your disposal with the try the finalies and so forth and
42:00
And going back to when we were dealing with promises remember we we couldn't do any of this try catch Finally as we were doing before but we can certainly do that here when we can say Get data retry it three times now Catch it gives us the ability to to give us an alternative value
42:25
Or an alternative observable sequence if something fails. So for example, if you're dealing with an offline first scenario I can say well try three times to reach the internet if it fails Give us some some cash data and you're good to go
42:40
And then finally we can do some cleanup as as we need to and then process each item So really it is the final countdown. So I don't know how many people really remember this show, but I loved it Anyways So what's really great about the the community here is the fact that we are we're doing some really great things
43:06
Working with facebook ember and angular directly Uh, and you'll see a little bit more of each as as time goes along ember right now They have you know such things as as computed properties much as as things like knockout and a lot of the other libraries
43:23
have But what's really cool is the fact that with uh with react there's just so many different ways about talking about react and What's great about rx in in particular, uh with observables is the fact that it's it's library neutral It doesn't depend on jquery. It doesn't
43:41
It doesn't rely on anything. It just relies on your browser runtime. So the fact that it works very very well with react uh ember and angular And so much so that there are like six different flavors of people doing rx and react there's one for rx ember and then uh one for uh angular and uh and
44:02
and rx together Now what's really kind of cool here is the fact that you are now at the forefront since you now know observables You are now at the forefront of what's coming in angular 2 Because with angular 2 rx is included right now
44:21
And what they're going to do is all of the http stack Is going to be observable So now that you can have that subscribe you can have that That nice logic of the the abort and all of that that you couldn't get with with promises You have all of that you have all of this this nice debouncing and all of that behavior that you can add in
44:42
But that's the really cool part is now observables will ship as part of angular 2 That's really kind of a key thing and and there's the actual commit where that started to happen And what's really kind of neat about that is is is jeff cross and a lot of the other angular core teams Were actually working with us directly on making
45:03
rx go for going forward And just as with react, uh, it's very very simple to do the The really cool things. So for example, we could have a time ticker as we did before where we can say Do an interval every second and then every second set up this the seconds elapsed to our particular state
45:27
So once again, it'll start to do all of the things that you've had to do with set interval and all of that And then when the component will unmount instead of having to say clear all that intervals or anything like that We can just say dispose and that cleans up the entire chain directly
45:45
now What's even cooler is the fact that you are also not only in the the forefront of what angular is doing But also what the future of javascript is doing so with Everyone's heard of maybe has heard of async awaits, uh from features such as such as c sharp and so forth
46:06
Well, it's coming to uh to javascript as well And the idea of adding async and awaits for for promises and uh, and hopefully observables as well It's still kind of tbd at this point
46:20
But it's already been accepted and into the stage one at least For for for ecma script 7 or 2016, whichever you want to call it But the idea here is we can call it async function chain Animation so we can go through each individual animation await each animation until it completes And then we can have the try catch logic that we had before and then we can have a return value. That's kind of cool
46:47
But with uh with async await we already can do that. So for example, we can do retry catch and finally as well So we have that kind of today now what i'd like to see, you know when I when I showed you the
47:03
uh, the the thing earlier with uh with the w3 W3c streams I wasn't really that enthused with a lot of the design but When I when I took a look at this language called dart from uh from google
47:21
They actually have what I think is is kind of the better design here And why do I think that well, for example here? we can uh They literally cribbed the design of observables directly from us and they they They not only got it to work on the low level primitives of binary transform
47:43
But they also got it to work on their their simple event handlers as well. So it kind of works on both And that to me is kind of cool And kind of you know makes me ask the question. Why can't we do the same in javascript? But
48:00
Since you are the privileged few here Observables are coming to uh to 2016 in at least that they have been also Brought into uh to level one Of of acceptance and what does that mean exactly? Well, it means it still needs to go through the maturity cycle and so forth to actually become part of the standard
48:22
But imagine as as it were that observable now becomes part Just another part of the javascript runtime that you get to use you don't have to pick up my library or any other library You can just use it for example Observing keyboard events. You don't have to have all of these clumsy things
48:40
Uh such as add event listener remove event listener You now have this this style which is basically based upon. Uh, yes uh, yes, 2015 Generators as it were And so let's actually take a look and what what that would uh, uh look like here So for example with mouse drags we can listen for this particular element on mouse move
49:05
Do a map we can prevent defaults and we can create a custom operator such as take until Uh, etc and then listen for the mouse up and uh and mouse move Uh, then we can basically say the switch latest or basically say which one ever comes in first that's the one that wins
49:24
And what we also notice here is is that our observer that we have here is actually once again It follows the uh, the es2015 Style of generators with the with the next throw and return As coming as part of the the standard which once again, like I said kind of cool
49:45
Uh, if you want to learn more, uh, i'm going to go through quite a number of examples, uh here shortly uh, but uh If you go to learn rx on jhucine.github.io you can learn kind of the style of how you get to know Uh to know this particular style of javascript
50:03
And you can also visualize them at rx marbles So if you're not quite sure how something operates such as map and merge and so forth You can start to drag these little dots around and it will show you exactly how they work And if you really want if you're really curious on how people are really doing this in the open source world
50:24
For example, if you use sweet js, so sweet js is a way of doing uh, uh Lisp macros basically in in javascript so that you can add in things like async await Well, their entire editor is actually written using rx js
50:41
So if you take a look at the source code You will find all sorts of interesting things such as all the key bindings, etc So instead of going to questions immediately, let's see if we can pull up, uh here And pull up our particular All right, so what we have here is this is our particular home home page here, uh, which has
51:08
Uh Which basically has all of our documentation whether it's uh The observable all of our operators and so forth and all of the languages that we support including uh, apples swift
51:21
So we are, you know, we are kind of well ahead of the game there Uh, if you're really interested in in rx itself We have rx js has its own github repo And there are a lot of a lot of nifty features such as all of the things that you would use for Such as react flux ember angular
51:42
uh, and and so forth And there is even a a book Uh all about this and what's nice about this is the fact that a lot of our particular observable methods and so forth have uh Have js fiddles on not just sorry js bins along with each one of them so you can kind of play with how they operate
52:04
So if you had a certain question on how a particular operator works, well, all you have to do is just basically Run it through this And what's also kind of cool is the fact that you can actually write a visual debugger, uh, for example
52:20
uh Um So you're not quite sure how your application is running because while debugging asynchronous code is not exactly always easy uh But for example here we can take our code that we have here such as our button clicks And then we can do some certain things such as get the random values and uh, and so forth
52:43
So I said clicked I got a value of 2 also subscribing with 10 and then the original was 7 So if you take a look down Here what it actually shows you is how each of these things actually happened and how long it took So for example the map here, uh, the subscript each subscription happened at the each individual times
53:05
So that's very kind of cool now when people start to think about uh Start to think about uh, these uh, these sorts of things they start to think about games Well, obviously games are are a good one in terms of uh, how you can do some really awesome stuff
53:25
um Just as well as you can. Uh, let me pull up another one here. Um I happen to uh, yeah, so if you wanted to for example, uh, uh do super mario brothers
53:47
it's actually fairly simple in terms of Uh how you uh, how you can use the key, uh the keys together But not only that but you're also dealing with things such as uh, such as gravity and so forth So in the fact that i'm when i'm hitting up i'm coming back down and not that i'm infinitely jumping up into the air
54:07
Although that'd be kind of rad if I could do that uh, so all of these kinds of things are very much things that you can do now Uh what a lot of people tend to do as well is write a lot of real-time dashboards for example
54:23
Uh for for example for currency exchanges and so forth A lot of things where people are doing a lot of real-time data and real-time data analysis, uh, you can easily do in rx And just as I said that a lot of people are doing. Um things with uh with uh
54:41
with angular 2 in particular so for example You can do a lot of these these things and all these things will be in the in the notes So you can play around with them But the idea here is the fact that you can do time flies like an arrow do do some really cool animations Uh play tic-tac-toe or even search github for example for rx
55:03
And hopefully it works. Maybe who knows my thing's actually working. Eh, whatever uh, you can also create things such as uh, Event calendars, uh, people have been doing some really kind of cool stuff with uh with react as well Uh, here's the uh suite editor as well. So once again all of these particular things that you're doing here
55:27
uh is What am I doing? Uh is is all about uh Is all about using reactive programming to your to your favor, but like I said, yes
55:40
It's it's used for silly things such as animations and so forth Uh, but also using for you know for fairly complex things such as for example if I want to coordinate say image cropping I can Do that as well all using all using all of my things that i've i'm used to And even like I said games
56:00
Uh anything like that? Anything that it requires? very, uh, very simple and uh, you know state management and so forth and the fact that Uh, what you're dealing with is you're dealing with a number of things you're dealing with intervals you're dealing with key events you're dealing with Uh collision detection you're dealing with all of these other sorts of things
56:25
And how it makes it easy for you is the fact that you uh, you can manage all of that in a single kind of language And what was kind of funny? uh, and it rings kind of true is the fact that Uh netflix for example uses rx in various forms in about six different languages and what they found
56:46
Is that they could take a person from from java and move them over to javascript Actually fairly fairly easily and the reason why is even though that they had different syntaxes They were still fundamentally speaking the same language of observables
57:01
So they're like, oh now we can take a dotnet programmer move them over to javascript Take a java programmer move them over to to this move them over to there And it kind of worked out nicely for them in the fact that they have 25 30 developers that all can kind of speak the same language even though their runtimes are completely different
57:21
And so like I said, it's really really good for a lot of these things like animations and so forth But also a lot of your business logic as well, you know, you can do this You can decide to pick a different color All of these are different things such Here for example when we're dealing with this what we're dealing with here is the the idea that
57:43
All of these particular values here are a stream So this green this blue or this green is a is a stream just as well as my mouse down Is a stream so it's combining the latest of these two values together to create that color So that's the way that it kind of works is the fact that
58:02
Each individual thing each individual element is a stream unto itself So with that I have two minutes questions comments hate anything Wow
58:21
All right. We have a question Okay, I found the trying to composing Anonymous functions that are getting handled like all the control flows in the rx library kind of sucks at the moment. Yes Admitted like is that a case of the tooling being behind?
58:43
I I think it's really going to be part of the uh, It's going to be a problem with uh with it's it's the tooling right now and you'll find the same thing with promises Uh as well, which is why for example, uh, we have long stack trace support in uh in rx So if if there's something that goes wrong in your user code
59:02
It will completely chomp out all of my code All of the rx code and will only leave you with your code to say where you screwed up not me. Um And so that's that's certainly one aspect The other aspect was this rx vision that I was showing here was was kind of a profiler And there's another one that just came out the other day
59:24
Yeah, yeah, it was I think it was called thunderclap or something like that. I'll have to find it. Uh, but Um, but yeah, that was the idea is that you could uh, you could profile your your running application
59:42
Absolutely, absolutely that would uh, yeah because then all of the different languages, you know The different libraries out there such as bacon Most any of the other ones that are out there would all kind of you know, it wouldn't really matter It's all observables and it's all one single thing but I think that's that's
01:00:00
what it was called. I don't really remember off the top of my head, though. Any other questions? Yes, I'm largely against it, and just in the fact that I
01:00:41
obviously during the standardization process about what MAP and all of those other things mean in terms of, so for example, there are a lot of people that say, I don't want to catch errors or I do want to catch errors. Those questions need to be addressed. For example, Rx will automatically catch errors in your selectors and so forth and then channel
01:01:03
them into the error channel. Bacon and Kefir and others won't do that, and that's certainly troubling when it comes to that, but even in Rx there are slight differences, definitely between RxJava, but for the most part what you'll find is that the tests that we write
01:01:24
are deterministic tests, therefore they have ordering and we can always test them, and they will always have the same behavior, so we can easily compare one against the other. Absolutely. Which is why we've let certain libraries into what we call the Rx
01:01:41
family and certain ones that we haven't is the fact that there's a certain minimum bar that they had to meet in terms of really becoming a part of the family, as it were. Anything else? All right, well thank you very much. I clipped my hat to you, and yes,
01:02:05
please do vote on your way out, and I'll take any questions if anyone wants to hang out afterwards.