React Native Development on Windows
Subtitles
Show
[Music] hello everybody i'm mike cyril with co-founder kohlstag and before we move to our react native show podcast i have a quick announcement to say that might be something that is interesting to you today i'm looking for the best react native developers to join my team besides working on high-end software used by millions we also contribute to open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of react native crazy people about this technology and we can't wait to share our knowledge and experience with you and so if this sounds like something exciting don't wait anymore and join us it's great to be part of such a team check out the link and below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye hello everybody my name is mike and i'm studio at callstag and your host at react native show today the topic of today podcast is a desktop development with react native before we start let me welcome our guest bartosz klonowski that works with me at call stack and has been working on react native windows uh for over a year now and and bartos before we go to the topic of our podcast about we just start with a few words about yourself uh yeah sure so uh hello everybody uh so i am bartosz kolenski and uh during all these years i've been working on on many topics uh i've been working with many technologies and to be honest about uh the gui and the desktop especially desktop uh has always been something that i was really passionate about so to say so uh
while i was working on on many things uh i always try to develop my skills with the uh with the gui uh we would uh with all the technologies related to the desktop development uh so so finally i'm here at call stack uh trying to experiment a bit uh to developing all the all the things related to the desktop yeah and and and thank you for that and that's really amazing i have to say that uh when we were looking for uh for for somebody to kind of start this reactive windows initiative at call stack what was really exciting for me when i saw your application was that there was actually somebody who was really passionate about user interfaces and react native and you know experimenting in that area which is something very unusual and very very appreciated so that's amazing now um now now the topic of today's podcast is obviously as you as you may have um figured react native windows which is react native for essentially desktop development and this may sound a bit exotic at the first glance because react native is for ios and android mobile apps and and javascript for desktop development somebody could say why should i do it rather than going the traditional native way which is c plus plus or c sharp way so why should we even think about react native windows in terms of desktop development uh well if you look at it if you look how the how the javascript developed during this year's you will see that it's not as exotic as uh it appears to be because uh javascript will when i started to to learn some javascript it was years ago and i was writing some php uh web application and and i used javascript to to launch uh to launch the small script uh
through the html page that was about to uh to filter out some some options from the list and and that was uh that the javascript was at this year's uh used to to develop some some small simple scripts and uh right now it is used to to develop not not the simple scripts but with the whole web page of whole websites games or mobiles and right now it's it's not uh it's not that surprising that it expanded to to the desktop applications uh well if you look at other languages they also try to do the same uh there are some some examples of python is is is such example and but but it's it's the javascript that that's that succeeded about it uh so so it's not that much surprising as it can be uh well like like any other languages uh javascript has its advantages like like dynamic types abstraction syntax uh and many other of course uh some of these can also be considered as a disadvantage and it depends on how you look at it yeah but but the main point is that uh using javascript or more typescript allows you to focus more on the ui or on on developing some components that that will be visible out there on your application uh instead of you know architecting the calls layer by layer just to achieve enough abstraction to be able to connect it to your view safely uh so uh yeah let me compare it to uh to some experiences of mine because only previously when i was working on on some plugins to the uh to the tools that we were using in in the company uh in the previous company that i worked for uh i used the wpf remark and uh i was developing the this plugin this uh so to say it it was kind of like like another desktop application uh i use nvvm pattern and the thing is
that before i started to even uh developing the view i i had to develop all the all the layers uh all the things that they were necessary the models the view models and finally i was able to develop the view but uh currently i am working with the react native uh which which allows me to do like okay i will write one component and i will just display it i will just render it and and it's simple it it doesn't require to do any more like magic under the hood to be honest so so it's not that surprising that that javascript is used to to develop the the desktop application yeah and i have to say that when you when you gave this example at the beginning with how you started your journey with javascript uh that got me wondering whether we should start like a special meetup group for people that started with php and you know had to kind of embed a very small js snippet because that's also how i kind of interacted with it from jquery you know through more advanced patterns that i ended up with angular and that's how it was kind of evolving on my end as well so i have to say that i can definitely relate to that uh kind of background um so back to the back to the desktop applications like you said uh it it may seem super crazy at the beginning but when you start thinking about it is something that makes a lot of sense and actually when you look at the desktop development scene uh there's already electron which has been out there for for quite some time which is right now i guess the most popular alternative or option available if you want to use javascript for desktop development it is also what for example visual studio code has been built on top of and i guess others as well such as adam from github if anybody
remembers this editor it may be actually quite popular right now so i'm not sure if saying if anybody remembers was a good call for this one but um there was such a development as well in the past so i guess my question is how does react native windows compare against electron because i guess this is the main alternative and another framework is if there are any on the marker right now uh well uh electron and and react native uh both share the the same uh environment so to say uh but electron utilizes that the similar idea to like uh i would say develop web development in general because uh you create a view and and just just a logic behind it and that is great uh because uh you don't have to bother yourself with anything else right so but yeah but but what if you do what if you need to utilize some dls uh what if you would like to utilize some native layout uh and and native look just to get closer to a system that that your app is launched on uh what if you would uh like to access the api of your os uh will it still be possible with the electron if yes how easy will it be uh well do you have the environment for it and uh react native uh to be honest answers all those questions because uh if we look at the javascript once again um transfer changing uh even on embedded we had uh the bare metal the metal development uh well we still have some something some for some crucial systems uh but now we have for for example the wraps perry p uh with node.
js development and it may looks crazy as well because uh why would you use the javascript for for embedded systems but that seems to be okay because uh right now we can we can make a choice uh we can develop some javascript
js development and it may looks crazy as well because uh why would you use the javascript for for embedded systems but that seems to be okay because uh right now we can we can make a choice uh we can develop some javascript
application but we also remember that under the hood that there is a bare metal application uh which kind of like exposed the api that you are using uh well you you're using it above when you are developing the javascript code so and and the same idea is is with the react native windows and electron because uh if you think about your project if you think about all the layers that you will have and and and the purpose of your application you will see that there is a huge so to say difference between electron and react native windows because reactive windows allows you to make a choice whether or not you uh you will tackle with the with the native layer that is under the the hood of the react native windows framework yeah and i guess you know like you said it's all about the options and um when you were given this description in comparison uh it came to my mind that it's it's like choosing between react native or pwas kind of for mobile development if you look at react native windows and an electron and i don't know why you know just just just came this just just came to my mind that when i was starting desktop development uh when i was about to ride my uh native app when i was about to do mobile application first everybody said go do it natively because ios is fun and so on and so on so i was kind of confused whether to go with react native at first but when i was about to do native desktop application everybody said don't even go windows way it's like super messy and very hard so i guess i kind of faced this general impression that desktop development itself is kind of tricky so i guess having javascript layer might help with the accessibility of that yeah i think the same yeah so i'm happy that you are now kind
of going towards react native way that that is probably a bit easier than your previous experience in terms of like the development itself but um since react native windows is kind of early stage i guess there are still some hiccups but we'll get to that later anyways so uh so like i said um i guess just to wrap up uh because we kind of off top for a bit the the the like the main difference between reactive windows and electron like you said is is is that react native sort of utilizes the native layouts controls and and as a result you probably yeah you probably get closer to the native look and feel and you kind of get a native looking platform now uh i guess um how close we can get uh going that way to an application that would be done entirely in a native technology and i'm talking about things like when you build mobile app with react native somebody can say oh your navigation doesn't look native your animations are off and things like that so my like my question is how far from fully native experience we are going real native way uh yeah so uh well that the native development uh it will well so to say uh like is now easier when it comes to utilizing the native features the native layouts uh but um and and that the well if you are creating the application using the identity frameworks uh the all the controls all the features are like out of the box and and the with the react native windows uh there are only the core features and controls out there available currently but uh but well with the react native windows uh you will utilize that the core features and controls like i said but it's almost the same the same set of
controls which are already available with the react native for mobile uh almost because uh when microsoft implemented the react windows they created uh some native controls that are windows only but the plan is to export to third-party libraries so to say and community modules and well this is uh where this is where the difference is when it comes to the native and the react native windows comparison because uh some controls which are native for windows are available only as as modules libraries delivered by the community uh well and the the good thing is that the microsoft team is doing their best to ensure they are supported by still but still this is a third party module and uh is it's it's not like out of the box and there is no guarantee that it will work always correctly and uh and that it will always be maintained uh so just like with the react native for mobile that the fact is that uh that many libraries and the set of controls is so distributed across many libraries repos packages uh that you should consider that when you are writing with with native you will always have everything available while uh with when when writing with the react native windows you will have to consider uh downloading some package uh utilizing something that is not out of the box but you have to search a bit and and this is some so so to say a little drawback of reacting to windows because either you will develop it yourself by uh writing some c plus plus or c sharp code or you will try to use something that is uh let's say external yeah so um so i guess what you are saying is that the number of built-in controls to windows sdk specifically is just so huge that uh only a subset is supported
within the react native windows car and the rest is either for party or you just cannot do it yourself kind of stuff yes exactly that's what i was saying yeah yeah i guess and and and uh you know we have um we have discussed this with microsoft one day um like the big problem here is the ensuring that real native windows maintains like it's it's kind of tricky because react native windows has to be api compatible with react native on one hand which is mobile and has totally different components and on the of the second hand there's like a whole bunch of different windows components that we gotta support so um yeah fun stuff anyway uh you have already actually um you have uh briefly mentioned this in your answer uh when you say that when component is not available you gotta build it yourself by writing a bit of native code so i guess my question is um how you could describe real native windows development workflow to somebody who's been doing electron for example i guess while they they might be the same on a ui level in terms of building javascript uh building interface with javascript uh there might be things that are different like uh you know maybe setting up some native projects or what just like what are the differences if i'm let's say electron developer and i'll be kind of looking into read native windows what i'm signing up for well uh we have to remember that the the idea behind react native windows uh is is to make it perhaps uh like you said uh almost the same as react native when it comes to tools environment feel and and language uh so we have a node.
js and an npm uh and and the javascript or or typescript uh some
js and an npm uh and and the javascript or or typescript uh some
unique test frameworks um and generally that's it uh so so they are quite similar to to each other but uh while working uh with with reacting to windows your main focus should be on the javascript side not native uh this is what this is what react native is for to to handle the native side for you but it gives you the possibility to do it on your own uh sometimes you have to do it uh if you want to do something unusual or you would like to handle some some native functionality of your app and this is the main difference uh and the main uh concern that should be described to the to the electron uh developer the native site uh because when working with react native i launched visual code uh like the electron developer does and this is where i can develop react native components and debug the javascript code i can import other modules just like in the electron and i can use them but comparing to electron using using react native windows i can also open visual studio and check the code and check the native implementation of my app and debug it as well i can easily create my own modules or my own ui components with which i can export to javascript i can even modify the original way my app is rendered on the native side and of course if i know how to do it uh so the main difference is that uh that there is a native site um so so when using react native uh it is very useful too but not necessary it's very useful to uh develop some some native code yeah and um so it looks like for somebody who's been doing the electron uh it kind of feels like with electron you definitely need less experience or awareness of the underlying ecosystem it's more like
you're just writing javascript and you don't have to mess around with visual studio or kind of c plus plus code unless absolutely necessary i guess and that's definitely the downside of react native in general at least at a first touch but i feel like for the developer coming from traditional windows com development like you uh this should feel like home uh well it should yeah because uh the thing is that um well my answer would be that not really because uh when you are uh when when when i first started with the react native i was like okay then there is a native site i can do almost anything with it so so i will still develop some react native app and but i will do it my way so so i will use the native for it but this is uh so to say very bad idea and can lead you almost to the disaster because uh react native windows is is is like react native javascript is what you should focus on and the thing is that uh the more native you are writing uh within your react native windows application the less cross-platform it becomes so you you should so to say reduce the amount of the native approach to a minimum if you are writing the react native windows application uh your your skills of of of native development can help you with with developing some some nice fancy stuff within your react native windows app but it it's not something that should give you uh let's say comfort zone so to say yeah thank you for that explanation and uh while we are at it um you know we kind of reached uh to a conclusion that electron developers so javascript developers will face some confusion at first when they have to deal with native stuff and native
developers on the other hand will also need to kind of adjust their thinking and kind of the way their reasoning about the development as well so what would be their ideal set of skills to make react native windows developed by a breeze if native developers are not 100 ready and js developers 100 already then who are these amazing people in the world um that are you know like pros and experts with react native windows developer development yeah i i guess it can be quite confusing uh about the the the tech stack that uh that should be used here uh but it's quite uh simple to be honest because uh what is mostly required is that the developer the developer is already familiar with node.
js or npm environment uh he should be able to install a module should be able to or or should know how how to handle all the dependencies how to how to solve some problems with it uh of course javascript uh or or typescript to be honest uh because c plus plus and c sharp are statically typed uh strongly typed javascript uh from from that perspective is like another world uh so uh so if you know some javascript or you already have created some web script or written some some components uh then then you are good to go uh and of course the native side because the native side is something that uh can like i said previously uh can help you with with developing some some nice stuff around uh can help you to to debug something and can help you to to look under the hood of your application and and perhaps uh work on some optimization on on some performance issues something like that and and well last but not least uh c plus plus
js or npm environment uh he should be able to install a module should be able to or or should know how how to handle all the dependencies how to how to solve some problems with it uh of course javascript uh or or typescript to be honest uh because c plus plus and c sharp are statically typed uh strongly typed javascript uh from from that perspective is like another world uh so uh so if you know some javascript or you already have created some web script or written some some components uh then then you are good to go uh and of course the native side because the native side is something that uh can like i said previously uh can help you with with developing some some nice stuff around uh can help you to to debug something and can help you to to look under the hood of your application and and perhaps uh work on some optimization on on some performance issues something like that and and well last but not least uh c plus plus
though you can create your react native windows up with with c sharp that there is some some possibilities uh of course is the c plus plus language that is used uh for for native modules or third-party libraries development for for for obviously obvious reasons unfortunately uh so uh well so so in case of something is not working well or there is need to to modify something on the native side you should be good at c plus class because most uh of of uh libraries of tools that you will be using whether a third party or your own will be written in the c plus plus language yeah and uh just just out of curiosity because you said uh that the c plus class is used instead of c sharp for obvious reasons like what are the e's like just side topic because it always strikes me that you know c sharp seems to be like python 3 like the the new cool kid on the blog and still i see c plus plus being used everywhere it's not like in io on ios where everybody goes swift and objective c is now like you know the the legacy thing but here seems to be that c plus plus is immortal so like what's up with this uh yeah the uh i said that the reason is is quite obvious the thing is that um if you check that the documentation written by microsoft they mentioned that the compatibility of these two languages used for for the native modules development and the thing is that uh if you write the the code with the c it will definitely work within the c sharp library and and the thing is that on on the other hand when you are writing the c sharp library it will not work if your app is written in the c
so everyone is writing the the code with the c plus plus to ensure that whether you are the downloading or or so to say utilize this this library no no matter if if in the c-sharp app or the c-plus plus are up it will work so so that that is the reason yeah thank you and you know i have to say that uh c plus plus scares me a bit because i had it at my university a few years ago um like the main language you know like in poland he there is either university that uses java and university that uses c plus plus as a primary language and there's nothing else um maybe except for python in a few cases anyway we had the c plus plus classes and i remember the first time i stumbled upon you know those uh like pointer counting and keeping refs i was like coming from javascript world i was like what is going on here you know um and my first question was how do i remember to clean up after myself and i just couldn't imagine how how is this possible but after doing this for a few weeks it didn't it turned out to be a bit easier than uh i initially thought so um yeah c plus plus crazy stuff but this is what i love about react native there is never a boring time if you are tired of js just go see c plus plus way and you know yeah but but the thing is that right now uh in the c plus plus we have a smart pointers and and all the fancy stuff that uh handled the memory management for us so all we have to remember now is is some some tricky stuff around the smart pointers uh whether or not you should be using uh one or another uh and the syntax instead of uh how to handle your your memory issues i guess either i was at the university many years ago or we were not using the latest so they wanted to teach us the
basics like hey don't use this because it's it's you know it's not the primary feature which could be uh the truth okay uh c plus plus is a topic for another podcast maybe with some arduino stuff as well but let's go back to the rear native windows so i think we now have a pretty good understanding of how regular windows works and in case you still have some questions in your head around real native windows then please follow us on twitter call stack io and ask your questions about anything that comes to your mind as far as regular windows and we will try to answer them and that ends up the small um you know advertisement blog and we are back to the podcast so it's not over yet so now that we know how it works the question that i wanted to ask was how can i get started with it what's the first step uh well it's it's i have to say that it's very well described in the react into windows documentation uh because it's it's kind of like step by step just like when you are signing starting with the react native itself uh but but microsoft also developed a powershell script that will install all the required tools for you so so even that is already handled uh out there so but uh briefly uh to to start it's it's just like with the react native uh so so all you do is is the uh react native init command for for the command line interface and uh and and generally that's it but as a small audition all you have to do is is like uh initialize the react native windows project uh so it's it's like one additional command uh comparing to the react native uh so so to say startup yeah nice i am really happy to see that the getting started experience is quite easy uh like
i'm working on the cli from time to time when i have time and uh there is always every once in a while apr from microsoft team about adding something they need for the windows so i'm accepting these prs i'm helping them move forward but i never have the opportunity to actually check how this is using production so from your experience and description it sounds like the work they are doing and the prs that we are sending are actually working out nicely and that's amazing so using reg native windows i guess for desktop development sounds like a no-brainer and i guess everybody will agree that uh it's just easier to do it cross-platform way uh rather than starting natively so let's say there are also people listening to us that are working at businesses that have already native applications and um does it make sense for them to migrate to react native windows and if yes uh under what circumstances that actually makes sense uh well many apps already created other websites web apps uh have their desktop implementations as well uh like the github uh for example or or slack or or all the all the apps that that we know and that we are using uh so if if you are creating your app as an and starting to do or starting to develop a product you most likely will consider cross-platform solutions uh one user will complain if there is no mobile version or other like me for example prefer to use desktop version over the the web version i'm using windows os some other will prefer mac os some other will use linux and this is what we call cross platform and uh this is also something that uh that that react native windows uh helps you and and react
native of course helps you to solve uh so well you should take into consideration other platforms uh if you want to do it right you will end up with several different teams writing separate apps for mobile desktop web uh and that they will have to spend their time communicating the layout compatibility issues and that sounds insane uh so you will try to find something that will allow you to write the majority of your code once and reuse it on all other uh all on all those platforms and and devices that that you want to support and the react native and the react native windows helps you to do that uh to be honest and and the velocity of the development uh well it's it's kind of like uh it's it's it's it's better because you you are writing it once like i said and you can support all the all the layouts all the features that are uh that are required on your app and and you can be sure that they will be supported on all the platforms that you will be using yeah so um summing it up it feels like when you have a react native uh sorry when you have a native application um on windows it makes sense to migrate if you either plan to rule out new platforms and just do it all at once or maybe you have existing apps and you want to port some features or you just want to save your time which is the velocity as you said at the end is that is that am i getting this right or is there anything else that you wanted to mention all options that that you uh that you listed uh are are the ones that should be considered when you want to to
migrate to to cross-platform solution using the react native uh and and yeah that's that's all i guess okay okay cool so i guess you know i'm sold and i hope the people that are listening are also sold in that case we are happy that we have convinced you uh so i guess the last question uh is a bit of a follow-up to the previous one um and it's about the migration let's say i wanna migrate to react native windows and i have a meeting with my manager tomorrow or a co-founder and i need to sell it how would a migration look like do we need to stop everything for the time of the rewrite uh what's the best practice here if we want to roll out react native windows into our well i don't know if i already mentioned it but uh react native windows app stands on the uwp application under the hood uh there is a page holding the reference to the react native component and that is what you can use to extend your application with the with the content implemented using react native so in the end you have uh you have several options when it comes to either migration or or even implementing everything from scratch so you don't have to you you don't have to to to stop your business you don't have to do anything crazy like that uh you all you have to do is to just um or extend it uh using the the design features that that will allow you to to host another another components another layout and other features uh using the react native windows implemented using the javascript code and uh or you if you want to to migrate by uh writing everything everything from scratch uh then you well you should be able to uh
to to do it by utilizing some some some skills if you have layout in some you can definitely reuse it uh in your react native windows application and uh in my opinion react native windows is just uh perfect for a brownfield case uh well it's perfect as a brownfield example because it definitely uh well it it allows you to to do like to to utilize the the the layer that is already implemented and just uh create another layer that will that will use all the things that are already implemented so you don't have to uh while you you don't have to get rid of all the of the work that is already done yeah and um i came up to uh yeah and i came up to exactly the same conclusion when you said uh the the layout stuff it's it's actually truly unique that react native windows can reuse the example definitions of the layout that your native app already has so it's it's like it's not a revolution but an evolution it reuses the native platform that embraces it and that is perfect like you said for the brownfield cases so if you are wondering about doing it it's the time to do it right now so i guess that brings us to the end um and the impression that i have is that developing apps with javascript desktops with javascript is a really great way to target new devices and and offer your customers something new something unique which is a first class experience on their favorite platform and at the same time it doesn't necessarily mean uh acquiring new talent since it's already there of course the developers need to train a bit on the native side of things but if you already have windows native up i
assume you have people from both camps so you can just match them together and everybody happy so at the end of the day they can all work on the same platform so i guess uh the conclusion uh from this podcast is that whether you go with electron or react native windows that we have talked today about and that we recommend of course for obvious reasons it's great to have these options today whether you need something quick or whether you care about performance or whether you care about being ux compliant without compromises i guess that brings us to the end i said it already three times and i love extending those uh last final words uh bartosz thank you very much for you know this very inspiring discussion and um joining me today on the podcast and most importantly for all the effort that you have done in the previous months in the open source you can check out barto's work on the on his github and you know some issues that he have created on react native windows and uh i wish you best of luck on the further development in that area and looking forward to some desktop applications that you hopefully gonna make in the nearest future hope so thank you thank you thank you very much once again and um thank you everybody for staying with us uh for 40 minutes and uh don't forget to subscribe to us on whatever platform you are interacting and uh depending on that to also check out the other platforms we are on twitter we are on spotify youtube we on youtube we are actually with the video so if you are listening then you can also go for the video part as well tldr we are everywhere so just make sure you subscribe everywhere thank you very much once again and see you next time bye [Music]
Timestamps
Show
Guests
Bartosz Klonowski
Software Engineer
@
Callstack
[Music] hello everybody i'm mike cyril with co-founder kohlstag and before we move to our react native show podcast i have a quick announcement to say that might be something that is interesting to you today i'm looking for the best react native developers to join my team besides working on high-end software used by millions we also contribute to open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of react native crazy people about this technology and we can't wait to share our knowledge and experience with you and so if this sounds like something exciting don't wait anymore and join us it's great to be part of such a team check out the link and below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye hello everybody my name is mike and i'm studio at callstag and your host at react native show today the topic of today podcast is a desktop development with react native before we start let me welcome our guest bartosz klonowski that works with me at call stack and has been working on react native windows uh for over a year now and and bartos before we go to the topic of our podcast about we just start with a few words about yourself uh yeah sure so uh hello everybody uh so i am bartosz kolenski and uh during all these years i've been working on on many topics uh i've been working with many technologies and to be honest about uh the gui and the desktop especially desktop uh has always been something that i was really passionate about so to say so uh
while i was working on on many things uh i always try to develop my skills with the uh with the gui uh we would uh with all the technologies related to the desktop development uh so so finally i'm here at call stack uh trying to experiment a bit uh to developing all the all the things related to the desktop yeah and and and thank you for that and that's really amazing i have to say that uh when we were looking for uh for for somebody to kind of start this reactive windows initiative at call stack what was really exciting for me when i saw your application was that there was actually somebody who was really passionate about user interfaces and react native and you know experimenting in that area which is something very unusual and very very appreciated so that's amazing now um now now the topic of today's podcast is obviously as you as you may have um figured react native windows which is react native for essentially desktop development and this may sound a bit exotic at the first glance because react native is for ios and android mobile apps and and javascript for desktop development somebody could say why should i do it rather than going the traditional native way which is c plus plus or c sharp way so why should we even think about react native windows in terms of desktop development uh well if you look at it if you look how the how the javascript developed during this year's you will see that it's not as exotic as uh it appears to be because uh javascript will when i started to to learn some javascript it was years ago and i was writing some php uh web application and and i used javascript to to launch uh to launch the small script uh
through the html page that was about to uh to filter out some some options from the list and and that was uh that the javascript was at this year's uh used to to develop some some small simple scripts and uh right now it is used to to develop not not the simple scripts but with the whole web page of whole websites games or mobiles and right now it's it's not uh it's not that surprising that it expanded to to the desktop applications uh well if you look at other languages they also try to do the same uh there are some some examples of python is is is such example and but but it's it's the javascript that that's that succeeded about it uh so so it's not that much surprising as it can be uh well like like any other languages uh javascript has its advantages like like dynamic types abstraction syntax uh and many other of course uh some of these can also be considered as a disadvantage and it depends on how you look at it yeah but but the main point is that uh using javascript or more typescript allows you to focus more on the ui or on on developing some components that that will be visible out there on your application uh instead of you know architecting the calls layer by layer just to achieve enough abstraction to be able to connect it to your view safely uh so uh yeah let me compare it to uh to some experiences of mine because only previously when i was working on on some plugins to the uh to the tools that we were using in in the company uh in the previous company that i worked for uh i used the wpf remark and uh i was developing the this plugin this uh so to say it it was kind of like like another desktop application uh i use nvvm pattern and the thing is
that before i started to even uh developing the view i i had to develop all the all the layers uh all the things that they were necessary the models the view models and finally i was able to develop the view but uh currently i am working with the react native uh which which allows me to do like okay i will write one component and i will just display it i will just render it and and it's simple it it doesn't require to do any more like magic under the hood to be honest so so it's not that surprising that that javascript is used to to develop the the desktop application yeah and i have to say that when you when you gave this example at the beginning with how you started your journey with javascript uh that got me wondering whether we should start like a special meetup group for people that started with php and you know had to kind of embed a very small js snippet because that's also how i kind of interacted with it from jquery you know through more advanced patterns that i ended up with angular and that's how it was kind of evolving on my end as well so i have to say that i can definitely relate to that uh kind of background um so back to the back to the desktop applications like you said uh it it may seem super crazy at the beginning but when you start thinking about it is something that makes a lot of sense and actually when you look at the desktop development scene uh there's already electron which has been out there for for quite some time which is right now i guess the most popular alternative or option available if you want to use javascript for desktop development it is also what for example visual studio code has been built on top of and i guess others as well such as adam from github if anybody
remembers this editor it may be actually quite popular right now so i'm not sure if saying if anybody remembers was a good call for this one but um there was such a development as well in the past so i guess my question is how does react native windows compare against electron because i guess this is the main alternative and another framework is if there are any on the marker right now uh well uh electron and and react native uh both share the the same uh environment so to say uh but electron utilizes that the similar idea to like uh i would say develop web development in general because uh you create a view and and just just a logic behind it and that is great uh because uh you don't have to bother yourself with anything else right so but yeah but but what if you do what if you need to utilize some dls uh what if you would like to utilize some native layout uh and and native look just to get closer to a system that that your app is launched on uh what if you would uh like to access the api of your os uh will it still be possible with the electron if yes how easy will it be uh well do you have the environment for it and uh react native uh to be honest answers all those questions because uh if we look at the javascript once again um transfer changing uh even on embedded we had uh the bare metal the metal development uh well we still have some something some for some crucial systems uh but now we have for for example the wraps perry p uh with node.
js development and it may looks crazy as well because uh why would you use the javascript for for embedded systems but that seems to be okay because uh right now we can we can make a choice uh we can develop some javascript
js development and it may looks crazy as well because uh why would you use the javascript for for embedded systems but that seems to be okay because uh right now we can we can make a choice uh we can develop some javascript
application but we also remember that under the hood that there is a bare metal application uh which kind of like exposed the api that you are using uh well you you're using it above when you are developing the javascript code so and and the same idea is is with the react native windows and electron because uh if you think about your project if you think about all the layers that you will have and and and the purpose of your application you will see that there is a huge so to say difference between electron and react native windows because reactive windows allows you to make a choice whether or not you uh you will tackle with the with the native layer that is under the the hood of the react native windows framework yeah and i guess you know like you said it's all about the options and um when you were given this description in comparison uh it came to my mind that it's it's like choosing between react native or pwas kind of for mobile development if you look at react native windows and an electron and i don't know why you know just just just came this just just came to my mind that when i was starting desktop development uh when i was about to ride my uh native app when i was about to do mobile application first everybody said go do it natively because ios is fun and so on and so on so i was kind of confused whether to go with react native at first but when i was about to do native desktop application everybody said don't even go windows way it's like super messy and very hard so i guess i kind of faced this general impression that desktop development itself is kind of tricky so i guess having javascript layer might help with the accessibility of that yeah i think the same yeah so i'm happy that you are now kind
of going towards react native way that that is probably a bit easier than your previous experience in terms of like the development itself but um since react native windows is kind of early stage i guess there are still some hiccups but we'll get to that later anyways so uh so like i said um i guess just to wrap up uh because we kind of off top for a bit the the the like the main difference between reactive windows and electron like you said is is is that react native sort of utilizes the native layouts controls and and as a result you probably yeah you probably get closer to the native look and feel and you kind of get a native looking platform now uh i guess um how close we can get uh going that way to an application that would be done entirely in a native technology and i'm talking about things like when you build mobile app with react native somebody can say oh your navigation doesn't look native your animations are off and things like that so my like my question is how far from fully native experience we are going real native way uh yeah so uh well that the native development uh it will well so to say uh like is now easier when it comes to utilizing the native features the native layouts uh but um and and that the well if you are creating the application using the identity frameworks uh the all the controls all the features are like out of the box and and the with the react native windows uh there are only the core features and controls out there available currently but uh but well with the react native windows uh you will utilize that the core features and controls like i said but it's almost the same the same set of
controls which are already available with the react native for mobile uh almost because uh when microsoft implemented the react windows they created uh some native controls that are windows only but the plan is to export to third-party libraries so to say and community modules and well this is uh where this is where the difference is when it comes to the native and the react native windows comparison because uh some controls which are native for windows are available only as as modules libraries delivered by the community uh well and the the good thing is that the microsoft team is doing their best to ensure they are supported by still but still this is a third party module and uh is it's it's not like out of the box and there is no guarantee that it will work always correctly and uh and that it will always be maintained uh so just like with the react native for mobile that the fact is that uh that many libraries and the set of controls is so distributed across many libraries repos packages uh that you should consider that when you are writing with with native you will always have everything available while uh with when when writing with the react native windows you will have to consider uh downloading some package uh utilizing something that is not out of the box but you have to search a bit and and this is some so so to say a little drawback of reacting to windows because either you will develop it yourself by uh writing some c plus plus or c sharp code or you will try to use something that is uh let's say external yeah so um so i guess what you are saying is that the number of built-in controls to windows sdk specifically is just so huge that uh only a subset is supported
within the react native windows car and the rest is either for party or you just cannot do it yourself kind of stuff yes exactly that's what i was saying yeah yeah i guess and and and uh you know we have um we have discussed this with microsoft one day um like the big problem here is the ensuring that real native windows maintains like it's it's kind of tricky because react native windows has to be api compatible with react native on one hand which is mobile and has totally different components and on the of the second hand there's like a whole bunch of different windows components that we gotta support so um yeah fun stuff anyway uh you have already actually um you have uh briefly mentioned this in your answer uh when you say that when component is not available you gotta build it yourself by writing a bit of native code so i guess my question is um how you could describe real native windows development workflow to somebody who's been doing electron for example i guess while they they might be the same on a ui level in terms of building javascript uh building interface with javascript uh there might be things that are different like uh you know maybe setting up some native projects or what just like what are the differences if i'm let's say electron developer and i'll be kind of looking into read native windows what i'm signing up for well uh we have to remember that the the idea behind react native windows uh is is to make it perhaps uh like you said uh almost the same as react native when it comes to tools environment feel and and language uh so we have a node.
js and an npm uh and and the javascript or or typescript uh some
js and an npm uh and and the javascript or or typescript uh some
unique test frameworks um and generally that's it uh so so they are quite similar to to each other but uh while working uh with with reacting to windows your main focus should be on the javascript side not native uh this is what this is what react native is for to to handle the native side for you but it gives you the possibility to do it on your own uh sometimes you have to do it uh if you want to do something unusual or you would like to handle some some native functionality of your app and this is the main difference uh and the main uh concern that should be described to the to the electron uh developer the native site uh because when working with react native i launched visual code uh like the electron developer does and this is where i can develop react native components and debug the javascript code i can import other modules just like in the electron and i can use them but comparing to electron using using react native windows i can also open visual studio and check the code and check the native implementation of my app and debug it as well i can easily create my own modules or my own ui components with which i can export to javascript i can even modify the original way my app is rendered on the native side and of course if i know how to do it uh so the main difference is that uh that there is a native site um so so when using react native uh it is very useful too but not necessary it's very useful to uh develop some some native code yeah and um so it looks like for somebody who's been doing the electron uh it kind of feels like with electron you definitely need less experience or awareness of the underlying ecosystem it's more like
you're just writing javascript and you don't have to mess around with visual studio or kind of c plus plus code unless absolutely necessary i guess and that's definitely the downside of react native in general at least at a first touch but i feel like for the developer coming from traditional windows com development like you uh this should feel like home uh well it should yeah because uh the thing is that um well my answer would be that not really because uh when you are uh when when when i first started with the react native i was like okay then there is a native site i can do almost anything with it so so i will still develop some react native app and but i will do it my way so so i will use the native for it but this is uh so to say very bad idea and can lead you almost to the disaster because uh react native windows is is is like react native javascript is what you should focus on and the thing is that uh the more native you are writing uh within your react native windows application the less cross-platform it becomes so you you should so to say reduce the amount of the native approach to a minimum if you are writing the react native windows application uh your your skills of of of native development can help you with with developing some some nice fancy stuff within your react native windows app but it it's not something that should give you uh let's say comfort zone so to say yeah thank you for that explanation and uh while we are at it um you know we kind of reached uh to a conclusion that electron developers so javascript developers will face some confusion at first when they have to deal with native stuff and native
developers on the other hand will also need to kind of adjust their thinking and kind of the way their reasoning about the development as well so what would be their ideal set of skills to make react native windows developed by a breeze if native developers are not 100 ready and js developers 100 already then who are these amazing people in the world um that are you know like pros and experts with react native windows developer development yeah i i guess it can be quite confusing uh about the the the tech stack that uh that should be used here uh but it's quite uh simple to be honest because uh what is mostly required is that the developer the developer is already familiar with node.
js or npm environment uh he should be able to install a module should be able to or or should know how how to handle all the dependencies how to how to solve some problems with it uh of course javascript uh or or typescript to be honest uh because c plus plus and c sharp are statically typed uh strongly typed javascript uh from from that perspective is like another world uh so uh so if you know some javascript or you already have created some web script or written some some components uh then then you are good to go uh and of course the native side because the native side is something that uh can like i said previously uh can help you with with developing some some nice stuff around uh can help you to to debug something and can help you to to look under the hood of your application and and perhaps uh work on some optimization on on some performance issues something like that and and well last but not least uh c plus plus
js or npm environment uh he should be able to install a module should be able to or or should know how how to handle all the dependencies how to how to solve some problems with it uh of course javascript uh or or typescript to be honest uh because c plus plus and c sharp are statically typed uh strongly typed javascript uh from from that perspective is like another world uh so uh so if you know some javascript or you already have created some web script or written some some components uh then then you are good to go uh and of course the native side because the native side is something that uh can like i said previously uh can help you with with developing some some nice stuff around uh can help you to to debug something and can help you to to look under the hood of your application and and perhaps uh work on some optimization on on some performance issues something like that and and well last but not least uh c plus plus
though you can create your react native windows up with with c sharp that there is some some possibilities uh of course is the c plus plus language that is used uh for for native modules or third-party libraries development for for for obviously obvious reasons unfortunately uh so uh well so so in case of something is not working well or there is need to to modify something on the native side you should be good at c plus class because most uh of of uh libraries of tools that you will be using whether a third party or your own will be written in the c plus plus language yeah and uh just just out of curiosity because you said uh that the c plus class is used instead of c sharp for obvious reasons like what are the e's like just side topic because it always strikes me that you know c sharp seems to be like python 3 like the the new cool kid on the blog and still i see c plus plus being used everywhere it's not like in io on ios where everybody goes swift and objective c is now like you know the the legacy thing but here seems to be that c plus plus is immortal so like what's up with this uh yeah the uh i said that the reason is is quite obvious the thing is that um if you check that the documentation written by microsoft they mentioned that the compatibility of these two languages used for for the native modules development and the thing is that uh if you write the the code with the c it will definitely work within the c sharp library and and the thing is that on on the other hand when you are writing the c sharp library it will not work if your app is written in the c
so everyone is writing the the code with the c plus plus to ensure that whether you are the downloading or or so to say utilize this this library no no matter if if in the c-sharp app or the c-plus plus are up it will work so so that that is the reason yeah thank you and you know i have to say that uh c plus plus scares me a bit because i had it at my university a few years ago um like the main language you know like in poland he there is either university that uses java and university that uses c plus plus as a primary language and there's nothing else um maybe except for python in a few cases anyway we had the c plus plus classes and i remember the first time i stumbled upon you know those uh like pointer counting and keeping refs i was like coming from javascript world i was like what is going on here you know um and my first question was how do i remember to clean up after myself and i just couldn't imagine how how is this possible but after doing this for a few weeks it didn't it turned out to be a bit easier than uh i initially thought so um yeah c plus plus crazy stuff but this is what i love about react native there is never a boring time if you are tired of js just go see c plus plus way and you know yeah but but the thing is that right now uh in the c plus plus we have a smart pointers and and all the fancy stuff that uh handled the memory management for us so all we have to remember now is is some some tricky stuff around the smart pointers uh whether or not you should be using uh one or another uh and the syntax instead of uh how to handle your your memory issues i guess either i was at the university many years ago or we were not using the latest so they wanted to teach us the
basics like hey don't use this because it's it's you know it's not the primary feature which could be uh the truth okay uh c plus plus is a topic for another podcast maybe with some arduino stuff as well but let's go back to the rear native windows so i think we now have a pretty good understanding of how regular windows works and in case you still have some questions in your head around real native windows then please follow us on twitter call stack io and ask your questions about anything that comes to your mind as far as regular windows and we will try to answer them and that ends up the small um you know advertisement blog and we are back to the podcast so it's not over yet so now that we know how it works the question that i wanted to ask was how can i get started with it what's the first step uh well it's it's i have to say that it's very well described in the react into windows documentation uh because it's it's kind of like step by step just like when you are signing starting with the react native itself uh but but microsoft also developed a powershell script that will install all the required tools for you so so even that is already handled uh out there so but uh briefly uh to to start it's it's just like with the react native uh so so all you do is is the uh react native init command for for the command line interface and uh and and generally that's it but as a small audition all you have to do is is like uh initialize the react native windows project uh so it's it's like one additional command uh comparing to the react native uh so so to say startup yeah nice i am really happy to see that the getting started experience is quite easy uh like
i'm working on the cli from time to time when i have time and uh there is always every once in a while apr from microsoft team about adding something they need for the windows so i'm accepting these prs i'm helping them move forward but i never have the opportunity to actually check how this is using production so from your experience and description it sounds like the work they are doing and the prs that we are sending are actually working out nicely and that's amazing so using reg native windows i guess for desktop development sounds like a no-brainer and i guess everybody will agree that uh it's just easier to do it cross-platform way uh rather than starting natively so let's say there are also people listening to us that are working at businesses that have already native applications and um does it make sense for them to migrate to react native windows and if yes uh under what circumstances that actually makes sense uh well many apps already created other websites web apps uh have their desktop implementations as well uh like the github uh for example or or slack or or all the all the apps that that we know and that we are using uh so if if you are creating your app as an and starting to do or starting to develop a product you most likely will consider cross-platform solutions uh one user will complain if there is no mobile version or other like me for example prefer to use desktop version over the the web version i'm using windows os some other will prefer mac os some other will use linux and this is what we call cross platform and uh this is also something that uh that that react native windows uh helps you and and react
native of course helps you to solve uh so well you should take into consideration other platforms uh if you want to do it right you will end up with several different teams writing separate apps for mobile desktop web uh and that they will have to spend their time communicating the layout compatibility issues and that sounds insane uh so you will try to find something that will allow you to write the majority of your code once and reuse it on all other uh all on all those platforms and and devices that that you want to support and the react native and the react native windows helps you to do that uh to be honest and and the velocity of the development uh well it's it's kind of like uh it's it's it's it's better because you you are writing it once like i said and you can support all the all the layouts all the features that are uh that are required on your app and and you can be sure that they will be supported on all the platforms that you will be using yeah so um summing it up it feels like when you have a react native uh sorry when you have a native application um on windows it makes sense to migrate if you either plan to rule out new platforms and just do it all at once or maybe you have existing apps and you want to port some features or you just want to save your time which is the velocity as you said at the end is that is that am i getting this right or is there anything else that you wanted to mention all options that that you uh that you listed uh are are the ones that should be considered when you want to to
migrate to to cross-platform solution using the react native uh and and yeah that's that's all i guess okay okay cool so i guess you know i'm sold and i hope the people that are listening are also sold in that case we are happy that we have convinced you uh so i guess the last question uh is a bit of a follow-up to the previous one um and it's about the migration let's say i wanna migrate to react native windows and i have a meeting with my manager tomorrow or a co-founder and i need to sell it how would a migration look like do we need to stop everything for the time of the rewrite uh what's the best practice here if we want to roll out react native windows into our well i don't know if i already mentioned it but uh react native windows app stands on the uwp application under the hood uh there is a page holding the reference to the react native component and that is what you can use to extend your application with the with the content implemented using react native so in the end you have uh you have several options when it comes to either migration or or even implementing everything from scratch so you don't have to you you don't have to to to stop your business you don't have to do anything crazy like that uh you all you have to do is to just um or extend it uh using the the design features that that will allow you to to host another another components another layout and other features uh using the react native windows implemented using the javascript code and uh or you if you want to to migrate by uh writing everything everything from scratch uh then you well you should be able to uh
to to do it by utilizing some some some skills if you have layout in some you can definitely reuse it uh in your react native windows application and uh in my opinion react native windows is just uh perfect for a brownfield case uh well it's perfect as a brownfield example because it definitely uh well it it allows you to to do like to to utilize the the the layer that is already implemented and just uh create another layer that will that will use all the things that are already implemented so you don't have to uh while you you don't have to get rid of all the of the work that is already done yeah and um i came up to uh yeah and i came up to exactly the same conclusion when you said uh the the layout stuff it's it's actually truly unique that react native windows can reuse the example definitions of the layout that your native app already has so it's it's like it's not a revolution but an evolution it reuses the native platform that embraces it and that is perfect like you said for the brownfield cases so if you are wondering about doing it it's the time to do it right now so i guess that brings us to the end um and the impression that i have is that developing apps with javascript desktops with javascript is a really great way to target new devices and and offer your customers something new something unique which is a first class experience on their favorite platform and at the same time it doesn't necessarily mean uh acquiring new talent since it's already there of course the developers need to train a bit on the native side of things but if you already have windows native up i
assume you have people from both camps so you can just match them together and everybody happy so at the end of the day they can all work on the same platform so i guess uh the conclusion uh from this podcast is that whether you go with electron or react native windows that we have talked today about and that we recommend of course for obvious reasons it's great to have these options today whether you need something quick or whether you care about performance or whether you care about being ux compliant without compromises i guess that brings us to the end i said it already three times and i love extending those uh last final words uh bartosz thank you very much for you know this very inspiring discussion and um joining me today on the podcast and most importantly for all the effort that you have done in the previous months in the open source you can check out barto's work on the on his github and you know some issues that he have created on react native windows and uh i wish you best of luck on the further development in that area and looking forward to some desktop applications that you hopefully gonna make in the nearest future hope so thank you thank you thank you very much once again and um thank you everybody for staying with us uh for 40 minutes and uh don't forget to subscribe to us on whatever platform you are interacting and uh depending on that to also check out the other platforms we are on twitter we are on spotify youtube we on youtube we are actually with the video so if you are listening then you can also go for the video part as well tldr we are everywhere so just make sure you subscribe everywhere thank you very much once again and see you next time bye [Music]
Show Transcript
The episode explores React Native for Windows. Mike and Bartosz reveal why we should think about React Native Windows in terms of desktop development.
At the beginning, they talk about JavaScript and other languages used to develop desktop applications: what’s made them an obvious choice for desktop so far, what they let you do, and what advantages or disadvantages they may have.
Topics
React Native Windows and Electron
Mike and his guest move on to compare React Native Windows with other frameworks popular in the desktop development scene, especially Electron. Bartosz explains the difference between React Native and Electron, and points out the key benefits of React Native Windows.
Later on, the episode focuses on the development workflow from the perspective of an experienced Electron developer and Windows developer. Bartosz outlines an ideal set of skills that would make development with React Native Windows a breeze.
Starting your first project
Last but not least, Bartosz gives practical advice on how to get started with React Native for Windows, and when and how to migrate to React Native Windows once you have a native application.
Bringing React Native to desktop platforms?
We support teams in delivering native-quality desktop apps with React Native.
Let’s chat
//
Insights
Learn more about
Desktop
Here's everything we published recently on this topic.
//
Desktop
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
Desktop App Development
Develop powerful cross-platform desktop applications that work across Linux, Windows and Mac.
React Native Development
Hire expert React Native engineers to build, scale, or improve your app, from day one to production.
