Learn Once - Write Anywhere with React
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48808 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 201613 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Software developerPerspective (visual)Mobile appInformation technology consultingData centerScripting languageJava appletSoftware developerComputer architectureScripting languageDependent and independent variablesReal numberMobile appProcess (computing)Web 2.0Right angleFormal languageComputing platformElement (mathematics)Self-organizationMultiplication signFrustrationWeb-DesignerPrisoner's dilemmaCovering spaceComputer animation
02:09
Software developerData centerDifferent (Kate Ryan album)Android (robot)System programmingScripting languageFraction (mathematics)Formal languagePower (physics)Scripting languageCodeSystem callComputing platformSoftware developerPhysical systemFraction (mathematics)GeometryGame controllerWeb 2.0Slide ruleMobile appUniform resource locatorResultantArithmetic meanWeb-DesignerAbsolute valueDependent and independent variablesSimilarity (geometry)Programming paradigmPoisson-KlammerProcess (computing)InternetworkingDifferent (Kate Ryan album)Multiplication signPoint (geometry)MultilaterationAbstractionObject (grammar)Context awarenessJava appletFiber bundleoutputComputer animation
08:43
Software developerWritingMobile appComputing platformFocus (optics)FacebookDeclarative programmingImperative programmingMessage passingWeb browserVirtual realityPatch (Unix)Artistic renderingTracing (software)Physical systemImperative programmingArithmetic meanComputing platformWeb browserSocial classState of matterVolumenvisualisierungFunctional (mathematics)Hybrid computerDeclarative programmingWeb-DesignerLimit (category theory)Mobile appPhysical systemCartesian coordinate systemProduct (business)Descriptive statisticsProcess (computing)Computer programmingBuildingComputer clusterProgramming paradigmMultiplicationMathematicsVirtualizationPatch (Unix)outputArchaeological field surveyConnectivity (graph theory)Android (robot)Library (computing)AlgorithmFocus (optics)Computer-assisted translationJava appletRadical (chemistry)Scripting languageWeb 2.01 (number)Software developerResultantConsistencyAbstractionGoodness of fitHand fanWritingFacebookDigitale VideotechnikView (database)Computer animation
15:38
Electronic mailing listBuildingBlock (periodic table)Computer-generated imagerySoftware developerEuclidean vectorComponent-based software engineeringElement (mathematics)View (database)Modal logicComputing platformDimensional analysisEuler anglesDokumentvorlageAndroid (robot)CodeShared memoryWeb 2.0Touch typingCross-platformElement (mathematics)View (database)Degree (graph theory)Event horizonTerm (mathematics)Android (robot)Data storage deviceComputer fileElectronic mailing listMultiplication signHypermediaDifferent (Kate Ryan album)Computing platformFeedbackDimensional analysisMoving averageLevel (video gaming)Single-precision floating-point formatoutputCode1 (number)Mobile WebTranslation (relic)Extension (kinesiology)Revision controlBuildingBlock (periodic table)CalculationFunctional (mathematics)Fraction (mathematics)Connectivity (graph theory)NavigationModal logicInteractive televisionWritingArithmetic meanComputer animation
21:04
Android (robot)Computer fileExtension (kinesiology)Software developerCodeWeb browserComputer networkNetwork socketScripting languageJava appletCategory of beingArithmetic meanMobile appWeb 2.0Revision controlWeb browseroutputLibrary (computing)CodeWeb applicationAndroid (robot)WritingComputer fileInheritance (object-oriented programming)Network socketMereologyDegree (graph theory)Computing platformConnectivity (graph theory)Scripting languageJava appletCuboidPhysical systemInterface (computing)Line (geometry)HypermediaSource codeStandard deviationSoftware developer
24:01
Euclidean vectorSoftware developerVolumenvisualisierungDokumentvorlageData conversionMachine codeWeb applicationWeb 2.0Connectivity (graph theory)Revision controlObject (grammar)Direction (geometry)Line (geometry)Cuboid
25:21
Mobile WebRevision controlSoftware developerWebsiteNormed vector spaceComponent-based software engineeringMotion blurView (database)State of matterLogicFluxSocket-SchnittstelleAndroid (robot)Price indexService (economics)Real-time operating systemGoodness of fitWeb applicationCuboidThread (computing)Multiplication signFlock (web browser)Library (computing)View (database)Cartesian coordinate systemProcess (computing)Revision controlSource codeComputer fileArtistic renderingProduct (business)Scripting languageVideo gameSubject indexingData structureLatent heatOffice suiteTheoryTouchscreenLogicSystem callService (economics)Android (robot)Web 2.0Point (geometry)Network socketFluxWebsiteState of matteroutputMobile appInstallation artMobile Web
29:39
Network socketSoftware developerView (database)Euclidean vectorView (database)Connectivity (graph theory)Software developerMultiplication signCore dumpMathematicsNavigationComputer clusterWorkloadNP-hardEquivalence relationBitCodeWeb browserScripting languageWordRoutingJava appletNetwork socket
31:30
Software developerAndroid (robot)Computer simulationCodeoutputSoftware developerWeb applicationResultantMobile appLogicWeb 2.0MereologyComputer animationSource code
32:12
Software developerWeb applicationAndroid (robot)CodeDifferent (Kate Ryan album)Mobile appThread (computing)Data storage devicePublic key certificateHydraulic jumpoutputMereologyError messageReading (process)Assembly languageRevision controlState of matterAmsterdam Ordnance DatumComputer animation
33:55
Software developerCrash (computing)View (database)Modul <Datentyp>Module (mathematics)Component-based software engineeringBridging (networking)Software developerSoftware bugWindowAndroid (robot)Bookmark (World Wide Web)Computer fileExpected valueoutputParameter (computer programming)Mobile WebJava appletConnectivity (graph theory)Graph coloringView (database)Multiplication signBridging (networking)Point (geometry)Subject indexingWeb 2.0Web-DesignerMachine codeModule (mathematics)Medical imagingType theoryDivisorString (computer science)Software frameworkPhysical systemBitCartesian coordinate systemSlide ruleDynamical systemObject (grammar)Process (computing)Crash (computing)Single-precision floating-point formatData managementComputing platformAutomatic differentiationGroup actionExistential quantificationFacebookProduct (business)Mobile appData storage deviceEndliche ModelltheorieRight angleLecture/ConferenceMeeting/Interview
40:10
Software developerJava appletScripting languageInformation overloadMultiplication signWeb 2.0Facebook1 (number)Thresholding (image processing)Mobile appGroup actionData managementInformation overloadProduct (business)Computer configurationProcess (computing)Boilerplate (text)Web browserScripting languageMobile WebLibrary (computing)Branch (computer science)Software frameworkComputer animation
41:20
Software developerImplementationFundamental theorem of algebraCodeAlpha (investment)Computer programSheaf (mathematics)Boilerplate (text)Inheritance (object-oriented programming)AbstractionLatent heatCASE <Informatik>Arithmetic meanMobile appPerturbation theoryComputer fontService (economics)Computing platformFormal languageScripting languageExterior algebraCartesian coordinate systemThread (computing)Data storage deviceGoodness of fitAlgebraic closureCycle (graph theory)Flow separationPhysical systemImperative programmingSheaf (mathematics)Declarative programmingImplementationProcess (computing)INTEGRALRight angleCodeFundamental theorem of algebraAndroid (robot)Continuous integrationoutputComputer animation
45:21
Software developerMobile appMultiplication signMobile appData storage deviceWeb 2.0Computer animation
46:19
Software developerWeb 2.0Computer simulationMobile appArithmetic meanSoftware testingCodeUser interfaceTouchscreenComputer animation
47:11
Maxima and minimaSoftware developerCodeMobile appUser interfaceTouchscreenAndroid (robot)outputComputer animation
48:11
Software developerComputing platformComputing platformSmith chartView (database)Theory of everythingMobile appProjective planeWeb applicationScripting languageWeb 2.0Different (Kate Ryan album)AbstractionSoftware developerSinc functionComputer animation
50:59
Physical systemFiber bundleScripting languageMobile appView (database)Repository (publishing)Descriptive statisticsAbstractionCompilation albumWeb 2.0Thread (computing)Boolean algebraMobile WebDifferent (Kate Ryan album)Web applicationBridging (networking)Arithmetic meanComputing platformConnectivity (graph theory)MappingProcess (computing)Dot productLatent heatCodePerturbation theoryComputer animation
53:16
Software developerComputer animation
Transcript: English(auto-generated)
00:06
Okay, so, hi everyone and welcome to my talk about learning once and writing anywhere with React or alternatively native apps from a web developer's perspective.
00:26
My name is Eirik Vilum and I'm a tech lead at a company called Scandinavia Online where my main responsibility is JavaScript architecture and I'm also a course instructor for the organizers
00:45
of this conference. So in this talk we'll cover some dilemmas we have as developers today and the process
01:01
of going from web to native platforms and some real world experience doing that. And then the takeaways and some thoughts about the future.
01:23
So first of all, I'm a web developer, I love JavaScript and some say that there's a thing called Stockholm syndrome because everybody loves to hate JavaScript, right? And I do understand certain frustrations and I've felt like this a couple of times during
01:47
my career as a JavaScript developer. So it's an acquired taste you might say. And I've seen this picture around when people are discussing JavaScript versus other languages
02:00
and this makes it kind of easy. I can see that, yeah, it makes it easy to make fun of JavaScript. But nonetheless, that doesn't hide the fact that JavaScript is an amazingly powerful language and it's amazingly flexible.
02:22
And I think that might be where the problem is as well because it's too flexible. You can write really shitty code that still works. And you can also write great, clean, reasonable code, except you don't have to. So with great power comes great responsibility and we'll get back to this topic later on.
02:51
So eventually at Scandinavia Online, we got to the point where the web just wasn't enough anymore. And we had to venture into the world of native apps because we wanted things like
03:07
push notifications and we wanted, oh, my voice, and we wanted things like geolocation. And we wanted things to be buttery smooth and fast.
03:21
So where do we start? We're a bunch of web developers. None of us have any native development background. So where do we start? Okay, so why don't I just go ahead and learn Java and Objective-C and Swift and all those native languages?
03:42
So, well, do you know how many times I've set out to learn iOS development? And every time it's been like, okay, this weekend, it's really happening. It's really happening now. I swear. Are there any native developers out here now?
04:01
No? Yeah, a couple there. Okay, so let me just say this. This is how I see native developers. They're these insanely badass people who master these really hard platforms and just make, yeah, badass apps.
04:21
And that stuff just, yeah, it doesn't come overnight. I'm just a web developer. And I realize that today, that's probably an oxymoron. But I'm not a badass.
04:40
I can, yeah, I can handle that stuff. That's, yeah, have you tried just keeping up with JavaScript? It's pretty insane out there. So now that means that if I'm gonna learn these native languages, I'm gonna have to master these different paradigms for making the same result.
05:03
And the learning cost isn't trivial because you don't get proficient in a new language, like spending a week or a month even. I'm not saying that you shouldn't learn new things. I'm just thinking about what's reasonable when you're trying to put out a native app
05:26
and you're a bunch of web developers. Because there's a lot of platforms out there. There's a lot of stuff to learn. And there's a lot of different proprietary layout systems.
05:40
And layout is, yeah, that stuff is hard. And there's different syntax. So that means that you have to rewire your brain, yeah, to fit in these new syntaxes. And then that, yeah, gives you context switching. But even worse, similar syntax with different meaning.
06:06
Have you seen those bracket things in Objective-C? Let me just see. I hope I didn't lose the internet now.
06:21
Come on. Yeah, so this is how I feel when I see those bracket things in Objective-C. It just, yeah, I'm completely lost. But yeah, sure, you have Swift now, which is a lot better. But for the sake of it, yeah, let's say that I'm going to admit that I'm not a unicorn, that I can't learn all these languages.
06:45
Yeah, that thing kind of scares me. So what about, and now we've written off going completely native. So what about these cross-platform solutions? You have things like Titanium by Accelerator,
07:02
and you have NativeScript by Telerik. And you have Xamarin. So what we found out is that some of them are actually pretty nice. But, my, yeah,
07:23
seems like my slides has kind of went against me here. So I'll just, yeah, so what we found out is that the layout systems are really proprietary in a lot of these approaches.
07:43
And in a lot of them, you're bound to the greatest common denominator, meaning that you don't get access to a lot of the details in the platforms. You get an abstraction or something wrapped that doesn't give you that detailed control.
08:02
And also, Xamarin, it's written in C sharp. None of us guys knew C sharp, so it was kind of out of the question from the start. But I'm guessing that for those who are already into C sharp, it might be a viable solution.
08:21
Actually, there they come. Yeah, and common of all of them is that they all have this really imperative approach. Okay, so that didn't work out. So what if we go hybrid?
08:41
We could wrap our stuff in something like Cordova or PhoneGap. But yeah, that's still gonna be web technology. So we're not gonna achieve what we wanted. Because it's just not good enough, and it doesn't give you that same feel and the performance.
09:04
So yeah, what do I do? This is hard. I just wanna build apps for everyone. And I shouldn't have to care if your cat has an iPhone or an Android. I just wanna build stuff fast and share it with everyone.
09:24
So I think the whole notion of platforms has just ruined everything. There's so many ways of solving the same problem now, which is getting something into the hands of the users. So where are we gonna end up with this?
09:43
So we were promised by Java a long time ago that we could write once and run everywhere, and we, yeah, we can pretty much see how that went. So for now, that just seems like a pipe dream.
10:02
But there's this new kid in town, actually not that new anymore, React Native, which yeah, it tries to do a slightly different approach. So this is from the documentation of React Native, which says that React Native enables you to build world class application experiences on native
10:24
platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about. Learn once, write anywhere.
10:40
Facebook uses React Native and multiple production apps, and will continue investing in React Native. So yeah, this sounds pretty good, sounds almost too good to be true. Yeah, and what a coincidence, because I'm already a fan of React. And the last couple of years, we've built most of our web apps at Scandinavia Online using React.
11:06
So before we dive into React Native, let's just do a quick recap of why should you choose React in the first place? Why is this library interesting?
11:21
And what React gives you is this very declarative way of building UI. That separates the how from the what. Meaning that in imperative style programming, you focus on the how. You micromanage and tell the program what you want to accomplish,
11:44
or how to accomplish it, which differs from declarative programming, which is more a description of what you want to accomplish. And that's a powerful abstraction.
12:04
And it's simple, UI is just a function of props and state. And ideally, it's pure, meaning that for the same input, you'll always get the same result. And you have a very nice way of doing composition.
12:26
So that means that you can compose larger components from smaller ones without the coupling. And it's fast, it's fast out of the box, because of the virtual DOM approach.
12:41
And it uses this efficient diffing algorithm to patch the browser DOM. So that means that your application just renders with state and props as input, and then React actually patches the DOM for you. So when something changes, you just re-render everything,
13:03
and then React just patches the DOM in an efficient way for you. And React is thoroughly battle-tested. Facebook uses it in its production flagship app,
13:23
and it has a huge community, and it's growing every day. So it's not just bound to Facebook anymore. There's so much contributors out there. And there's a lot of big players making contributions to the React ecosystem.
13:43
But perhaps the most interesting thing about React is that this idea doesn't limit itself to the browser or the DOM. Because some people notice that you can actually use this to target other platforms and renderers,
14:01
such as the HTML5 Canvas. So this means that instead of the old imperative HTML5 Canvas API, you now have a declarative one. And what we are looking for in our case, React Native, which targets native platforms, which is Android and iOS.
14:27
And if you're feeling nostalgic, why not create your next app as a terminal app with React? Because there's actually a renderer for terminal apps. Well, but let's not go there now.
14:41
So why, as an existing web developer, should I choose React Native? So mainly, it's the same paradigm. If you know React, you know React Native. That means a lot less new proprietary concepts to learn.
15:03
And it's all JavaScript, meaning that you can use NPM and all of that good stuff that's already out there. And it has a same layout system. And you can build truly native apps,
15:20
not these web views and phone gap kind of things, hybrid apps. And it has great backing and community, just like React. So let's just dive in and look at what you can do with React Native.
15:41
So just like React.js, you have this basic building blocks in React Native as well, which obviously differs from the web version. Because the web version mirrors the HTML elements, whereas React Native mirrors the native basic elements.
16:04
So instead of div, you now have view. Instead of span, you now have text. But it's mostly familiar if you already know React. So here's an example using React.js.
16:23
And here's the same example using React Native. So that's pretty similar, almost like just a direct translation.
16:42
So React, as I said, React.js just mirrors the HTML elements, whereas React Native mirrors the native components available, or the native views available on the platforms. So there's common ones in React Native like the list view,
17:03
and the scroll view, and the text input, and the web view, the map view, modal. And all of these are inherently coupled to the native platform. But there's also these platform-dependent ones.
17:24
So you have slider iOS, and you have toolbar Android, and you have tab bar iOS, and so on. So this is where React Native tries to take a different stand so that it doesn't try to give you just one solution that's supposed to work everywhere.
17:42
It gives you the ability to target that platform without reducing everything to the greatest common denominator. There's also specific components for doing interaction called touchables.
18:01
So we have things like touchable highlight, touchable opacity, touchable native feedback. Because the difference between native and the web here is that on the web you can attach handlers, so click or event handlers, to any element, as opposed to React Native where we actually have to wrap something
18:23
in a touchable to make it an actionable item. And then there's routing, which is a bit different in the native platform because you don't have things like, you don't have a URL,
18:42
you don't have routing in that traditional sense, but you still need routing between your views. So you have the navigator, which enables you to create this interface. And then there's native APIs,
19:02
which is to interface with native functionality on the platforms. That means that you have things like alert dimensions to do calculations of device dimensions, and you have access to the camera roll. You have an equivalent to local storage called async storage.
19:24
And you have an API for doing styling and layout and animations. And it's all JavaScript, and this is all available for both Android and iOS. But then there's platform-dependent ones here as well.
19:44
So that means that you have status bar iOS, push notifications iOS, and you have these things for Android that I have no clue what is. But basically you have these platform-dependent ones
20:04
that you can use to target that specific platform. So this just shows the mantra of React Native, which is learn once, write anywhere, as opposed to write once, run everywhere. And at the same time,
20:21
React Native gives you some really neat tools to do code sharing and reuse, such as the platform API. And that gives you the ability to differentiate between platforms, meaning that you can run the same file and just say that, OK, I want this piece of code to just run on iOS
20:42
and this piece of code to just run on Android. And this is really nice if you're creating something that just have small subtle differences between iOS and Android. But as soon as that starts to differ to a larger degree, that's going to be messy.
21:01
So you have something called the file extension suffix. That means that you can suffix your files with either Android or iOS, meaning that you can require the app file, and on Android it will use the .Android version,
21:21
and on iOS it will use the .iOS version. So this is pretty nice when two components diverge to a large degree between the platforms. And then there is another part of reuse in React Native,
21:44
which is probably one of the most interesting. And that's the ability to share code between your web app and React Native. So a polyfill. This is the definition from Remy Sharp,
22:02
that it's a piece of code that provides the technology for you, the developer, that you, the developer, expect the browser to provide natively, flattening the API landscape, if you will. And this is the approach that React Native has used,
22:23
meaning that React Native, React Native polyfills things like XML HTTP request, and it polyfills WebSocket. And that means that these are available as JavaScript,
22:44
just as they are in the DOM, meaning that you can use all of those existing libraries from NPM, like Super Agent, or Axios, or Socket.IO, or anything that interfaces with these lower-level APIs.
23:04
And React Native also uses a polyfill to do layout and styling, which is Flexbox. So Flexbox is a web standard, meaning that it's a proprietary layout system,
23:22
but it has a standard, and it's already implemented in web browsers. So it might be familiar to a lot of people jumping from web to native. And you can actually write sane layout definitions in Flexbox, as opposed to floats in CSS.
23:44
And React Native also polyfills the JavaScript DOM API, at least the names for all the styling properties. And all this makes me happy, because this is me doing a layout with floats. That's not fun.
24:04
So here's a simple example of a React component using inline styles. That means having your styles in JavaScript. So this is the web version. And to create a React Native version of the same, it's almost a direct conversion,
24:22
so instead of it just being an object, you use the stylesheet native API. So this is extremely powerful if you already have a web app that uses Flexbox, and React, and inline styling,
24:44
because it's almost a direct conversion. So the benefits of using this approach is that it's a lot easier to modularize. You keep all your styles together with your component, and that gives you few or no global styles,
25:05
which can be really nice. But how does React Native make all this possible? So to run JavaScript like that without compiling anything down to native code.
25:23
So React Native runs on a separate thread, and it uses JSCore, the iOS JavaScript engine, and all of the JavaScript is done in that thread. But all of the rendering is done in the main thread,
25:41
which is running Swift or Objective-C. And everything between those two threads communicates asynchronously, meaning that even if you block the JavaScript thread, you aren't going to block the rendering, which increases the chance of having smooth animations
26:03
and that kind of thing. And this also opens for some really, really interesting things, which we'll see later on. So up to now, I've just been talking theory.
26:22
So let's see how this turned out when we tried to do this in real life and to actually make a production app with React Native. So at Scandinavia Online, we're this news aggregator and curator, so our news desk has to be able to keep up with the news all the time.
26:45
So we have this idea about creating these real-time dashboards that would show the most important news sources and the top news at any point in time. So we made this thing to support live updates.
27:08
So we used WebSockets to be able to push updates to our dashboards, and we put up a lot of these screens around the office so all the news desk people could see them.
27:24
But we also thought that it might be fun to make a mobile version of this, where we could choose our own sources and have more than one article per source. And we also thought, why not make a native app out of this?
27:44
This might be fun, because we wanted it to use things like geolocation and push notifications just to be fast. And at the time, React Native had just released Android support,
28:03
so it seemed like a good time. So our app pretty much consisted of this. We had a layer of React views. We had used React to build our application. And we had this data or state logic layer built with Flux.
28:26
And we had a layer of these HTTP API requests using a library called SuperAgent from NPM. And we also used WebSockets, mainly Socket.IO, which is this really nice library for doing WebSockets.
28:45
So after doing the install process of React Native, we end up with this folder structure. We have some specific stuff for Android and for iOS. And then you have your entry files, which is index AndroidJS and index iOSJS.
29:04
So we just boldly tried to add a JavaScript folder and then see how much could we just blindly copy-paste from our web app over to our native app. And it turns out that all the Flux stuff just works out of the box.
29:25
Also, this service layer with SuperAgent and all the HTTP API calls also works just out of the box. And the same thing with the WebSockets, except one minor quirk is that
29:42
since the React Native JavaScript core engine isn't a browser, it doesn't have a user agent. So this is the only shim that you need to actually make Socket.IO work in React Native. Which at the time was pretty amazing to us.
30:07
The main workload was in rebuilding the views. Since we had React views mirroring the HTML DOM,
30:21
we had to replace that with all those native equivalents. But it wasn't all that much work. It was pretty straightforward, like just translating. And the layout and moving from having a lot of CSS and that kind of stuff to having the styles together with your components
30:44
was a really nice change. And it's all pure JavaScript now. And another thing that we had to work a bit on was the routing part because at that time the navigator didn't have any documentation.
31:04
You kind of had to infer things from the code itself, which made it a bit hard. Yeah, but we managed to make it work. And as I said, none of us have any native experience here.
31:23
But probably one of the nicest things about React Native is the developer experience itself. Especially considering that this is still pretty early. So that means that you can live edit code and have that immediately update
31:42
in both the Android simulator and the iOS simulator. And this stuff you can't even have on native. If you're doing pure iOS development, you can have this. It's not possible. So that's pretty amazing.
32:01
So the result was that after a week's worth of work, we actually had a native app from our web app. And the really interesting part is that we were able to reuse about 50% of our web app.
32:21
And that means all of the logic, we just had to rewrite all the Vue stuff, and the routing, and the styling. But we actually share 99% of the code between Android and iOS here because the only difference was that we had to add a margin on top
32:42
because unless you do that on iOS, things just fall behind the status bar. That was the only thing that was different between the Android and iOS version here. Releasing the thing is another story though. We had never done that before.
33:01
It requires some serious read me skills to get something released on App Store. And a lot of patience. So after about, I don't know, like a week of fiddling with certificates and that kind of stuff, and another three weeks of waiting, we actually had an app in the App Store. So we were pretty impressed with that.
33:24
But it's not all unicorns and rainbows. These kinds of errors would show up when I was developing, telling me that some kind of assembly code
33:41
in a thread was failing. I could see instructions like jump and move, and yeah, that stuff is just super scary. I have no idea how to fix that. So that means that I need some badass native developers
34:02
to tell me what's going on here. Thankfully it disappeared though. Without me ever knowing what went wrong in the first place. And that's the best kind of bugs. Not really. And then there's things like this.
34:22
Expected dynamic type string but had type int64. JavaScript doesn't have any ints. So that means, OK, do I have to dive into Java to make this work? And also invalid index.
34:40
There's no invalid indexes in JavaScript. They just give you undefined. So what's going on here? So these are of course things related to the underlying system of React Native, which I had no idea how to debug. And they seem to appear at the most random times.
35:02
And also this one, which told me that I was calling the image picker iOS with two arguments. But it expects one. I've never even heard of the image picker iOS, and I definitely never used it. So that was kind of scary. But my absolute favorite was this one.
35:24
Unknown color brown. Because it turned out that Android didn't actually implement the color brown at that stage. And why use the color brown, you say? So yeah, don't hire me as a designer.
35:42
That would be horrible. So yeah, there was a lot of stuff that was a bit rough. And at that point, I think I'll just have to... My slides are broken.
36:01
At that point, when we were building that stuff, a lot of stuff was missing from Android. Like the WebView didn't exist on Android. Actually, it existed, but if you tried to use it, it was just like an empty file just crashing your system.
36:22
And also, WebSockets wasn't supported on Android yet. But all of this stuff actually works now. And there was a lot of bugs and crashes, as you saw. I'm just like half-stricken this out, because there's still a bit of stuff happening there.
36:43
And yeah, it's still not complete. There's still some things missing. And at that point, we had only OSX support, which was fine for us, but kind of sad for those doing development on Windows and Linux.
37:02
But now there's actually support for Windows and Linux. And also, native modules, which I haven't talked that much about. Meaning that you can actually do native bridges yourself,
37:24
but that means that you actually have to know the native platform, which I don't. But yeah, as I say, most of the problems we had at that point has been fixed now, so it's looking kind of bright.
37:45
And you now have official Linux and Windows support, if you want to try it out. That means you can't do OSX development on Windows and Linux, but you can do Android development, because iOS requires you to have OSX and Xcode.
38:09
And as I said, native modules. React Native isn't going to implement all of your quirky views that you need in your application. So if you need something that's a bit out of the ordinary,
38:25
you're going to have to build that in native code and then bridge it over to React Native as a React Native component. But React Native gives you the ability to just do this yourself instead of waiting for the framework to adding whatever everyone needs.
38:45
So that's pretty nice. And the same goes for both components and APIs. If you have this weird API you wrote in Objective-C two years ago, you can still use it. You just need to create a bridge for it to use it in React Native.
39:03
So you can reuse all of your old stuff. You can use Swift, you can use Objective-C, you can use Java. You just need to write bridges for it. And the important thing here is that React gives you the ability to just do this yourself instead of waiting for the creators to add stuff that you need.
39:25
And another opportunity I see here is that this is a nice way to kind of get web developers and mobile developers together to just collaborate more.
39:42
At least that was my experience. You can now learn much more from each other and there isn't that clear divide anymore between web and native. And there's already a ton of community-made stuff out there
40:00
made by both web developers and native developers. And yeah, the ecosystem is growing every day. And there's already a decent amount of production apps out there using React Native. The main ones would be the Facebook Groups app
40:20
and the Facebook Ads Manager. There's also a lot of other interesting things there. So I'm not saying that React Native is a silver bullet. But yeah, the main thing I want to emphasize is that
40:41
it is a great way to kind of bring web and mobile, native and mobile together because it lowers the threshold both ways. And I also want to mention this recent phrase made famous by Eric Clements, which is JavaScript fatigue.
41:04
And it kind of illustrates the problem nowadays with too many tools, too many options, too many frameworks, too many libraries, too much things to choose from and not enough time here on Earth. So when doing JavaScript today in the times that we are in,
41:25
it's so easy to get lost in the tools because there's Webpack and there's Browserify and there's Gulp and there's Grunt and Broccoli and Brunch and there's a million different things. And there's so many boilerplates out on GitHub that you just get nauseous looking at it.
41:43
So by the time you're out of your rabbit hole, creating your super duper awesome boilerplate setup thing, then you can't even remember what the original problem you were trying to solve is. So in this case, I think it's important to focus on
42:03
the idea and not the exact implementation. And I think that in this case, it's the idea of using this declarative abstractions on top of these imperative APIs that we have from before. So not on React itself, but this idea of doing things declaratively.
42:25
Because even if React disappears one day, I'm pretty sure that this idea will live on. Because there's a lot of alternatives out there now for React. There's Elm, which is even a separate language
42:42
for doing this kind of layout. And there's Cycle.js and there's Ohm for ClosureScript. A lot of good alternatives out there. So I'm pretty sure that React Native is going to... Someone is going to take React Native
43:01
and just shove it into all of these three as well. So to stay sane, just try to focus on the fundamentals and the transferable knowledge instead of trying to dig deep into all those proprietary platform specifics.
43:20
So before we move to the end, let's go back to React Native. And probably the most cool thing that React Native enables by doing that separate thread JavaScript thing.
43:41
Hot code pushing. That means you can push code over the wire live to your app, to your native apps. So there's a couple of services out there now that enable you to just push to the App Store once and then have your app update.
44:00
You can have continuous integration in your native apps and that's something you can't have in just a pure iOS or pure Android app. So that's pretty amazing. Yeah, I'll get to that. And also even Microsoft has created a service called Code Push
44:24
which enables this in a simple way for you. And that kind of says something. Microsoft actually has done a lot of cool things lately. So yeah, this can't be permitted by Apple, right?
44:43
But section 3.3.2 of the manual explicitly permits this because you're only allowed to do this on JS core, the JavaScript engine, but you can't change the primary or advertised purpose of the application.
45:01
Meaning that if you're going to change a lot of stuff in your application so that it's not really the same application anymore, you're going to have to resubmit it. But Apple says that this is okay. But this enables something else that's pretty awesome.
45:23
For example, this one called React Native Playground which is pretty cool. Let's see. Do I have time for a demo? Yeah.
45:42
So what I wanted to do was, if you want, it'll be fun if you join me.
46:00
If those of you who want to go into the app store and download the React Native Playground app, you can actually join me in this. Let's see. So React Native Playground enables you to use this web tool
46:26
to just try out and have some fun with React Native apps. Meaning that you get these simulators on the side here, and you can test your app live.
46:45
And you get all the nice stuff such as, let's see, like the hot pushing of code.
47:03
And this web interface, that's pretty nice, but what's even nicer is that this actually, you can actually run this on your phone as well. So if you open the React Native Playground app and just choose scan code,
47:21
you can actually just point it to the screen here. And that app is running on your phone and the same hot code pushing is enabled. So that means that if you shake your phone and choose enable live reload, I can actually change something in the web interface here and it updates live on your phone.
47:45
That's pretty amazing. You can't do that stuff with just a pure iOS or Android app.
48:18
So I would say that the takeaways we have had
48:24
of doing this mini project is that this is great if you already know React and you already know this stuff, you can use all your web knowledge to create native apps.
48:42
And it's a really nice way to just dip your toes into native because you can jump into the native platform and make those stuff that you need and not having to just jump fully into it. And you don't have to get married to platforms because platforms die and platforms just cease to exist.
49:12
But I'd say that it's still early. It's not perfect yet. But I think that the idea here is really golden
49:24
and I'm really excited about the future of React Native. So, any questions at the end? Yeah.
49:44
I think that would be hard. I know that NativeScript from Telerik is adding support for Angular. So I'm guessing if you're using Angular, NativeScript would be a nice way to kind of try to ease into native development then.
50:01
But this is... Yeah, I think it would be kind of strange trying to cram Angular into React Native since it's React. But yeah, as I said, NativeScript is trying to do that with Angular. Angular 2, that is. Yeah, all that stuff,
50:29
if you've used it in your web app, you can just drop it in there. It just works because it's all JavaScript. And that's what's super nice about it because you can jump from web to native
50:42
really seamlessly and only have to care about the differences in the actual views, which isn't that different. It's just, yeah. I've even seen that people have now created abstractions on top of React Native. Let's see.
51:01
Called React Native Web, which kind of gives you, when you're creating a native app, it gives you a web app for free, you could say. They've just created abstractions on top of those text and view and list view and all that stuff so that it maps to actual HTML components.
51:22
That means that you have everything in a single repository now. So you have .android, .ios, .web. So you're kind of merging everything together because really there shouldn't be that much difference
51:40
between your mobile web app and your native app. It's just that you want to be on all the platforms. No, there's no web views here unless you put in a web view yourself to show like...
52:03
So, yeah. In React Native, it's actually, it's actual native views. So what I was saying is that all of the JavaScript runs on a separate thread, but there's some React Native specific code
52:22
running on the main thread, which then bridges between your JavaScript thread and the main thread. So it's just like React.js is this connected layer to the DOM. In the same way, React Native is just a layer to the native layout system.
52:42
So it's actual native views. There's no cross-compilation or anything, and that's what enables you to do that kind of hot code pushing because you're just updating. You could reference a JavaScript bundle in a URL, meaning that you would just download the JavaScript
53:03
and it'll run producing that native app. So, yeah. No more questions?
53:23
Okay, yeah. Thanks.