point of all this is composing asynchronous things is really what RxJS is good at it's the wheelhouse and that's kind of what we want to get into here RxJS just so all of you know can be used anywhere I worked at Netflix prior to Google at Netflix I did not use Angular I'm on the Angular team now at Google of course I use Angular at Netflix I used RxJS with code I use RxJS and React and I use RxJS with Ember I can tell you actually anywhere that can run JavaScript can run RxJS so again this is going to be an Angular app that I'm showing I'm on the Angular team I think I'd be doing my team of this service if I showed you a React app right but I'm going to be updating features in an Angular app and I'll try to give some context as far as React because I know there's some React developers here as well remember that I said before observables require subscription in Angular we've got a really nice feature called pipe async so you're going to see that a little bit what this does is it's part of the template and it says hey when this component mounts I want you to subscribe to that observable and every value it necks out I want you to place in the template right here just bind it out and then when the component unmounts or is destroyed it's going to unsubscribe for you automatically so you don't have to manage that subscription so it's a very nice feature for reactive programming as far as Angular goes and if you have something like this where there's like an if statement around it so based on some boolean it's going to show or hide or remove this part of the template it'll actually subscribe when it's shown and unsubscribe when it's hidden it'll do all of that for you so it's a nice feature in Angular if you ever want to see a talk on Angular or RCS basics because I didn't really get into it in depth here I did a talk already you can watch a much chubbier version of me give the talk I'm big in that video and it goes into more detail about what RCS does internally so here's the app that we're going to update it's just this randomly generated news data and just this dumb news feed app and all it does right now is you load it up it shows you the news if you wanted to see the news again you'd have to refresh it there's not even really a refresh button you just have to refresh the web page so one of the features we want to add is like an auto refresh so like on some interval have the data refresh itself for you so you don't have to do that and then the other one I want to add that's more exciting is drag down to reload so if any of you have ever used Twitter before and you're on and you have to drag down in order to reload you drag far enough then if you don't drag far enough and you let go then it goes back up to the top but if you drag far enough it goes and when the spinner goes away and animates back whenever you're done loading there's lots of interfaces like that that's what we're going to add to this so the basic structure of our existing app there's really only two pieces there's a news feed service which is just a class that has an observable line that gets data for us and we have a latest news component which is what's displaying the data so the latest news component looks like this I've got just to kind of focus on I don't need all the imports up there what I've got here is I've got this property news dollar sign that's an observable of the actual news and you'll see it's an observable of arrays of news objects that's coming in and then I'm also injecting the news feed service down here so Angular has dependency injection it's going to provide this news feed service as a as a private property and the news feed service is actually what's providing the news observable so our news observable is actually coming from the service at this point here's what the template looks like so you'll see up there kind of like in the fourth line down I've got that pipe async and I'm pipe asing out that news property so that's going to get that news array out and then I'm using ng4 to kind of loop over that array of news whenever it comes out and just bind it out the title and you know whatever the string is and the time stamp and those sorts of things so the news feed service right now looks like this it's I'm providing the HTTP client and all I've got in here is just a property with an observable on it now that alone is kind of weird to people who are used to promises promises you generally have a method that returns a promise the reason you have a method that returns a promise is because what you really wanted is a lazy promise and promises are eager they are not lazy so you have to wrap them in a method and return them in observables case they don't do anything until we subscribe so wrapping it in a function is just pointless it's not going to do anything for us in this case so this is an observable that when you subscribe to it will perform a get to get our news feed it will get the json out of it it's got a catch error that just kind of logs the error to the console and forgets it and I'm also sharing it so if I have multiple subscribers to this it shares the one HTTP request amongst multiple subscribers until that HTTP request is done so we don't spam the server a whole bunch but again this is just a basic feed that's all we needed to create this basic feed was that bit of code so far let's add the update interval feature because that's the easiest one but it is going to require us to refactor some things so the first thing that we're going to need to refactor is this is the news feed service so the news feed service looked like this before we just had a property on it that was our observable of news arrays right and I'm actually going to rename that to load news it's the same thing I just renamed it to load news and then I'm going to add another property that's a behavior subject called refresh and the point of this is every time I next into this this behavior subject behavior subject is both an observer and an observable so you can subscribe to it like an observable and when you next a value into it I'm going to map that to load news up above and that becomes my new news dollar sign so that news dollar sign is still providing the data that I need for my view but it's coming from every time I next into this behavior subject and one of the properties of behavior subject is the first time you subscribe to it it gives you whatever the previous value was in this case I'm initializing it with null because I don't really care what the value is but this will get us to where we were before already but just now there's a way to trigger it to reload news data and then we've got to go and we have to update our latest news component so I'm going to add a refresh timer so this timer function here comes from rxjs and what this says is have a timer that starts at 0 milliseconds and then goes once every 30 seconds so every 30,000 milliseconds and what I want to do is have that trigger the reload of the news somehow so how do we do that well we know that we want the news to be the property like the news feed news to be that news property we're going to have to add something that takes that refresh timer and next into our refresh behavior subject so I'm going to add an ng on init if you are a react user this is roughly the equivalent of component did mount and inside of there I'm going to subscribe to my refresh timer and pass to it that behavior subject because it's got the same shape it's an observer so it's got a next method on it and every time the refresh timer emits it's going to call next on that refresh which loops back into our news feed service and triggers news to emit which we've got on here as a property to our view the other thing we need to do is we need to actually track the subscription so I'm adding since I said this dot subscription equals here I need to add the subscription otherwise type script will be unhappy and then finally I need to add this ng on destroy so this is the this is the react equivalent of component will unmount right so this is saying so whenever this goes to unmount or destroy I want to call unsubscribe in the subscription so that will stop that interval from ticking over and over and over again you don't want to leave that running in the background it's a memory leak so again just to kind of go over where the subscription part is I have a whole slide specifically for this because this is a very common pattern when you need to subscribe to something if this were react it would look basically the same only it would be component did mount and component will unmount instead of on init and on destroy pretty much identical so that's it just to recap what we did so far and then I'm going to show it working we used a behavior subject in our news feed service so we kind of refactored our news feed service to reactively trigger that reload and then we also we also used a timer in order like on our component and have that you have that timer next into the refresh that behavior subject that we put on our service and then we manage our subscription and on init and on destroy and here's it working now I upgraded it to three seconds so you can see it otherwise you'd have to wait for half a minute that would be really a boring talk in my part I could dance or something so it's updating now that's what we wanted so just a few things you notice we didn't touch the template at all right the template we just we renamed some things that's probably why we had to do that but mostly we just kind of did the small refactor and we kind of worked backwards and that's a little hard to see in this case because it was it was a small addition but we we kind of worked backwards through what we needed starting at the time let's work on our pull down to reload feature and this one's much more exciting because it's much more complicated so here's why it's complicated you have to start when user touch starts and you have to accommodate for the fact that user could touch like twice right you also have to track their downward pull with some sort of icon if they release before they get down to where the reload starts you need to animate it back on its own so there's an animation you have to deal with if you get it down to where the reload starts you need to trigger a reload so then you have to deal with whenever the HTTP starts and ends and then you also have to animate it back whenever it's done so there's there's a lot going on here there's three different user provided events touch start touch move and touch end you have to worry about when the Ajax request starts and when it completes and you also have to worry about animations so I'm going to add a touch drag to load component the whole purpose of this component is it's going to control that icon that you're going to see on the screen and it's also going to handle dealing with all the user interactions as well as dispatching events to whatever parent component owns it so the parent component knows oh I should refresh data or whatever I'm going to do when it gets dragged it also needs to have some sort of mechanism to start spinning if while during the loads while the loads going on so we need to refactor our latest news component and that means we have to include our touch to drag touch drag to load component in the template and we also need to wire up the event to next into that refresh on our on our newsfeed service here's the basic class back in class for our touch drag to load component what I've done here is I have this refresh event so in Angular when you define an event you say it has this output you give it an event emitter and that means that in the template someone can bind to refresh and pass a method to it that can be called the template looks like this this is just HTML right now I'm not doing anything dynamic with Angular this is so I've got an outer div here that positions it left to right 50% and then I've got an inner div that's going to be responsible for translating the icon down up and down it's got an offset of negative 35 pixels because I've got a 70 pixel diameter circle that I'm going to use I'm going to use two circles one kind of offset inside of the other one and then my SVG tag here you'll notice I've got transform transform rotate zero degrees that seems pointless I have it here because that's what I use to update the rotation when it's loading and with my latest news component dot HTML now what I need to do is I just need to add my touch drag to refresh component and you see I'm wiring up that refresh event that output that I showed you earlier to just next on that refresh behavior subject now it's actually all wired up I don't need to do anything else so as soon as a refresh event comes out of my new component it's going to call next on my refresh behavior subject we know triggers the news reload and we'll update our view but right now we haven't wired any of that up we just put it on the screen and we can see it's up there that's my icon it's just hanging out up there at the top not doing anything else but we know it's working so let's go back and change our touch drag to load components template a bit to make it dynamic so I'm going to have transform the style of that second div there to move it up and down that's going to I'm going to have an observable called transform positions that I'm going to pipe out with the pipe async there I'm going to bind to it and I'm also going to bind to transform rotates on the second one to deal with the rotation part of it and when we go and we actually look at the component now I put in the minimal thing I need to do just to get it to work and that is basically I just took the text right out of that style tag and I'm saying I have an observable of that text right in both cases and this is the minimal thing I need to do to just have it render but I really like to deal with numbers and not strings so I'm going to make my transform positions actually derive from another one called positions that's just an observable of zero and then I map it and I'm just using string templates here to get the same sort of string out of that so now if I change zero to something else it'll change the rotation or the position rather I do the same thing for rotation so if I change you know that zero on rotates something else it's going to change the rotation of the icon it still looks exactly the same I didn't do anything but again I'm working my way backwards I'm just providing so now I have observables controlling these things at least but we need to make these observables come from something more interesting so we've got a slight tweak to this to move the marker off screen I told you the diameter of the circle is 70 so we're going to add negatives that we're going to subtract 70 from the position so it moves off the screen because we don't want to live up there the whole time we want it to just come down when you pull and now let's make touch drags actually affect the position so remember before I showed you drag and drop with the mouse down mouse we're going to use this exact same pattern only with touch and it looks like this we're saying from event which is a method from Rx so anytime there's a document touch start make that we have this observable of touch starts same for touch moves and touch end and now I'm going to say for every touch start I want to map into touch movements and take those until the touch ends so now I basically have this observable of touch movements touch movement event objects really and I can just include that in my component class like so and what I want to do is I want to make my positions actually derive from touch drag so what I can do is I can just do that I can just say okay there we're going to map y minus 70 there's a problem with this because that is an observable of touch events right and I can't I can't subtract a touch event or 70 from a touch event that doesn't make any sense that's not a number right so I need to get numbers out of that and I can do that with a simple mapping up here where I'm saying okay we'll just take the current touch y position and subtract the start y position from it so I get like an offset so now I have this observable of numbers for the offset of how far I've dragged my finger and just to kind of just focus in on that a little bit I got really some of the corrupt so you can see it the other thing I'm adding in here is I'm saying I want to start the position with zero down there at the bottom I've added to start with and that's just to make sure it starts off the screen I don't want it to start in some other random spot so now when I drag it follows my drag at the very least that gray dot there is my drag right so that's not too bad that it's that at least is doing that but it's not the full feature right so let's make it animate home when we let go that's kind of the next incremental step to making this work so I have a whole talk on RxJS animations I won't get into that here the basic idea is that I get an I get an observable of animation frames and I do a little math with the offset of when it started and the current date time to try to figure out like how far it's gone along and I do some math to be able to tween between two numbers over a certain duration so tweening meaning like if I start at zero and go to over two seconds then like at one second I get the value five and you know at one and a half seconds I'll get the value seven point five and so on so it kind of does that for I get an observable of numbers the short version is I have this animation service that has a tween method on it to which I give a start number and an end number in a duration and it gives me an observable of those of numbers between the start and the end over that duration on animation frame so now what I want to do I'm going to go back to my touch drags and my positions here as I want to focus on touch drags because that's where I'm going to update this because really at the end when I get done with the touch moves that's when I want to play that animation so when I let go with my finger right after touch end there that's where I want that to happen so what I can do is first of all I'm going to add a property on here called move home so this is a move home animation that if I subscribe to it and I'm just saying tween between the current position which I've added a private property for and zero in 0.2 seconds and then what I'm going to do is I'm going to concatenate my touch movements with move home and what concatenate means is play the first observable till it's done and then play the next observable so what I'm saying is do the touch movements until touch ends and then run my animation so we've got a little problem though we need to update whatever the current position is a bit of state we need to track so I've added this tap and what tap does is just say tap into the observable right here get the current value and do something with it so the side effect I'm doing is I'm just updating that underscore POS and there's another little problem here in that whenever that move home observable is created POS is zero so it's always going to animate between zero and zero and that doesn't make any sense so we need to have it delayed or deferred a bit and there's handy enough there's a method in RSGS called defer which basically says here's an observable that when you subscribe to it executes this function and then subscribes to the observable it returns so now we should be able to see it move home as soon as I let go which is pretty fun by itself honestly when you're playing with it but we want it to load so let's make it refresh the feed if we get far enough we're going to go back to our touch drags here because we're going to need to do something with this because it depends on how far you drag right so what I'm going to do is I'm going to add another tap down here at the bottom where I'm saying okay if y happens to be greater than half of the inner height so if I drag it more than half way then I want you to call emit on refresh so refresh if you remember is the name of our event on this component and when you call emit it emits a value out to the template where we found out refresh to update the to call next on that subject which triggers the news feed to reload so this should be all that's really required with the exception of we don't want it doing that over and over and over again because tap is that's going to fire for every single time y is greater than the inner window height so I'm just going to add a take while right after that it says but only take this while y is less than or equal to half the window height so as soon as you go over that once it's going to trigger that emit and then the whole observable is going to stop so now we can pull it down a little bit and it animates back we pull it down far enough and voila we've got it actually reloads the data but then it gets stuck there which is not what we want after it reloads the data we want it to animate back so let's have it go home after the load after the load's finished and some of that works already done we already have a move home animation observable right so what we're going to do here is now I'm going to focus on position I'm not going to deal with touch drags anymore I'm going to go back down here to positions and I need to have the positions actually update from more than just touch drags because no one's touching at this point whenever the load finishes you're done touching the screen it needs to something else needs to trigger that so I'm going to have this move home after load observable and what I'm going to do is say hey whenever I get news back from load news remember I was sharing that before that's the actual HTTP request I'm going to go back I'm going to map that into my move home animation and I'm going to wait for that animation to complete before I allow it to happen again and then I need to take move home after load and touch drags and combine them in some way to update positions and what I'm going to do there is I'm going to say I'm going to concatenate these two together so I'm saying take touch drags and whenever touch drags is done then start load observable that's going to wait until load news is done and then it's going to play the animation and that also means I need to have positions like position updates feed into positions so now we've got it and it works but it only works one time it's kind of a bummer it was really exciting when it worked the first time but we wanted to work more than once and it's actually a really easy fix so what happened here is concat as I stated before plays an observable until it ends then it plays the next observable until it ends and then it ends right so everything we just wrote happened one time and then it's done so we need to have it happen more than once and so then we just add repeat on there and that is a feature of rxjs and this is because observables are lazy you can simply subscribe to them again when they're done that's all repeat does internally and as soon as we do that it works so as soon as we can do it more than once and it's fine but it's boring because it doesn't spin right what would be driving through the streets of india without honking we need some spinning to make this more exciting to make this sucker spin alright so we're going to go back to our rotate so we've kind of forgotten about this for now because we're dealing with the position but we'll go back to rotate we want to update rotates we want to not be an observable of zero we want it to be something more exciting so we can do animations and we can tween between zero and 360 degrees over the course of half a second and that's going to make it go around once but we want it to go around over and over again so guess what we're going to use our friend repeat and now it's going to spin infinitely so we can check it out just because it's fun spinning it always spins probably better that way honestly if you leave it like that we only want it to spin while it's loading so here's what we're going to do to make it spin only while it's loading I'm actually going to say whenever someone calls next on refresh I'm also going to have it map into my animation of spinning so as soon as someone calls next on refresh it's going to start spinning and then the other thing is I've got to have it stop and then it comes in so I just say take until newsfeed load news so load news fires when the data resolves when it comes back from the server and then the other thing I'm going to add here is end with zero and end with zero is just because if it's spinning around like this and the data comes back while it's down kind of crooked then it's going to be stuck there until the next time it starts spinning again so I just wanted to jump back to zero so it's in a nice clean spot and then standing up here talking and my mouth's getting dry and people are looking bored or looking like what is this guy talking about it's crazy but yeah so that's the entire feature and the reason I went over this is because again we're coordinating user events data load animations I really wish I had time to get into the animation side of it because it's really exciting you get to use math and do nerdy geometry things which is fun but the most important thing is that entire behavior even though I stood up here and talked about it for a while to explain all of it there's only about 50 lines of code like the whole thing end to end and I roughly guarantee you that if you were trying to do that imperatively it would be a lot more code than that and it would be buggy and they wouldn't get the deterministic memory management that you get out of RxJS with the guaranteed tear downs and everything so that's one of the reasons I like this particular example RxJS is best used for coordinating events if you're just clicking a button and loading data please don't use RxJS I write the library, I love people that use it don't use RxJS for everything you don't need RxJS for your Hello World app that's crazy whenever you're working on it try to work backwards so provide the observable that makes it work first and then figure out where you need to get those pieces from and combine those observables to make that observable and so on and so forth and then work your way back if you ever need to create an observable dynamically this is a weird thing that comes up and Angular developers ask me about this sometimes it's like I had this situation where I had this observable and I thought I was creating it properly but I need to create it on the fly there's this cool method called defer that I think is underused in Rx and there's also this pattern with repeat so it's harder to see in here but basically if you compose a whole observable that you think you want this to end I really like it and then there's some sort of terminal thing like it loads data and it's done and you want it to come back out you've got to take while it stops or something you can just repeat and guess what the whole process starts over again it's fine so take while it repeats an interesting pattern that was visible in here and then the other thing you want to do is try to factor out your observables into other things so for example I had that I had one property that was transform rotate and another one that was called rotates and another one for move home don't just make one big observable that is just like a giant thing think of Rx.js as a domain specific language for dealing with events if you have one giant observable chain it's like the same thing as writing a giant function and we all know that's bad at least I hope most of us know that's bad so you can break it apart into smaller pieces into smaller observables and it also makes it easier to test so that's it I'm open for questions the repository for this is available here at the bottom and you're welcome to go check it out you can find me on twitter that's a great talk just a couple of announcements before we go through questions there is a closing keynote happening in meta-refreshed talk by Rahul so some of the people were participated in known academy coding challenge so the winners are here Karthik, MAM and Himadri Ghosh congratulations and your prizes are waiting outside please go and collect let's get back to the questions please it was very interesting talk so I have a situation where say example I have a observable and on top of when the observable ends I have to perform few more observable calls so in that case do I have to make it as .all or kind of like I can wrap it inside saying exhaust map so multiple the question I think if I understand it properly is you have an observable and when it ends you need to do another observable and when that ends you need to do another one and so on so that's concat and the difference it gets a little funky in there but what you probably want is concat especially if you want each value out of there independently the other way that you can do that is you could do something like you can have an observable switch map into an observable that switch maps into another one both of those are fine patterns just know that concat is going to be a little less memory pressure because it's not like you're not closing over one you're not going deep you're kind of going more linearly so concat would be the right approach yeah that's right any more questions no you blew my mind with all this crazy rx talk so I have a somewhat basic question so given that angular has this deep integration with rx.js then why do we need zones or change tracking code what was the last part of that zones or change tracking in angular.js that's a good question so zones was a decision that was made prior to the inclusion of rx.js so zones to describe it for everybody is what they use for change detection and what they do is they kind of hook into everything so anything that could cause some sort of asynchronous event triggers zones and they'll say ok that's going to fire this event and here in the zone and that event is going to go through and roll through a change detection array and try to figure out what to change and update the view if you're using observables for this question if you're using observables since observables tell you when you have an update you could just use that to update the view so you can use change detection on push as a strategy and it attempts more to do that I think there was a period where it still kind of used zones but there are ways to do that and then more future thinking there's going to be work after ivy and other state management ideas which are bound to be more reactive because so much of Angular is already reactive I hope that answers your question Hi, thanks for your talk so this may be a very trivial question but how would you unsubscribe what would be the best way to unsubscribe observables when we have multiple of them so if you have multiple subscriptions what's the best way to manage them all there's two different ways to do this one is you can create a master subscription and then add, there's an actual method called add like add all of your subscriptions to it and then that's the only one you have to unsubscribe from later or you can do something where you merge all your observables together and do like a take until or the other one is you can have each one have a take until on it and use like a subject and next into it and you're on destroy they're all valid and my personal go to is just to have one master subscription and just kind of add everything to it it's only because I know the implementation under the hood but it depends so the take until thing is very powerful because you can then say well what if I want more than one thing to cause the unsubscription right it's not just when you're component on mounts it's when you click a button or when you do this other thing a web socket event whatever you want it triggers these observables to unsubscribe so or to complete rather which is the same thing as unsubscription so it's really up to your use case in a general sense I would say my guidance would be if your general use case is all I'm doing is subscribing when I initialize and unsubscribe when I destroy I would probably just go with regular subscription if you're if you see a point down the road where you're like oh you know I might I might need to or if you come to a point where you're like I have more than one way that I need to unsubscribe from this then take until is a better go to if you're using a state management library like Vuex or Redux and I also want to use RxJS so what is the architecture pattern that we should follow to co-exist both so the state management architecture you could follow with RxJS really so there's a lot of different ways to do that what you want to do whenever you're dealing with that though is kind of separate the actual state of what your app is doing from whatever side effects your app has so side effects being things like sending requests to the server or updating the server or getting things from the server or pretty much anything that's like an animation is another side effect so you want to kind of separate those two things architecturally with your Rx and when you end up doing that what you really end up with is something like Redux so you use scan in Rx and that's a way to track state internally it's kind of like a reducer only it emits the reduced value every single time which is Redux and then the side effects things ends up being basically a Redux observable or NGRX effects when you end up like finishing it off so NGRX NGRX effects are identical in nature to Redux and Redux observable there's really not that much of a difference other than some sugar for angular and ultimately if you were going to roll it yourself with Rx just to avoid the extra library overhead or whatever you wanted you would end up in a very similar pattern most likely I wouldn't move to that pattern until you absolutely needed it because it can cause some complexity but at the end of the day that's what you'd probably end up with Hello Hello So what is being used behind the observables I mean service or cargo what is the funda behind the observables why it is if we don't unsubscribe the observable then it is memory leakage issue so what is being used behind the observables Okay so what's actually being used behind observable is just a function believe it or not so when you define an observable when I run workshops I usually go over this like one of the first things when you define an observable you say new observable and you pass to it this function that gives you an observer back that's got a next error and complete method on it and basically when you call subscribe with your callbacks what it does is it takes your callbacks scrubs them into that observer and provides some safety guarantees to make sure you can't call next after you call complete for example and then passes it into the body of that function that you've passed to your observable constructor and it synchronously does that and that's all the observable is and so it's this function that says hey I'm going to do something to create something that produces data and then I'm going to call next on this observer and that something could be looping over an array or it could be setting up a web socket or whatever you want and then the end of that function what you return is another function that has the tear down of what you need to tear down so if you let's say you create an interval inside of there then you would clear the interval in the tear down that's returned so really that's all that's inside of rx it's just the apparatus of rx is there to provide safety so you can't do things like call next after complete and to make sure that when you complete or error that tear down function is called so that's where you get into what I was calling deterministic memory management you're guaranteed that if you unsubscribe you error or you complete an observable that memory is cleaned up you're calling whatever you're closing web sockets or you're clearing intervals or whatever it is that you're doing xhrs whatever it is that you're doing inside of that so the guts of it is actually a lot simpler than people like people look at it and think oh there must be some magical unicorn thing that's inside of here I'm not that smart I didn't I trust me when I tell you I did not implement anything that was super hard inside of observable it's it's it's actually pretty simple it's just providing the guarantees to make things right then answer your question I have a question I have a couple of questions the first one is for a complex application there can be n numbers of features so suppose there are so many observables so how good it is from maintenance like suppose some bug came in a particular suppose a feature is subscribed at too many n numbers of subscribers how can we debug something if something goes wrong so the question is how do you debug if there's a memory leak you created a subscription you didn't unsubscribe debugging that sort of thing you're in the same boat as you would be if you add an event listener and forgot to remove it rx tries to keep things very basic the one bonus you have rx is a third party library you could hook subscription or something like that and do a count and see how many you called but rx doesn't provide anything out of the box to do anything like that you'd end up having to use Chrome debug tools just like you would if you added an event listener to a button and you forgot to remove it it's the same sort of thing so memory leaks are tricky with any library you're gonna end up needing to use Chrome dev tools and try to assess those things so is there any standard to follow to make like we're walking with too many observables so that our code will be maintainable so standards-wise I don't think there's any linters out there that cover this but I know there are some rx.js specific linters that you could go look at but standards-wise you want to make sure that when you create a subscription you're unsubscribing from it there's some exceptions to this where you don't have to be super pedantic like if you have an observable that was made from an array you go over an array synchronously so by the time the subscription returns the subscribe call returns the subscription object it's already done like calling unsubscribing it is a no off but it doesn't hurt anything either so generally this is a general rule if you create a subscription unsubscribed from it just be diligent just the same thing you would do with add event listener and remove event listener make sure that you're removing your event listeners so that's the sort of thing or if you're an Angular use pipe async a third-party library that accepts an observable and subscribes to it for you use that mechanism and then you don't have to worry about it so does this pipe and the concat do the garbage collection after the after the observable ends like the subscription ends or something like that I'm sorry I didn't catch that last one so do we need to unsubscribe if we are using pipe or combining multiple observers? if you're using pipe then it will unsubscribe for you, guaranteed so that's the go-to method so the reason you didn't see me calling too many unsubscribes in this is most of my observables were bound out with async pipe the only one that wasn't was that interval that was nexting into the subject that was causing the refrag thank you you're a disembodied voice, where is it? here oh there, sorry so do we have something like computed observables that we have in knockout j's? so computed observables as you have in did you say mobx or? basically I have a first name and a last name both are observable and I want to show a full name so what you can do is there is a method called combine latest and you can have an observable of first name and an observable of last name and you can do a combine latest on that and then map it right afterwards because that will give you an array of those and then combine latest says every time either one of these emits a value emit both of the most recent values and then from there you can map it and get what you want out of it then you have your observable of full names so and can we make observables on arrays? like in array if anything is changing can we listen to that? can I listen to which observable? I'm sorry? if there is an array in that if any value changes can we listen to that? can that also be achieved? so if you want to see if any value changes in like an object for example so you could you could do like they have an object out of there but it's the specs committee have kind of considered an anti-pattern and they're trying to remove away from that really what you want to do what's a better pattern is to just know what's updating your your event so the thing about programming is this and this is true with RX or not it's all event based really the end of the day and event fires you go through and synchronously run a bunch of code and then probably set up some other event fire and then eventually that other event fires you synchronously go through a bunch of code so you're in full control of this when you're writing the code which means that you should you should be able to find a way to know when a value is changed in case you want to hook it there and either send it through a subject or wrap the whole thing in an observable or something like that to get an observable of those value value changes otherwise you could use the object that observe I think I forget the name of it right now but object observe but again it's deprecated they thought about adding it to JavaScript and they're pulling back from that now because it doesn't seem necessary for most uses thank you Ben thanks everybody so I think many of developers can you hear me many of developers want to have cross-platform same code ways right like people try to use react and react native and stuff so they can make one code to rule them all so but recently I have read in news which which came from Airbnb they're setting like they're saying like they're sunsetting react native or something like that saying like it is very difficult to maintain one code base for multiple platforms but we have our speaker who is using multiple platforms with one code base so I will come Mr. to speak about it thought you guys had seen the last of me didn't you so I'm back and this time I'm here to talk about how to be lazy as developers or in other ways one of the hardest things to do as a developer is of course write any application write any UI or things like that and then when we end up building yet another UI so we build for web then we build for android then we build for iOS then we have to build a desktop app so on and so forth and each one ends up being this huge another platform another code base that we have to maintain that we end up having to debug having to live with for the rest of our lives this talk is how do we avoid it and this is a unicorn that we've been chasing for quite some time so let's get into it if we've seen programming languages change and evolve more time for quite some time so you have the age old cc++ java python to the world of javascript which is now kind of where we are the kind of things we were able to do with these programming languages the kind of UIs that we were able to build the kind of experiences that we were able to build with each one of these has also changed over time but what has really not changed is the ask and in fact this has increased over time if you have an application like whatsapp you of course have to have it on android on ios then because people love convenience you end up having every single browser and then you want it for the desktop as well and if you develop this using our old practices saying native is best you end up having one development team focusing on android one development team focusing on ios another set of web app web developers building out for each of the browsers ideally once nowadays thankfully by IE and then you have your desktop developers as well this doesn't scale it's hard it's annoying keeping features in sync across platforms is hard it's annoying this is something that has been a myth just like unicorns just like the part of gold at the end of the rainbow just like a lot of the rings and we actually have one code base to rule them on and this so far has really been impossible annoying or at least really really painful without using a ton of hacks but what if I told you it can be done we're actually at a point where we're finally able to do something like this where we can share most of our code base and just focus on building out different UIs different experiences for different platforms and share the base business logic the logic that says where do I fetch my data how do I massage it how do I display how do I format it all of that can actually be shared this search this name has been there for quite some time like I remember searching for this back from 2009 which is kind of where we started with Angular back as well GWT was the first thing can I use Java into when Google Web Toolkit you write everything in Java it combines down to HTMLJS never have to change your context disaster painful but it was the first node made it possible for JavaScript developers to write JavaScript for the front end JavaScript for the back end at least you could avoid the context switches of going from back end to front end and vice versa and then more recently you have things like React and React native you have Ionic which allows you to write hybrid web apps that allow you to write once and kind of deploy on different platforms problem is in most of these what you want to build is a beautiful castle and either the path there is tortuous takes you through multiple twists and turns you have a lot of different code bases or you get up with one app that looks really shitty behaves really shitty and this is something we've been struggling with for the last quite a few years just the number of platforms number of apps number of devices have changed the experience for developers really hasn't changed and finally sometime last year with native script and Angular I could kind of see the light at the end of the tunnel of course given my track record that light has usually been a train that has come and hit me later but hasn't stopped me from chasing after that every time so what is native script right native script is a platform open source kind of like a react native for the guys who have been using react native we'll talk about that in just a bit but really allows you to write your application once and have it compile build out a native ios a native android app for free right so what you end up doing and it's not really specific to angular you could use view you could use pure javascript whichever you want it's not really tied down to make angular but allows you to run native android native ios and it's native it's not a hybrid web app that's running in a web view or things like that you're actually going to give native widgets native buttons native labels so on and so forth and it's extensible tons of plugins which always make our life easier because hey we always want that barcode scanner that google maps integration so on and so forth all of those are plugins that exist now you might ask if you have developed using react native you might ask what's the difference fundamentally react native and native script are trying to solve the same problem they're both trying to allow you to develop once deploy across multiple platforms but the approach in which they do it is quite different so native script actually allows you to write native access native apis of android ios write in your code versus a bridge that react native uses for you doesn't really change much unless you have to do a lot of direct integration otherwise it's pretty much the same for the most part so this is something which could be a native script application code left is pure angular components fact almost nothing that is specific to native script or android or ios what changes is the template instead of having your html you end up having an xml that kind of translates to the right UI given that it is android given that it is ios but even this is native script and notice here that you can actually reach out and write raw android raw ios code to some extent you can actually reach out into android get the package manager do stuff which gives you that flexibility that you might not have in any other kind of solution so you get the best of both worlds you can write your proper application for the most part and when you really really have to get hacky you can hack away at it as well so what's the aim so native script out of the box gives you solution for writing android ios we don't want to stop that we want to be able to write one code base for android ios as well as well and hopefully we can get some final electronic desktop so on and so forth and when I started this last year there wasn't a ton of support for this out of the box so native script gave me android ios apps I didn't have a great solution for web so what I ended up doing was writing my own hacks around it my own build scripts and so on and so forth so the aim was simple my logic my component code which was responsible for fetching data merging, formatting it presentation layer fundamentally needed to be shared across my application and I needed to be able to write different views for different platforms got that out of the box for android ios I needed to plug in my web application into that so I wrote a lot of build scripts basically to be able to split it apart and then at build time pick up the right files pick up the right templates put it together kind of build out frankenstein of sorts it worked we were able to launch with this it was ugly even I didn't know what it did half the time but it worked but upgrading was a mess native script was going through multiple changes multiple updates angular was going through multiple updates multiple changes it was just not very easy to maintain every upgrade was a week long nightmare for us we had a great template and then I signed up for my talk saying look I've got this shit figured out let me explain it to the world and then come August the angular guys release a native script semantic which kind of said you can do this out of the box for you thankfully the approach was the same so what does it do kind of you're basically looking at your project your base things your components your navigation your services directors pipes all of these are shared across your entire code base across your web across your android across your iOS apps and the only thing that changes between the two are either your styling your templates or your modules right figuring out whether to use the native script sgtp communication or the native android sgtp communication the different modules different forms so on and so forth are the different views itself everything else is shared and just at runtime is where the magic happens you have these different template files for different experiences you have these different styles when you run it is what pulls in the right things together so when you're running your angular web application it picks up the right angular web templates the web styles the web modules or just together serves your web application and just flipping the command to run the native script which is either iOS android bundling it so on and so forth picks up the android templates or the iOS templates or the common mobile templates the mobile styles the mobile models and that's the only change you need to do the command that you use to run it is really the change the structure takes care of everything else and setting this up is now trivial none of my gulp magic none of my build scripts none of that craziness comes out of the box use the angular CLI to just say create me a new application with this native script schematic and you're off and running write the right templates write the right code and you're off and running and you have three apps for the price of one naming pattern and all I'll leave it up to that but basically what ends up happening is you have a TNS a native script template a native script style and your web HTML and your web style and the component code is shared you could have a separate one for that as well but I won't get into that everything else magic supports everything you would need so standard routing standard HTTP communications local storage all of that is available out of the box you can even lazy load make your application performant so all the features of your angular application in your Android application and iOS application out of the box so that's kind of what we did it's great for a certain set of things but few things to watch out for if application size is a problem this script adds a huge library as part of the application it's entire runtime engine so the application size is large and the startup performance which actually is now a lot better you can actually launch your application within a few seconds used to be pretty bad when we initially started but still something to watch out for but otherwise you get a native app for the price of a web app which is amazing so that's pretty much my talk feel free to ask any questions or reach out to me later as well if you want to figure out how this shit works hey thanks sham so we have one last talk it's about our Hasjika app how well he has implemented how buggy it is we'll listen it by our inner words hi guys so my talk is basically just a 5 minute addendum to sham stock how many of you would prefer to use view over angular if you could okay there are a few people and if you want to use all the features that sham just talked about all the beautiful parts about native script but prefer to use view as a framework instead of angular then there is native script please just a few things about myself I've been working with view.js a lot recently I've written a lot of view libraries so and these days like mobile apps I've been trying out native script view to build some though originally I have been a very long time 6-7 years I've been working on native mobile apps so what's native script view it takes native script use you just as a framework and creates a logo like that so native script I think you're seeing something I'll just add a few things that I felt really nice was that you can create certain layouts which are actually pretty hard creating in even native iOS or android grid layouts app layouts kind of things and this part that I think sham already talked about is that you can write code which looks like objective C or you can write code which looks like Java so and you can just directly use them JavaScript because it uses it in terms of the infection and you can use native script as with plain JavaScript and XML files or you can use with angular like you have seen now and finally you can use it with View.js the latest version of native script view allows you to use ViewCLI 2.0 components so you can't actually use with ViewCLI 3 right now but your view single file components those we have used you can put PugJ as templates if you want instead of HTML you can use TypeScript or CoffeeScript in the script part instead of JS if you want to I mean webpack is going to transpile all of that for you so I mean just go on and use whatever language you want in your view single file components so the simple project I'll be showing this is View.js but it also use TypeScript with that and your View.x for state management and View.outer for roots all of that completely works out of the box when you're using native script view and best part here is like you're creating a cross-platform thing like it works in iOS and Android one of the things I prefer is like if it's a simple project it's not too complicated I want to write zero Swift or Java files and zero bridges so native script allows you to do pretty complicated apps without understanding a lot about how the native part works I mean if it's a pretty complex app probably you need to write some bridges but if you don't need to that would be a great thing and supports of course auto reload so see takes you to the Apple Maps app right now and just change the URL from apps.uri to maps.google.com instead click on the application now it goes to maps.google.com yep so everything that you all the features that you get when you are developing a view app on a website webpack, single bundle file with auto module reload all of that stuff is there and best thing in a live app so you can use CSS animations and they translate into native animations this is a very powerful feature if you are using something like react native where to native script is that you have to create an animation object and animate just show the app once when I open the app this animation that is happening when it is running it is an actual native animation inside android interpolators but I have defined it in my code simply using CSS files so translate animation automatically converts into native animations there are things like also if you want to say open up a QR scanner it automatically asks you for permission for camera and stuff most of these libraries already exist you don't need to even understand how the native layer is working actually it is because the emulator has 90 degree orientation problem it is probably scanned so all of this I think I will just show you the scanning code just a single line of code which makes this possible you create a barcode scanner and you just do scan it asks for the permission opens the camera does the scan all of that stuff you don't need to understand how the native part works so if you are making simple apps it is a pretty good option check out the code for this or want to contribute this is where it would end up the first one has the slash file right now I am just building it on my repository and if anyone has installed the android app right now I know it is pretty buggy so it is going to improve probably by the next conference this will be the app and anybody who has iphone they would be able to use it as well and you would have all the features that the existing app has and extra features to possibly you know by the next conference if you come to ASCII conference you don't have the app you know thank you any questions build the IPA file do we need xcode or we can done in a windows system also you will have to compile it on an apple running it on iOS you will have to compile it on apple android compilation will work on any 3 operators okay xcode is mandatory to generate IPA actually it generates the IPA it cannot sign it if it is not a manual it will be there but there are some online services which provide signing as a service people are running Mac servers you send your IPA and your certificate it signs and gives you back so a lot of teams these days they use that developers are working on windows they sign it through external service I wanted to ask this question from the previous guy but you also worked on native script so the question is how do you compare the performance of native script like react native app this is native script app native script versus native or native script as a react native react native by react native the start up times for native script like general thing I will tell you during the run time the marshaling speeds are faster so data when it is converting to java to jas to java those speeds are significantly faster in native script because it uses reflection the app boot up time is going to be more in native script so okay when you use react native for using native components so I see the bridging is actually not very easy so how is it in native script using native components yeah the native components so I think the major difference with react native and native script is that react native provides basic widgets it provides very few and ask the community to build a lot of them native script has created a set of widgets which can be implemented both in iOS and Android there is a common set of widgets so for example list view you have to create separately for iOS and Android in native react native in native script all the widgets they are common like there are very few widgets which you have to create separately in iOS and Android you can use the common widgets everywhere creating widgets and all is pretty easy like I said no bridges involved in this app that I have created completely built using jas thank you Erno wow it's been two wonderful days I had a very great time I think you also had a very great time I hope you might have learned some good things and you might use some of them in your workflow and do stuff so I just want to say thank you for coming to JSFU conference and making it big success and I still have some announcements so our next events are on JSFU Pune on 10th January and react foo on march so please do come and if you are a developer who are working on some nice stuff you can submit some proposals or proposals so we may select you for the next conference so and there are couple of workshops going on tomorrow one is secure web development workshop and another one is paceup with view workshop these are happening tomorrow so you can join it so there is another nice thing bootcamp is happening on November 10th it's a two day bootcamp regarding full of GraphQL that's it thank you very much


Our experience with the ISO has shown us the significant potential of social enterprises in improving lives and livelihoods in underserved communities. It has also made us keenly aware of the challenges faced by social ventures. To overcome these hurdles, the ISO Accelerator delivers technical and strategic guidance to social ventures based on four key pillars, customer and user knowledge, hardware validation, manufacturing optimization, and implementation strategy. We annually match our finalists and final cohort with our global network of engineers, designers, investors, and entrepreneurs to ensure that the proposed hardware solutions are technologically, environmentally, culturally, and financially sustainable. Our global community of diverse experts generously donate their time and expertise to support social ventures. They work closely with the ISO team to understand the unique challenges of the finalist niche region, share critical insights, and select our cohorts. Many of our experts return annually and bring colleagues to join our growing network. And some, such as our long-term judge, Mr. Edin Saruk, have stepped into strategic advisory roles as well. Edin serves on the ASME Engineering Global Development Committee, and he's also on the ISO Steering Committee, and has been an ISO judge since our very first ISO in Kenya way back in 2015. I'd like to now invite Mr. Edin Saruk of the Fellows Foundation to provide a few remarks. Thank you, Iyana, and delighted to be part of your program and also of your network, and pleased to be part of this. And we are at a very critical juncture in history, and we cannot repeat it enough, actually, that if we are going to achieve the United Nations Sustainable Development Goals by 2030, we need all hands on deck. Engineers and social entrepreneurs have been playing a significant role over the last decade, and will continue to do so in the decade to come. Personally, my African roots and first-hand confrontation with the development challenges were essential in my career, but choices. I have spent my career, actually, in bolstering the innovation ecosystem in Africa, and achieving the SDGs means innovating within the ecosystem, and it is essential to have research and development on the ground that can foster local technology development and unlock talents that are very key to achieve the SDGs. It was indeed in 2015, one year after I built Philips Research Africa, that I got involved with ISO. It was very clear that the development agenda requires collaboration and strategic partnerships to address the SDGs. And Philips as a company has been the first corporate to sign on the multi-partner trust fund to establish the SDG partnership platform, Kenya, and support the government of Kenya in its development agenda. This allowed me to be part of the UN system since 2018. And ASMEI has been an important partner during this period. In 2019, for example, and this is just one of the examples actually with the support of engineering for change, and the fellowship program, we have been able to support and advise actually the government of Kenya on technologies for housing construction. And we have seen the example in one of the previous presentations. And my transition to the Philips Foundation has been a natural step to focus more on sustainable and scalable innovations for access to care for the underserved. My experience has enabled me to interact with social innovators globally. And what I have seen is that system change towards SDGs is possible. That we can leapfrog the development towards the SDGs through technology. And that collaboration has the key towards impact. So scaling hardware and social innovation specifically is very, very much difficult in environments with limited resources when it comes to, for example, infrastructure and skills. And learning by doing is very important in this environment. And I show has been able to address several gaps in the ecosystem. So since 2015, we have seen many developments in rapid prototyping, 3D printing, skills, and of course, also the end user centric design process. And I have seen an eye show impact on social ventures across the continent, first hand. And of course, being a judge and the reviewer, of course, gives closer look to reality. And the strategic conversations between eye show experts and startups fills a significant need in the ecosystem and provides a catalyst ventures really need to scale to market and make true impact. So as my eye show has established a unique and critical offering to social ventures. So seed grants, mentorship, design services, business development assets that us may invest into their annual cohort truly goes a long way. And I see tremendous potential with eye show. And I'm very much excited to build on the success of it. Thank you.


Welcome. Hi everyone. This is the Midnight Madness and we've got a lot of friends with us here. How's everybody doing? Everybody doing okay? Second Midnight Madness? Yeah. Everybody's chatting. Everybody's doing well. A lot of fun chat. I dropped the link for the selfies. If there's one of the selfies that we do take one before we came live. I think Chris did, right? Tania, you did. I got my selfie. Yes. So make sure you guys take the selfie as well. And last time I checked, we're going to go over stats in a minute. But last time I checked, we had 52,000 profiles up from the connected line. That's amazing. Good work guys. Good work. So what's happening in your own life? Chris, David, Cathy, Darren, Tania, everybody in chat. Everybody. Well, I'm currently working on one of my, a while back I did a family tree. One of my friends, Anthony, also a family in Sicily and another one in a few other places. So I'd start, you know, I was going to transfer his tree to WikiTree. Why not? You know, I asked if it was okay. He said, yeah, I was trying. Yeah, so. Okay. Alright, whatever. I hope everybody in chat just smiled for Cathy. She just. I don't know what I do. Like deja vu. Oh, then you didn't see all of this three four hours ago, but you saw Chris. Oh, just about four hours ago. Yeah. I really like to do on the game shows where we film three episodes all back and back.  I have got questions. I need answers to everybody in chat and everybody that you see here are going to help me with these questions that I need answers to. But first, there is kind of very interesting way to do stats. So let me bring up the stats real quick and let's go up and let me refresh you there so we can see what we're looking at. And we have 50. Oh, this sounds like a number. Greg would like 52 222 or how many profiles we have in Darren. Where are we starting? We're looking at the users. Yeah, we're looking at the users and I worked out that this is the 11's hangout. So I'm going to do positions that have got okay. I did forget something. Let me interrupt real quick. Let me bring this up really quick. Give me one second and let me make sure I get this right because I know everybody is also here to win a prize. Yeah, as well. So let me tell you what the word is. Everybody type in ancestors. And while you're typing, Darren's going to tell us starting at 11th place, right? Yep, starting at 11th place. We've got Alan Key in whistle. He's keeping on the spleen of streusel. He's got 642 profiles done so far. And we do a big jump down to position 111. 111. Yep. There we go. At least that person is in a keyway because then they'll be bringing the emergency number here. Yeah, so we've got Aaron M Astell, Canadian connectors. And am I reading it this right? She's got 111 profiles as well. Yeah, that's her position number. Yeah, very good love. No, she's got 100. And then we're going to go to 211. Yep, down to 211. Oh my gosh, it's me. See now you know why we planned it. That's so cool. No. I love that response you just gave. Yeah, so it's that. She's got 67 profiles. So that's pretty good. And that's this other super sweepers. And this other super sweeper. Then we're going down to 311. Then we've got Catherine Reynard. Probably you must pronounce this and I apologize. And she's got 38 profiles. And another big jump down to 411. I like this idea. There it came up with this idea. I like this a lot. So we are, I think that's 411. Is that a nuke? Yep, it's mainly a global. So it's great to have a nuke being noted. And she's got 22 profiles. And if we have anybody, this is your first thought. Let us know. Just say first thought or me. Let us know how many nudes we have in our chat. All right. So we're going down to 511. And we've got NM. All right. I'm going to let's pronounce this one. Sourish. Beckonson. She's done nine profiles. And then the last one. Today is number 611. And it's Carol Seinfeldt. Maybe of the Cornwood Caches. And she's on my profile. Okay. And then let me refresh and see. Nobody look at the screen. I don't want anybody getting where to go. Let me refresh as we look and see just in a few minutes. So 52, 287. Good job, everybody. And I'm seeing that we do have a lot of new people that are here. Don't forget to type in the word ancestors if everybody sees why that word is there. That is going to be how the random drawing for the prizes. So welcome. Look at everybody that's new in the chat. We've got Ann Yvonne, Gandra. So welcome, everybody. Arlene, thank you guys for joining us. And just to let you know, and the regulars that come here can also let you know, we get a little crazy at midnight because, you know, we have a lot of people who got up early and been working all day and this is going to be the last of that they do for the night before they go to sleep. And then we have some people that are taking their lunch. They're halfway in between the day. And then we have some, some of the Europeans that are just waking up and getting ready to do their thawing and digging in again. I know that, you know, the thawing starts on Friday. Some people are working on Fridays. So Saturday was when we start to see a really, really big push through this. And for those of you also that are new to the thawing, it goes all the way to a Monday morning, 8 a.m. Eastern time. There's no stopping. U.S. Eastern time. So no stopping. So how many of you all are going to keep on going Sunday night, Sunday into Monday? I'll probably stop tomorrow afternoon. And you know that's a popular decision.  Yeah, everybody for the world. Things like that. You gotta start winding down. For me, I find it hard where to stop. You know, you're on a roll when we were talking. You've got to add your parents. Don't forget to add both parents or don't forget to add all the siblings because you'll forget when you go back. So for me, that's always a really, really tough one. Darren, is that Han Solo? Yeah, as you can sort of say. I always have trouble on Monday because I don't know what to do with myself. I've been going all weekend and then it's time to stop and I can't. And then you're like, I sleep. I don't know about you all. I sleep. Yeah, well for me it's sort of, the phones usually end up, it's the whole day on Monday for me. So it finishes at usually midnight or 1 a.m. Tuesday morning. So it's like if I can stay up on the screen and not have to worry about the kids in the morning, yeah, I'm staying up. You're staying up. And I know a lot of people love coffee. To do it, I can't do coffee. So I see we did have the Coke and Pepsi discussion as well. In Atlanta, I gotta say Coke. I would say Coke anyway, but I would say Coke. Okay, so now the fun portion of this program. So everybody has seen the stats. Everybody's typed in ancestors, I hope. So I have got questions. Got questions. They are not easy decisions. So these are really good decisions. So I want everybody in chat and help us out. Let us know what your answer is and we're going to share our answers too. So is everybody ready? Ready? Okay, so very first question. And since we're talking genealogy and we're talking wiki tree and what we add to profiles and what information do we need to add to profiles? Sources. Photos would be nice, right? Stories, obits, things like that that we add. So this kind of be what the questions will be about. Number one, would you rather discover treasure chest filled with your ancestors lost treasures or uncover detailed family tree dating back centuries? I know. So is it a treasure or is it the tree? Now think about this for a second. The treasures could be what? They could be jewels. They could be baby photos. They could be the pearls, your great grandmother wore, you know, at her wedding. They could be family Bible or would you like very accurate detailed family tree dating back centuries? I'm going to throw a wrench into this. Here's the wrench. What if there's a family tree in the treasure chest? I went in and I moved it. Good call. Here's the problem with the family tree though. If the family tree is complete and accurate then where does my obby go? I know that's what I was thinking about. So they're going to become what, a typist or transcribed. So is it tree or treasures? What do you think Chris? Ah, I have to go with the tree because hey, the treasure is all on hold before you anyway. So what else? Oh, but do they? David, tree or treasures? I got to go with the treasure. Tania, I'm going to go with the tree. Really? I thought you might go for the treasure. Okay, Darren. Uh, this is something personal. I'd love to have the, the chest because there was a, was a chest for my great-grandfather and it's gone missing. So I'd love to have that. And Kathy, and yes, the tree is vaguely sourced. I'm going to go with the treasure chest. Which line, biological or adopted? I would probably go definitely adopted just because of the history, but then I want the biological for the Italian. So it's just for everybody. The tree is vaguely sourced. You're not going to have sourced documents attached and it's a full tree both sides. I'm going for the treasure. I don't want to see my great-grandmother's pearls that are gone. So I'm going for the treasure. Okay, so next question then.  So think about this. You can either meet those great-great-grandparents with a couple, one couple that you really love and like and curious about, or that time machine might help you with that brick wall. Oh, I got the perfect answer. So are we going for the meat or the machine? Well, using the TARDIS, I would transform myself to San Pietro in the 1930s using the power of the TARDIS to translate any language. I would be able to go and visit everybody that's there. I felt everything odd once. Yeah, that's true. That's true. One time, like 1910, something like that. David. Okay, so because you said great-great-grandparents, they would be in San Pietro. Very specifically for them, my great-grandmother told everybody in her life that she was an orphan, even her own kids, and it turns out she wasn't, that her parents were alive and well for well into her adulthood, but we don't know what happened to them. So I've got their stories up until they were married and they had kids, and then they just disappear from the records. We don't know where they went, so I would love to hear their story, and that's kind of my brick wall. And that would definitely help. If you had said any other relatives, I might have picked the other, but for those in particular, that particular couple, that would be my choice. Antonia. I'm going to go for the meat. Again, I was thinking specifically of that generation, because you said great-great, and for me, those are my ancestors that were right post-enslipement. So to be able to hear their stories for San would be incredibly powerful. And I think that's kind of the difference between the machine and the story to sit there and you could ask them any questions. We have questions. As you know, every midnight hangout, we have questions. What happened if we were to alter our own family history, just by like, you know, stepped on it and stuff or something like that? You have to think about it. Well, it's me, the great grandparents, the great-great grandparents, because my great-great-grandfather, who has the call-up name, I know that he, when he died, I don't know where he was born, I don't know when he was born. So it's like, it would break down into a lot of brick walls. I agree. I agree, Kathy. I'm with David because you specifically said great-great-grandparents. This was just random, too. I can't believe you. Well, I've talked about this before that my biological, paternal, great-great-grandmother, Nellie Seggers, went by a different name on her marriage record. There was a few years that she was using a different name. I want to know why she used that different name. I cannot figure it out and nobody, the few people I've talked to, have no idea why. But you could meet her and you could find out? I could find out why she went from the Helen or Nellie Seggers up to the Orphanage and then she was adopted out and then she got married a few years later under the name Corinne Townsend and then once she got married a couple years after that she started going by Nellie Allen. I think I'm going to go for time-mishing because I want to see the town where a lot of my ancestors in the middle West Virginia lived when it was Virginia before West Virginia. I want to see what the town was like, their home, their pioneer cabins, things like that, and also a lot of woods, a lot of woods and a lot of mining equipment.  That's a good use of the time machine because if you're going back to see a moment in time, we hear all these great legends and then you get back there and you find out it wasn't nearly as interesting as they made it No they're ordinary people just like us and then you're jealous of all the people that chose to see their great grandparents because I like this too. Me too, most of my questions would start with why. That's a good question to ask. Yeah, why? Why am I seeing this? Why is this? Why is that? Okay, so let me move on. Here's a better question. What time machine would you use? The TARDIS or the DeLorean? Keep in mind that the DeLorean has a really crafty entry. I don't know, that one is tough, but you know, being back to the future and loving it, I think I'm going to have to go to the floor, is there? I think it will. The history of the TARDIS was a working Cambodian circuit. And I bet most people will say the TARDIS as well. So here's an interesting one and think about this because you're going to want to instantly pick one of these real quick, but I want you to think about this. Would you rather live in the same town your ancestors settled generations ago or travel the world to explore all the places your family lived throughout history? The problem is you would live in the town or you would have one week to travel the world without it. If you lived, then you would have more time to explore, go to the cemeteries, you know, go courthouse, do things like that. Or if you always wanted to travel to where all your ancestors are on maybe a global tour, but you don't have a lot of time there, but you could at least say it was there. So are we talking, you know, town or travel? Town for you. That's a tough call for me because I lived literally five minutes away from April, Massachusetts, where everybody lived basically. I can walk down there, we thought it was advisable, but I couldn't go to Europe and that's about all I could think of. My problem is, is most of my ancestors all the way back that I can document lived in the same place. So the answer is the same for me, technically. It's like, if I travel everywhere they've been, I'm going to fly back to the next and then I'm done. It's like going to April and you'll report for Italy. She won't make that pick. I'm like 45 minutes away and you'll report also. That's true. So what do you think, David, what do you think? You know, that's tough, but I think a week is not enough time. It would be so overwhelming. I wouldn't be able to absorb it all. And I'm actually, you know, as I get closer to retirement age and have the ability to go anywhere in the country that I want to spend my final years, I'm actually thinking about going back to my ancestor's hometown just for the reasons you said to be here, the archives and the churches and the cemeteries and all that. So I may wind up doing that anyway.  Well, that was a gladiator question from last night, too, right? Yeah. Dania, what about you? I do the town, you know, I've had a chance to go to one of my ancestral hometowns and spend about five days there and it was wonderful. So to be able to do that again in a different town, I think would just be really rewarding because again, I don't think I'd have enough, I wouldn't, like someone in the comments say it'd be a blur if I traveled around in one week. So I want the on-site in-depth opportunity to just be immersed. You know, it walked the same land that they walked and actually look at the same, maybe the same buildings or the same stores that they were different back then, but they were there, you know, they were there. Darren, what about you? I've got too many places there. So I'd have to travel. Good luck. Have to see him. For one line, I'd go for him, go to Timoru in New Zealand, to London, to St. Petersburg and Russia, then back to Yorkshire and England. That's just one line. You're getting jet lagged. And Kathy, what about you? I'm going to take the travel because between adopted and biological, most of my ancestors are over in Europe. So I would rather take a day in different countries and at least see something and have the memories and use pictures, you know, to do the memory and then go back and prioritize, I guess, where I would want to go back to, to spend more time, to do that living on the ground. That makes sense. Okay, now you know that we do talk about food on the hangouts a lot. So I did kind of sneak in a food question. So we've just got a couple more and we'll go through these a little quicker because I know everybody wants to get back to Thani. So this one is, would you rather inherit a collection of old family recipes passed down through the generations or receive a book, maybe a scrapbook or something like that, containing stories and letters written by your ancestors? So are we going with food or stories? Stories. Now think about this too for a second. Those stories could be about anybody, not necessarily just the family, you know, the neighbors, you know, everybody around town and they talk about everybody and it could be some current where there were newspaper articles maybe or handwritten stories or somebody writing down in the local gossip. That is not true, you know, things like that. Or would you rather have the recipes of your family passed from generation to generation? This one's tough. So are we going with food or stories? I'm gonna have to go with stories here because we already have a bunch of recipes. So what am I gonna pick? The recipes would just sit on a shelf. Stories. This is by, it's Stephen. Oh no, it's all stories after she stopped gugging. That's so funny. And I will tell you, I was on vacation in the mountains last week and I always go to this one antique store and there was a scrapbook. It was a really, you know, good size with all these cutouts and little notes and newspaper clippings. So it was $5. I held it in my hands, I walked around the entire store with it and I sat it down and I said, I don't have enough time. It was $5 and I still regret not buying it because maybe I could put it up on a space page and everybody help or something like that. Yeah. Okay, so I think everybody pretty much agrees. We're going with the stories in chat as well. Okay, so what, this one's the tough one. Would you rather receive an obituary? You don't have access to it. You've never seen it before. An obituary, full details of one person in your treat could be your brick wall, could be anybody. You make that up or a photograph of one person that you don't have that you really want to see their face. So obit or photograph. So what's everybody in chat think? Are you going with a detailed and keep in mind that obit is going to have the parents, you know, the kids, the siblings or that photo? I'm with you all. I love seeing the photos as you go around wiki tree and you randomly look at profiles or profiles come up. I love it when Greg shows his fan chart and you see all the photos and the fans of the photo as well. This is kind of interesting. Most people are going with photo, but some of you are surprised. And this is great. I'll take the obit.  Well, I've got trees. Do you have a photo like when they published? And this would be probably if you think about this is going to be that ancestor where there's no photos probably wasn't even invented, but somehow we're going to make it happen. We're going to make it happen. Wouldn't that be cool if there was somebody that's on your colonial ancestors or now see what they look like? See, well, that's go back and see them with that time machine. There you go. It will bring our digital camera or sofa and those big freaks. No, I'll bring you on the stage for witchcraft. Witchcraft. You never know. Somebody that'll be able to parse our DNA and recreate our ancestors for us. Very last question. And you think this one's easy, but it's a little tricky because, you know, I got to put something tricky in there. So would you rather preserve your family's historical documents and artifacts, put them nicely, you know, in a book, ebook or real book for future generations? So we're doing the work here. I think everybody would agree. That's part of the reason we love wiki tree. It's free. We know anybody can jump on our cousins. We talk about cousin fate, but also our descendants. We don't talk about that very much. Our descendants. So would you rather preserve your family's historical documents and artifacts for future generations or take that information because your family is so amazing to publish a best-selling book detailing your family's remarkable story for the world to see? So are you going to make money? Or are you going to cherish? Wow. Now there's a little difference because when you're preserving your family's historical documents and the artifacts, those artifacts usually get handed down. And don't forget, and if you publish your family's remarkable story, you've got to have some first. Exactly. But also, some of those remarkable stories are not to come to light. They were always meant to be kept secret. So are we cherishing and keeping for yourself or are we publishing? Cherish. Reserving for the future. Yeah. Cherish, maybe my nephew could tell him later. This is kind of, this is kind of mixed, but I think the cherish is going to come out for the winner. The hard thing is, if I keep all the artifacts, my family's going to throw them away after I'm gone. No, I do wonder what that was. A book they'll keep. And others will be able to read. And others will see it. Be able to read. But I would like to say if you anything like artifacts, pictures, things like that, that you are, excuse me, items that you can take pictures of, put them on the profiles. Definitely. But if you flip that question around, would you rather inherit artifacts from your ancestors or a book about your ancestors? Well, that was kind of like our first one. I want the artifacts. I want my great grandma. That's what I want. Okay, guys, that was, that was pretty cool. So I think we have a drawing to do it. Ancestors is the word. So if you guys want to type it in, whoever hasn't typed it in. Now, just one little caveat. Again, if you have won anything through a live cast, and that includes our bingoes, hangouts, anything at all in the past six months, you're not eligible to win again, to make it fair for everybody else, until your six months has passed. If you won something at the last thong, which was the source of thong, you were not eligible as well. So if your name comes up, and you already know you're not eligible, could you just let us know real quick and we can draw it again so everybody gets a chance. Okay, so let me bring it up on the screen and let's see everybody put it in. Here we go. Let's see who gets it. Jenny, this looks like Jenny. Jenny Nader. So congratulations, Jenny. Jenny, I'm going to ask you, have you won before in the past six months? I don't think so, though. Kathy and I looked at the list and I don't think so. Aowyn is going to get in touch with you and let you know what the prize is. I don't know what the prize is. It's a surprise prize. But congratulations, Jenny. That's pretty cool. And everybody, anybody got any questions? Everybody ready to go? Now I will warn everybody.  No more tough questions. Silly fun.   All right. So it sounds like fun. Thanks, everybody, for joining us live. If you joined us live and thanks to those who watched after the fact. And thank you guys here in the chat and on screen for joining. This was great fun tonight. Thanks for playing along. Bye, guys.


Okay, my name is Willie Manathook. I was born in Goose Bay. I was raised in Nain. For the first year, it wasn't that easy for a Labradoran kid to live in St. John's. It wasn't that easy. Living up in Labrador for like eight years and all of a sudden flying down to Goose Bay, St. John's, it's a lot more movement and a lot more people. Growing up in Nain, Labrador, we played mostly sports. We used to play this game bet. We used to grab whatever sticks we had, grab a ball and gather up whatever people we had and play bet. If you don't know what bet is, it's pretty much baseball but in the city it's called baseball but up in Labrador in Nain it's called bet. When I moved to St. John's, I met a few buddies and I started playing hockey. Since moving to St. John's, I've graduated high school. I've currently got two jobs and now I'm working on to get my license.