Things I Wish I Knew Before Starting React Native - Robert Prosenc @ WeAreDevelopers Conference 2017

now thank you very much a 20-piece law we are specialized on building custom web applications our own experience with react native started around last summer and in this talk I'd like to show the good the bad and the ugly side of react native so before I start I'd like to make a quick survey how many of you have heard of react native already so the majority great how many of you have used react native or that's cool so the technology is on the rise I'm glad about that I'd like to specify a couple of terms I will use throughout this talk in the beginning what's a native ad when I sign it is that I'm in applications that are built for androids using really Java or code lines or compiled applications for iOS applications built with Swift or objective-c on the other side this hybrid application like ionic which use on a webview there's a great vacation contain now you have more or less a web application so the application that is installed on the device on the device but is more lesser well chromeless browser and the main main and only UI element is the webview and the third category is the native part with JavaScript I don't have a name for that but that's what what react native is about actually titanium by AB celebrator uses a similar approach nevertheless the philosophy of react native is a little bit different to for instance ionic it's not about one code to rule them all it's about learn once and use everywhere of write everywhere so react native embraces the differences of the difference of the differences in UI concepts on different platforms but you will still end up with a lot of shared code technically this is native but with JavaScript thing works as follows and you have the rendering of the user interface down native little every UI element behaves and looks like a native element for just one reason because it is a native element and so you have this funny bouncing when you scroll and all the behavior that you are used but the business logic is implemented in JavaScript trusted structures structured there is a main thread in the application that is responsible for the rendering of the user interface and a background thread running the JavaScript interpreter who is executing your logic the main thread delivers guaranteed 60 frames per second so you have really the smooth behavior and the background thread and does all the heavy lifting the side effects can block from time to time and the two of them are connected via an asynchronous bridge passing messages between the threads which doesn't allow much of an information transfer and is basically the one big bottleneck of this architecture on the other hand this is the part where react brings its strength into the thing using the virtual Dom it can minimize the amount of updates that are sent to the user interface there is another benefit as well when you change the bridge to a WebSocket you can just move this old background thing off and you have you can have some your JavaScript executed on the debugger or JavaScript interpreter of your choice in another process on another device if you want so so that's how development is done with reg natives you have you run your JavaScript and one process and you can still interact with the application on a real device or within the simulator how does that code look like basically its it looks like react code so you can use JSX which is great and you have a couple of of higher-level higher-order components ya don't need to read that basic difference is that the base components in react native are not like like in react they don't represent Dom nodes like HTML button HTML Dom node but they implement concepts from the mobile world so there is no dis there is a view will span the text there is no links it's a it's a touchable opacity okay platform specifics um when you need to what I said it reg native embraces the differences in the in the user interface concepts so there are needs from web standards the need to to deviate in the implementation of certain parts of your application and you can do that in two ways either on the file level so just suffix the files with the proper implementation and require the component just the name and depending on the on the system the application runs the proper implementation will be taken or you can do it at runtime using the platform API for minor minor differences like some some different telling us some different styling ok so that was just a quick real quick overview what are the advantages of this system especially over the hybrid and traditional native approach first of all you can really really insanely fast development in my opinion actually but it is if you compare it to the Crescent native approach us actually know compilations you have to compile it once the first time but then it is just bundling the JavaScript so when you when you want to know how does I don't know that least look like with with some other margins just change the codes reality application it's that or you can skip the reloading just activate hot reloading can hopefully low just just the same where react does seem simple single components whole modules even the whole application state can be how to reload it so you make a change in the code and the application that runs is just up to date the very next moment and you can you are free to focus on implementing your features you even though you can you can deviate in your implementation you probably will end up with a huge share code base because most of the components are shared there are differences but most stuff can be used on both platforms so you probably will end up with the whole business logic reusable for both targets if you are developing for that's what I mean for Android n iOS at the same time and you with my probability will reuse the implementation or big parts of the implementation of your user interface and for the specific deviations just as as shown before and there is a wide variety of ideas and tools that you can use which is pretty handy as well in my personal opinion using react itself is an advantage as well I think the paradigms the J's eggs even the dataflow all those make the development much faster from my point of view even more much more fun I think it's greatly to readability to the maintainability of the code and it's much easier to debug and from a project management point of view it might be easier especially compared to the native approach not with with the hybrid application I think it's easier to find a couple of JavaScript development stand developers from then an iOS team and an Android team but finding good people is difficult anyway there are situations where you end up with not being able to implement a certain feature just using javascript it is because of this bridge limitations in that cases you still can implement it in on the native part so it's pretty easy to to bridge over to native in native components basically and the other side of integration is when you have like like fantastic for instance when you already have your applications built natively you still can integrate some parts of it's written in react native fantastic has done that with each other I think it's one view at least stuff on Airbnb use the same approach Facebook as well so the door is always open in both direction there is no login into reacts native another advantage deployment you can once you have your application out in the world you can always there are there are services and that help you to push your code to your users circumventing the app stores and the play stores like code push and adapted load those to our cloud services but in case of code push you can even host your own server for that so you are not dependent on the Microsoft infrastructure and yeah it's pretty nice you just pushed a new version to look giant and it is completely compliant with the with the Apple Developer Program License Agreement as long as you do not change the purpose of your application or significant functionality and as as you in the end you do build some regular applications that just use some JavaScript code but it is an IP k iba or a ticket package so you can use the same deployment tools that can be used for native this deployment like fast line for automation or the Hokie app for better distribution so much for the good so how about the bed and the ugly part button so when you come from a strictly object-oriented environment you will have some some learning time to learn react and and this react reactive paradigms but I think after the first steep learning curve there is quite a high chance that you will not want to go back it is completely different but it really is from a much bigger negative impact in my opinion is the velocity of API changes so react native justice reacted has a quite fast update cycle which is a good thing basically but in some cases it is redeker and in some cases it can even hurt so there is I'd like to show one example that with it we really had a lot of lot of work fun with it there was one element one navigation implementation provided with react native called the navigation experimental it was kind fallentin kind of a best viable navigation it was it has extensive documentation though the name says it's experimental it is provided the impression that it's kind of a suggested solution so like in February this year the last feature has been added to this component month later in March the documentation disappeared more or less it was changed for three sentences thought that it will be removed a month ago it's got the deprecation warnings this was the point when at our company all alarm light started to alarm bells started to ring and two weeks ago it was gone so it can go pretty fast but to be honest um yeah it was not a pleasant experience to have just couple of weeks to change were main element of your application but in the end I think that the the whole codebase the routing and and big parts and structure of the application proved to be better than before but it took us took us quite quite some time another problem is with upgrading so react native is library it comes as a node module just the dependence you can update that without problems but when you start a reg native on project you create the Xcode project so check out the source complete projects or space and probably Android or both and from that point on you have you taught this that will be tinkered with will have configurations that you change like us restrictions you add the F icon some assets whatever deployment integration and on the other hand are direct native thing will change stuff in that code which is necessary for whatever new features they have sorry that's the point for that so to merge these two code bases there is a tool called our react native did upgrade module which is a node module so the one demonstration here so you install it quite easily you just run it everything is fine and then you end up fixing some completely unreadable merge conflicts for ours maybe because there are changes in those in those configuration files that we are not so so friendly for for dissing and for merge conflicts so this is this is quite a pain from time to time but of course it can be solved and there is another issue it's a performance as as a result of this of this asynchronous breach of this this narrow bridge between the threads when you have when you have a lot of user interaction so as stream of user inputs and you want to reflect this in the user interface you have a lot of information passing from the from the UI back to the to your JavaScript and then back again and this is where you and we'll get noticeable performance penalties where you will suffer frame drops and what basically there are two solution for this either change a use case which is not really and I think for its you yes there is there is an API actually for so part of this problem that moves the calculation of these changes into the main thread but basically the solution is to implement this part that handles the user input and transforms it into some some effects on the user interface move this part into the native part of your application so get rid of the bridge in this case that's the only relief working solution talking about experiences um I'd like to mention some unsatisfying issues that we came across one is the navigation something will so quickly replace the navigation the others we found I don't know maybe demo but basically I've seen three available components for navigation all of them have native parts all of them has some functionality missing and all of them have really really quick API changes so the Airbnb implementation is is they say it is better and they do not use it in their own application but the other to behave as better as well so it's really difficult to use those they they change quite quickly and another thing is well with with mobile mobile applications you have really not that much of a screen space real estate on screen so say so you have to be resourceful so it makes sense to to hide elements when they are not in focus this is a better example so will what's called the collapsing headers and forget this guess by the way this was just a recording a recording issue the point is like for this situation there is no satisfying solution there as yet and where our personal personal I think it it is it's quite an important problem to solve and this is just one of these cases where you better move to the native site because it has to react to your directly to your interaction and better be integrated with the navigation to be honest okay so much to the ugly side just a few words about nice and sunny tools that evolved around react native about remote building the risk have you heard about expose there are so many people who know react native okay much much fewer so explore is there is a client for for quite some time there that the idea is quite funny they also a client application just an application you can download from the App Store and this application can work play reg native code for you there is whole infrastructure where you submit your code base and you can search for applications just like download them and execute them in the expo client so it's like a web browser for applications which is really neat because you do not need to to compile anything while you're developing of course you cannot bring that out as a commercial product because you're locked in to this system but you can eject your code as soon as you found out that where as soon as you and so there is a command for ejecting the code from Expo which just changes your codebase into a regular react native project and and this is new this came I think a couple of weeks ago they offer cloud build service so you can submit your code to the cloud and then download the apk or IPA bundles and submit those to the storage justice if you had built them by yourself for just quickly trying out an idea or fooling around they offer an online service they you can code online just try out the code you have a live preview drag and drop of components yeah drag and drop and and you can just just scan the QR code with your client with your xbox line and would you have the app on your device it's just a funny thing it's kind of similar to what's called pen and this this this systems if you need to quickly build a really simple app there is a app creator a viable kind of I don't know it says kind of simple WordPress for apps so just drag and drop your ads and to find your colors and some some ad ice I haven't tried it out but I think I find the idea really really fun some last words when we started um last year we built um we started with with our reax experience that we had so the structure of the project we just were we had no experience we just tried like the best after lab a couple of people and just try to instruction and resected on the way if I start again now actually I would use one of the available boiler plates there are couples of them a viable and they bring you just really big big structures structures the support scaling and you don't need to think about things out of the box projects that you just sudden and build your app on that and I think this is the last slide just a couple of resources I definitely um so let's say them another way the documentation I think the documentation is quite good to relate it helps with starting with reg native there is a huge part the dot about it is good oh yeah it's really helpful and there is this awesome this awesome repository with like hundreds of resources hundreds of links to all kind of resources on github ok so that was the last slide thank you very much thank you Susannah for the introduction and I'd like still one last slide left I like to thank my colleagues who helped me preparing this thought Alicia Reece who will be moderating the main stage tomorrow and Phillip and Tomas our react native specialists thank you wherever they are now thank you a lot all right so is gone hahaha alright I have a one question from the app and then maybe we'll pass the microphone around the first question would be what are your thoughts on the patents clauses in the licenses of reactant reacts native especially for companies customers and developers from the US whose markets are overlapping with those on Facebook who I actually someone confronted with this problem um no I can't help you with that hahaha also has to be sometimes yeah which which navigation did you use up did you get a his opinion or react navigation it's a community the community project okay okay and also how would you decide whether or not to use react native with an apple it depends on several factors it of course if you have native developers you have more more freedom to decide which path you go how much the parts are that you you you list on the native part like in our case we have just web developers so we had quite a big JavaScript expertise and no expertise on the native part in that case it definitely is the approach to go from my point of view so it depends on on the circumstances and also it depends on what kind of ad you want to build so if you for instance need access to some low-level API so you will not you will need some some native developers for that so everything that is not offered by either react native ApS or some some community stuff that you can get your hands on where you need to make it yourself alright alright thank you um are there questions any more or your face yes hey my question is when I have working react only code based so I have a whole webpage running on react what would be your approach to basically somehow get this into react native app is there some good way yeah that's a good question actually well is it the point is you're probably will have some big parts of your business logic that you can move that this probably independent of the user interface but the navigational structure and the views will probably not be reusable from from the left world also because of just the structure of the virtual Dom so it is completely different in react native and but what you what will probably not work is trying to kind of um recompile your react code base with some automation to this other realm I adult that that will work so try to isolate your business logic and include that and build a appropriate user interface for that thank you another question ladies hands no yes hi react native and games how far encompass can you go and games yeah oh yeah there are several approaches there is um I didn't dive into that actually part but what just I've seen scrolling around there is there are tries to integrate actually WebGL with that but I'll not forget it that was with react only no no I don't know I should know I was I was mistaken that for for what I've read about react and game development no I don't know because but there is this Expo this Expo I'm library it comes with a library they bring at least a couple of elements that that might help you I think they bring a GL kind of a GL view so this might be a door to enter that realm because with with the with the basic elements that come with reg native you well you have just the regular UI elements it will be a kind of shitty game probably with that so to get kind of nice graphics there are at least yeah I think with with with the expo library you get SVG support and you get r GL support so this way you get you could combine this world does it answer your question yeah to some extent okay good enough hahahahaha alright thank you Robert for your talk

Channel: WeAreDevelopers

Views: 37,012

Keywords:

Id: NvKwLW-5p5Q

Length: 29min 36sec (1776 seconds)

Published: Tue May 30 2017