Brownfield Development With React Native
Subtitles
Show
[Music] hello everybody and welcome to the react lady show today our topic is react native brownfield and everything related to it just before we start if you want to stay up to date on everything as far as react native goes as well as be notified every time we publish a new release of this podcast please make sure to follow us on our twitter facebook and other social media accounts everything is in the link of the podcast and that way you will be always on the bleeding edge of everything react native so with that in mind i guess we can start with our podcast today as i said the topic is react native brownfield and today with me there is a very special guest mike who jack that works with me at call stack hello mike it's nice to have you today hi mike it's good to see you yeah yeah so let me start from a quick introduction of myself uh i'm miho and i've been working as a head of delivery at callstack and except for managers staff i do some react native and native mobile development and i'm especially passionate about combining those two words in a way that we call a brownfield development and i guess this is what i'm why i'm here today yes well yes uh that is the primary reason but also it's good to see you as you said uh because in this pandemic world uh you know we are working remotely all the time and even though uh the ones that are watching us can't tell it uh mike actually is sitting in the next room so uh at least we had this opportunity to pass uh by ourselves uh on the you know outside of these rooms um anyway i'm glad that you mentioned the brownfield
development or combining these two worlds together since as you said this is what we are going to be talking about today uh it's you know definitely a really popular keyword in a really popular term the react native itself um now the big question is what does it actually mean in practice this brownfield development that's a very good question i would say uh so i i think it has its roots in civil engineering and um brownfields uh is brought to the term in in this domain is characterized by working on a land that's already developed or under development and it means that any new work has to consider structures that are already in place and if we take this to software development we can think of creating something on top of existing software it offers a place to start with predetermined direction and allows us to reuse existing code and and features and this implies the need to understand existing systems and environment on which the application needs to be built um yeah and of course presence of existing legacy code might impact final costs since dealing with it uh naturally my slow down whole development process as you might need to refactor a portion of an existing app and i think also the entry barrier is bigger than it would be if you would start from scratch uh and in in our nomenclature uh brownfield applications in in react native obviously are the ones that are built on top of existing native applications and as react native is relatively new technology and and and has
and many applications were built either before it was published or before it was major enough and now i feel like like everything's changed in this uh area and react native is one of the best if not the best choice for uh cross-platform development um especially in in such environments so for broad-field environments yeah that definitely makes sense to be honest i didn't know that uh you know brownfield had its roots in the uh civil engineering that's something very interesting to learn about now uh you know i guess if we will continue this analogy that there is also a different term which is called greenfield development that is also used in diarrhea and now i guess before we go into the benefits and problems and challenges with brownfield development react native how about we just stop for a second and uh you know explore what greenfield development means just so that everybody is on the same page let's say sure sure um so greenfield term describes um a project that uh will be built on a green land uh so it means that there is no existing buildings no infrastructure or nor anything that could impact the work so taking this to software development um we can think of a greenfield application as something that we built from the scratch in a fresh environment and this gives us design flexibility and we can set everything the way we want and we have an opportunity to choose the most convenient tech stack so basically there are no dependencies on existing structure uh or or anything
that's already created and of course it's it's a double-edged sword i would say uh as system has to be built from the scratch it can be quite time consuming also versatility of development options might impact the lack of clear understanding on what approach to take which direction to follow so in brownfield we we have this predefined direction and uh in greenfield we do not uh which could be good but could be bad on the other hand uh so in in react native uh context we can think of a greenfield application as a app that is as i said built from the scratch so you can either choose a react native cli or expo initialize your project uh choose the text type you want choose the tools you'd like to uh work with and start whole development process okay okay cool so that so so that makes um that makes that makes a lot of sense and um it looks like greenfield development is essentially what what what most of us are doing on a daily basis uh either we use regulative cli to edit a new project or we use expo that is a greenfield uh project because there is nothing that is you know sort of implying these uh requirements um which is present in the brownfield otherwise and and this leads me to the other question uh which is you know like what a brownfields project would look like again uh to to get greenfield project we would use the cli and then just do reactive in it and that's easy uh like if i were to do brownfield development what what project do i need to have and how
do i start it yes so as far as prerequisites uh i feel like i think you need to have a app that you would like to extend with uh additional piece so something that's already in place and we would like to build on top of that so that's only requirement i'd say and then you can simply start for example by following the official react native documentation uh there's uh a whole section uh describing the integration process i think it's called like integration with existing apps uh and [Music] yeah documentation itself is is great and very well described uh but the process itself is not that easy and also i think uh like there is a lot of different materials over the internet that you could follow for example i think on our blog we have some some nice guide on how to start with brownfield development and basically we walk you through the process step by step uh yeah yeah but it wouldn't it would have been nice uh if it wasn't on our blog right [Laughter] yeah sorry sorry for this little call stock marketing you know this is this is company parkas so we had to do it you know uh yeah so basically if you have an existing app you can start to benefit from cross-platform approach right away without rewriting a whole application and this is what we call gradual adoption you can simply add a feature on top of existing code base and this feature can be written in react native even if you have native apps so yeah it has a heavy
impact on development costs and for me it's one of the biggest advantages of this approach since it allows you to reduce the development cost by a vast number as you have only one team responsible for a feature development that works both on android and ios but besides that i think not only costs play an important role in in this approach uh a fact that you don't need to get rid of existing solution nor stop its development in order to migrate uh to to a new technology or basically start this migration process it implies that your project can continue generating revenue and ship new features during the migration process which i find very uh nice and beneficial yeah and that is that is really exciting as you said because uh you don't have to stop everything you don't have to pull off the plug and start working on it you can do this gradual adaption which is really nice and uh and as i said it sounds very exciting yet you know challenging at the same time uh it seems that you not only have to be really good and react native because this is a definitely a challenging and more of a advanced work but also you have to have a relatively good knowledge of of the native ios and android development right like like i guess you know the question i have is is like what kind of challenges would you say uh are are there for the developers from your own experience um yeah so that's definitely true and i think the biggest challenge is an entry barrier for such projects um and in order to accurately understand
what's going on uh and make sure that everything's integrated properly you have to not only know javascript side and and react native internals but also you need to have a very good understanding of react native architecture underlying internals and the native side uh so yeah like this kind of knowledge is is is pretty wide but it's more than welcome in uh such projects yeah i guess i guess i mean i can only speak from my own experience but it seems that it is not that easy to to find or either get yourself both react native and native knowledge it's like very very time consuming to get proficient with both and usually the ones that start react native development do it because they they don't really want to learn both android and ios they just prefer to have a unified uh framework now i guess we already know we'll give you an example uh because uh i uh like i i've done several brownfield integrations in the past and starting from some simple uh integrations where we shipped new features to existing native apps to more advanced ones and uh if if i think of challenging projects that come to my mind that comes to my mind um is the most recent one that i've worked on and we've been developing a react native app and it turned out that some native teams within the same organization would like to integrate some of our features directly to the wrap and given this requirement we've torn the app to separate modules and published them as npm packages and then on native projects we proceed with
regular brownfield integration so we integrate react native uh to to to do their uh repository apps installed those modules from npm and as they were multiple modules we wanted to optimize its usage so if one module instantiated a react native bridge and loaded javascript and all of the assets we wanted to reuse this instance to optimize load time and besides that we had some challenges with maintaining two separate navigation stacks native and javascript and we had to combine it in a way that that it would be unnoticeable for end users so it's it wasn't very obvious and common use case but it demonstrates well the need of understanding uh asset react native its internals architecture native build systems native ui development and finally native languages now that sounds like a lot of you know like different things that you need to know and that can possibly go wrong um so so you know um that that's really impressive and and again you know i was going to say that these challenges are nothing new for you but you kind of already answered that and proved that uh to be a fact uh since you've worked in so many brownfield projects uh so far you kind of seen it all you know like all these things now since we are here to talk about your library called react native brownfield uh i just wanted to ask if you know that's how the idea for it came to your mind uh yeah actually uh that was uh uh one thing that came to my mind that uh the whole process is uh quite repetitive uh and that we could extract
some uh so some pieces of of this code to a open source library and we could uh publish that in order to facilitate it for future yeah that that makes a lot of sense so so what react native brownfield can do for me uh will it save me from you know writing native code entirely yes yes but also native developers from writing javascript uh so let me uh follow up to uh the the same story that i've uh told you before so uh it's this integration uh worked out very well from perspective of react native developers but we missed say one very important thing and the fact that we are not alone in this project and this setup impacts the daily job of a daily drop of native teams and we've noticed that it decreased productivity of native teams as they had to deal with new tools like node.
js like yarn metro bundler uh they observed changes within their own repository that they did not fully understand and besides that we've increased uh build time for an application uh because as we had to build all the stuff related to uh to react native uh each time they that they run the app which was very important for them and hearing all this feedback made us realize that there is a lot of improve in a way that we collaborate with native teams so on the one hand we introduce some features to their app which bring a lot of business benefits as the time needed to develop those functionalities natively on two different separate code bases i would be like 10 10 maybe 12 times higher uh than than
js like yarn metro bundler uh they observed changes within their own repository that they did not fully understand and besides that we've increased uh build time for an application uh because as we had to build all the stuff related to uh to react native uh each time they that they run the app which was very important for them and hearing all this feedback made us realize that there is a lot of improve in a way that we collaborate with native teams so on the one hand we introduce some features to their app which bring a lot of business benefits as the time needed to develop those functionalities natively on two different separate code bases i would be like 10 10 maybe 12 times higher uh than than
in in this setup and on the other hand productive productivity of these teams fell which could have an enormous impact in the long run so so we started to think how to approach these challenges and we came up with a solution to create an engine to package whole react native environment js bundle all the assets native bindings and everything to a single single file so that means end users had to deal with a dot framework or an aar file depending on a platform that they could easily integrate to to their app and they were able to consume exposed native classes as they as they would consume any other native ui library uh so i i can tell you that the results were amazing uh and after creating a simple cli and engine in question uh we've been able to plug it into the release process and each time we published a release a corresponding version of the modules was published to internal repositories and native teams have been able to integrate it as they would integrate any other native library so they don't have to deal with the react native environment their build time was decreased to a number similar to what they had before starting the whole initiative and every everybody was fully owning their uh their repositories and understanding their code base uh which turned out to be a a very very nice thing and cooperation was very smooth and fruitful yeah and that is you know uh that that is so amazing i guess uh you may have not realized this but you may have just
finished the uh the battle between native and javascript developers and so many companies right now as we speak uh that are trying to combine these two technologies together for the reasons uh that you said before and and and being in a few brownfield projects myself before i can definitely relate to the fact that dealing with something that i don't fully understand uh let's say seeing changes happening on the native side that i haven't authored and i haven't reviewed would not really make me confident about what i'm building so definitely a great uh great use case for it so it looks like uh the just to sum it up it looks like the big idea the the high level concept is that the react native code is packaged in a way that native developers will not be able to tell whether it's react native or full native code inside which is great yes and yeah and and and you know my question is what's inside such a package on both ios and android like how does this yeah yes basically the package is encapsulated into one file so on ios it's a framework file or to be more specific at xc framework as we need to build separately for simulator and device and package it into one universal framework and on android is just a fat aer file so such file contains all react native internal code required to run this module a javascript bundle that includes some of our components and business logic and then we have third-party native modules and all required resources and assets needed to display the user interface and besides that we have native
bindings that are exposed to end users so basically speaking from react native brownfield perspective uh initially we came up with an idea of a few helpers that could facilitate the most common uh way of integration uh react native to existing apps so as i've mentioned before we started from focusing on people that integrate the whole react native environment to their apps as this was something that we have done at this uh at that time and uh yeah that was repetitive uh and uh we wanted to uh let's say not to repeat ourselves later in the future but then we come up with this new idea of how to set it up and not only to focus on making react native developers life easier but also to facilitate this setup for native teams and yes i i've worked for a while in such teams and now i feel that i know what's important for them hence the new setup and functionality that we just spoken about yeah so so uh so we'll get on to that later as well because i really want to ask you about the features and what's coming up uh just i i still got a few questions uh to to kind of dig deeper into how it all works and i guess everybody listening is so excited right now to learn about that as well so you know the first question would be like what happens with react native and all its dependencies you mentioned that uh you know that there is one file and and and the native developers can just use it and that there is no overhead as far as the build time so um does the native client um that is consuming such a package need to perform any additional
actions uh or or just or just drag and drop it or something and re-ignitive is already there like uh how's that one happening yes so in most cases you can simply install this artifact with your preferred native package manager and i've tested that with cocoapods and maven and it works very well however it should work with any other package managers as well as it doesn't differ from other native libraries that mobile teams use on daily basis okay yeah yeah besides that i think um like you do not need to do any additional setup maybe uh if if you have some dependencies within your project and within the package that uh potentially could collide then uh so some exclusions uh could be needed but i think in 95 of projects it's it shouldn't be a case okay cool so that that's really amazing that's like play bleeding uh not bleeding but uh i i forgot the word but it's uh it's it's fast um whatever there was a word starting with b for something fast like [Music] i was going to say it but i i'm not sure if that's actually a word so those are native english speakers listening to us right now please forgive us uh these kind of mistakes um okay so uh so so we know how it is packaged and that is all amazing so um um now i do have a like very little question um about the components itself um like say i have a a screen um in react native that i want to put inside that native application so the native developer that would install this
framework or apk on android would it get a api to reference this screen uh so that it can push it or like how do the native developer could actually get uh the contents of the package yes so i've mentioned native bindings that are a part of this artifact so basically we expose some view controllers fragments could be even instances of ui view or android view that basically renders react native screening within its bounds so yes they can they can use same building blocks that they uh use on non-daily basis which i think is very convenient yeah that makes uh that makes lots of sense so this is all very nicely aligned with your idea which you said before that thanks to react native brownfield you can essentially uh send your react native code to the native developers and they can just use it as if you send them native stuff so that is that is amazing so now jumping to the other side uh to the javascript developers now um let's say i'm working on that screen that i already used as an example for the previous question and i'm packaging that for uh with the with the reactive brownfield library uh so when it's done i sent it to the development team right so so what would be the workflow here uh across both teams you you mentioned kakapods maven so that's how i should think about setting this all up um it's up to you i would say so you can send it any way you want uh so in my opinion the best solution would be to plug it into your continuous
delivery process uh and with react native brownfield will provide you with a command line interface that lets you build an artifact with one comment and you can simply run that comment on ci on some release branch for example and publish an output to the most convenient place and it could be either a github release app cocoapods repository maven repository or or jitpack uh so then native teams should be able to download a specific version of the uh of this library with their favorite package manager and the best thing is that there are no restrictions in that area so you can design this process any way you want and choose the most convenient approach for your team yeah i was going to say that this is really great because i can see you know this library can be used in many different brownfield setups and everybody can use it the way they want uh whether it's uh maven kakapots or any convenient ci cd setup with package manager or simply drag and dropping this to your documents folder which by the way i'm not sure if it's the case today but it used to be the installation guide for facebook sdk so it's definitely one of the uh maybe not recommended patterns but definitely it is something that native developers do from time to time so npm is not everywhere yet everybody okay so um so the last question regarding the workflow uh before we go to to to the project status and what's coming up um you know since like i'm working on that screen again i'll be using this screen um um usually in a greenfield project i have my react native init app i
work on a screen i see this screen immediately it refreshes and you know i can see the progress uh real time now with the brownfield native brownfields library uh i'm not building the app i'm building the framework so the question is how do i see my changes how do i preview the changes before i actually execute this cli command that you mentioned sure so our idea is that react native brownfield will provide you with a playground project and you can run it as you would run a regular react native application and work on your javascript code there so i believe it's an optimal approach for this kind of development as you can work independently from the native teams now however in a rare i would say case where you would like to test out your module in the destination native app and you would like to avoid rebuilding the artifact each time you do a a change we'll provide you with an option to build a debug version of the artifact that that does not contain js bundle and assets but rather fetches it from packager so you simply started in your project packager you started in your project and then if you uh integrated a debug version of the artifact you can preview the changes live in the destination app oh awesome so if i'm if i'm brave enough to go the go to the native application open it up uh i can integrate the debug version of the framework and essentially at that point it would look like building a traditional brownfield project because i would see the changes i would have metro running somewhere
from a different project of course but this would be sort of a nice way to iterate on that yes however as i said i feel like working independently as most uh optimal setup here so uh i believe in most cases you should be able just to rely on a playground app that we provide yeah yeah i was gonna say that this sounds like uh this is very similar to for example rn tester which is you know the playground app for built-in react native components so uh i'm definitely on board with that approach it's a uh it's a good way to test it uh okay so so i guess you know everybody's having this question right now what's the current status and when can i use this amazing tool oh so the library is currently under development and there's a legacy version available on github but it does not contain the features described in question but please stay tuned as we are quite advanced in the development process and given our experience with this setup in commercial projects i can say that the first release with the complete list of features is going to be released soon nice nice nice nice that's that that's really great stuff and uh you know working with michael kolstak i can sort of uh assure you that this is not a uh pre-made answer this is actually i mean i don't know the status of the project otherwise i wouldn't ask this question that would be stupid but um i was just i was just asking about the details i know they are working on it but i'm not sure about the steps hence the question um all right so you know you mentioned that uh currently
on github there is a legacy version of react dating brownfield that doesn't have the features we are discussing so in case you go to github pay attention to what you are interacting with because the current version is slightly different you can still start the repo just so that you see and watch it of course so you see when the guys are done with it uh anyway um the v1 is there the legacy one you're working on v2 right now which is going to be all everything amazing that we are talking right now and and uh it is essentially just extracting the code from the projects that you've done for your for further clients and making that open source so it seems to me that it's already sort of production ready now the big question is um you know is there anything uh coming up to your mind as far as the features in the future i mean i'm pretty sure that you're not gonna stop right where you are right now because uh since this is all based on your challenges in brownfield projects um maybe you had some other things that you'd like to solve and figure with a regulated profit library so tell us uh a bit more about future plans what can we expect when the v2 is released uh sure so just to clarify we aren't exactly extracting the uh code that we have uh built for or one of our commercial projects as the setup here uh was a bit different although uh we've taken all of our expertise and put it into this library which conceptually is is based on the same uh foundation let's say and speaking of features i think i can give you a sneak peek so
the first major feature uh is a project generator uh that i i've mentioned before so it will generate new project that could be easily packaged to a single file and besides that functionality the project uh will contain a playground uh which you can use to develop react native code and and what's more in terms of features uh we would like to create a a code gen uh that translates type shift or flow types to native languages so this will ensure the type safety between javascript and native flyers and yeah we are still debating on how to approach the integration with existing react native projects uh so we generally would like to it to be universal and we would like it to uh be be used in a way that you could just uh plug it into existing react native app and use it as a separate module and yeah and besides that i think we we have some more yeah we we would like to integrate over the air updates as well uh so uh this should facilitate um let's say updating uh updating new features newly developed code without going through a whole release process and besides that we want to create a dedicated react navigation navigator uh so the integration here in terms of navigation will be smooth and easy cool so you know like after one planned feature i was already sold and you gave me four of them if i counted right so that's really amazing i'm really you know excited and looking forward to see them because you know looks like you are working on nailing out the integration pieces with the project generator and and the types are
amazing feature as well especially to me because you know many times uh when we exposed something between js and react native uh i mean js and native there's always this type mismatch issue that somebody you know used an ns dictionary on ios which didn't have types and and it was not matching the types on the javascript site this is actually one of the reasons why code gen and react native actually is happening and so you know this is really exciting because then you will have type safety between your react native components and screens and the native ones so super amazing you know i really wish you luck with this and i can't wait for the release and uh you know with this in mind i wanted to say that you know it's been a really great time today with you having this conversation about native development and uh you know it's funny that we we are like this is a react native podcast so we should be talking about javascript all the time one would say and it's yet another episode around native technology so i think this kind of proves the point from the beginning of our conversations that these two worlds are very close to each other and uh you know if you are doing great native at the end of the day you might need to do a bit of native unless there is somebody like you and your team that provides a nice abstraction so um thank you for joining the podcast again i wish you best of luck with your development and uh now you can tell me how did you enjoy it and um yeah basically it okay thank you mike so it was a pleasure talking to you uh and for all the people interested in
react native brownfield uh please stay tuned for upcoming updates and make sure to check out our github our blog and uh our social media yeah and again uh just actually fun fact that i just realized mike uh this is one of these um rare occasions when we get to speak to each other in english right so it's quite it's quite it's quite a uh you know interesting observation anyway um thank you mike again for joining uh thank you everybody for you know listening to us watching us or reading us uh whatever is the way you are interacting with us because we are everywhere and if there is any platform that we are not there yet and you'd like us to be there let us know so thank you again for joining make sure to subscribe to our social media account on twitter facebook go check out the react native profit library on github and most importantly stay tuned after the next episode of react native show which is going to reveal some interesting features it's going to be yet another library but this time for building really really complex reactive apps so it's going to be amazing stay tuned thank you see ya
Timestamps
Show
Guests
Mike Chudziak
Director of Engineering
@
Callstack
[Music] hello everybody and welcome to the react lady show today our topic is react native brownfield and everything related to it just before we start if you want to stay up to date on everything as far as react native goes as well as be notified every time we publish a new release of this podcast please make sure to follow us on our twitter facebook and other social media accounts everything is in the link of the podcast and that way you will be always on the bleeding edge of everything react native so with that in mind i guess we can start with our podcast today as i said the topic is react native brownfield and today with me there is a very special guest mike who jack that works with me at call stack hello mike it's nice to have you today hi mike it's good to see you yeah yeah so let me start from a quick introduction of myself uh i'm miho and i've been working as a head of delivery at callstack and except for managers staff i do some react native and native mobile development and i'm especially passionate about combining those two words in a way that we call a brownfield development and i guess this is what i'm why i'm here today yes well yes uh that is the primary reason but also it's good to see you as you said uh because in this pandemic world uh you know we are working remotely all the time and even though uh the ones that are watching us can't tell it uh mike actually is sitting in the next room so uh at least we had this opportunity to pass uh by ourselves uh on the you know outside of these rooms um anyway i'm glad that you mentioned the brownfield
development or combining these two worlds together since as you said this is what we are going to be talking about today uh it's you know definitely a really popular keyword in a really popular term the react native itself um now the big question is what does it actually mean in practice this brownfield development that's a very good question i would say uh so i i think it has its roots in civil engineering and um brownfields uh is brought to the term in in this domain is characterized by working on a land that's already developed or under development and it means that any new work has to consider structures that are already in place and if we take this to software development we can think of creating something on top of existing software it offers a place to start with predetermined direction and allows us to reuse existing code and and features and this implies the need to understand existing systems and environment on which the application needs to be built um yeah and of course presence of existing legacy code might impact final costs since dealing with it uh naturally my slow down whole development process as you might need to refactor a portion of an existing app and i think also the entry barrier is bigger than it would be if you would start from scratch uh and in in our nomenclature uh brownfield applications in in react native obviously are the ones that are built on top of existing native applications and as react native is relatively new technology and and and has
and many applications were built either before it was published or before it was major enough and now i feel like like everything's changed in this uh area and react native is one of the best if not the best choice for uh cross-platform development um especially in in such environments so for broad-field environments yeah that definitely makes sense to be honest i didn't know that uh you know brownfield had its roots in the uh civil engineering that's something very interesting to learn about now uh you know i guess if we will continue this analogy that there is also a different term which is called greenfield development that is also used in diarrhea and now i guess before we go into the benefits and problems and challenges with brownfield development react native how about we just stop for a second and uh you know explore what greenfield development means just so that everybody is on the same page let's say sure sure um so greenfield term describes um a project that uh will be built on a green land uh so it means that there is no existing buildings no infrastructure or nor anything that could impact the work so taking this to software development um we can think of a greenfield application as something that we built from the scratch in a fresh environment and this gives us design flexibility and we can set everything the way we want and we have an opportunity to choose the most convenient tech stack so basically there are no dependencies on existing structure uh or or anything
that's already created and of course it's it's a double-edged sword i would say uh as system has to be built from the scratch it can be quite time consuming also versatility of development options might impact the lack of clear understanding on what approach to take which direction to follow so in brownfield we we have this predefined direction and uh in greenfield we do not uh which could be good but could be bad on the other hand uh so in in react native uh context we can think of a greenfield application as a app that is as i said built from the scratch so you can either choose a react native cli or expo initialize your project uh choose the text type you want choose the tools you'd like to uh work with and start whole development process okay okay cool so that so so that makes um that makes that makes a lot of sense and um it looks like greenfield development is essentially what what what most of us are doing on a daily basis uh either we use regulative cli to edit a new project or we use expo that is a greenfield uh project because there is nothing that is you know sort of implying these uh requirements um which is present in the brownfield otherwise and and this leads me to the other question uh which is you know like what a brownfields project would look like again uh to to get greenfield project we would use the cli and then just do reactive in it and that's easy uh like if i were to do brownfield development what what project do i need to have and how
do i start it yes so as far as prerequisites uh i feel like i think you need to have a app that you would like to extend with uh additional piece so something that's already in place and we would like to build on top of that so that's only requirement i'd say and then you can simply start for example by following the official react native documentation uh there's uh a whole section uh describing the integration process i think it's called like integration with existing apps uh and [Music] yeah documentation itself is is great and very well described uh but the process itself is not that easy and also i think uh like there is a lot of different materials over the internet that you could follow for example i think on our blog we have some some nice guide on how to start with brownfield development and basically we walk you through the process step by step uh yeah yeah but it wouldn't it would have been nice uh if it wasn't on our blog right [Laughter] yeah sorry sorry for this little call stock marketing you know this is this is company parkas so we had to do it you know uh yeah so basically if you have an existing app you can start to benefit from cross-platform approach right away without rewriting a whole application and this is what we call gradual adoption you can simply add a feature on top of existing code base and this feature can be written in react native even if you have native apps so yeah it has a heavy
impact on development costs and for me it's one of the biggest advantages of this approach since it allows you to reduce the development cost by a vast number as you have only one team responsible for a feature development that works both on android and ios but besides that i think not only costs play an important role in in this approach uh a fact that you don't need to get rid of existing solution nor stop its development in order to migrate uh to to a new technology or basically start this migration process it implies that your project can continue generating revenue and ship new features during the migration process which i find very uh nice and beneficial yeah and that is that is really exciting as you said because uh you don't have to stop everything you don't have to pull off the plug and start working on it you can do this gradual adaption which is really nice and uh and as i said it sounds very exciting yet you know challenging at the same time uh it seems that you not only have to be really good and react native because this is a definitely a challenging and more of a advanced work but also you have to have a relatively good knowledge of of the native ios and android development right like like i guess you know the question i have is is like what kind of challenges would you say uh are are there for the developers from your own experience um yeah so that's definitely true and i think the biggest challenge is an entry barrier for such projects um and in order to accurately understand
what's going on uh and make sure that everything's integrated properly you have to not only know javascript side and and react native internals but also you need to have a very good understanding of react native architecture underlying internals and the native side uh so yeah like this kind of knowledge is is is pretty wide but it's more than welcome in uh such projects yeah i guess i guess i mean i can only speak from my own experience but it seems that it is not that easy to to find or either get yourself both react native and native knowledge it's like very very time consuming to get proficient with both and usually the ones that start react native development do it because they they don't really want to learn both android and ios they just prefer to have a unified uh framework now i guess we already know we'll give you an example uh because uh i uh like i i've done several brownfield integrations in the past and starting from some simple uh integrations where we shipped new features to existing native apps to more advanced ones and uh if if i think of challenging projects that come to my mind that comes to my mind um is the most recent one that i've worked on and we've been developing a react native app and it turned out that some native teams within the same organization would like to integrate some of our features directly to the wrap and given this requirement we've torn the app to separate modules and published them as npm packages and then on native projects we proceed with
regular brownfield integration so we integrate react native uh to to to do their uh repository apps installed those modules from npm and as they were multiple modules we wanted to optimize its usage so if one module instantiated a react native bridge and loaded javascript and all of the assets we wanted to reuse this instance to optimize load time and besides that we had some challenges with maintaining two separate navigation stacks native and javascript and we had to combine it in a way that that it would be unnoticeable for end users so it's it wasn't very obvious and common use case but it demonstrates well the need of understanding uh asset react native its internals architecture native build systems native ui development and finally native languages now that sounds like a lot of you know like different things that you need to know and that can possibly go wrong um so so you know um that that's really impressive and and again you know i was going to say that these challenges are nothing new for you but you kind of already answered that and proved that uh to be a fact uh since you've worked in so many brownfield projects uh so far you kind of seen it all you know like all these things now since we are here to talk about your library called react native brownfield uh i just wanted to ask if you know that's how the idea for it came to your mind uh yeah actually uh that was uh uh one thing that came to my mind that uh the whole process is uh quite repetitive uh and that we could extract
some uh so some pieces of of this code to a open source library and we could uh publish that in order to facilitate it for future yeah that that makes a lot of sense so so what react native brownfield can do for me uh will it save me from you know writing native code entirely yes yes but also native developers from writing javascript uh so let me uh follow up to uh the the same story that i've uh told you before so uh it's this integration uh worked out very well from perspective of react native developers but we missed say one very important thing and the fact that we are not alone in this project and this setup impacts the daily job of a daily drop of native teams and we've noticed that it decreased productivity of native teams as they had to deal with new tools like node.
js like yarn metro bundler uh they observed changes within their own repository that they did not fully understand and besides that we've increased uh build time for an application uh because as we had to build all the stuff related to uh to react native uh each time they that they run the app which was very important for them and hearing all this feedback made us realize that there is a lot of improve in a way that we collaborate with native teams so on the one hand we introduce some features to their app which bring a lot of business benefits as the time needed to develop those functionalities natively on two different separate code bases i would be like 10 10 maybe 12 times higher uh than than
js like yarn metro bundler uh they observed changes within their own repository that they did not fully understand and besides that we've increased uh build time for an application uh because as we had to build all the stuff related to uh to react native uh each time they that they run the app which was very important for them and hearing all this feedback made us realize that there is a lot of improve in a way that we collaborate with native teams so on the one hand we introduce some features to their app which bring a lot of business benefits as the time needed to develop those functionalities natively on two different separate code bases i would be like 10 10 maybe 12 times higher uh than than
in in this setup and on the other hand productive productivity of these teams fell which could have an enormous impact in the long run so so we started to think how to approach these challenges and we came up with a solution to create an engine to package whole react native environment js bundle all the assets native bindings and everything to a single single file so that means end users had to deal with a dot framework or an aar file depending on a platform that they could easily integrate to to their app and they were able to consume exposed native classes as they as they would consume any other native ui library uh so i i can tell you that the results were amazing uh and after creating a simple cli and engine in question uh we've been able to plug it into the release process and each time we published a release a corresponding version of the modules was published to internal repositories and native teams have been able to integrate it as they would integrate any other native library so they don't have to deal with the react native environment their build time was decreased to a number similar to what they had before starting the whole initiative and every everybody was fully owning their uh their repositories and understanding their code base uh which turned out to be a a very very nice thing and cooperation was very smooth and fruitful yeah and that is you know uh that that is so amazing i guess uh you may have not realized this but you may have just
finished the uh the battle between native and javascript developers and so many companies right now as we speak uh that are trying to combine these two technologies together for the reasons uh that you said before and and and being in a few brownfield projects myself before i can definitely relate to the fact that dealing with something that i don't fully understand uh let's say seeing changes happening on the native side that i haven't authored and i haven't reviewed would not really make me confident about what i'm building so definitely a great uh great use case for it so it looks like uh the just to sum it up it looks like the big idea the the high level concept is that the react native code is packaged in a way that native developers will not be able to tell whether it's react native or full native code inside which is great yes and yeah and and and you know my question is what's inside such a package on both ios and android like how does this yeah yes basically the package is encapsulated into one file so on ios it's a framework file or to be more specific at xc framework as we need to build separately for simulator and device and package it into one universal framework and on android is just a fat aer file so such file contains all react native internal code required to run this module a javascript bundle that includes some of our components and business logic and then we have third-party native modules and all required resources and assets needed to display the user interface and besides that we have native
bindings that are exposed to end users so basically speaking from react native brownfield perspective uh initially we came up with an idea of a few helpers that could facilitate the most common uh way of integration uh react native to existing apps so as i've mentioned before we started from focusing on people that integrate the whole react native environment to their apps as this was something that we have done at this uh at that time and uh yeah that was repetitive uh and uh we wanted to uh let's say not to repeat ourselves later in the future but then we come up with this new idea of how to set it up and not only to focus on making react native developers life easier but also to facilitate this setup for native teams and yes i i've worked for a while in such teams and now i feel that i know what's important for them hence the new setup and functionality that we just spoken about yeah so so uh so we'll get on to that later as well because i really want to ask you about the features and what's coming up uh just i i still got a few questions uh to to kind of dig deeper into how it all works and i guess everybody listening is so excited right now to learn about that as well so you know the first question would be like what happens with react native and all its dependencies you mentioned that uh you know that there is one file and and and the native developers can just use it and that there is no overhead as far as the build time so um does the native client um that is consuming such a package need to perform any additional
actions uh or or just or just drag and drop it or something and re-ignitive is already there like uh how's that one happening yes so in most cases you can simply install this artifact with your preferred native package manager and i've tested that with cocoapods and maven and it works very well however it should work with any other package managers as well as it doesn't differ from other native libraries that mobile teams use on daily basis okay yeah yeah besides that i think um like you do not need to do any additional setup maybe uh if if you have some dependencies within your project and within the package that uh potentially could collide then uh so some exclusions uh could be needed but i think in 95 of projects it's it shouldn't be a case okay cool so that that's really amazing that's like play bleeding uh not bleeding but uh i i forgot the word but it's uh it's it's fast um whatever there was a word starting with b for something fast like [Music] i was going to say it but i i'm not sure if that's actually a word so those are native english speakers listening to us right now please forgive us uh these kind of mistakes um okay so uh so so we know how it is packaged and that is all amazing so um um now i do have a like very little question um about the components itself um like say i have a a screen um in react native that i want to put inside that native application so the native developer that would install this
framework or apk on android would it get a api to reference this screen uh so that it can push it or like how do the native developer could actually get uh the contents of the package yes so i've mentioned native bindings that are a part of this artifact so basically we expose some view controllers fragments could be even instances of ui view or android view that basically renders react native screening within its bounds so yes they can they can use same building blocks that they uh use on non-daily basis which i think is very convenient yeah that makes uh that makes lots of sense so this is all very nicely aligned with your idea which you said before that thanks to react native brownfield you can essentially uh send your react native code to the native developers and they can just use it as if you send them native stuff so that is that is amazing so now jumping to the other side uh to the javascript developers now um let's say i'm working on that screen that i already used as an example for the previous question and i'm packaging that for uh with the with the reactive brownfield library uh so when it's done i sent it to the development team right so so what would be the workflow here uh across both teams you you mentioned kakapods maven so that's how i should think about setting this all up um it's up to you i would say so you can send it any way you want uh so in my opinion the best solution would be to plug it into your continuous
delivery process uh and with react native brownfield will provide you with a command line interface that lets you build an artifact with one comment and you can simply run that comment on ci on some release branch for example and publish an output to the most convenient place and it could be either a github release app cocoapods repository maven repository or or jitpack uh so then native teams should be able to download a specific version of the uh of this library with their favorite package manager and the best thing is that there are no restrictions in that area so you can design this process any way you want and choose the most convenient approach for your team yeah i was going to say that this is really great because i can see you know this library can be used in many different brownfield setups and everybody can use it the way they want uh whether it's uh maven kakapots or any convenient ci cd setup with package manager or simply drag and dropping this to your documents folder which by the way i'm not sure if it's the case today but it used to be the installation guide for facebook sdk so it's definitely one of the uh maybe not recommended patterns but definitely it is something that native developers do from time to time so npm is not everywhere yet everybody okay so um so the last question regarding the workflow uh before we go to to to the project status and what's coming up um you know since like i'm working on that screen again i'll be using this screen um um usually in a greenfield project i have my react native init app i
work on a screen i see this screen immediately it refreshes and you know i can see the progress uh real time now with the brownfield native brownfields library uh i'm not building the app i'm building the framework so the question is how do i see my changes how do i preview the changes before i actually execute this cli command that you mentioned sure so our idea is that react native brownfield will provide you with a playground project and you can run it as you would run a regular react native application and work on your javascript code there so i believe it's an optimal approach for this kind of development as you can work independently from the native teams now however in a rare i would say case where you would like to test out your module in the destination native app and you would like to avoid rebuilding the artifact each time you do a a change we'll provide you with an option to build a debug version of the artifact that that does not contain js bundle and assets but rather fetches it from packager so you simply started in your project packager you started in your project and then if you uh integrated a debug version of the artifact you can preview the changes live in the destination app oh awesome so if i'm if i'm brave enough to go the go to the native application open it up uh i can integrate the debug version of the framework and essentially at that point it would look like building a traditional brownfield project because i would see the changes i would have metro running somewhere
from a different project of course but this would be sort of a nice way to iterate on that yes however as i said i feel like working independently as most uh optimal setup here so uh i believe in most cases you should be able just to rely on a playground app that we provide yeah yeah i was gonna say that this sounds like uh this is very similar to for example rn tester which is you know the playground app for built-in react native components so uh i'm definitely on board with that approach it's a uh it's a good way to test it uh okay so so i guess you know everybody's having this question right now what's the current status and when can i use this amazing tool oh so the library is currently under development and there's a legacy version available on github but it does not contain the features described in question but please stay tuned as we are quite advanced in the development process and given our experience with this setup in commercial projects i can say that the first release with the complete list of features is going to be released soon nice nice nice nice that's that that's really great stuff and uh you know working with michael kolstak i can sort of uh assure you that this is not a uh pre-made answer this is actually i mean i don't know the status of the project otherwise i wouldn't ask this question that would be stupid but um i was just i was just asking about the details i know they are working on it but i'm not sure about the steps hence the question um all right so you know you mentioned that uh currently
on github there is a legacy version of react dating brownfield that doesn't have the features we are discussing so in case you go to github pay attention to what you are interacting with because the current version is slightly different you can still start the repo just so that you see and watch it of course so you see when the guys are done with it uh anyway um the v1 is there the legacy one you're working on v2 right now which is going to be all everything amazing that we are talking right now and and uh it is essentially just extracting the code from the projects that you've done for your for further clients and making that open source so it seems to me that it's already sort of production ready now the big question is um you know is there anything uh coming up to your mind as far as the features in the future i mean i'm pretty sure that you're not gonna stop right where you are right now because uh since this is all based on your challenges in brownfield projects um maybe you had some other things that you'd like to solve and figure with a regulated profit library so tell us uh a bit more about future plans what can we expect when the v2 is released uh sure so just to clarify we aren't exactly extracting the uh code that we have uh built for or one of our commercial projects as the setup here uh was a bit different although uh we've taken all of our expertise and put it into this library which conceptually is is based on the same uh foundation let's say and speaking of features i think i can give you a sneak peek so
the first major feature uh is a project generator uh that i i've mentioned before so it will generate new project that could be easily packaged to a single file and besides that functionality the project uh will contain a playground uh which you can use to develop react native code and and what's more in terms of features uh we would like to create a a code gen uh that translates type shift or flow types to native languages so this will ensure the type safety between javascript and native flyers and yeah we are still debating on how to approach the integration with existing react native projects uh so we generally would like to it to be universal and we would like it to uh be be used in a way that you could just uh plug it into existing react native app and use it as a separate module and yeah and besides that i think we we have some more yeah we we would like to integrate over the air updates as well uh so uh this should facilitate um let's say updating uh updating new features newly developed code without going through a whole release process and besides that we want to create a dedicated react navigation navigator uh so the integration here in terms of navigation will be smooth and easy cool so you know like after one planned feature i was already sold and you gave me four of them if i counted right so that's really amazing i'm really you know excited and looking forward to see them because you know looks like you are working on nailing out the integration pieces with the project generator and and the types are
amazing feature as well especially to me because you know many times uh when we exposed something between js and react native uh i mean js and native there's always this type mismatch issue that somebody you know used an ns dictionary on ios which didn't have types and and it was not matching the types on the javascript site this is actually one of the reasons why code gen and react native actually is happening and so you know this is really exciting because then you will have type safety between your react native components and screens and the native ones so super amazing you know i really wish you luck with this and i can't wait for the release and uh you know with this in mind i wanted to say that you know it's been a really great time today with you having this conversation about native development and uh you know it's funny that we we are like this is a react native podcast so we should be talking about javascript all the time one would say and it's yet another episode around native technology so i think this kind of proves the point from the beginning of our conversations that these two worlds are very close to each other and uh you know if you are doing great native at the end of the day you might need to do a bit of native unless there is somebody like you and your team that provides a nice abstraction so um thank you for joining the podcast again i wish you best of luck with your development and uh now you can tell me how did you enjoy it and um yeah basically it okay thank you mike so it was a pleasure talking to you uh and for all the people interested in
react native brownfield uh please stay tuned for upcoming updates and make sure to check out our github our blog and uh our social media yeah and again uh just actually fun fact that i just realized mike uh this is one of these um rare occasions when we get to speak to each other in english right so it's quite it's quite it's quite a uh you know interesting observation anyway um thank you mike again for joining uh thank you everybody for you know listening to us watching us or reading us uh whatever is the way you are interacting with us because we are everywhere and if there is any platform that we are not there yet and you'd like us to be there let us know so thank you again for joining make sure to subscribe to our social media account on twitter facebook go check out the react native profit library on github and most importantly stay tuned after the next episode of react native show which is going to reveal some interesting features it's going to be yet another library but this time for building really really complex reactive apps so it's going to be amazing stay tuned thank you see ya
Show Transcript
Based on his own experience, Michał discusses the challenges that app developers are likely to face in brownfield projects. He also shares an actual example of a challenging project so you can hear first-hand what solutions worked best!
The second part focuses on Michał’s brainchild - React Native Brownfield library. Our guest describes its current status and plans for future developments. He also gives details as to what’s inside an Android and iOS package or how the library can facilitate the workflow of React Native developers and native teams.
Play the episode on your favorite platform. You can have little or no experience with React Native brownfield - our experts will explain it all.
Brownfield development with React Native
- Greenfield vs. brownfield projects
- Starting a brownfield project
- Gradual adoption when integrating new app components
- Business benefits of brownfield development with React Native
- Challenges faced by developers running brownfield projects
- React Native Brownfield library
In the first part, Mike and his guest explain what brownfield development means in practice: how it differs from greenfield development, what it’s like to work brownfield, and why brownfield development and React Native are a perfect match.
Adding React Native to existing apps?
We help teams introduce React Native into brownfield projects effectively.
Let’s chat
//
Insights
Learn more about
Brownfield
Here's everything we published recently on this topic.
//
Brownfield
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
Code Sharing
Implement effective code-sharing strategies across all platforms to accelerate shipping and reduce code duplication.
Migration to React Native
Plan and execute a migration from native or hybrid stacks to React Native with minimal disruption and clear technical direction.
React Native Brownfield
Integrate React Native into existing native application and start sharing code across platforms immediately.
React Native Trainings
Equip your team with React Native skills through tailored training sessions.
