title
RxJS Observables Crash Course
description
Over an hour of programming with RxJS (Reactive Extensions) using observables and asynchronous data streams. The content is based on our ReactiveX Eduonix course below
FULL COURSE - https://www.eduonix.com/affiliates/id/16-10436
RxJS Boiler - https://github.com/bradtraversy/rxjs_boiler
detail
{'title': 'RxJS Observables Crash Course', 'heatmap': [{'end': 3251.121, 'start': 3198.734, 'weight': 1}], 'summary': "Titled 'rxjs observables crash course' covers a comprehensive introduction to reactive programming, rxjs, and the reactive extensions library, emphasizing practical examples and usage for data streams. it also discusses setting up javascript with webpack and babel for rxjs, real-time data streaming and error handling, creating observables from ajax requests, and understanding rxjs operators including map, merge, switch, and concat map with practical applications and examples.", 'chapters': [{'end': 165.969, 'segs': [{'end': 26.492, 'src': 'embed', 'start': 1.024, 'weight': 3, 'content': [{'end': 7.386, 'text': "Hey, what's going on guys? This mini course is going to be an introduction to RxJS and Reactive Programming.", 'start': 1.024, 'duration': 6.362}, {'end': 12.107, 'text': 'So RxJS stands for Reactive Extensions for JavaScript.', 'start': 8.006, 'duration': 4.101}, {'end': 19.329, 'text': 'Reactive Extensions or ReactiveX is a library for working with asynchronous data streams and observables.', 'start': 12.647, 'duration': 6.682}, {'end': 26.492, 'text': 'All right, all the content in this video is covered much more thoroughly in the full course available from Eduonix.', 'start': 20.049, 'duration': 6.443}], 'summary': 'Introduction to rxjs and reactive programming, covered in the full course available from eduonix.', 'duration': 25.468, 'max_score': 1.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01024.jpg'}, {'end': 70.628, 'src': 'embed', 'start': 46.293, 'weight': 0, 'content': [{'end': 55.042, 'text': 'So if you Google reactive programming, you will find some information, but a lot of it is really vague or theoretical or too complicated.', 'start': 46.293, 'duration': 8.749}, {'end': 63.15, 'text': 'So the purpose of this Eduonics course and this video is to give you some really solid practical examples.', 'start': 55.482, 'duration': 7.668}, {'end': 70.628, 'text': 'All right, so reactive programming is a programming paradigm that works with asynchronous data streams.', 'start': 64.004, 'duration': 6.624}], 'summary': 'Reactive programming explained with practical examples', 'duration': 24.335, 'max_score': 46.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl046293.jpg'}, {'end': 131.804, 'src': 'embed', 'start': 100.007, 'weight': 2, 'content': [{'end': 102.368, 'text': "And there's a few things we can get from a stream.", 'start': 100.007, 'duration': 2.361}, {'end': 109.291, 'text': 'So we can get the data that it emits, which could be virtually anything and any type of data.', 'start': 102.888, 'duration': 6.403}, {'end': 117.375, 'text': "We can get errors if something goes wrong, and then we can get a signal that notifies us when it's complete, if in fact it does complete.", 'start': 109.791, 'duration': 7.584}, {'end': 118.375, 'text': "Some of them don't.", 'start': 117.455, 'duration': 0.92}, {'end': 122.117, 'text': 'So if we look at this image right here, it represents a stream.', 'start': 119.476, 'duration': 2.641}, {'end': 131.804, 'text': 'So we start with some kind of event, indicates an event with some kind of value, for example coordinates of a click.', 'start': 122.777, 'duration': 9.027}], 'summary': 'Streams can provide data, errors, and completion signals, representing various events like click coordinates.', 'duration': 31.797, 'max_score': 100.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0100007.jpg'}], 'start': 1.024, 'title': 'Introduction to rxjs', 'summary': 'Introduces rxjs and reactive programming as a paradigm for working with asynchronous data streams from various sources such as ui events, http requests, and more, and provides practical examples for understanding the concept.', 'chapters': [{'end': 165.969, 'start': 1.024, 'title': 'Introduction to rxjs and reactive programming', 'summary': 'Introduces rxjs and reactive programming, explaining that it is a programming paradigm for working with asynchronous data streams, which can originate from various sources such as ui events, http requests, and more, and provides practical examples for understanding the concept.', 'duration': 164.945, 'highlights': ['Reactive programming is a programming paradigm that works with asynchronous data streams, originating from various sources such as UI events, HTTP requests, and more, and it provides practical examples for understanding the concept.', 'RxJS stands for Reactive Extensions for JavaScript, and it is a library for working with asynchronous data streams and observables.', 'The Eduonix course and video aim to provide practical examples of reactive programming, addressing the vagueness and complexity often associated with the topic.', 'Data streams in reactive programming can emit data of various types, handle errors, and provide a signal when complete, and can originate from sources like UI events, HTTP requests, and more.']}], 'duration': 164.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01024.jpg', 'highlights': ['Reactive programming is a programming paradigm that works with asynchronous data streams, originating from various sources such as UI events, HTTP requests, and more, and it provides practical examples for understanding the concept.', 'The Eduonix course and video aim to provide practical examples of reactive programming, addressing the vagueness and complexity often associated with the topic.', 'Data streams in reactive programming can emit data of various types, handle errors, and provide a signal when complete, and can originate from sources like UI events, HTTP requests, and more.', 'RxJS stands for Reactive Extensions for JavaScript, and it is a library for working with asynchronous data streams and observables.']}, {'end': 437.511, 'segs': [{'end': 286.794, 'src': 'embed', 'start': 167.048, 'weight': 0, 'content': [{'end': 171.332, 'text': "Now the way that we work with these streams is with what's called an observable.", 'start': 167.048, 'duration': 4.284}, {'end': 180.599, 'text': "So observables are used to watch these streams and they'll emit a function when a value is emitted or an error or a complete signal is returned.", 'start': 171.912, 'duration': 8.687}, {'end': 188.146, 'text': "So observables can be subscribed to by an observer and there's no limit to how many subscriptions an observable can have.", 'start': 181.2, 'duration': 6.946}, {'end': 192.968, 'text': 'So we can interact with these data streams as if they were just a regular array.', 'start': 188.786, 'duration': 4.182}, {'end': 201.471, 'text': 'We can use array-like methods, and we have a whole bunch of operators that will allow us to manipulate the data pretty much however we want.', 'start': 193.368, 'duration': 8.103}, {'end': 209.654, 'text': "So right now, we can't just use standard JavaScript ES5 or even ES6 to work with observables and streams.", 'start': 202.571, 'duration': 7.083}, {'end': 215.696, 'text': 'And Reactive Extensions is what allows us to do that, which is also sometimes called ReactiveX.', 'start': 210.354, 'duration': 5.342}, {'end': 221.605, 'text': "Alright, so it's a library for composing asynchronous programs by using observable sequences.", 'start': 216.843, 'duration': 4.762}, {'end': 230.25, 'text': 'And it provides us with a long list of operators, which allow us to filter, select, transform, combine, and compose observables.', 'start': 222.226, 'duration': 8.024}, {'end': 235.612, 'text': 'Now, Reactive Extensions is not limited to just JavaScript.', 'start': 231.37, 'duration': 4.242}, {'end': 242.476, 'text': "If you look at this list, you can see that it's available for many of the popular programming languages of all types.", 'start': 236.413, 'duration': 6.063}, {'end': 249.336, 'text': 'Now the reason I chose JavaScript and RxJS is because JavaScript is a well-known language.', 'start': 243.752, 'duration': 5.584}, {'end': 257.562, 'text': 'The RxJS library is pretty stable and goes in-depth in terms of what you can do with it.', 'start': 250.177, 'duration': 7.385}, {'end': 262.326, 'text': 'And also JavaScript happens to be what I specialize in.', 'start': 258.262, 'duration': 4.064}, {'end': 268.991, 'text': "so that's what we'll be using throughout this video and throughout the Reactive Extensions course.", 'start': 262.326, 'duration': 6.665}, {'end': 274.148, 'text': "All right, so before we get started, let's just take a look at exactly what we'll be covering here.", 'start': 269.906, 'duration': 4.242}, {'end': 280.711, 'text': "So I'll show you how to observe and examine asynchronous data streams that come from UI events.", 'start': 274.748, 'duration': 5.963}, {'end': 284.573, 'text': "We'll create observables from array-like objects.", 'start': 281.632, 'duration': 2.941}, {'end': 286.794, 'text': "We'll create observables from scratch.", 'start': 285.113, 'duration': 1.681}], 'summary': 'Reactive extensions (rxjs) allows working with observables to manipulate data streams in javascript, providing a library for composing asynchronous programs and a wide range of operators for filtering, selecting, transforming, combining, and composing observables.', 'duration': 119.746, 'max_score': 167.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0167048.jpg'}, {'end': 383.698, 'src': 'embed', 'start': 331.008, 'weight': 5, 'content': [{'end': 336.572, 'text': 'So if we click on Choose Your Platform, you can see all the different languages that the library is available for.', 'start': 331.008, 'duration': 5.564}, {'end': 340.175, 'text': "Now, we're using JavaScript, so we're using RxJS.", 'start': 337.113, 'duration': 3.062}, {'end': 345.5, 'text': 'Now, if I click on that, it will bring us to the GitHub page.', 'start': 340.896, 'duration': 4.604}, {'end': 348.843, 'text': "It's important to note that this is for version 4.", 'start': 345.56, 'duration': 3.283}, {'end': 354.828, 'text': "We're going to be using version 5, which is in beta, but it is very stable.", 'start': 348.843, 'duration': 5.985}, {'end': 362.254, 'text': 'Most of the API is the same, but there are a few operators that have been changed in RxJS 5.', 'start': 355.348, 'duration': 6.906}, {'end': 368.36, 'text': 'But notice that version 4 is at GitHub Reactive Extensions slash RxJS.', 'start': 362.254, 'duration': 6.106}, {'end': 373.883, 'text': 'Version 5 is at github.com.reactivex.com.', 'start': 369.175, 'duration': 4.708}, {'end': 376.307, 'text': 'And you can see this is version 5.', 'start': 374.163, 'duration': 2.144}, {'end': 383.698, 'text': "So if you're looking for documentation, this is where you want to be if you're following along with this course.", 'start': 376.307, 'duration': 7.391}], 'summary': 'Rxjs library available in multiple languages, using version 5 for stability and new operators, important documentation on github.', 'duration': 52.69, 'max_score': 331.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0331008.jpg'}], 'start': 167.048, 'title': 'Rxjs and reactive extensions', 'summary': 'Explains observables in rxjs and their usage for data streams, reactive extensions library and its operators, creating observables from various sources, and migrating to version 5 for a stable environment setup.', 'chapters': [{'end': 262.326, 'start': 167.048, 'title': 'Working with observables in rxjs', 'summary': 'Explains the concept of observables in rxjs, highlighting its usage for watching and manipulating data streams, with no limit to the number of subscriptions. it also discusses the reactive extensions library, providing a long list of operators for composing asynchronous programs using observable sequences, available in multiple programming languages.', 'duration': 95.278, 'highlights': ['Observables can be subscribed to by an observer, with no limit to the number of subscriptions an observable can have, allowing flexible usage (e.g., handling multiple subscribers).', 'Reactive Extensions library provides a long list of operators for filtering, selecting, transforming, combining, and composing observables, enhancing the manipulation of data streams.', 'Reactive Extensions (Rx) is not limited to just JavaScript, as it is available for many popular programming languages, making it a versatile tool for asynchronous program composition.', 'RxJS library is a stable and in-depth tool for working with observables and streams in JavaScript, making it a preferred choice due to its stability and comprehensive functionality.', 'RxJS allows interaction with data streams as if they were regular arrays, enabling the use of array-like methods for data manipulation.']}, {'end': 437.511, 'start': 262.326, 'title': 'Introduction to reactive extensions', 'summary': 'Covers creating observables from ui events, array-like objects, and promises, using helpful operators from rxjs, and migrating from version 4 to 5, while emphasizing the importance of documentation and choosing the latest version for a stable environment setup.', 'duration': 175.185, 'highlights': ['The chapter covers creating observables from UI events, array-like objects, and promises, which are essential in Reactive Extensions, emphasizing practical examples and usage throughout the course.', 'Emphasizing the importance of documentation and choosing the latest version for a stable environment setup, ensuring effective and up-to-date learning experience for course participants.', 'Migrating from version 4 to 5 is highlighted, with a focus on understanding the changes in operators and ensuring compatibility with the course material and practical examples.', 'Explaining the process of creating observables from UI events, array-like objects, and promises, providing a foundational understanding of essential concepts in Reactive Extensions.']}], 'duration': 270.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0167048.jpg', 'highlights': ['Reactive Extensions library provides a long list of operators for filtering, selecting, transforming, combining, and composing observables, enhancing the manipulation of data streams.', 'RxJS library is a stable and in-depth tool for working with observables and streams in JavaScript, making it a preferred choice due to its stability and comprehensive functionality.', 'Observables can be subscribed to by an observer, with no limit to the number of subscriptions an observable can have, allowing flexible usage (e.g., handling multiple subscribers).', 'RxJS allows interaction with data streams as if they were regular arrays, enabling the use of array-like methods for data manipulation.', 'The chapter covers creating observables from UI events, array-like objects, and promises, which are essential in Reactive Extensions, emphasizing practical examples and usage throughout the course.', 'Emphasizing the importance of documentation and choosing the latest version for a stable environment setup, ensuring effective and up-to-date learning experience for course participants.', 'Migrating from version 4 to 5 is highlighted, with a focus on understanding the changes in operators and ensuring compatibility with the course material and practical examples.', 'Reactive Extensions (Rx) is not limited to just JavaScript, as it is available for many popular programming languages, making it a versatile tool for asynchronous program composition.']}, {'end': 1143.894, 'segs': [{'end': 476.914, 'src': 'embed', 'start': 438.312, 'weight': 0, 'content': [{'end': 439.573, 'text': "But we're not going to use a CDN.", 'start': 438.312, 'duration': 1.261}, {'end': 444.256, 'text': "We're going to be using an environment using Webpack and Babel.", 'start': 439.593, 'duration': 4.663}, {'end': 450.076, 'text': 'now. initially I was going to go through all the steps to set that up,', 'start': 445.313, 'duration': 4.763}, {'end': 456.441, 'text': 'but it was too time-consuming and I really want to just focus on RxJS and observables.', 'start': 450.076, 'duration': 6.365}, {'end': 465.146, 'text': "in the actual course from Eduonics I do go through and show you exactly how to set it up, but in this case we're gonna just grab it from github.", 'start': 456.441, 'duration': 8.705}, {'end': 473.452, 'text': "alright. so if you go to github.com, slash bradtraversee, slash rxjs underscore boiler, It's pretty easy to set up.", 'start': 465.146, 'duration': 8.306}, {'end': 476.914, 'text': 'Okay, so we just need to install our dependencies.', 'start': 473.732, 'duration': 3.182}], 'summary': 'Using webpack and babel instead of cdn. setting up rxjs from github for easier installation.', 'duration': 38.602, 'max_score': 438.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0438312.jpg'}, {'end': 802.125, 'src': 'embed', 'start': 743.302, 'weight': 2, 'content': [{'end': 745.404, 'text': "and let's install live server globally.", 'start': 743.302, 'duration': 2.102}, {'end': 757.172, 'text': 'so npm, install live server, dash g, alright.', 'start': 745.404, 'duration': 11.768}, {'end': 766.538, 'text': "so now we should be able to simply run npm start and that'll open up the local host port.", 'start': 757.172, 'duration': 9.366}, {'end': 770.723, 'text': "eight thousand All right, and you can see we're getting our index page.", 'start': 766.538, 'duration': 4.185}, {'end': 775.89, 'text': 'And if we open the console with F12, you see that we have RxJS boiler running.', 'start': 770.983, 'duration': 4.907}, {'end': 781.637, 'text': "So everything's now set up, and we're ready to start to code with RxJS.", 'start': 776.51, 'duration': 5.127}, {'end': 792.582, 'text': "Alright guys, so the first thing we're going to do is we're going to create an observable sequence from UI events.", 'start': 785.6, 'duration': 6.982}, {'end': 794.523, 'text': 'Okay, a couple different types of events.', 'start': 792.942, 'duration': 1.581}, {'end': 799.665, 'text': "So first thing I'm going to do, I have my app.js file open and my index.html.", 'start': 795.183, 'duration': 4.482}, {'end': 802.125, 'text': "I'm going to create a button.", 'start': 800.165, 'duration': 1.96}], 'summary': 'Installed live server globally, running on localhost:8000. setting up rxjs for coding.', 'duration': 58.823, 'max_score': 743.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0743302.jpg'}], 'start': 438.312, 'title': 'Setting up javascript with webpack and rxjs', 'summary': 'Discusses setting up javascript environment using webpack and babel for rxjs, emphasizing not using a cdn, instead installing dependencies from a github repository. it also explains the process of creating observable sequences from ui events and subscribing to observables, emphasizing the use of rxjs, jquery, and babel.', 'chapters': [{'end': 476.914, 'start': 438.312, 'title': 'Setting up webpack and babel with rxjs', 'summary': 'Discusses setting up an environment using webpack and babel for rxjs, emphasizing not using a cdn, instead installing dependencies from a github repository.', 'duration': 38.602, 'highlights': ['The chapter emphasizes not using a CDN and instead setting up an environment using Webpack and Babel for RxJS.', 'The speaker mentions that it was too time-consuming to go through all the steps to set up and wants to focus on RxJS and observables.', "The course from Eduonics provides detailed instructions on setting up the environment, but in this case, the speaker recommends grabbing it from a specific GitHub repository, 'github.com/bradtraversee/rxjs_boiler'.", 'The process of setting up the environment involves installing dependencies.']}, {'end': 1143.894, 'start': 476.914, 'title': 'Setting up javascript with webpack and rxjs', 'summary': 'Explains the process of setting up javascript with webpack, installing dependencies, running webpack in watch mode, using live server, creating observable sequences from ui events, and subscribing to observables, emphasizing the use of rxjs, jquery, and babel.', 'duration': 666.98, 'highlights': ['The chapter explains the process of setting up JavaScript with Webpack, including installing dependencies and running Webpack in watch mode. It details the process of setting up JavaScript with Webpack, installing Babel, Babel Core, Babel Loader, and Webpack dependencies, and running Webpack in watch mode to update the file every time it is saved.', 'It demonstrates the use of live server to run the code in a server environment. It demonstrates the use of live server to run the code in a server environment, with the ability to open the localhost port 8000 and display the index page.', 'The chapter focuses on creating observable sequences from UI events and subscribing to observables, emphasizing the use of RxJS, jQuery, and Babel. It focuses on creating observable sequences from UI events, using RxJS and jQuery, and subscribing to observables to handle data streams, errors, and completions.']}], 'duration': 705.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl0438312.jpg', 'highlights': ['The chapter emphasizes not using a CDN and instead setting up an environment using Webpack and Babel for RxJS.', 'The process of setting up the environment involves installing dependencies.', 'The chapter focuses on creating observable sequences from UI events and subscribing to observables, emphasizing the use of RxJS, jQuery, and Babel.', 'It demonstrates the use of live server to run the code in a server environment, with the ability to open the localhost port 8000 and display the index page.', "The speaker recommends grabbing the environment setup from a specific GitHub repository, 'github.com/bradtraversee/rxjs_boiler'."]}, {'end': 1840.676, 'segs': [{'end': 1314.085, 'src': 'embed', 'start': 1249.276, 'weight': 2, 'content': [{'end': 1257.5, 'text': "And then down here, let's say output dot append.", 'start': 1249.276, 'duration': 8.224}, {'end': 1259.681, 'text': "Okay, so now we're using jQuery.", 'start': 1257.52, 'duration': 2.161}, {'end': 1264.744, 'text': "And we'll pass in e dot target dot value.", 'start': 1260.522, 'duration': 4.222}, {'end': 1267.585, 'text': "So let's save that.", 'start': 1266.604, 'duration': 0.981}, {'end': 1274.965, 'text': "And now if we go and click in here and start to type, you'll see that it's going to output in the browser.", 'start': 1269.662, 'duration': 5.303}, {'end': 1280.609, 'text': 'Alright, so this works similar to how Angular 2 works with its data binding.', 'start': 1274.985, 'duration': 5.624}, {'end': 1285.832, 'text': "So there's one more event that I want to show you, and that's the mouse move event.", 'start': 1281.99, 'duration': 3.842}, {'end': 1288.954, 'text': "So let's go ahead and grab this.", 'start': 1286.332, 'duration': 2.622}, {'end': 1294.028, 'text': "and let's change it to.", 'start': 1292.026, 'duration': 2.002}, {'end': 1305.26, 'text': "we'll just say move stream and let's change this to document, because i want this to work on the entire document and then we'll change the event.", 'start': 1294.028, 'duration': 11.232}, {'end': 1310.204, 'text': "we're going to change that to mouse move, All right.", 'start': 1305.26, 'duration': 4.944}, {'end': 1314.085, 'text': "And then down here, let's just keep that as is.", 'start': 1310.304, 'duration': 3.781}], 'summary': 'Using jquery to handle input, output, and mouse move events for data binding.', 'duration': 64.809, 'max_score': 1249.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01249276.jpg'}, {'end': 1415.961, 'src': 'embed', 'start': 1389.621, 'weight': 0, 'content': [{'end': 1394.189, 'text': "So it's a constant stream giving us this data, this x and y coordinates.", 'start': 1389.621, 'duration': 4.568}, {'end': 1398.517, 'text': "All right, so that's how we can create observables from events.", 'start': 1394.209, 'duration': 4.308}, {'end': 1409.078, 'text': "All right, so now that I've showed you how to create observables for events, now I'm going to show you how to create them from array-like objects.", 'start': 1402.096, 'duration': 6.982}, {'end': 1415.961, 'text': "All right, so I've cleared everything out, and I will post the files on GitHub, and I'll add a link in the description.", 'start': 1409.718, 'duration': 6.243}], 'summary': 'Creating observables from data streams and array-like objects for github files.', 'duration': 26.34, 'max_score': 1389.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01389621.jpg'}, {'end': 1575.246, 'src': 'embed', 'start': 1536.908, 'weight': 6, 'content': [{'end': 1539.288, 'text': "Now notice with this one, we're actually getting completed.", 'start': 1536.908, 'duration': 2.38}, {'end': 1543.669, 'text': "We didn't get that with from event because the events don't stop.", 'start': 1539.348, 'duration': 4.321}, {'end': 1546.369, 'text': 'This, however, is just a static array.', 'start': 1543.749, 'duration': 2.62}, {'end': 1548.95, 'text': "When it gets to the end, it's going to run the completed.", 'start': 1546.79, 'duration': 2.16}, {'end': 1559.835, 'text': "All right, now usually you'd probably be working with some kind of data source that outputs JSON or an array of JSON objects.", 'start': 1550.649, 'duration': 9.186}, {'end': 1561.276, 'text': "So let's do that.", 'start': 1560.376, 'duration': 0.9}, {'end': 1575.246, 'text': "I'll say const post and we'll set that to an array and say the posts have a title and a body.", 'start': 1561.356, 'duration': 13.89}], 'summary': 'Demonstrating completion with a static array and working with json data source.', 'duration': 38.338, 'max_score': 1536.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01536908.jpg'}], 'start': 1143.954, 'title': 'Real-time data streaming and event handling, creating observables from arrays, and using rxjs observable from arrays, sets, and maps', 'summary': 'Explores real-time data streaming and event handling in javascript and jquery, creating observables from array-like objects using the rx.observable from operator, and demonstrates how to use it with arrays, sets, and maps, showcasing examples and differences between static arrays and event-based observables.', 'chapters': [{'end': 1389.581, 'start': 1143.954, 'title': 'Real-time data streaming and event handling', 'summary': 'Explores real-time data streaming and event handling using javascript and jquery, demonstrating constant data stream from input box, output in the browser, and capturing mouse move event coordinates.', 'duration': 245.627, 'highlights': ['Demonstrating constant data stream from input box The example showcases a constant stream of data from an input box, capturing every character typed, providing real-time feedback.', 'Outputting data in the browser using jQuery The code demonstrates using jQuery to output the input data in the browser window, resembling data binding in Angular 2, showcasing real-time updates.', 'Capturing and displaying mouse move event coordinates The chapter illustrates capturing and displaying the X and Y coordinates of the mouse move event, providing real-time feedback on the movement within the document.']}, {'end': 1561.276, 'start': 1389.621, 'title': 'Creating observables from arrays', 'summary': 'Discusses creating observables from array-like objects using the rx.observable from operator, demonstrating the use of arrow functions and highlighting the difference between static arrays and event-based observables.', 'duration': 171.655, 'highlights': ['The chapter explains how to create observables from array-like objects using the rx.observable from operator, showcasing the use of arrow functions for callback and demonstrating the completion of the observable sequence when dealing with static arrays.', "It highlights the difference between event-based observables and static arrays, emphasizing that static arrays trigger the 'completed' signal at the end of the sequence."]}, {'end': 1840.676, 'start': 1561.356, 'title': 'Using rxjs observable from arrays, sets, and maps', 'summary': 'Demonstrates using the rx.observable.from operator to create observables from arrays, sets, and maps, showcasing how to output the data and the completion signal, with examples of arrays, sets, numbers, and objects.', 'duration': 279.32, 'highlights': ['Using rx.observable.from to create observables from arrays, sets, and maps Demonstrates the use of rx.observable.from to create observables from arrays, sets, and maps, illustrating the flexibility of data types that can be used.', 'Outputting data and the completion signal Shows the output of data and the completion signal when creating observables from arrays, sets, and maps, highlighting the completion of the observable stream.', 'Creating an observable from a set Illustrates the process of creating an observable from a set, demonstrating the ability to handle different data types within the set.', 'Creating an observable from a map Demonstrates the creation of an observable from a map, showcasing the handling of key-value pairs within the map.']}], 'duration': 696.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01143954.jpg', 'highlights': ['Demonstrates the use of rx.observable.from to create observables from arrays, sets, and maps, illustrating the flexibility of data types that can be used.', 'The chapter explains how to create observables from array-like objects using the rx.observable from operator, showcasing the use of arrow functions for callback and demonstrating the completion of the observable sequence when dealing with static arrays.', 'Capturing and displaying mouse move event coordinates The chapter illustrates capturing and displaying the X and Y coordinates of the mouse move event, providing real-time feedback on the movement within the document.', 'Outputting data in the browser using jQuery The code demonstrates using jQuery to output the input data in the browser window, resembling data binding in Angular 2, showcasing real-time updates.', 'Using rx.observable.from to create observables from arrays, sets, and maps Demonstrates the use of rx.observable.from to create observables from arrays, sets, and maps, illustrating the flexibility of data types that can be used.', 'The chapter illustrates capturing and displaying the X and Y coordinates of the mouse move event, providing real-time feedback on the movement within the document.', "It highlights the difference between event-based observables and static arrays, emphasizing that static arrays trigger the 'completed' signal at the end of the sequence.", 'Creating an observable from a set Illustrates the process of creating an observable from a set, demonstrating the ability to handle different data types within the set.']}, {'end': 2124.269, 'segs': [{'end': 2006.12, 'src': 'embed', 'start': 1940.781, 'weight': 0, 'content': [{'end': 1944.103, 'text': 'All right.', 'start': 1940.781, 'duration': 3.322}, {'end': 1945.763, 'text': 'So we get creating observable.', 'start': 1944.163, 'duration': 1.6}, {'end': 1947.864, 'text': 'Now, this is just console logging.', 'start': 1946.023, 'duration': 1.841}, {'end': 1950.025, 'text': "We're not actually emitting values yet.", 'start': 1947.884, 'duration': 2.141}, {'end': 1956.808, 'text': 'So if we want to emit a value, then we need to take that observer and call .next.', 'start': 1950.145, 'duration': 6.663}, {'end': 1964.06, 'text': "Alright, and if you've ever used a JavaScript generator function, this is pretty similar.", 'start': 1958.857, 'duration': 5.203}, {'end': 1970.364, 'text': "So let's say observer.next and we'll just say hello world.", 'start': 1964.801, 'duration': 5.563}, {'end': 1972.946, 'text': "Alright, so let's go ahead and save that.", 'start': 1971.345, 'duration': 1.601}, {'end': 1977.389, 'text': "And you can see that we're now emitting hello world.", 'start': 1975.208, 'duration': 2.181}, {'end': 1987.155, 'text': "If we want to emit another value from the stream, we'll say observer.next and we'll say another value.", 'start': 1977.949, 'duration': 9.206}, {'end': 1988.396, 'text': 'Save it.', 'start': 1988.016, 'duration': 0.38}, {'end': 1991.575, 'text': 'and we get another value.', 'start': 1990.475, 'duration': 1.1}, {'end': 1997.757, 'text': "Now just to show you that this is in fact a stream that is constantly open, let's do a timeout.", 'start': 1992.296, 'duration': 5.461}, {'end': 2006.12, 'text': "We'll do setTimeout and pass in here just an arrow function.", 'start': 1997.917, 'duration': 8.203}], 'summary': "Creating an observable to emit values like 'hello world' and 'another value' using javascript.", 'duration': 65.339, 'max_score': 1940.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01940781.jpg'}, {'end': 2091.25, 'src': 'embed', 'start': 2061.609, 'weight': 2, 'content': [{'end': 2066.33, 'text': 'Now, if I were to put this complete outside of the set timeout, it would complete before this runs.', 'start': 2061.609, 'duration': 4.721}, {'end': 2071.152, 'text': 'So you want to make sure if you do something like this, you want to complete at the right place.', 'start': 2066.389, 'duration': 4.763}, {'end': 2073.612, 'text': 'So now errors.', 'start': 2072.452, 'duration': 1.16}, {'end': 2078.353, 'text': "If we want to, let's say, have some kind of conditional, and if it fails, we want to set an error.", 'start': 2073.733, 'duration': 4.62}, {'end': 2085.516, 'text': "So we could say observer.error, and in here we'll say new error.", 'start': 2078.935, 'duration': 6.581}, {'end': 2091.25, 'text': 'and you can put whatever you want here to output.', 'start': 2088.368, 'duration': 2.882}], 'summary': 'The importance of timing in setting completion and error conditions in coding.', 'duration': 29.641, 'max_score': 2061.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02061609.jpg'}], 'start': 1840.696, 'title': 'Creating, observing, and handling errors in rxjs', 'summary': "Explains creating observables from scratch, emitting values from a stream, and handling errors in rxjs. it includes creating an observable sequence, emitting 'hello world', demonstrating timeout and completion, and implementing error handling with observer.error and .catch. a total of three values are emitted over time, and the behavior upon error occurrence is demonstrated.", 'chapters': [{'end': 1972.946, 'start': 1840.696, 'title': 'Creating observables from scratch', 'summary': "Explains how to create an observable from scratch, using an example of creating an observable sequence and emitting a value 'hello world' using the observer.next method.", 'duration': 132.25, 'highlights': ["Creating an observable sequence and using an observer to log 'creating observable' when subscribing to it", "Emitting a value 'hello world' using the observer.next method"]}, {'end': 2061.149, 'start': 1975.208, 'title': 'Observing stream and emitting values', 'summary': 'Demonstrates the process of emitting values from a stream using the observer.next method, with a demonstration of a timeout using settimeout and finally completing the observer, resulting in a total of three emitted values over a period of time.', 'duration': 85.941, 'highlights': ["The process of emitting values from a stream using the observer.next method is demonstrated, emitting 'hello world' and 'another value' sequentially.", "A timeout using setTimeout is demonstrated, emitting 'yet another value' after three seconds, showcasing the continuous nature of the stream.", 'The completion of the observer is shown by invoking observer.complete after a three-second timeout, concluding the emission process.']}, {'end': 2124.269, 'start': 2061.609, 'title': 'Rxjs error handling', 'summary': 'Explains the importance of handling errors in rxjs, including the use of observer.error to set an error and the implementation of .catch for a more user-friendly error handling, with a demonstration of how the code behaves when an error occurs.', 'duration': 62.66, 'highlights': ['The chapter explains the importance of handling errors in RxJS, including the use of observer.error to set an error and the implementation of .catch for a more user-friendly error handling.', "The code demonstrates that when an error occurs, it doesn't complete and just stops, emphasizing the need for proper error handling.", 'The chapter highlights the usage of .catch for more user-friendly error handling, showcasing a practical implementation to handle errors in RxJS.']}], 'duration': 283.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl01840696.jpg', 'highlights': ["Creating an observable sequence and using an observer to log 'creating observable' when subscribing to it", "The process of emitting values from a stream using the observer.next method is demonstrated, emitting 'hello world' and 'another value' sequentially", 'The chapter explains the importance of handling errors in RxJS, including the use of observer.error to set an error and the implementation of .catch for a more user-friendly error handling']}, {'end': 2755.226, 'segs': [{'end': 2185.974, 'src': 'embed', 'start': 2152.328, 'weight': 0, 'content': [{'end': 2156.112, 'text': 'All right, so just a more friendly way of handling things, handling errors.', 'start': 2152.328, 'duration': 3.784}, {'end': 2161.137, 'text': "So that's how you can create an observable from scratch.", 'start': 2157.853, 'duration': 3.284}, {'end': 2169.788, 'text': "All right, so now I'm going to show you how to create an observable sequence out of a promise.", 'start': 2164.926, 'duration': 4.862}, {'end': 2176.15, 'text': 'A promise basically represents the eventual result of an asynchronous operation.', 'start': 2170.328, 'duration': 5.822}, {'end': 2185.974, 'text': 'So it does something, and then it can return a value, and it can return it at a later time using .then.', 'start': 2176.17, 'duration': 9.804}], 'summary': 'Demonstrating creating observables from scratch and promises.', 'duration': 33.646, 'max_score': 2152.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02152328.jpg'}, {'end': 2280.931, 'src': 'embed', 'start': 2249.349, 'weight': 5, 'content': [{'end': 2250.23, 'text': 'from promise.', 'start': 2249.349, 'duration': 0.881}, {'end': 2253.953, 'text': "And we'll set the timeout to three seconds.", 'start': 2251.471, 'duration': 2.482}, {'end': 2256.976, 'text': "So there's a very simple promise.", 'start': 2255.475, 'duration': 1.501}, {'end': 2262.441, 'text': 'Now we could get it by saying myPromise.then.', 'start': 2257.076, 'duration': 5.365}, {'end': 2271.41, 'text': 'And then inside then, console.log x.', 'start': 2262.461, 'duration': 8.949}, {'end': 2273.492, 'text': 'So it works very similar to an observable.', 'start': 2271.41, 'duration': 2.082}, {'end': 2274.433, 'text': "So let's save that.", 'start': 2273.572, 'duration': 0.861}, {'end': 2280.931, 'text': 'And in creating promise, in three seconds we should get hello from promise.', 'start': 2276.83, 'duration': 4.101}], 'summary': "Introduction to creating and using a simple promise with a three-second timeout to get 'hello' in javascript.", 'duration': 31.582, 'max_score': 2249.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02249349.jpg'}, {'end': 2356.305, 'src': 'embed', 'start': 2327.737, 'weight': 1, 'content': [{'end': 2332.339, 'text': 'Okay, three seconds later we get hello from Promise.', 'start': 2327.737, 'duration': 4.602}, {'end': 2336.903, 'text': "All right, so let's do something a little more useful.", 'start': 2334.721, 'duration': 2.182}, {'end': 2345.69, 'text': "What I want to do is I'm going to send an AJAX request to the GitHub API to get some information on a user.", 'start': 2337.163, 'duration': 8.527}, {'end': 2349.273, 'text': "So I'm going to first create a function called getUser.", 'start': 2346.231, 'duration': 3.042}, {'end': 2353.064, 'text': 'Alright, and this is actually from the Eduonics course.', 'start': 2350.342, 'duration': 2.722}, {'end': 2356.305, 'text': 'This is going to be a much lighter version of that.', 'start': 2354.044, 'duration': 2.261}], 'summary': 'Sending ajax request to github api for user info, from eduonics course.', 'duration': 28.568, 'max_score': 2327.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02327737.jpg'}, {'end': 2697.626, 'src': 'embed', 'start': 2641.419, 'weight': 4, 'content': [{'end': 2649.943, 'text': "Okay, we'll set that to rx.observable, and we're going to use from event.", 'start': 2641.419, 'duration': 8.524}, {'end': 2658.367, 'text': "Okay, and for the selector, we'll just use our jQuery here and say input.", 'start': 2649.963, 'duration': 8.404}, {'end': 2662.781, 'text': 'and then the event itself.', 'start': 2660.379, 'duration': 2.402}, {'end': 2665.463, 'text': "we're going to do key up alright.", 'start': 2662.781, 'duration': 2.682}, {'end': 2679.933, 'text': "so now it's subscribed to that, alright,", 'start': 2665.463, 'duration': 14.47}, {'end': 2697.626, 'text': "and in here we'll go like that and then we'll just copy this or we'll cut it rather and paste it right in there and then,", 'start': 2679.933, 'duration': 17.693}], 'summary': 'Setting rx.observable to use from event with jquery input for key up event.', 'duration': 56.207, 'max_score': 2641.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02641419.jpg'}], 'start': 2125.51, 'title': 'Observables and ajax requests', 'summary': 'Demonstrates creating observables from scratch and converting promises into observable sequences, also discusses making ajax requests to the github api, returning user information as a promise, and dynamically updating output based on user input.', 'chapters': [{'end': 2327.717, 'start': 2125.51, 'title': 'Creating observables from scratch and promises', 'summary': 'Demonstrates the creation of observables from scratch using rx.observable and conversion of a promise into an observable sequence using the from promise operator, illustrating the handling of errors and asynchronous operations.', 'duration': 202.207, 'highlights': ['The chapter demonstrates the creation of observables from scratch using rx.observable, providing a more friendly way of handling errors.', 'It illustrates the conversion of a promise into an observable sequence using the from promise operator, showcasing the handling of asynchronous operations.', 'The example of creating a simple promise with a set timeout to emit a value after three seconds is presented, highlighting the asynchronous nature of promises.', 'The process of subscribing to the observable sequence and retrieving the emitted value is demonstrated, showcasing the similarity to an observable.']}, {'end': 2755.226, 'start': 2327.737, 'title': 'Ajax request with github api', 'summary': 'Discusses making an ajax request to the github api, returning user information as a promise, and dynamically updating the output based on user input, using observable and event subscription.', 'duration': 427.489, 'highlights': ['The chapter discusses making an AJAX request to the GitHub API. Demonstrates the process of sending an AJAX request to the GitHub API using jQuery and JSONP as the data type.', "Returning user information as a promise. Defines a function 'getUser' to return user information as a promise using jQuery's AJAX method and .promise.", "Dynamically updating the output based on user input, using observable and event subscription. Utilizes observable and event subscription to dynamically fetch and display user data based on input, with a demonstration of using 'from event' and 'subscribe'."]}], 'duration': 629.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02125510.jpg', 'highlights': ['The chapter demonstrates the creation of observables from scratch using rx.observable, providing a more friendly way of handling errors.', 'The chapter discusses making an AJAX request to the GitHub API. Demonstrates the process of sending an AJAX request to the GitHub API using jQuery and JSONP as the data type.', "Returning user information as a promise. Defines a function 'getUser' to return user information as a promise using jQuery's AJAX method and .promise.", 'It illustrates the conversion of a promise into an observable sequence using the from promise operator, showcasing the handling of asynchronous operations.', "Dynamically updating the output based on user input, using observable and event subscription. Utilizes observable and event subscription to dynamically fetch and display user data based on input, with a demonstration of using 'from event' and 'subscribe'.", 'The example of creating a simple promise with a set timeout to emit a value after three seconds is presented, highlighting the asynchronous nature of promises.', 'The process of subscribing to the observable sequence and retrieving the emitted value is demonstrated, showcasing the similarity to an observable.']}, {'end': 3276.088, 'segs': [{'end': 2809.351, 'src': 'embed', 'start': 2781.328, 'weight': 0, 'content': [{'end': 2785.232, 'text': "We're going to look at interval, timer, and range.", 'start': 2781.328, 'duration': 3.904}, {'end': 2792.578, 'text': "All right, so we're going to take a look at interval, timer, and range.", 'start': 2789.335, 'duration': 3.243}, {'end': 2797.962, 'text': 'And these are really helpful for just testing and just learning in general.', 'start': 2792.938, 'duration': 5.024}, {'end': 2800.344, 'text': "So we'll start with interval.", 'start': 2798.622, 'duration': 1.722}, {'end': 2806.949, 'text': 'And what this does is it returns an observable sequence that produces a value after each period.', 'start': 2800.384, 'duration': 6.565}, {'end': 2809.351, 'text': 'So let me give you a quick example.', 'start': 2807.77, 'duration': 1.581}], 'summary': 'Examining interval, timer, and range for testing and learning. interval returns an observable sequence producing a value after each period.', 'duration': 28.023, 'max_score': 2781.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02781328.jpg'}, {'end': 3055.595, 'src': 'embed', 'start': 3023.363, 'weight': 5, 'content': [{'end': 3026.325, 'text': 'And then the last one I want to look at is range.', 'start': 3023.363, 'duration': 2.962}, {'end': 3029.668, 'text': "So we'll go ahead and copy this.", 'start': 3027.826, 'duration': 1.842}, {'end': 3034.511, 'text': "Okay, we'll change this to range.", 'start': 3029.688, 'duration': 4.823}, {'end': 3042.157, 'text': "And we don't need to take five on this because we actually set a start and stop part.", 'start': 3036.493, 'duration': 5.664}, {'end': 3046.94, 'text': "So we're going to say start at zero and go five values up.", 'start': 3042.237, 'duration': 4.703}, {'end': 3048.842, 'text': "All right, so let's save it.", 'start': 3047.621, 'duration': 1.221}, {'end': 3055.595, 'text': 'Okay, and you can see that it all gets emitted at once and it completes.', 'start': 3051.334, 'duration': 4.261}], 'summary': 'Using the range function, start at 0 and go 5 values up, emitting and completing.', 'duration': 32.232, 'max_score': 3023.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03023363.jpg'}, {'end': 3119.806, 'src': 'embed', 'start': 3095.39, 'weight': 1, 'content': [{'end': 3101.492, 'text': "All right, so now we're going to take a look at a really useful and common operator, and that's map.", 'start': 3095.39, 'duration': 6.102}, {'end': 3106.394, 'text': "We'll also look at pluck, which is kind of a simpler version of map.", 'start': 3101.712, 'duration': 4.682}, {'end': 3108.315, 'text': 'So what map does?', 'start': 3107.035, 'duration': 1.28}, {'end': 3119.806, 'text': "is it applies a function to each item that's emitted by the source observable and it returns an observable that emits the results of that function.", 'start': 3108.315, 'duration': 11.491}], 'summary': 'Map and pluck are operators for manipulating observables in rxjs.', 'duration': 24.416, 'max_score': 3095.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03095390.jpg'}, {'end': 3251.121, 'src': 'heatmap', 'start': 3198.734, 'weight': 1, 'content': [{'end': 3203.718, 'text': "so what we could do is up here we'll say dot map.", 'start': 3198.734, 'duration': 4.984}, {'end': 3205.179, 'text': "actually, let's put it after take.", 'start': 3203.718, 'duration': 1.461}, {'end': 3215.622, 'text': "okay, we'll say dot map, And in here we'll pass in V.", 'start': 3205.179, 'duration': 10.443}, {'end': 3217.884, 'text': "And we'll set that to a code block.", 'start': 3215.622, 'duration': 2.262}, {'end': 3221.667, 'text': "And actually, we'll keep it on this line so we don't need a code block.", 'start': 3218.565, 'duration': 3.102}, {'end': 3225.069, 'text': "We'll just say V multiplied by V.", 'start': 3222.227, 'duration': 2.842}, {'end': 3228.091, 'text': "Alright, so now let's save it.", 'start': 3225.069, 'duration': 3.022}, {'end': 3233.97, 'text': 'And we get 0, 1..', 'start': 3230.553, 'duration': 3.417}, {'end': 3235.171, 'text': '4, 9, 16.', 'start': 3233.97, 'duration': 1.201}, {'end': 3240.735, 'text': "so we're actually, I said double, but we're actually Multiplying it by itself.", 'start': 3235.171, 'duration': 5.564}, {'end': 3251.121, 'text': 'all right, if we wanted to double it, then we would times it by 2 And we get we should get 2, 4, 6, 8, so on.', 'start': 3240.735, 'duration': 10.386}], 'summary': 'Using dot map to multiply values by themselves, demonstrating 0, 1, 4, 9, 16 as output.', 'duration': 52.387, 'max_score': 3198.734, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03198734.jpg'}], 'start': 2755.226, 'title': 'Rxjs operators and map operator', 'summary': 'Provides an overview of rxjs operators interval, timer, and range, demonstrating their functionality and practical applications. it also explains the map operator, showcasing its ability to apply a function to each emitted item and manipulate data with a simple example.', 'chapters': [{'end': 3090.571, 'start': 2755.226, 'title': 'Rxjs operators overview', 'summary': 'Covers the rxjs operators interval, timer, and range, demonstrating their functionality and practical applications in development and testing. key points include using interval to produce a value after each period, using timer to emit a particular item after a specified time, and using range to emit a sequence of values within a specified range.', 'duration': 335.345, 'highlights': ['The chapter covers the RxJS operators interval, timer, and range, demonstrating their functionality and practical applications in development and testing, with specific examples of their usage.', 'The interval operator returns an observable sequence that produces a value after each specified period, demonstrated through a code example with a 1-second interval.', 'The timer operator emits a particular item after a specified time, similar to the functionality of the interval operator, as exemplified by specifying a 5-second delay and 2-second intervals between emissions.', 'The range operator emits a sequence of values within a specified range, with examples showcasing the ability to specify start and stop points for the emitted values.']}, {'end': 3276.088, 'start': 3095.39, 'title': 'Understanding the map operator in rxjs', 'summary': 'Introduces the map operator in rxjs, explaining how it applies a function to each item emitted by the source observable and returns an observable that emits the results, demonstrating its usage with a simple example and showcasing its ability to manipulate data.', 'duration': 180.698, 'highlights': ['The map operator applies a function to each item emitted by the source observable and returns an observable that emits the results of that function.', 'Demonstrated usage of the map operator to manipulate data by doubling or multiplying each emitted value.', 'Introduction of the pluck operator as a simpler version of map for extracting specific properties from emitted objects.', 'Explanation of how the map operator allows for manipulation of emitted data in various ways, showcasing its flexibility in data transformation.']}], 'duration': 520.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl02755226.jpg', 'highlights': ['The chapter covers the RxJS operators interval, timer, and range, demonstrating their functionality and practical applications in development and testing, with specific examples of their usage.', 'The map operator applies a function to each item emitted by the source observable and returns an observable that emits the results of that function.', 'The interval operator returns an observable sequence that produces a value after each specified period, demonstrated through a code example with a 1-second interval.', 'The timer operator emits a particular item after a specified time, similar to the functionality of the interval operator, as exemplified by specifying a 5-second delay and 2-second intervals between emissions.', 'Demonstrated usage of the map operator to manipulate data by doubling or multiplying each emitted value.', 'The range operator emits a sequence of values within a specified range, with examples showcasing the ability to specify start and stop points for the emitted values.', 'Introduction of the pluck operator as a simpler version of map for extracting specific properties from emitted objects.', 'Explanation of how the map operator allows for manipulation of emitted data in various ways, showcasing its flexibility in data transformation.']}, {'end': 3988.257, 'segs': [{'end': 3322.075, 'src': 'embed', 'start': 3277.509, 'weight': 0, 'content': [{'end': 3278.749, 'text': "And let's do from.", 'start': 3277.509, 'duration': 1.24}, {'end': 3281.451, 'text': "Okay, so we're going to do it from an array.", 'start': 3278.769, 'duration': 2.682}, {'end': 3284.753, 'text': "So I'm going to pass in just an array of names.", 'start': 3281.952, 'duration': 2.801}, {'end': 3290.838, 'text': 'John, Tom, and Sean.', 'start': 3289.457, 'duration': 1.381}, {'end': 3298.646, 'text': "Okay, so we have these names and let's stop it there and then we'll just subscribe to it.", 'start': 3292.585, 'duration': 6.061}, {'end': 3310.789, 'text': "Okay, and we'll just pass in v and we'll just do console.log v.", 'start': 3298.666, 'duration': 12.123}, {'end': 3322.075, 'text': "Okay, so obviously that's just going to give us this array of names as an observable sequence.", 'start': 3316.852, 'duration': 5.223}], 'summary': 'Using an array of names (john, tom, and sean), an observable sequence is created to console.log the names.', 'duration': 44.566, 'max_score': 3277.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03277509.jpg'}, {'end': 3390.332, 'src': 'embed', 'start': 3358.109, 'weight': 1, 'content': [{'end': 3362.091, 'text': "And in this one let's just add the text I am before each name.", 'start': 3358.109, 'duration': 3.982}, {'end': 3371.236, 'text': "So we'll say map v and let's set that to a string.", 'start': 3362.691, 'duration': 8.545}, {'end': 3374.918, 'text': "We'll say I am and then we'll concatenate on v.", 'start': 3371.296, 'duration': 3.622}, {'end': 3379.444, 'text': 'Okay, so save that.', 'start': 3378.203, 'duration': 1.241}, {'end': 3384.047, 'text': 'And now we get I am John, Tom, and Sean.', 'start': 3381.105, 'duration': 2.942}, {'end': 3386.81, 'text': 'All right, so we can have as many maps as we want.', 'start': 3384.067, 'duration': 2.743}, {'end': 3390.332, 'text': "All right, let's take a look at another example.", 'start': 3386.83, 'duration': 3.502}], 'summary': "Using map function to add 'i am' before names, resulting in 'i am john, tom, and sean.'", 'duration': 32.223, 'max_score': 3358.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03358109.jpg'}, {'end': 3593.434, 'src': 'embed', 'start': 3534.251, 'weight': 2, 'content': [{'end': 3538.093, 'text': "And that's just going to give us these users as a stream or as an observable.", 'start': 3534.251, 'duration': 3.842}, {'end': 3542.755, 'text': "Now, let's say that we want to pluck out just the name.", 'start': 3538.873, 'duration': 3.882}, {'end': 3544.815, 'text': 'Okay, we want to return just names.', 'start': 3542.775, 'duration': 2.04}, {'end': 3549.877, 'text': 'So what we could do is just add on to this.', 'start': 3544.935, 'duration': 4.942}, {'end': 3551.798, 'text': "We'll say .pluck.", 'start': 3550.358, 'duration': 1.44}, {'end': 3554.939, 'text': "And then we'll just pass in name.", 'start': 3553.559, 'duration': 1.38}, {'end': 3559.724, 'text': 'Okay, save that.', 'start': 3558.763, 'duration': 0.961}, {'end': 3563.007, 'text': "And now it's just going to give us the names.", 'start': 3561.085, 'duration': 1.922}, {'end': 3566.47, 'text': 'Okay, and we could get any value we want.', 'start': 3563.027, 'duration': 3.443}, {'end': 3568.531, 'text': 'If we want the ages, we can do that as well.', 'start': 3566.51, 'duration': 2.021}, {'end': 3574.897, 'text': 'All right, so that is map and pluck.', 'start': 3572.815, 'duration': 2.082}, {'end': 3582.105, 'text': "All right, so we're going to quickly look at merge and concat.", 'start': 3579.022, 'duration': 3.083}, {'end': 3591.372, 'text': 'Now, merge allows us to merge two or more observables, and concat allows us to concatenate them, which means one right after another.', 'start': 3582.165, 'duration': 9.207}, {'end': 3593.434, 'text': "All right, so let's start with merge.", 'start': 3591.392, 'duration': 2.042}], 'summary': 'Using map and pluck to extract user data, and explaining merge and concat for observables.', 'duration': 59.183, 'max_score': 3534.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03534251.jpg'}], 'start': 3277.509, 'title': 'Observable sequence transformation and using rxjs operators in javascript', 'summary': 'Explains transforming an array of names into an observable sequence with .map operator, demonstrating flexibility, and covers the usage of rxjs operators like map, pluck, merge, and concat to transform and merge observables with examples and explanations.', 'chapters': [{'end': 3390.332, 'start': 3277.509, 'title': 'Observable sequence transformation', 'summary': 'Explains transforming an array of names into an observable sequence, applying .map operator to make all names uppercase and add a text before each name, demonstrating the flexibility of adding multiple .map operators.', 'duration': 112.823, 'highlights': ['The chapter demonstrates transforming an array of names into an observable sequence and subscribing to it, presenting the initial data structure. It mentions the array contains names like John, Tom, and Sean.', 'It explains the usage of .map operator to transform the names into uppercase, showcasing the functionality of applying a single .map operator to the observable sequence.', "The chapter illustrates the flexibility of adding multiple .map operators to the observable sequence, showcasing the ability to add 'I am' before each name and demonstrating the potential of applying multiple transformations.", 'It emphasizes the flexibility of adding multiple .map operators to the observable sequence, highlighting the capability to perform various transformations on the data.']}, {'end': 3988.257, 'start': 3390.372, 'title': 'Using rxjs operators in javascript', 'summary': 'Covers the usage of rxjs operators such as map, pluck, merge, and concat to transform and merge observables, providing examples and explanations of their functionality and differences.', 'duration': 597.885, 'highlights': ['The chapter demonstrates the usage of map and pluck operators to transform and extract specific data from observables, offering examples of manipulating user and user data objects. Demonstration of using map and pluck operators, examples of transforming and extracting data from observables.', 'The chapter provides a detailed explanation of the merge operator, showcasing its functionality in merging multiple observables and handling concurrent emissions. Detailed explanation of merge operator, examples of merging multiple observables and handling concurrent emissions.', 'The chapter illustrates the usage of the concat operator to concatenate observables in a sequential manner, distinguishing it from the merge operator. Illustration of using the concat operator, distinguishing it from the merge operator.']}], 'duration': 710.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03277509.jpg', 'highlights': ['The chapter demonstrates transforming an array of names into an observable sequence and subscribing to it, presenting the initial data structure.', "The chapter illustrates the flexibility of adding multiple .map operators to the observable sequence, showcasing the ability to add 'I am' before each name and demonstrating the potential of applying multiple transformations.", 'The chapter demonstrates the usage of map and pluck operators to transform and extract specific data from observables, offering examples of manipulating user and user data objects.', 'The chapter provides a detailed explanation of the merge operator, showcasing its functionality in merging multiple observables and handling concurrent emissions.', 'The chapter illustrates the usage of the concat operator to concatenate observables in a sequential manner, distinguishing it from the merge operator.']}, {'end': 4384.499, 'segs': [{'end': 4045.883, 'src': 'embed', 'start': 4013.109, 'weight': 0, 'content': [{'end': 4019.932, 'text': "All right, now if you remember back when we worked with the GitHub example, we did a double subscribe, which we shouldn't do.", 'start': 4013.109, 'duration': 6.823}, {'end': 4022.053, 'text': "So let's take a look at..", 'start': 4020.592, 'duration': 1.461}, {'end': 4023.653, 'text': "what we shouldn't do.", 'start': 4022.913, 'duration': 0.74}, {'end': 4039.28, 'text': "So we'll say rx.observable.of, and let's just say hello, and then we're going to subscribe to that,", 'start': 4023.813, 'duration': 15.467}, {'end': 4045.883, 'text': "and in subscribe we'll say v and then we'll do another observable.", 'start': 4039.28, 'duration': 6.603}], 'summary': 'In the github example, a double subscribe was executed, which should be avoided.', 'duration': 32.774, 'max_score': 4013.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl04013109.jpg'}, {'end': 4210.793, 'src': 'embed', 'start': 4187.1, 'weight': 1, 'content': [{'end': 4197.246, 'text': 'which basically transforms the items that are emitted by an observable into observables and then flattens the emissions into a single observable.', 'start': 4187.1, 'duration': 10.146}, {'end': 4203.009, 'text': 'Now this used to be called flat map in RxJS 4, which is now switch map.', 'start': 4197.286, 'duration': 5.723}, {'end': 4206.811, 'text': "So what I'm going to do is I'm going to use it on the GitHub example that we did.", 'start': 4203.449, 'duration': 3.362}, {'end': 4209.212, 'text': "So I'm going to paste in that exact code.", 'start': 4206.831, 'duration': 2.381}, {'end': 4210.793, 'text': 'And let me just comment this out.', 'start': 4209.532, 'duration': 1.261}], 'summary': 'The flat map in rxjs 4 is now switch map and will be used in the github example.', 'duration': 23.693, 'max_score': 4187.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl04187100.jpg'}, {'end': 4383.538, 'src': 'embed', 'start': 4355.847, 'weight': 2, 'content': [{'end': 4358.569, 'text': 'This was all very practical, basic stuff we did.', 'start': 4355.847, 'duration': 2.722}, {'end': 4366.998, 'text': 'I will be making a video in the future where we can actually build a working application using Reactive Extensions.', 'start': 4358.589, 'duration': 8.409}, {'end': 4371.783, 'text': 'Alright, so thanks for hanging on this long and hopefully you enjoyed it.', 'start': 4367.458, 'duration': 4.325}, {'end': 4378.532, 'text': 'Please subscribe, leave a like, leave a comment if you had any issues or whatever you can do is fine.', 'start': 4372.184, 'duration': 6.348}, {'end': 4381.936, 'text': 'And I would suggest also checking out the Eduonics course.', 'start': 4378.952, 'duration': 2.984}, {'end': 4383.538, 'text': 'Alright, thanks for watching.', 'start': 4382.476, 'duration': 1.062}], 'summary': 'Practical tutorial on building application with reactive extensions. encourages engagement and promotes eduonics course.', 'duration': 27.691, 'max_score': 4355.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl04355847.jpg'}], 'start': 3988.277, 'title': 'Understanding merge, switch, and concat map', 'summary': 'Covers the differences between merge map, switch map, and concat map in rxjs, demonstrating how they prevent nested subscribes and offering practical examples to illustrate their correct usage.', 'chapters': [{'end': 4384.499, 'start': 3988.277, 'title': 'Understanding merge map, switch map, and concat map', 'summary': 'Covers the differences between merge map, switch map, and concat map in rxjs, demonstrating how they prevent nested subscribes and offering practical examples to illustrate their correct usage.', 'duration': 396.222, 'highlights': ['Merge Map Usage Demonstrates the incorrect double subscribe issue using observable.of and the correct usage of merge map to avoid nested subscribes and achieve the desired output.', 'Switch Map Transformation Illustrates the transformation of items emitted by an observable into observables using switch map, along with an example of using switch map in a practical scenario to improve code readability and efficiency.', 'Practical Application of Reactive Extensions Mentions the plan for a future video to build a working application using Reactive Extensions, providing a glimpse into more advanced and practical uses of the concepts covered.']}], 'duration': 396.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ei7FsoXKPl0/pics/ei7FsoXKPl03988277.jpg', 'highlights': ['Demonstrates the incorrect double subscribe issue using observable.of and the correct usage of merge map to avoid nested subscribes and achieve the desired output.', 'Illustrates the transformation of items emitted by an observable into observables using switch map, along with an example of using switch map in a practical scenario to improve code readability and efficiency.', 'Mentions the plan for a future video to build a working application using Reactive Extensions, providing a glimpse into more advanced and practical uses of the concepts covered.']}], 'highlights': ['Reactive programming is a paradigm for working with asynchronous data streams, providing practical examples.', 'RxJS is a library for working with asynchronous data streams and observables.', 'Reactive Extensions library offers a wide range of operators for manipulating data streams.', 'RxJS allows interaction with data streams as if they were regular arrays.', 'Setting up the environment involves installing dependencies and using Webpack and Babel for RxJS.', 'Demonstrates creating observables from arrays, sets, and maps, showcasing the flexibility of data types.', 'Importance of handling errors in RxJS, including practical implementation of error handling.', 'Demonstrates creating observables from scratch using rx.observable and making AJAX requests.', 'Usage of RxJS operators interval, timer, range, map, pluck, merge, and concat for practical applications.', 'Illustrates the usage of map and pluck operators to transform and extract specific data from observables.', 'Demonstrates the usage of merge and concat operators to manipulate and combine observables.', 'Illustrates the usage of switch map to transform items emitted by an observable into observables.']}