18 ms·
Developing Our First iOS App with React Native
- flacoman91 11y agoreally cool. I'd love to see a webcast on this.
- epberry 11y ago> Not knowing Objective C or Swift I think this is a key phrase here. I'm writing a RN Android app without knowing much about Java.
- deleted 11y ago[deleted]
- eadz 11y agoYou can write a CRUD like app without any hardware/native code required. However, even when you do need that code - for example I'm building an app that records and plays audio - react native still gives you an advantage in the sense that you only need to expose a hardware API but all the logic still stays in javascript. I've managed to write just enough Objective C and Java to expose some APIs I need, and no more. There is also a lot of react-native npm packages that abstract away the hardware issues, quality & completeness varies however.
- latishsehgal 11y agoHave you run into any gotchas? I am thinking of doing the same thing for a simple app.
- tomtang2 11y agoThere were definitely some head scratchers along the way, I think I address a few of them in this post but I plan to write a few more posts that show how we tackled some issues in more detail so keep an eye out for that.
- n0us 11y agoAs for the styling part, This is actually a relief to see since I am using Radium and it looks like some of the styles I have will work without any modification. Any other styles I would have to rewrite anyway.
- warcher 11y agoTruthfully, the language barriers are nothing next to the API barriers dealing with your platform of choice. I am probably giving away my age here, but there's very little that's new under the sun after you've tussled with... say one each of the big three language families. These being: Nasty old C (not going anywhere, ever. Deal with it.), modern scripting languages (Ruby, Python, et al) and the real deal functional languages (lisp, ml, haskell, etc). It just turns into "Oh, this is how they handle an array. Do I have any functional plumbing? Ok, great. How do I dispatch a thread? Ok, let's go." It's just not that interesting after a while. Objective-c is quirkier than most, swift is nice but still baking, but it really all boils down to the platform APIs. And you're gonna have to get wet at a platform level if you want to provide functionality beyond a mobile web page. (Albeit one with improved load times since it's coming from disk, at the cost of dynamic updates since it's coming from the app store.)
- ghrifter 11y agoYep this is what I'm realizing after a few years of programming. I can pick up a language easily, however learning it's APIs is almost as hard as learning the syntax for the language itself. Like how do I open a file? Ok cool. How do I close it? Do I need to explicitly close it? Ok. Also, learning APIs for other peoples codebases/software is task of learning that isn't trivial too
- jbeja 11y agoThis is why language oriented programming is a better alternative to everything else.
- Swizec 11y agoSyntax is easy, semantics are hard, cultural norms take time.
- misiti3780 11y agoi agree with you, although i think you are forgetting to add (and maybe it is implied here and i missed it) that learning mobile development requires you to not only learn new language APIs in objC/swift, but you also have to learn some new design patterns (delegation, etc.) and most importantly the SDKs (CocoaTouch) if you can use react native and avoid learning a lot of this it is a big win - I havnt used it yet, and I have a hard time believing it a mobile only company would use it to build their mobile app, but i am excited where it is going.
- Smudge 11y ago> Learn once, write anywhere What's most amazing to me about React Native was how quickly we were able to go from idea to product (~3 months working only part-time) using our existing knowledge as web developers. We did have to write a few lines of Objective-C here and there, but for the most part all of the views and interactions fell together the same way a webapp would.
- ianlevesque 11y agoAfter a while apps are just apps, and the languages all feel the same.
- estreeper 11y agoAs someone who is about to embark on a similar route, that's interesting and exciting to hear. Was it both Android and iOS? If so, how much of the codebase/time was spent on shared code versus needing to write platform-specific portions? I've seen the Facebook post about developing Ads Manager (though it glosses over some details), but it would be interesting to hear other people's experiences. https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/ https://code.facebook.com/posts/1189117404435352/react-nativ...
- Smudge 11y agoWe built it for iOS, but I expect Android would have been a similar experience (albeit with much more cross-device testing required). Hard to say how much of it was platform-specific, since we only targeted 1 platform (for now). But the large majority of the code we wrote exists in React components or in related JS files, so porting it over to Android should be a matter of decoupling the parts of the code that rely on native features (i.e. camera, navigation, etc). A lot of that work is already happening in the React Native community so I expect the cross-platform support will keep getting easier.
- Apocryphon 11y agoI'm sure this observation was probably made tens of thousands of times before, but- is the React Native and frameworks like it the beginning of the end of the "native vs. mobile web" debate? A synthesis of both approaches?
- ianlevesque 11y agoI don't think so. I've participated in enough native / mobile web flamewars to last a lifetime, but the main argument this doesn't resolve in any way is the question of freedom. A react native app is still subject to Apple's App Review, or can be removed on a whim by Google (remember the ad blockers recently?). Some people have a real problem with that.
- tomtang2 11y agoI think so. Reducing the language/framework barrier to mobile development definitely makes makes arguments for mobile web weaker. If you have a lot of mobile users and you want them to have a really good experience, going the React Native route makes a lot of sense.
- kin 11y agoWhat I'm betting on is the mobile web browser. I know going HTML5 on mobile has failed in the past, but the future can still come. On desktops, desktop apps ruled until web apps became super powerful. I'm betting on the same fate for mobile web apps.
- hire_charts 11y agoNow that Chrome supports notifications (on Android) I was able to uninstall the native Facebook app and rely exclusively on the web version (which actually loads faster for my anyway). Still have the icon on my homescreen, still get the same notifications -- the main difference is how much better my battery life is now!
- endemic 11y agoNot to mention you don't have to store a 100MB app.
- trollied 11y agoStill, how do you get hired as a lead mobile dev without having and native platform skills? The entire development world has gone tits-up in the last 10 years. It's all about nonsense package management for JavaScript libraries (why can't I just include a .js off a cdn? npm? What the actual fuck?), and an endless stream of disparate components which are often ill-supported, or just plain ditched after they've had their ten seconds in the limelight. I guess I'm lucky in that my degree taught me how to make a cut down ARM CPU from scratch, write the assembly to test it, write a simple compiler to compile a minimal C to ARM asm, etc. THAT IS FULL STACK! "Full stack engineer" is laughable sometimes these days. Performance problem? Ok... Know what a profiled binary is? dtrace? vmstat? No? Post on stack overflow or just spin up more cloud instances? Yup! </rant>
- Apocryphon 11y agoIsn't the advancement of computer science towards further abstraction?
- watty 11y agoThe world is changing. Our industry is changing every day, week, and year. Developers before you laughed at your high level C while they were using punch cards. The successful ones realize this and adapt.
- trollied 11y ago
- SonicSoul 11y agothis is great and timely! I was planning to do my first proof of concept in RN this weekend in hopes to maybe use it in a hackathon next weekend. If anyone has any other beginner resources that would be great, I've yet to even use XCode :/
- uptown 11y ago"I've yet to even use Xcode" Boy are you in for a treat!
- SonicSoul 11y agosarcasm?
- cellularmitosis 11y agoYes. Since the release of Swift, Xcode has Ben notoriously crash-prone and buggy. It is getting better slowly, but that was a pretty terrible first six months.
- mostafaberg 11y agoWhy is this on the top of HN ? Honestly, this is a bad thing, not a thing to show off. To quote the author: "We're web developers, not iOS developers." EXACTLY, don't bring your web tech into native platforms, learn to do it the right way or just hire someone who knows how to do it. Seeing things like that creeping into becoming a norm makes me cringe
- Apocryphon 11y agoRegardless of your opinions on this, it's still worth examining and discussing.
- currentoor 11y agoThis is on the top of HN because people, like me, are interested in it. You say learn to do it the "right way", by that logic we should have stuck to making desktop only apps instead of browser based web apps. I'm not saying this is better or worse. But I certainly think it's an approach worth considering.
- mostafaberg 11y agoIt's a great piece of tech, I'm not saying anything against that, I'm saying that it shouldn't be used as a replacement for native programming because you don't want to learn a new language. react will come with huge limitations and deps that you don't want to even think about, it's never easy as "code once, deploy everywhere", this is usually a bad decision any company makes, engineering wise.. same reason as adobe air never took off, it's a bad idea, the only reason this is taking off is because people already know JS and don't want to learn something else. By the "right way" I mean use every language for its intended purpose, you can't build desktop apps in browsers, that's why we have Javascript. and i'm saying we should keep it that way
- dsp1234 11y agoReact Native doesn't claim "code once, deploy everywhere", and in fact embraces native APIs where appropriate. As a reference, their slogan is "learn once, write anywhere". In other words, learn React Native, and write native apps wherever you want. Indeed one of the opening talks about React Native at React Conf specifically mentions that React Native is a leaky abstraction, and embraces that by allowing multiple escape hatches so that the native APIs are always available. Railing against React Native seems like railing against Unity3d, or saying that abstracting the common parts of mobile development (while leaving the non-common parts 100% available) is a bad thing. By the "right way" I mean use every language for its intended purpose, you can't build desktop apps in browsers You can build desktop apps in browsers (ie emscripten). Additionally, can you explain why a "language" (as compared to platform specific APIs) has any relevance to what can or can't be built for a mobile device? For JavaScript specifically, if Apple didn't think that it was a language for building applications on iOS, then why would they ever have release JavascriptCore (which is what React Native uses)?
- leosantos 11y agoOn a more technical note - I'm exploring React Native (having significant experience shipping native iOS Apps) and while on the face of it React Native looks amazing, as I go deeper into building something production quality, I've hit roadblocks with doing simple (natively) things like scrolling a scroll view to focus on a text field that's partially visible and changing the offsets of a scroll view to prevent the keyboard from masking the focused text field in a way that doesn't appear glitchy. Did you encounter any such problems?
- jordwalke 11y agoI've implemented one solution to this in FB's Groups App. Try that experience out and let me know what you think. Also, Nick Lockwood should comment here.
- cridenour 11y agoIs the solution something you can share on a general level? Would love to see how you approached it.
- jordwalke 11y agoIt's not incredibly advanced: It mostly just consists of measuring where exactly the current text box is in the scroll view, how high the text box is, and then having the scroll view scroll to that location, followed by fading in a docked text input right on top of the underlying one. It's pretty slick, but I'd encourage the community to recreate it in a reusable component and open source it.
- nicklockwood 11y agoWe should hopefully be able to open source a cleaned up version of the solution that Jordan alluded to, but we have a long list of components we'd like to work on, and only a finite in-house development resource. I think it's important to understand that React Native is not an attempt to replicate the entire iOS native framework - it's a set of UI components that aim to provide a better developer experience for the common app development challenges we face at FB, combined with a framework for building new components. When we encounter an uncommon challenge (i.e. something that we haven't already had to solve and build a reusable JS component for), we simply drop down to the layer underneath and create a new native component. That's why I struggle to understand the argument that "React Native doesn't do this one thing I need, so I can't use it" - we put a lot of thought into the plugin architecture of RN, and making native plugins is trivial for anyone familiar with iOS or Android development. If there is something you already know how to do natively, you can leverage that knowledge to build an RN plugin and then get the best of both worlds. If you don't already know how to do it natively, there's a good chance that someone else already made a plugin that will do what you want.
- sjclemmy 11y agoI'm writing mobile apps using angular / Cordova and ionic. When they are running on a device I can't tell the difference between a native app and a JS Cordova one. I think JS is the future of mobile apps.
- mikeryan 11y agoOn what device? I've seen cordova apps work flawlessly on some and obviously be webview apps on others.
- aikah 11y ago> I can't tell the difference between a native app and a JS Cordova one Sure, what kind of app are you writing ? games ? a video player ? a messaging app like Telegram ? a background activity on Android ? of course if it's a basic CRUD app, you're not going to notice the difference. try to make a 2D or 3D game with Cordova and see how it runs. The question you should ask yourself is, do you need a webpage in a native-shell at first place when you could just develop a website.
- Bahamut 11y agoI can tell you from experience that making a robust Ionic 1 app with Cordova that is performant is difficult. Cordova is not good at all. We did not have chump change for developers either - I've numerous contributions to Angular and Ionic, and one of my former co-workers when I was there is now on the Angular team. React Native is a superior abstraction, since it allows you to hook directly into native components very easily (try writing custom Cordova plugins), and keeps high level logic in JS.
- alien3d 11y agoThere is a big different. File size especially.Limitation payPal API and the most buggy me was XCODE upon compiling to apple apps.
- marknutter 11y agoWhat I'm curious to know is, outside of the arguments about React being the superior pattern for developing UI's, how is this fundamentally better than or different from other hybrid libraries like Appcellerator Titanium or Xamarin? In my experience they all fall short when you try to get the last 20% of your app written. Because you're not writing in the native language, directly accessing native API's, you're always going to be limited to the abstractions that the hybrid framework has (or hasn't) defined. I much prefer either going full native or full HTML5 because I never hit a wall when I try to do something that hasn't been covered well by the hybrid framework yet.
- EvanPlaice 11y agoReact Native doesn't use embedded webviews and provides an escape hatch to write native code when Reactive Native's capabilities fall short.
- marknutter 11y agoThat's no different than appcellerator or xamarin though. And in the case where you are just using embedded webviews you can easily write native code alongside them. Cordova is written in objective-c and is easy to understand.
- EvanPlaice 11y agoYou're right, I was thinking of platforms more like Cordova. I did a little reading and it appears that React Native, Appcelerator, and Xamarin are pretty close to feature parity.
- iheart2code 11y agoI am particularly interested in hearing about view transitions. I know JavaScript, Android, and iOS development and found that, while I could easily make a React Native app work on iOS and Android, it was lacking the polish that modular view transitions could provide.
- raspasov 11y agoIs the app live in the App Store? Would love to check it out!
- incepted 11y agoThis article is pretty meaningless without any link to the app so we can see for ourselves. I couldn't find it in the Apple store, did anyone?
- user8341116 11y ago>Java? Objective-C? Swift?? I don't have time to learn things!!! Now let's start coding XDDDDDD Every cross platform mobile framework in a nutshell.
- jdhawk 11y agoIts not the language thats hard, its the framework. Solution? Create a new framework? Something is broken
- jhgg 11y agoReact Native is pretty awesome - especially if you've got a web version of your app. At work, we use React Native for our iOS application - and are able to share pretty much all the store & action creators logic for our web (and desktop) app. It's been pretty huge as all our iOS engineer (we only have one!) really has to do is do the view specific stuff for iOS, the rest being shared with the web/desktop version. Also, our engineers that work on the web application can contribute to the iOS app with ease too. Our general product iteration strategy involves building it on the web version and then porting it to iOS fairly quickly. For a chat application, our stores handle a lot of data, so it's been awesome to have that code shared. React Native's bridge is also alright. We bridge with Component Kit for the chat messages view & WebRTC for the voice side of things fairly easy from JS. Also, being able to update the bundle w/o doing an App Store update is pretty big too. Here's the app if anyone wants to try it: https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8 https://itunes.apple.com/us/app/discord-chat-for-gamers/id98...
- aaviran 11y agoJust wanted to say Discord is awesome! I didn't play on-line for years, last time I did regularly, the standard for voice communication was Ventrilo/Teamspeak. When I first used Discord a couple of months ago, I was just shocked. It has a decent webapp. I can create my own server for free. It takes less than a minute to get going. It just works. Truly amazing work, keep up
- haberman 11y agoWhat are good examples of high quality React Native apps I can try on my iPhone? Bonus if they are free.
- vjeux 11y agoTake a look at the showcased apps on the React Native website: http://facebook.github.io/react-native/showcase.html http://facebook.github.io/react-native/showcase.html
- jrbapna 11y agoFor a startup still trying to find product-market fit and not building anything intensive (ie mobile games), webview apps are the way to go. Build, test, iterate quickly and fix bugs on the fly.
- supercoder 11y ago'I like react native because I don't have to learn swift' isn't the most compelling argument for why to use it.
- dj_doh 11y agoThe biggest barrier to high fidelity ECMAScript apps on native platform is simple economics. Apple is guaranteed a $99 bounty when you push something on the appstore. Making Safari or WebView compatible with their native APIs and performance is a risk for AppStore. Having built 3 non-trivial iOS apps using phonegap and JavaScript. I have come to the conclusion that I'm never going to build native apps using web stack. I have struggled with API support, DOM limitations and performance. Disclaimer: I have not tried react native. I think it'll fail for mission critical and non-trivial apps. If you just want an AppStore presence for your browser app or your app is trivial like one in the post. You are probably going to be fine.
- iLoch 11y agoYou also appear to not know how it works. React Native doesn't use a web view at all. It uses JavaScriptCore to process UI updates to native views.
- dj_doh 11y agoGood luck sir getting web stack to work with native that's at par with Swift/Obj-C perf. Also, do share some non-trivial apps that you/your team has built using web stack on iOS. p.s. I've explored JavaScriptCore the first day it was available to developers. p.p.s. I noticed you are a "React fanboy," so that's normal.
- hamburglar 11y agoWhat exactly do you think is "web stack" about React Native? The fact that there's javascript involved in the high level UI state code? I really don't think you grasp the difference between React Native and the various "wrap a web app" approaches.
- dj_doh 11y agoI've dabbled with this JavaScript for native code since 2010-11. Appcelerator Titanium SDK (now Appcelerator), Telerik, RubyMotion, Xamarin and of course PhoneGap (including PhoneGap Build). I've not used Xamarin, but putting it there to give a broader picture. Please don't get me wrong, I'd love to use ECMAScript(, CSS and markup) to do all web, native and server side development. Unfortunately they are marred by poor API support, performance and customization. Last two are extremely critical for non-trivial apps. If you are building run of the mill simple apps like - news feed, photo, video and reading etc. You'll be okay with anyone of the above 'web stack'. Here's the litmus test. Ask the Reactive Native team to port their non-trivial paper app or mission critical messenger app or main app to Reactive Native. They are using Reactive Native for a lame duck Groups and some ad manager app. JavaScriptCore is one layer deeper than wrapping a UIWebView, but it's several layers from true native.
- jkmcf 11y agoDoes anyone remember Sun's DevGuide app development platform? I used this in the 90s, and it was ridiculously easy to get write an application. You visually designed your UI, generated code, and then added your actions/event code. It was straight forward. I haven't seen anything come close. Sure it was limited, but for the small apps I want to write for Mac and iOS, it would be perfect.