💐 Variety Show | Learning Node.js Worker Threads | Electron + React + React Router

[Music] hello friends welcome to coding garden with CJ welcome to a variety show where we have a couple of topics we're going to attempt to cover and I will show these topics all came from the Q&A website so if you go to Q&A coding garden this is a site where you can ask me questions and vote on questions that other people have asked as well and there are a lot of questions here so instead of attempting to answer them all we've picked three that we're gonna cover today now you may notice that there is no YouTube chat on my screen I have tried everything in within my abilities and the YouTube API will not give me back the live stream ID for the YouTube stream so if you want to chat you should head over to twitch so if you go to twitch.tv slash coding garden you will be able to send chat messages there you can throw me a follow I'll get closer to two thousand about 1,400 like now but go over to twitch I'll try to look back at the YouTube chat every now and then and I apologize for that but not 14,000 did I say fourteen thousand fourteen hundred fourteen fourteen but first of all this is really lame okay I'll show you really quick this is the response I'm getting back from the YouTube API because I'm sending these two requests this one says give me all upcoming live streams for my channel ID nothing and then this one is for give me all current live streams for this channel ID nothing so YouTube has something against me yeah so drops will not work on YouTube just head over to twitch let me see if anyone said hello hello bin and hello I alley let's see hello AVI I'm doing pretty good hello Yuvraj hello Wouter hello Domenico hello Francisco hello Wouter hello Douglas hello Rena hello IU Ryan says my goal this year is to make a career change from mark tech into software engineering oh I think like marketing tech love learning new skills from a channel that's great thanks for hanging out with us Diplo Pam says yes we have react I'm gonna try to cover some react today react an electron and hello yes sir okay that's pretty much it for the YouTube chat we're gonna we're gonna use the this chat over on the right which is mostly just twitch and we'll talk about the things so let me just catch up on all that hello Sergey hello acids mark hello could totally thanks for the follow hedger and hello and feet you're not late you're early I would say hello edy Zeno welcome hello Stern home dev hello Matteo what's up Alka with the hike and hello for hello Kodomo mr. Holm says how do you disable the chat translator I think it's an overlay that you can hide I'm not quite sure I've never really experienced it from a viewer perspective hello free debugs hello Steven who says YouTube is dead I possibly used up your API quota I don't think so because I would have gotten instead of actually getting back a blank response I would have gotten back you have you have exceeded your API request quota but I'm literally getting back that there are zero upcoming live streams and zero currently live streams for my channel if anyone else wants to give it a try feel free you can get my YouTube channel ID from my for my youtube channel and then try to call their API to get a list of act currently live streams if it works for you then maybe I'll try my API key but yeah and hello DG DG go to the bathroom to debug that what in hello Rock code I'm doing pretty good I was sick earlier in the week but I'm feeling better and thanks for the follow is an arc and yos an arc obligatory view is better than react message I agree I totally agree oh yeah I don't recognize what cool good call the Chinese flu well uh no I definitely didn't have the flu I didn't really have a fever my throat was a little scratchy my stomach was upset but I'm feeling better okay so today the planes to talk about these three things so there was a question that came from Quran who is a droplet YouTube member and Quran asks can you show some code or explain how workers work in no js' Thanks so yes I will and let's see who else voted for this canon ello and depo pam voted for this question so we're gonna we're gonna talk about this one after that I think we'll talk about creating like a basic proxy API actually it might be if I'd be very relevant to create an API that calls the YouTube API and we'll put it behind a proxy so it hides our API key but that question was by harsh so we'll build a basic node app that does that and then this question from Pranjal was says please tell me how to use react router with an electron app it seems react router and electron hate each other very much I can show you how to do that so there are like electron react starters we could probably set it up from scratch but we'll do that as well but the order is workers then proxy API then electron and react let's get into it oh cool khatola says for the worker threads question I have a repo with some algorithms implemented with it cool and so I'll talk about this but essentially worker threads in nodejs allow you to write parallel code so if you're not very comfortable with the JavaScript event loop and parallelism and like promises and callbacks this streams gonna be a little bit advanced for you but I'm not gonna start from nothing I'm assuming that you have used callbacks before you know a little bit about promises we're not really use promises but the idea of a synchronicity the thing the idea that multiple things can be happening at once is gonna come into play when we're talking about worker threads so never used a callback in my life is that a joke Sivan cuz I feel like you write JavaScript 19 phases I haven't tried dinner but I looked at it it looks pretty cool in Hell own are I'm cool see you later DJ DG thanks for hanging out with us but ok worker threads and so this I believe in nodejs 13 and allows you to spin up multiple threads that can actually share memory and communicate with each other so you may have heard before that nodejs works as a single threaded process and javascript is single threaded in that really only for the most part one thing can be happening at a time now before worker threads there were things like child process and like another thing that would let you potentially spin up a separate process or a separate thread but the cool thing about worker threads is that they introduce shared array buffer instances so they can actually share memory and the okay khatola is saying it's been in node since v10 but with experimental flags but now it's actually there and you can just straight-up use it yeah so this is we're gonna be doing as a multi-threaded programming and this is itself a pretty advanced concept because most programming that you learn is very serial and that you're you're writing your code as if only one process is running that code and it's it's most likely gonna run it sequentially it's gonna run it from top to bottom but what entry what parallel parallelism introduces is the idea that we can both work on a problem in parallel instead of just using one process to work on that thing so in khatola mentioned that they have a repo of algorithms and so that's actually what I did this morning I did a little bit of research to find what is an interesting algorithm that we could implement that can benefit from parallelism so we're gonna we're gonna work on that let's see what what else was said and outgas says I avoid callbacks as much as possible cool and hello tram stars oh cool obviously learning C++ so with C++ you can do parallel type stuff at my very first job I worked with people that did C++ on supercomputers and that's like massively parallel program so you would write programs where you could have thousands of instances all working at the same time and all working on the same problem together to solve that problem faster but now you can do it with JavaScript it's probably to be as fast to C++ and yeah but we'll talk about it MP says recently built a proxy API for fetching my discord user info which uses a discord bot behind the scenes because discord is non bought API is really lacking and interesting I can I show a quick overview on how calls and promises work the thing is not really because I'm only gonna be streaming for like two hours so I have done previous streams on like the basics of promises and stuff like that and when I come across it I'll try to explain it but I can't start from nothing just because it would take too much time and also I haven't the only preparation I've done is I've pulled up this article on worker threads I found this very very good overview from my siege silks are on the log rocket blog called a complete guide to threads I'm not gonna go through this but if you want to learn about threads from scratch anymore in a better way that's somebody who actually knows something you can go through this guide and he he walks you through what used to exist what exists exists now all that good stuff so I'll share this article but we'll look at this maybe every now and then if we need some help but for the most part I'm just gonna be going from the nodejs documentation and if you're just if you're joining late on YouTube currently YouTube is not listing my stream so I'm not able to get YouTube chats because I don't know what the live chat idea is so if you want to what if you want to chat head over to twitch twitch TV slash coding garden and I will be I will respond to your chats there okay and if anybody else shows up on YouTube please tell please please point them to twitch tell them to go over here thank you alright continuing [Music] so it's been stable since we twelve that's good clusters in no that's actually that's a it's a different thing so clustering allows you to again spin up a process but you can have multiple worker threads but they can't share memory the main at least from my understanding the main thing about worker threads is the fact that they can share memory yeah multi-threaded programming does it have real-world implications yes so there are certain problems that are paralyzed Abul meaning they could be the problem itself can be broken up into many different chunks in each of those little chunks of the problem can be solved by one separate thread or separate process and then they can all put their solutions together to come up with the final solution and so this has serious real-world applications this is where supercomputing comes from if you've ever heard of that the idea is you you have a server farm with thousands and thousands of processors and it has ways of sending problems that can be split up to all those different processors they do the work they send back their results and then you can you can finish that problem much much quicker much much faster yeah and things that aren't nodejs actually do spin up separate threads or processes for incoming requests if you've ever worked with only PHP or even asp.net when you're building a back-end application requests that come in might actually be running on a different thread or a different process meaning your code could be executing at the same time with no GS that can never really happen because it's single threaded but we're gonna get there they did not work at the CIA CIA and thanks for the following coding and hello regards from Chile very cool I'm going to talk about it ROC code so basically we're gonna we're gonna solve a problem using multiple threads and this computer that I'm writing the code on has 4 processors hmm sorry uh has one processor with 4 cores so it would make sense to split up a problem into four chunks and solve it potentially four times faster than if you just did it it serially so we'll talk about it the thing is with a single-threaded process you can't really have race conditions i know people talk about this all the time i like they might they call it a race condition but it's not the same thing as a race condition in in a scenario where you actually have multiple threads like with nodejs they're just really aren't I mean yeah I don't know Hilla Ricky yeah I wasn't ignoring you um you probably can do gpgpu programming but I haven't done it before and hello Julian welcome hello hello Sean um okay so let's say I is is multi-threaded so typically when people are deploying asp.net they put it behind an iis server which is like the Microsoft thing and that thing will actually spin up multiple instances of your asp.net app at least that's that's what I'm familiar with yeah rendering video 3d scenes machine learning all these types of tasks can be split up into parallel tasks so for like rendering video you could split that up into four separate tasks so each task will render just a section of the video but instead of doing it sequentially they're all doing it at the same time and then when they're all complete you smash it together and you've rendered a video a whole lot faster yeah all the good stuff okay let's get coding and like yeah let's do it so I don't know exactly know what we're gonna do it just yet but I will mention the problem that we're going to implement is the sieve of eratosthenes euro toss Sinise which is an algorithm for finding prime numbers yeah so we're gonna use yeah hey Danny fritz yeah we're gonna try to use shared array buffer to basically share memory between the worker threads Oh interesting I did not know that it'd be that's good to know I'm Way behind it's been years since I did asp.net but so this is an algorithm for finding prime numbers and it's actually pretty cool and it works like this so first you write out all the numbers up to the maximum possible prime number that you're trying to find so in a simple example you write out all the numbers from 2 to 15 so we're gonna find all prime numbers that are within this range 2 to 15 the next step is you find the smallest number and you Circle it because in this case if you're starting this load the smallest number actually is a prime number you then go through all the numbers that you've written out and cross out any multiples of that number so basically after we found 2 which is a prime number when we cross out every number that is a multiple of 2 so every even number and now we're left with numbers that potentially are prime and then we repeat the process so we find the next smallest number which is 3 that's also a prime we cross out any multiples so like 6 12 9 those all get crossed out and now we're left with 5 which is our lowest we crossed out any multiples which would be 15 and so now 5 is a prime we have 7 we cross out any multiples there are none so we have 7 we have 11 and 13 so all the prime numbers less less than 15 are 2 3 5 7 11 and 13 so this algorithm that I just showed you the idea of you take the lowest number cross out all the multiples take the next lowest number cross out all the multiples this is a way of finding prime numbers and it's known as the sieve of arrow toughest how do I say this arrow toughest Eratosthenes Eratosthenes the sieve of eratosthenes but the idea here is that this algorithm can actually be paralyzed and shout out to show dorg this is a website for like learning computer science that this is this was like the best description I could find of the algorithm but there's that but let's think about how we can paralyze this thing so our first step which is to write out all the numbers we can actually paralyze parallel eyes that showed or showed or I'm subscribed to numberphile they're really cool Oh lookit olya also implement too so if you link your your repo khatola we'll take a look at it in a bit but think about this first step you could have a program that writes out all the numbers from 1 from 2 to 100 right that program would start at 2 then it would write 3 4 5 it could write all of them out but we could actually split that up if you have 4 cores what if each core wrote out 20 numbers so core one wrote out the numbers 1 through 20 core 2 wrote out the numbers 21 through 40 wrote core 3 wrote out the numbers 41 through 60 something like that but basically split it up so that each one is writing out a different set of the numbers we have parallelized this simple problem of writing out all the numbers and I think that's the first thing we're gonna try to do with worker threads we're gonna take 4 worker threads that each try to count up to well that ultimately are creating an array with a thousand elements in it and they each split up the task of write at writing the numbers into that array so that can be parallelized choosing the smallest number cannot be parallelized because you can only really do that once so when we're talking about worker threads there's this idea of the main thread the main thread is kind of like the orchestrator it could be the thing that spins up other threads and the thing that receives the results when the other threads are done working so the main thread is going to choose that number within this next process of crossing out all multiples that can be parallelized because each separate thread could have a section of the array it could receive the number that is trying to check multiples of and any numbers within its range that are multiples it can cross out so that can be parallelized and then we repeat the process choose the lowest which has to happen on the main thread and then we split up split up the work yeah let's go to show.org it doesn't look really old but is a national resource for computational science education I found I found this PDF by googling and it's the best description that I could find so and this in this PDF will share it really quick they talked about the the the serial serial algorithm which is just one process or like one thread they also talked about the how you would take that algorithm and parallelize it cool but what I think our first step is is we're gonna write a program that creates an array with all the numbers from 2 - I don't know 10,000 and we're gonna try to parallelize that so what happens on multiple worker threads and again for anyone that's watching on YouTube I don't have youtube chats right now oh there it is finally that took way too long that took way too long man wait how did why did all the twitch chats go oh because the twitch chats were on a different chat ID okay I can't say hello to everyone but YouTube chat is not working again are there - oh my goodness come on [Music] okay I think it was duplicating twitchchat it should be okay though switch that wasn't a different word no actually the way my back-end code is set up is horrible but ultimately it just had to TMI j/s clients that were both listening on the same thread the just using like callbacks to know when a message came in so that was okay let's try to write this thing so the first the first thing we're gonna try to do is write a shared program that fills up an array of length 10,000 all right new file fill array is hmm oh okay thank you could totally so these are the algorithms that could totally implement it with worker threads so whatever Li check those out but I want to try to implement them without looking at his code cuz it'll be fun nice very cool we'll keep that there and hello coder hello Ashwin right now we are working on implementing something with worker threads okay so worker threads are built into nodejs I am currently I think I'm using node version 13 let's see we could you know - V yeah I'm on node version 13 so I don't have to npm install anything this is just a plain JavaScript file I'm going to require in worker threads I don't have to install anything it's just built-in so if we look at the docs here we can create a worker here and actually we can we nd structure it will do what they're doing here like this okay so we have worker bees main thread parent port and worker data then we'll just do like a simple if statement will say if is main thread we're just gonna log hello from the main thread else we're gonna log hello from the worker thread and like I mentioned I know nothing about this this is the first time I'm coding with it I believe if we run this code we're only gonna see a message from the main thread let's see because we haven't spun up any worker threads and we actually need to manually create a worker thread so if we go into this folder and we run this file we just see hello from the main thread so right now we're not spinning up any workers so we're only on the main thread now let's try to spin up some workers and I believe we'll use like this worker 3 let's see we'll talk about it in burr but basically crossing out in this scenario we're just gonna set the value to zero inside of the array that's the scenario how many iterations have to be done so the rest of the numbers are a hundred percent prime you just need to go through your entire list of numbers so your first step is to list out those numbers and you start from two like you have to start at a low number like a prime number otherwise your lowest number wouldn't be crossed out even though it's not prime so you do have to write out all of the numbers and then you have to go through all the numbers that you wrote out and when I say write out I mean we're gonna put all of those numbers inside of an array yeah so let's keep going so I have a worker I want to create a worker what do I do there's the worker class here so represents an independent JavaScript JavaScript thread and we can create an instance of it so if this is the main thread we're gonna create a worker we have a message channel and then we can post messages to it okay we're gonna do something like this arrow Tuscany's eratosthenes of serene thank you motivation you potentially could do this client-side with service workers but I don't I don't know about shared memory in the browser it's probably possible yeah okay let's try to do something like this so we're gonna create a worker and you'll notice that we're passing in filename so that this is a special variable in nodejs that refers to this specific file and ultimately what we're doing is we're creating a worker that's going to be running the code in this javascript file we could technically define our code in a separate file and start the worker from there but for now we're just going to start it up in this file so that way you can see hello from the worker thread and really I think that's all I'm gonna do we're just gonna create one worker and we should see hello from the worker thread let's go there we go so hello from the main thread and hello from the worker thread so we start the code up the main thread is running because when you start it up that's the main thread and then it starts up a worker thread that runs the code which says hello from the worker and we're good to go so in this scenario we're actually going to we're gonna have to predetermine the number of workers that we need so that way we can split up our problem is my CPU at 90% no no yet Danny Fritz is saying shared array buffer is chrome only I've been tracking a meta issue for re-enabling shared array buffer in Firefox for months on Firefox 4 months cool yeah and shared array buffer does exist in node.js so you can't use it there and hello code with Dinesh hello a GE gamer who whose name is Abdul Salam who's asking do I recommend if you're good at teaching start a YouTube channel absolutely let it be known that it takes a while to build a youtube following and to create a channel that people want to watch but we can never have too many programming tutorials on the web because everybody learns differently everybody teaches differently so you can find your audience that's that's my words of advice and hello muta soon would what to summon welcome can this be expanded to hardware like could you have multi-threading applied to processors having a master processor and in amount of slave processors I don't know if that question makes sense it might make sense but but ultimately multi multi-threading is like it's like a it's a software thing because threads the idea of a separate thread is really just an operating system-level thing it's not on the hardware itself so physical hardware I have one CPU on this thing and that one CPU has 4 cores now technically you could think of each of those cores as his own separate CPU but then it's software that's able to spin up multiple threads on that CPU no I don't I don't I don't know the nitty-gritty details like is that we're just gonna make this work and right now we have a very basic program and honestly in reading all of this and in reading this article I haven't found a program that's basic so I think we've made good progress so far we basically explained when this code runs it's on the main thread we spin up a worker just by saying new worker and it's gonna run on the worker thread so let's say we we actually have let's have four workers so I can say like this workers equals an array and I want to spin up for different worker threads so let's just do this while workers that linked is less than four we're going to spin up a new worker and then push it into the array so I'll say workers that push worker so now when I run this code we should actually see four worker threads let's see it happen boom and now I can use this to keep track of them now I can use this to post messages to them so we can see in here it uses ports so we're creating a channel the worker is posting a message on a given port and that's the way that they're going to communicate but cool so Dow democracy is asking about nodejs worker threads versus p.m. 2 p.m. 2 uses cluster so if we just look at you know J s cluster this is a built in module 2 node that allows you to potentially spin up multiple processes so a single instance of nodejs runs in a single thread to take advantage of multi-core systems the user will want to launch a cluster of processes to handle the load you would think clusters works on processes so each one is a separate process worker threads are threads threads exist within a single process that's as much as I'm gonna say about that any of the typed arrays and Holman shared array buffer cool yeah so we could create a shared array buffer of numbers a crude array buffer of strings that kind of thing if I write console.log under that statement will it trigger on both threads absolutely because ultimately I'm only running this code because it's the main thread but if I log right here wha that's gonna run for every single thing so from the main thread from the word in from each individual worker thread so there's nothing special about this code except for this if statement and the main key right here is when I say new worker I'm passing in the file name which is this specific file so every worker thread is going to run all of the JavaScript in this file but the worker thread because of the way this works it knows that it's not the main thread so it's not going to execute this code the way that we're going to use this is all of the code in here is like the orchestration code this is going to basically tell the worker threads what to do and then they're gonna communicate back to the main thread and then our code for the worker thread is going to go in here technically we could create a totally separate file called like worker and pass that file name in and then we wouldn't need this if-else statement but I think it'll be simpler to just leave it all in the same file okay and hello so welcome the drop game is probably broken let's reset it and there's a new leaderboard because now we have a an actual live chat ID and hello man on the run Cobras Nash says it's hard to grow as youtuber yep you just gotta make videos be nice to people all that good stuff yeah being able to take four core processors and add them together to get eight two four core processors now yeah that happens by default so your operating system is going to give you that many cores that you have access to you're gonna have you're gonna have access to eight cores and and actually server hardware does this they actually have multiple processors and a lot of times those processors can have like 30 cores on them you've if you've ever heard of the xeon processor that's what they use in server equipment and a lot of server racks or server server boards actually have two processors on them which gives them the combined total of those two but it's hardware that's making that happen probably I I need I need to get coding we've been here for 30 minutes mm-hmm not sure I don't really know I don't know of any real world real world using background workers why is this useful because we can take a problem and solve it faster by splitting it up in two separate tests um not that I know of but I would say honestly just try to understand this documentation because this this documentation is a lot better than other like documentation for other things that you might be using in the programming world and you have to get used to reading documentation so just trying to parse it and understand it I think is a good exercise and becoming a better programmer honestly though it kind of sucks that I have to say that like it would be better if there were a better alternative but and I don't really know if one hmm those threads are stored underneath the hood I'm just like is it I don't know anything just let me code this thing stop asking me questions I don't know I know nothing but the thing we're about to do is we're about to fill up an array of numbers with our worker thread so that's that's the plan so now we have to post messages back and forth between these things yeah and that's the problem we're solving yeah hello Alex welcome yeah so a multi-core processor with clusters which spins up separate processes threads are different there within a process yeah these CPUs have 128 cores the EP UIC yeah it's crazy hello Danielle you for sure very good okay let's go so now we need to post messages between threads and the first thing we're gonna we're gonna try to solve is we're going to fill an array with the numbers let's say 2 to 10,000 so for that we need a a shared array buffer I am gonna go to this article because he does talk about creating one let's see this thing so they're creating a new shared array buffer for an int 32 and we have the number of elements yeah so we're gonna do we're gonna do something like this and actually let's do this we're gonna let's first do everything on the main thread let's not spin up any workers and we can time and see how long it takes so what we need to do is on the main thread we're gonna create this array so let's say we want 10,000 elements like so we're gonna create a shared array buffer and so if you've ever programmed in the lower level programming language like C++ typically you have to do things like this you have to pre allocate your arrays so in JavaScript you just create the arrays you can change the length you can remove things but with something like in a shared array buffer you have to predefine the link so you have to in this case we're saying we're gonna find the number of bytes per element of an int 32 and we're going to multiply that times the number of elements so this is actually going to allocate memory for this array and basically we're saying how much space does each integer take up and how many of them do we need so we multiply them then we have that shared array buffer and we create an int 32 array with that shared array buffer so in 32 array is a typed array and that means we can only put integers into this array this isn't like a regular JavaScript array where you can put anything you want inside this one can only have in 32 numbers and the fact that we're using this shared array buffer makes it so that these separate threads all have access to that exact same memory so we're not going to be copying things back and forth when a worker thread is running its accessing the exact same memory and updating the exact same memory so that's why we're using a shared array buffer because for these separate worker threads they need to be able to access that memory as well ok so right now I'm not going to spin up any workers we're just going to create a for loop that goes from 0 all the way up to number of elements and then we're going to yeah so there we'll figure it out I honestly don't know I think we're gonna have to do something like this because here's the thing if we put this code up here every single worker thread would create their own array we don't want that we really just want to create the array on the main thread and then we're going to allow the worker threads to talk to that main thread okay so we go from I equals 0 up to number of elements and I mean really we actually actually want to start at one because one is technically a prime number right worker data okay we'll use worker data this thing in a second but I do want to just do it on the main thread first so what I should be able to do I think is just say array at that index equals a number so I'm gonna say array at I equals I and really I actually I want I minus one because we're starting at one I want it we're starting at the number one yes technically we could do this at I equals I plus one so what this should do is give us an array of length 10,000 first let's just do length 100 so we can actually log it out and yeah I guess but technically we should start it - so will say I plus two zero so it'll be too three four five yeah well the guys wants to so that way our array will start it - cool okay now after all this let's just log the array and we should see all the numbers from 2 up to 102 104 let's run it 101 so this was all done on the main thread we created this array of numbers great now what I want to do instead of creating this entire array on the main thread I want the worker threads to do part of the work so one worker thread is gonna fill the first section another worker thread is going to fill the next section and others gonna fill the next another is gonna fill the next and where this is useful is the fact that they're all going to be doing it at the same time so let's do that hmm I could do I equals two well I is less than number of elements plus two but I want to do array at I is a thing and thanks for the follow of monkey Martin one is not a prime number it's only divisible by itself and one right and thanks for the follow our square code what did free big 3d bugs do are they are they dropping Rick rolls does that what's happening ah I see that's good Thank You asset spark so one is not a prime number we're gonna start it to great if we go up to 10,000 this should actually compute like yeah finishes very fairly quickly let's add a zero its add another zero let's add another zero another zero it's at another zero is this actually working yeah outside of the bounds of the buffer so here we go so we have a really big number and you'll notice that that took a second instead of completing like instantly it takes a second right and I think this is a good spot let's actually time this someone mentioned consoled us in time is that a thing 1e seven for example yeah I'm using SETI black study dark if you do exclamation mark vs code you'll see a link to all my settings okay so let's do this we'll just say start time equals date dot now and then in time is here console that time end we're gonna do this a variety shows we're just gonna do a bunch of different things it's basically a Q&A stream but don't ask me any more questions cuz there's already a bunch of questions so we're just going to log in time - start time divided by a thousand seconds and we we won't log be right here we go that's not right do I need to divide by 10,000 I don't know I need to wrap this in parentheses so in time - start time divided by a thousand so to fill up an array with let's see 1 2 3 that's 1 million this a billion yes this is one billion so to fill up an array with 1 billion integers takes at least our my machine in a single thread 2.6 seconds roughly and hopefully we're gonna speed that up so using worker threads they're all gonna fill different sections of the array in parallel and hopefully we can get this done in / four times that's the plan that's why we're doing all of this okay there are performance hooks as add underscores to the number for readability Oh how do I do that oh yeah this is a new thing let's do that there we go 1 billion thank you we learned about that on a stream awhile back cool ok so now how do we split this up into multiple workers I don't know I don't really know how we're gonna figure that out khatola mentioned worker dado let's see what you knew this so an arbitrary JavaScript value that contains a clone of the data pass to the threads worker constructor the data is cloned as if using post message I don't know if we want to clone though because that would copy the data I'm gonna look back at this article to see how how this is doing things it is doing post message and then in the parent thread you we're changing it in both threads okay I see I think I don't know we're gonna figure this out yeah I think I think we actually want the worker data so let's do this for now like this is our Engel a billion elements and we're gonna find all primes less than a billion eventually we're gonna get there but right now let's just do a 100 to see it work and this is like super fast anyways like zero zero seconds basically but now whenever we spin up a worker thread we're actually going to pass in that data so what we saw here is you say the file name and then you can pass in worker data so our worker data here is going to be that array so the worker data is the array itself and ultimately we are going to not fill it up in the main thread but now that I'm when I spawn up a worker it has the worker data let's do this let's just say I have the worker data and that's going to just be worker or data like that so in the worker thread they have access to that array let's try it there we go so the main thread fills up the array spins up some threads that each have access to that same well it didn't mean to do that have access to that same array a billion they're not they shouldn't they're not doubles they're in thirty twos well let's see if I can share like yeah let's see if I can do it it works so that that array of a billion integers can be shared between all the workers so yeah it should only be one copy the the thing here was saying was that it's cloned but I think the idea of it being a shared array buffer means that it's actually not cloned it's talking to the same instance in memory well yeah okay so now we actually want our workers to fill it fill up the array so let's do this our workers will have some some metadata as well so not only do they have the array we'll give them the start and end of where they should fill up the array it's not quite that evil because these are literally separate threads and if you're using something like child exec and you were to post a message it literally copies the data from one thread to another this has access to the same thing in memory it's not really just passing by reference it's it's more than that I'll say that okay so part of the worker data I'm gonna pass in the array itself I'm gonna pass in the start of where they need to start filling okay yeah so it clones the reference sure so when we're splitting up this task we're gonna split it up into four so we need the number of elements per thread elements per thread and that's going to be number of elements divided by four and yeah so that should be fine and the start is actually going to be workers dot length times the number of elements per thread and the end is going to be the start plus the number worker number of elements per thread and so workers dot length no actually don't start plus number of elements per thread okay so for right now we're not gonna fill the array and we're not gonna log the time or anything like that I just want to make sure that each of my worker threads has the right start in in because we're splitting up this problem into four four different sets and I think this should work let's see so when it logs the worker data we should see actually I want to log start and end and really I couldn't I could number the the the worker so it knows where it's at let's just say let's call it index and this is just going to be workers that link so now in the worker data we'll start in the worker we're going to log worker data dot index worker data dot start and worker data dot in is the plant all right let's go number of elements for thread is not defined oh I have num elements per thread and thanks for the follow Christian and golly welcome to the show and thanks for the YouTube sub come on ok cool evil yeah so it's I would I wouldn't I wouldn't think about it this passed by reference though because that's like a totally different thing when you're working in single threaded JavaScript I don't know I'm probably wrong I don't know ok so and you'll notice these execute at different times right so it's funny because the yeah there it's executing in parallel so really the the first process is actually like the last one the log which is weird but the first process is gonna start at 0 and go up to 25 the second process is gonna start at 25 and go up to 50 the second one is going to start at 50 and go up to 75 and then the last one is gonna start at 75 and go up to a hundred and I think we can just be non-inclusive so they go up to and not including that number and so each thread will we'll start there cool so now that we have that we can actually fill the numbers so this for loop we're actually going to do in the worker thread right but instead of starting at zero it's going to start at where it needs to start and it's going to end at where it needs to end so the first process will start at zero the second process is gonna start at 25 we're gonna fill the array they're all working over there all try with an odd number yeah so we'll need to account for that but right now I think a billion is divisible by four isn't it so it's gonna fill up the array and when it's done we actually need to post a message so the main thread needs to be it needs to know when all the other threads are done but for now let's just do this let's just say log worker data dot index done like that and let's do it our is not the final yes so this now needs to be worker data apart okay so you'll notice they're finishing at different times because they're all running in parallel it's a beautiful thing but at this point they have all filled up the array and we need to post a message back to the main thread that's that when each one is done so we know that I don't think less than or equal to because we want to be non inclusive for the index because each one starts at the start and thanks for the follow of the salvini evil says to be explicit the object you created well as worker dated was clone the reference is it contained or clone is considered a shallow copy coppy I still disagree like there it's it's talking to the same thing in memory well we we couldn't clone like you wouldn't make sense to have a different copy for every single worker thread I'm still under the impression that they're working on the same instance of memory that's why worker threads are special that's I don't know I'm probably wrong and thanks for the follow bricks bricks yes okay so now we need to communicate how do we communicate we do that with posting a message how do we post a message I really don't know let's see message port instances of worker message port represent one end of an asynchronous two-way communication channel it can be used to transfer truncated structured data memory agents and other message ports between different workers so we create a message channel when they get a message they log the message cool so port 1 and port 2 so I would think port 1 would be what we use in the worker thread and then port 2 is what we would use in the sari port 1 is what we use in the main thread in port 2 is what we would use in the work in the no opposite port 2 in the main thread port 1 in the worker thread I think that's what we want let's also look at message channel so message channel also has ports but let's see message channel has no methods of its own yields an object with port 1 and two properties which refer to linked message port instances oh I see I say they're used in conjunction so we said we do want to create a message channel and I think we have that we don't it clones the array and keeps the original reference I still like I don't know like why would it but maybe maybe it's a different definition of Cologne that could be what it is I'm gonna I'm gonna go with that clones the reference to the array not the numbers I like that we're cloning the memory reference not the actual numbers inside of it okay so we have our message channel we're gonna create port 1 and port 2 ok evil then I totally agree I'm actually gonna rename these to make it nicer so port 1 that's the gonna be the thing that's listening for the messages so we're gonna call this the main port and in port 2 we're gonna call this the worker port so I basically just rename those two things but so the main port is going to listen for a message here and so we'll definitely set up the start time we don't have to say hello anymore we're gonna initialize the array and then we're gonna listen for messages so we're gonna say main port dot on message I can import parent port directly is that what I want [Laughter] create the channel imports in the loop let's see you hmm but they are spinning up separately let's just let's just see what happens I'm get like I've never done this before so I want to I want to see what happens if I do this and then in here we're gonna say work report dot post message and we're just going to send an object with a message property so we're gonna say message equals this so the this might not work I'm receiving conflicting accounts that this might not work but here's what here's what I'm thinking based on the docs that I just read we create this message channel and we have port 1 which is the thing that can receive messages in port 2 which is the thing that can send messages so here we're listening for those messages and actually I'm just going to gonna log it and then over here we're posting those messages in the message we're posting is that that thing is done so right now the only place where console logging is in the main thread let's see if this works it could completely and totally break oh we did a billion let's not do a billion lets or did we um no we just have number of elements a hundred and really workers can be defined inside of here all right sometimes broken I don't know if it's a battle client telephone but we can read about it let's say I'm just trying to figure all this stuff out while we do it from workers to shared memory mm-hmm it's about right typed array and then are we gonna see a diagram where they all point to the same memory instance we don't I don't feel like reading and thanks for the follow a Kenosha welcome Tony's stay positive for one take a break if you've been trying to solve problems for 10 hours take a break you're gonna feel better if you take a break and it gets better you know just you're burnt out right now take a break and hello Sandeep we are trying to work with shared workers in our threads in nodejs ok so evil says I need to create the channel imports within the loop and to actually just like pass those in in in my shared data is that the idea let's look at port 1 okay so creating a channel for communications oh I think yeah this is this is really all I need then I just want parent for it I actually don't want to create a a message channel I just want parent support because now we can just say parent port when it receives a message and then we're going to post a message to the parent port I believe I believe that's the way to go so bring in parent port post the message yeah and the second way is to create a message channel yeah so this is for this particular problem that I'm solving a parent port I believe is all that I need so I'm really curious why this is freezing now though just love the message oh because now it's listening for messages though I don't think this is actually working oh and for postmessage do I need to pass the name of the message I am listening for the message in the main thread so I'm saying for each worker so I actually need that I can just iterate over my workers array and watch for all of them being complete yeah I don't know when a worker changes their status to complete them you need to need to listen for a message for each worker for every worker in the worker message I do worker dot on does that really work work work work okay so instead of parent port let's do this I think okay that this kind of makes sense then so right here I'll say worker basically this but instead of parent port it's the worker okay let's see and Yuvraj with the superjet that says you've rush thank you so much you're us the workers have unionized and are on strike I believe it Danny I think that's exactly what's happening they basically just froze up my process there we go and for some reason they're all completing in the same order now oh no no there we go we get different orders cool all right that's what we needed I'm curious to look at the docks to see where we can find that parent port you okay I should have just looked at para port I was assuming like the message Channel stuff worked but so we have parent port it's sending a message to the the worker worker at once and then owner oh I see it's back and forth communication so we say worker dot post message we're sending that message to the worker this thing is sending it then back to the parent which then logs here I see okay so I think we're at this point we're good so now yeah I'm curious to see it as well so we're gonna we're gonna start with just a length 100 we're not going to do any of the timing stuff and right here let's just say we'll say let completed equals zero um let's actually create a variable for a number of threads I'm going to use that there we're going to use that there and then come when we get a message from them really let's just say completed true just just to be more accurate as to what's happening so this is going to post a message will say if message dot completed will say completed plus plus and then will say if completed dot length so completed is equal to number of threads then we are totally done will this work okay so we get that log now the moment of truth we need to log the array let's just do an array of length 10 so we can see what happens and then when we're totally done we should be able to just log her let's see what we get it's broken it's completely and totally broken so we do see 2 3 4 5 6 7 8 9 yes we split this into 4 we should have gotten each one gets 3 elements 10 does not evenly divide by 4 that's a good point so we should probably handle that let's do for now just to see it working there we go 2 3 4 5 6 7 8 9 10 11 12 13 all right but let's get it working for any number of elements yeah so for like 10 if we were to split that up the our logic right now says number of elements divided by number of threads we probably need two math top-floor that because now we have 10 divided by 4 and that's going to or we could we could math dot sealing it and then we'll get an out of bounds of error but let's just you this will just do math dot stealing a number of elements divided by the number of threads let's see what happens now 2 3 4 5 6 7 8 9 10 11 so that actually works curious what if we do like 11 elements that works too that works too let's just log this number of elements per thread is going to be three so if we have four threads that one gets three that one gets three that one gets three and then where the heck - twelve and thirteen come from why is this working oh well this seems to work okay now Yuvraj is asking what is message dot completed do so my worker thread is posting a message with completed as true technically this is the only message I'm posting so I really could just increment the number of completed threads 13 should give us 12 no it broke did I break it yes the maximum number there should be 12 why is it why is it 12 through 13 has 12 elements Oh started with two okay one two three four five six seven eight nine ten eleven twelve thirteen so that works all right it works but to Yuvraj's question debugging this is fun I feel like isn't it working yeah it's working no it's not a my one less than what I need I don't know but there's a question from Yuvraj ultimately the worker thread is posting a message I'm listening for that message here and then I know the number of threads that I spun up which is four in this case and so the moment that all of them have sent a message that's when we logged the array there wasn't us like a similar question make the number of workers dynamic depending on the number I don't need to I don't want to do that because my machine only has four cores so like you get diminishing returns by just increasing the number of threads use lodash to chunk the array into even sub arrays nah we can do this and thanks for the follow on ki Academy welcome yeah yeah so let's let's do this on each thread we're gonna log just the start the end and the index so index zero starts at zero and goes to four index one starts at four and goes to eight index two starts at eight and goes to twelve index three starts at twelve and goes to sixteen so in this scenario we said we had fourteen elements so the maximum possible number actually should only be 14 right yeah the end should be 14 so it's really just our our last one and do I have 14 elements let's also lock the length of the array yeah 14 why not I mean is is this done oh we could use ossep use Thank You / thank you bricks us for the number of threads let's do it so we're gonna require in OS and then we'll do OS CPUs it gives us an array of CPU info then we have a number of cores this is gonna break but I just want to log what we get back because if it's an array of course then we can just skip the length everything's gonna break yeah speed user how do I get the number of course I don't know really that didn't work we're gonna stick with hard coding for for now okay better to do with the remaining counter I think I fixed it right I use ceiling so I'm getting force so if I did math about Fleur would it break yeah so math top floor breaks it why can't I just use math not ceiling I mean this works right what's wrong with this please like oh oh and then this actually gives me back I see so this is each individual CPU like each core I see it's an array and technically I think it's giving you back eight because I have hyper-threading yeah we could actually split it up an eight so let's do that OS CPUs that way but that only gave us I don't know wrong wrong thing OS at cb2 - sadly there we go so now we split it up into eight separate processes 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 length is 15 please tell me am I wrong miss do you later Kat Olli yeah I was I was just I was confused because it gives me back the exact same information but I guess oh but this is saying it's an actual core weird okay but yeah that's fine I just do it part-time I have to go to work today and I'm basic I'm working from home but I'm still kind of late for work stealing is what is giving you the start end zero to four Forte even though you only had 14 elements yep I am a full-stack engineer forty-seven it kind of works right [Music] I have eight cores split up into you left okay I think it's working honestly so at this point we really can just do our timing so we're gonna we're gonna beef things up so instead of just 47 elements we're gonna do a billion elements and we're gonna time it so if you remember when we did it on a single on the main thread it took 2.6 seconds so now we're gonna do this yeah stealing rounds up I don't know I could probably figure out what's going on here so now what we're gonna do is when we're when we're done so we're gonna try to do a billion elements it's all happening in parallel and see there we go so um wait did this break 0 1 2 3 4 5 6 7 ok 7 yeah so 7 has the last chunk which is a billion so now we basically cut the time in half well less than that so with a single and let's do this if we do 1 thread see how long it takes and hello Sergio so one thread takes about 2.7 seconds to complete but when we spread split this problem up into in this case eight threads it takes one point one second to complete cool the last worker thread is dying that's possible and I think I think that's the scenario we're getting a read out of bounds that's curious that we're not seeing anything logged here let's just do a try-catch well no it's not dying because it's able to post the message that it's done because if it didn't post the done message we would never be complete but okay this is a very simple thing we've done here we filled in an array of a billion elements from the number from 2 all the way up to a billion and 1 or something and now we want to do the the prime algorithm I've been streaming for a long time a long time tram stars is asking how I how I move code so if you select it in vs code for me it's the Alt key and you can just press up and it'll move them it'll move it up like that Maebh well and it's technically option key on Mac it might be the same thing on Windows I don't know all right so let's let's see what it would take to now translate this problem into the sea of arrows Stephanies so we completed step one we wrote out all of the numbers now what we need to do it is all done windows - cool yeah I'm totally forgot I'm using like a Windows keyboard now what we would need to do is cool it works on Windows - is our main thread would keep track of what's the lowest number it would then ask all of the lower threads to mark off all the primes within them and then continue you interesting is the same okay but you know what I think I'm done with this you just watch me struggle for an hour figure out this worker thread API and we did at least one useful thing sort of it's probably not that useful but we filled an array of a billion elements with numbers I I will I will do this as an exercise for people watching I'm gonna push my code up to github but can you take the code that I've written and complete the sieve of error --air tough our toughest ease Tarasov Eratosthenes to find all prime numbers in this array of billion elements it's definitely possible we're gonna have to do it's gonna be a more complex message passing because you kind of have the main thread that keeps track of what's the lowest number and then all the worker threads will cross out all of the numbers that are divisible and then you repeat repeat until every number is either prime or is crossed out so it's it's an exercise for the reader I do want to get to one more thing I probably can only strain for about 20 minutes more I do have to get to work why not just slice the numbers what do you mean Agent Smith yeah thanks majestic I so that was fun exercise for the viewer implement the SIA of Aristophanes okay we're gonna do a quick vote do you want to see me build a proxy API so like an API that hides an API key that talks to some third party RPE API or do you want to see me build an electron app with react router let me know right now I'm actually I'm gonna do a poll proxy API hide third party API key on back-end or electron plus react with router example here we go please vote now you an option for everything I don't have enough time make sure you go to the the poll and vote and I just want to say shout out to evil d20 for all of your help with figuring things out and talking about shared memory and stuff and also shout out to cat Olli while people are voting I'll actually bring up khatola Sri PO as he mentioned he actually implement implemented quite a few algorithms using worker threads excuse me so let's actually see how he did Prime generation so we have our worker threads he's computing a billion of them as well we have our thread-count cool this is very similar to what I did we're adding all of the threads what is threads threads is it's a set okay cool that works and then we're iterating over them and then yeah each one is using this generate Primus function which takes in the start the range the min in the array cool so it's actually not that far off from what we've already coded that's pretty cool but check out this repo that khatola has made several other algorithms and data structures implemented using worker threads which is cool proxy proxy prospect proxy proxy proxy yeah yon this question actually came from Pranjal who's working with a reactor router and electron which is why we're gonna use react if we do do that and hello Purcell seer and hello eternal dev coder it's going good happy Friday all right I don't have much time so we're just gonna go with it and this this other question for a proxy API we'll save that for a future stream but right now we're gonna do a reactor out here with electron app with react router I think the main issue that Pranjal was happening is they really just couldn't get multiple routes working in an electron app so we'll at least get that working we'll have like a home page and about page with react inside of electron now are you watching right now Prince Joe you might be asleep but let's just search for electron react starter I do know that there's a github repo out there that uses yeah electron react boilerplate that might be it we could also do it from scratch um I really want more recent ones say like the past year let's see this has 13,000 stars this is probably the way to go but this is foundation for scalable cross-platform applications they have a website let's look at it yeah hot reloading incremental typing build optimizations cool kind of just clone it and you get a react app this is kind of like the create react app plus electron all-in-one an electron let's just talk about that first for people that don't know what it is it is a platform for building cross-platform applications it's a it's a not an SDK I guess for building cross-platform apps and basically your applications can be built using HTML CSS and JavaScript this thing you see over here on the right this is actually an electron app and is literally a desktop window that has view j/s running inside of it to run this and yeah so discord I think there's a list of popular apps so discord is built with electron slack is built with electron vs code atom all of these things are built with electron and basically it allows you to build cross-platform desktop applications that use web technologies inside of them it's pretty interesting they used the chromium browser and within the chromium browser they actually give you access to native node modules so you could basically write front-end code that's doing things like reading and writing to the file system or directly talking to a database which is pretty interesting a lot of people don't like it because it's like big and bulky yeah a bit bloated but great for a lot of things spotted spotify electron i would believe it and the cool thing is like discord if you go to discord in your browser it's like the exact same app is discord running on your desktop yeah and I believe atom was initially built with electron and then that like electron came out of atom I believe I think that's the way it worked like initially they built it so that they could make atom editor and then they pulled out the guts and made electron in thanks for the follow exelon shots electron forge let's look that up you Cody's asking what tech I used on my work we do full stack JavaScript so I do react with typescript on the front end and then node and Express on the back end the database differs depending on the applications that we're working on modify is built with that alright let's look at electron forge a complete tool for publishing and installing modern electron a petition x' create electron app cool cool yeah so there's a proton native which is it uses this thing called lib you I so Libby why is a native library come on go um this thing it's a native library for creating cross-platform desktop applications it's like a GUI library written in C so there are wrappers for this Libby y package which allow you to do things like use react or even view so proton native is basically under the hood there using Lib UI to create cross-platform desktop applications and then there is Guido I think it's called Guto a viewed oh there it is Guido is a different thing it's a waiter thing duck duck no but we don't put on but it uses Libya why under the hood okay regarding all this stuff we gotta we gotta we gotta write some code so let's make an electron app and I think where I'm gonna start is actually with this electron react boilerplate let's actually see does it come with react router by default yeah cuz with react router by default so uhm Pranjal isn't watching so I'm curious what problem they're having and honestly if they use the electron react boilerplate it would just work with react router by default so what I think I'm gonna do is I'm gonna create a basic electron up and try to get a react app working inside of it can we do that in 10 minutes probably not but we're gonna try because that's that's that's the trickier problem so let's just go to the electron site and we I believe they have like just a starter this is like the basic electron QuickStart that we can clone down and get running let's do that so we're gonna clone the electron quickstart and this is just a basic electron app let's install dependencies you when thanks for the follow shotgun 45 and hello visceral welcome to the show and thanks for the follow les shivery welcome okay so we install dependencies if we do npm start we should get a desktop application look at us so this is electron and what's the interesting thing is you can turn on the developer tools and you can actually see wait did I do the right thing oh here we go yeah you can actually see that this is actually a Chrome window running in here but you get access to some nodejs things so we have the node version that we're running the chromium version the electron version we could get access to like you like system information all that good stuff but this is an electron window and so what we want to do now is write a react app that's running inside of it so let's open up code three minutes and you can see how this thing is set up so you have your main JFS which actually creates the window so this gets browser window from electron and then creates one with that height and width and then it just loads this index dot HTML so this is the actual page that's loading right now what I think we'll do is we'll create a react app inside of this folder and part of our start script is to spin up web pack in the react app and then instead of pointing it at index dot HTML we're going to point it at localhost 3,000 there are other native things you can do in here so this this is actually using separate threads so this main j/s you can think of as like the main thread that has access to all things nodejs you then have the renderer process or the renderer thread I think it is processes but the renderer is what is running inside of your index dot HTML so this is a more sandbox environment that doesn't have access to everything for like a better security model but in your preload you can expose nodejs things that will be exists accessible in the riddler letters all that but here's what i'm gonna do i'm going to generate a react app like right in this folder i think hello Carlos the purpose of the drop thing is the game you're trying to drop on the center there say a renderer ten times render a renderer and do our ender ender ender and remembrance so this probably isn't the best way to go about things around to do this I'm gonna do a create react app I'm just gonna call it app and I'm going to generate it inside of this electron folder and that's true yeah we haven't gotten any super high leaderboard scores today and like I mentioned earlier there's definitely a better way so like for this electron react boiler plate they've taken the time to set all of this up in a single application with a single package.json what I'm doing right now is basically I'm gonna have two separate apps I'm gonna have my electron app whatnot with all of its dependencies and then I'm gonna have react that's running inside of that hold my caffeinated drink so the plan right now is in the main process instead of just loading index dot HTML we're actually gonna load a URL I believe you can do main window load URL in here we're just gonna pass HTTP colon slash slash localhost and then the port of our web pack server which is probably gonna be like three thousand two or something we'll figure that out when we start it up yeah drop game is a scam if you do exclamation mark vs code cut in hello cot exclamation mark vs code will give you a link to all my stuff so I'm using the font anonymous Pro and then the vs code theme is set e black I think it's called yeah Pavel is saying last time I tried custom react it was painful to setup with electron a provably faire verifier okay so now we actually have this separate app folder that is our react app let me just do an NPM start here and this is gonna start up our web pack server for react and this is running on port 3000 for cool so on port 3004 we have a react app running so what I'm gonna do now is I'm actually going to load that react app into my electron app so electron instead of loading a file we're actually just gonna load the thing on port 3004 and now our electron windows should just have a react app running inside of it so I go up one directory this is now the electron folder in p.m. start and now yeah there we go so we have an electron app with react running inside of it now right now this is really cumbersome because I have like two separate windows open I probably could use something like concurrent to run them both with the single package.json so let's do this like in the package.json here I believe I can add a post install script so after you do an NPM install in this folder will say like CD into app and run npm install and then is there a post start yeah and then post start we're gonna CD into app and run NPM start so now if we run NPM start in the electron folder it should go into the V our react app and start that up as well so let's see what happens so right now I'm in the electron folder gonna do NPM start that starts electron and then nothing so post oh yeah it actually worked after the process got killed I'll just do this so start and then concurrently do this so in in bash the the ampersand a single ampersand runs it as a background task it works if I reload I guess that's true because it needs to start up first so I would probably do this then start up the react at first and then start electron and I might do something like sleep for two seconds let's just say sleep for three seconds to make sure that it's actually started up and then start electron here will this work I don't know so that starts the react up oh and then I actually need to type yes because it's running on a different port alright let's see if I can No you know what we probably need like concurrently or something like that I guess if I helped great what I can't really answer that right now Matt because I got to go really soon so I'm trying to figure this out pipe yes yes oh okay MPM start echo-y piped into in themes start Hey so that opens it in the browser did it end up starting our electron app I don't think it did oh we told it to wait how many seconds three sleep how does that work in Linux one two three oh is this second woman two three okay we're sleeping for three thousand seconds that's why I'm curious if I can tell webpack to not open up just I just want to figure this out really quick react start don't open browser 50 minutes this is a really old issue on crate react up it looks like it got closed how do we do it browser none so I'm just gonna add that in my start script in my react app so in my react app in PM start will say browser none and then start 3x script all right this is the winner here we go we are going to start the react app and then in three seconds we get our electron app that has react running inside of it cool all right very good now what we need is we need react app running inside of react router running inside of this so we're gonna go into our react app which has a separate package JSON we're just going to install react router Dom the best responses to problems and threads are fixed it is this supposed to be a new emote my my back-end doesn't parse if you just added it to my channel my back-end doesn't parse it I can restart at them oh you told me to reload them which can someone tried Tirol to get there oh that's me trolled that's good it's good stuff l'm ow okay so we installed a react router Dom good to go so now in our react app we'll just set up some basic routes I'm so in a pas we're gonna bring in we need the router will call it no we need the browser out of router as router from react router Dom and typically the way people set that up is they actually do this in their main mounted component so I can do this in here and then we just wrap our app in a router and so right here we just say a router like that and then we put the app inside of it and so now anywhere in our application we can access things like link and switch and stuff like that so let's do this this is going to be no this is one component let's just put this in a separate file that says main page so we'll call this main is say main is just a nice little functional component that returns this stuff ooh that's not good don't do that that's good we'll need to bring the logo in here and we'll export this people for key fault main import react from react and then we need this logo actually in our main component now this is like this is like speed coding this is weird but yeah now we're gonna use switch and route so we have our main component and actually let's just create another component we'll just call this about Jes and again it's just a component we're gonna use how much of the 10 minutes do we have left probably like 30 minutes of the ten minutes left that's a joke I'm almost done this should just work honestly because we have react going so let's call this the about component about and then we're just going to put like an h2 right here that says about okay so we have two components we have main which is going to show the react app and then about which just says about so now we can use our our switch and our routes from react router Daum and also a link so right here let's just have a nice little div with two links so we'll have one link that goes to main I'll call this oh call it home this goes to slash we'll call that home and then that's separated by a link to about and then right below this div we just need a switch we'll wrap it in a div but we'll have our switch what the switch does is it decides which route to show and so we'll have a route will say path is slash and that's exact and the component is going to be the main component so we import our main component there and then we do the same thing with our about component but the path is going to be slash about and we'll load our about component so we imported that in there and then we also could add a redirect so if you load a path it's not valid just go back to the homepage so redirect to slash like that this should do it so wait did we actually start this up didn't mean to do that now we'll start it in the electron folder which should start up the react app and then it spins up this and look at that so we have home we have about we have home we have about we have done it we created an electron app with with routing that has react running inside of it true yeah the the drop game it expects it to be in markdown format and I think I have those being passed in as images instead of like markdown yeah yeah oh thank you thank you for the claps thank you very much [Laughter] I don't really know stars what problem he was having um oh he'll probably tune in at a later time and we can revisit this that's so good then you use IPC at all implodes no it should be fine so what's happening is our main our main process is actually it has this preload stuff so I could technically give it access to functions here so preload is getting loaded in here so mange is loads that so we should actually get access to those things in the in the in the reactor let's just see really quick what this is doing node version chromed version electron version and I can just do this really I can say window dot process equals process and then inside of the react app I should be able to log window dot process yeah like right here but let's just see if this works it should so we're just gonna have a simple little mounted thing so this function will only run once and right here we're just going to log window dot process and we'll open up the dev tools we go we see process we see that it has all these things like architecture it has the current working directory let's actually do this windowed processed CWD there we go so because the way the electron app is set up our react app now has access to those things that were exposed in in the pre render other preload function and we technically could install node modules and attach those to the window and use those inside of react as well this technically works this works but like I mentioned you should probably use some other boiler plate where it's all built in ready to go I don't know we're done we're done here let's let's go straight somebody we're probably gonna raid in stuff low because that's that's just what we like to do so if you are watching on youtube head on over to twitch twitch fat TV slash coding garden and we're gonna do a good old-fashioned raid this is a great emote you know what I need to do I need to make all of the twitch emote faces like pogchamp how's the pogchamp work pogchamp pogchamp is that good and then what are some other ones I can do like my own version of Kappa [Laughter] what are some other really popular one oh there's the like but not bad isn't there not like this yeah and not like this there's that one kappa kappa kappa who else oh yeah Lowell okay oh we need to do a good old-fashioned rate I think we'll just write in stuff laughs let's see what they're working on mug Rice Krispies that sounds great we're gonna raid in supply so oh and it's my sub anniversary too that's great so everyone made it over to twitch that's gonna make it do a good old-fashioned you can always clip it later I'm gonna raid in stuff fluff isn't a nice amazing human being he makes mug cakes recipes he writes code it's super super fun when you go into the chat you can type exclamation mark comfy and you'll get a nice piece of virtual furniture it's a good place so we're going over there thanks everyone for watching this was super fun and wherever you are in the world have a wonderful morning afternoon evening or night and until next time here's this [Music] you

Channel: Coding Garden

Views: 7,291

Rating: 4.9263802 out of 5

Keywords: qa, mechanical keyboard, coding, news, web development, tutorial, programming, live coding, frontend, live stream, beginner, full stack javascript, javascript, learning, educational, lesson, web, vscode, full stack, full stack web development, learn node.js, css, q&a, learn javascript, live streaming, html, node.js, backend, debugging

Id: 7Jef9PxxyU4

Length: 118min 53sec (7133 seconds)

Published: Fri Jan 24 2020