Show HN: Target almost all platforms at once with react native | Hacker News Reader

Show HN: Target almost all platforms at once with react native

github.com

70 pointsamoghbanta44 comments

I really like React for the web, but after trying React Native it reminded me a lot of Cordova/Phonegap. You'll quickly run into requirements for which you need to install a plugin, and another plugin, and another... of questionable quality and low maintenance activity. So currently I'll stick to just building separate native apps, which also means no cross platform concessions have to be made.

I've built a few small apps for internal use on Ionic and have now just started implementing the next one in React. It has oddly been a tremendous joy using React, and I think I appreciate it even more after using Angular for a few years.

I get that one of the advantages of React is that you have so much freedom to configure your app or use the exact modules you want. But trying to do that right now has been a downright nightmare. I've spent most of my time resolving dependencies issues or navigating open Github issues trying to get some basic things to work.

The underlying conceptual model is extremely solid, though, so I'm figuring it is well worth it to put up with some of this pain right now as a sort of investment.

I've actually had the opposite experience. I've built roughly a half dozen cross platforms mobile apps with React Native now and it has been a really fantastic experience. For the most part, most of the native modules I have consumed from the community have been high quality and are maintained sufficiently (merging PRs, responding to issues within a day or two). Conveniently the surface area of native modules is small, so it becomes trivial to fix or extend them should you run into issues. Building cross platform UI is trivial- between fixed and flex layouts with absolute and relative positioning there hasn't been anything yet I could not build. Apps ranged from brochure-style marketing "apps" with forms and wizards to a application that had augmented reality features using only React Native and without having to create a native module myself (although I have contributed to quite a few now). Recently I have been using `react-native-web` as this repository shows for mobile applications that don't have native module requirements to build cross platform native mobile and web applications that are responsive to all devices (phone, tablet, laptop, desktop, 4k). It's become so easy to do this that I'd probably hesitate to write a standard web application again (given the requirements aligned); doubly so if there was even a remote possibility that the client would want a native mobile version eventually.

EDIT: If you're interested in React Native but don't necessarily want to go through the (very short) motions of getting set up with a local environment, give the web player[1] a shot or take a moment to play with the interactive documentation[2].

[1]: http://dabbott.github.io/react-native-web-player/

[2]: https://facebook.github.io/react-native/docs/flexbox.html

Can you recommend any tutorials/components for making Android UIs with minimal effort? I'm pretty comfortable with JS as a language, but have very little UI experience and my previous attempt to make a simple Android messaging UI was quite painful.

Either of these[1][2] will get you a good distance. Also, check out Awesome React Native[3] for a curated list.

Even if you use one of these component libraries though you will just be deferring learning the basics of React Native layout and decorative styles until later on. It's an unavoidable tax you will have to pay one way or another. Thankfully it's not too hard- the documentation is explicit about what style properties apply to which components (example: `View`[4]) and the `StyleSheet`[5] helper will bark at you if you use invalid styles.

[1]: http://nativebase.io/

[2]: https://github.com/xotahal/react-native-material-ui

[3]: https://github.com/jondot/awesome-react-native

[4]: https://facebook.github.io/react-native/docs/view.html#style

[5]: https://facebook.github.io/react-native/docs/stylesheet.html

Unfortunately, each of those libraries are just 100% JavaScript, not utilising the native Material Design components within Android, and thus end up being _really_ slow, particularly when remote debugging and rendering lots of those components on screen at once.

There really needs to be a library which bridges the native Android (and iOS) modules and React Native, in order for React Native to be more useful and used more.

have you looked at nativescript ? similar to react native, but it doesn't require building handmade boilderplate code to bridge into native. they have automated that stuff.

I mostly agree with this comment. React Native offers a really bare bones solution, that you often have to find yourself going out to the community and looking for community supported libraries to make an application that is just a bit more complicated than the React Native tutorial. Even still, libraries that _should_ exist are non-existent or severely lacking.

Development seems slow - they haven't managed to fix their "single-threaded JavaScript" performance woes which has been plaguing them for years, their provided navigators are horrible, they have no "native" default components (no native radio group controls, combo boxes, etc), no built-in push notification support, and their animations and performance are _slow_.

For relatively simple apps without a focus on native "feel", it is fine and very fast to develop with.

*iOS excepted.

to be clear, CURRENTLY "almost all platforms" is android, ios, and web...

The TODO list includes

* support for macOS(react-native-macOS) * support for Windows (react-native-windows) * improve webpack config and add media queries for web * Add example projects for each branch

How are the arguments against React Native today? A few months back we still had a lot of people saying that it underperforms with super complex stuff (ie. Enterprise Grade stuff). Has it improved?

I'm glad to see more projects like this popping up.

React-as-paradigm is more powerful than any one particularly implementation; it's a wonderful way to describe user interfaces, and using cross-platform primitives is a perfect way to abstract design systems.

~= full disclosure - coworker is working on https://github.com/lelandrichardson/react-primitives, which I've used a bunch

While I can see what the author is attempting to do (define a common set of root components that all platforms can use with some preference libs thrown in such as from the `Animated` project), it seems like this has already been done (`react-native-web` aims to match what is present in `react-native` already) and as such this is really more of a personal micro-framework. Or is the goal to have this set of components be the base that all platforms rest on? Am I missing something?

Very basic question: am I thinking of these the right way?

React.js is the view layer of a web app/page. ReactNative is a whole framework for making an app (that you could call back to a database, do some logic on the data and display it to the user.)

Is that right?

React.js is the view layer for a website, ReactNative is the view layer for a native app. In both instances you could call back to a database, but React doesn't provide any of those abstractions. Neither is really a full featured framework, and both focus on the View.

Thank you. My point of reference was Appcelerator Titanium: which is a js, cross-platform framework. Is ReactNative a "view" for something like that? Or are they pretty similar.

Someone else may be better at explaining the differences than me, as neither are my area of expertise. My understanding is that they both provide a view layer, and Titanium provides more of an everything-included framework so you don't have to touch any native code. With React, it provides an easy to use view layer that helps you create compositions of components and layouts, but it's expected at some point you'll want/need to build things in native code. It's also expected that the overall architecture of the app to be provided by the developer. This gives more flexibility to break out of React or add it to existing projects where its helpful.

Without having more experience with Titanium, its hard for me to say if you can use ReactNative along side it, but my gut says they probably have a different way of doing things.

React is a view-centric component system. It's primarily used for view-related stuff, but the component abstraction is pretty powerful, so they can be useful in lightweight cases for application structure too (YMMV here).

React Native is a system of bindings of native APIs to Javascript. This includes bindings which allow you to use native UI elements just like you would use divs, inputs etc. for React on the web, but it also includes bindings for common mobile OS APIs like geolocation, camera, maps, etc.

Ironically, you can target all platforms instantly already. With nothing but a text editor. It's called the web.

Looks good! For the clojurescript ecossystem, it would be a great base project for something like re-natal with broader platforms support: https://github.com/drapanjanas/re-natal

I was thinking yesterday about fork it and add more platforms for my own use, now I try your project first and create a thin clojurescript layer over it, tks :)

React Native has been moving to give common modules common names across iOS and Android. That seems great, because it's easier to share code. I wonder why there isn't a simple set of wrappers for HTML widgets, using the React Native names, so you can also share code with web. Does this project do that?

It's the opposite - instead of React Native mapping HTML elements into appropriate native components, websites are just another platform target. You write your components using normal React Native components (Views, Text, ScrollView, etc.) and the `react-native-web` platform converts that into structurally (but not semantically) compatible HTML.

The nice thing is, this is how all platform targets work. It's the platform extension's responsibility to map React Native to their platform. In the case of layout mapping, this typically involves mapping to the `Yoga`[1] layout engine on that platform.

[1]: https://github.com/facebook/yoga

Excellent, yes, that's exactly what I want.

This looks cool, although it appears a bit young still.

I'm looking for a cross platform (>= iOS+Android) mobile solution, so I can write a web app once, and deploy it easily as a mobile app on multiple platforms. The app will be very simple, almost proof-of-concept-like; I basically just need something not ugly that can connect to the RESTful app backend.

I've been Googling for the past couple of weeks, and so far https://coronalabs.com/ and https://dropsource.com/ look interesting, but I would love to hear from someone with experience.

I looked at those as well (plus options like Ionic) and decided to go for React Native.

Coronalabs is all about graphics and therefore well suited for games. They do offer some very basic widgets, which are not native (which is ok, but you probably have to create some yourself, for example they no lists if I remember correctly).

Dropsource focuses on offering the same dev experience for both iOS and Android. But you still have to build each platform separately. Its a bit like React Native without the cross-platform option.

So, I've been considering learning React recently, and this is a reason for it. How native is react native? Does it use the platform's look and feel or essentially feel like a clunky web browser, more similar to NW.js or electron apps.

https://facebook.github.io/react-native/

> With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

You can use native code, the JS components render to native things -- there's a lot to it, and I'm sure I can't explain it properly, better to just check out their guide.

Also, React Native was not built to be used on all the platforms -- I remember when RN for android (I believe IOS support was out first?), people started asking (of course) whether they could write code that would run on both platforms and the tools team said something to the effect of "the code will look similar, but will not be the same".

Of course, that doesn't stop someone from writing components that compile to other components or something or writing some sort of cross-platform group of components on top.

Huh, cool, I'll definitely check this out more then. Hopefully something like this will catch on and replace the browser based, non-native UIs that seem far too popular these days.

Yeah, this tech is definitely pretty amazing. I'm not the biggest fan of facebook so I'll bash them a little bit here -- their biggest success with this was envisioning it (or bolting on) the fact that the react model wasn't built only for the DOM. Originally React & ReactDOM were the same (maybe it was temporary), but when they started to target more platforms, they split them out and that's been a changer as you can see now.

Honestly I think companies that opt for a browser-based non-native UI do those for reasons that won't change just due to RN existing. Once developers get comfortable with RN, and start offering themselves as "we do native apps in half the time, give your users better-than-mobile-browser-site performance", I think the companies that were content to jam a webpage into an app will start improving.

Also note this article with a pretty good criticism of React (I find those are lacking these days): https://bitquabit.com/post/the-more-things-change/

tldr; Turns out react is a little bit similar to a thing called COM, but maybe we're better at this pattern now and things won't become spaghetti

I have enjoyed react native and found it pretty good. I remember doing a few apps way back in Phonegap and I don't get the same feel at all which is nice.

I actually wrote an app in native swift and then re wrote it in React native. I don't have any benchmarks but using it I havn't noticed it's any slower than the native one. And I think it looks better! Because, for me, it's easier and quicker to create things in JS than Swift.

This is the app btw. 100% React native! https://itunes.apple.com/us/app/rekindlr/id1072608462?mt=8

I have seen that people who come from native (Java/ObjectiveC/Swift and even Xamarin) write more robust React Native apps than people coming from HTML5. That is not strange by any means but something to keep in mind. It is not 'magic'.

> How native is react native? Does it use the platform's look and feel

No. If you want native look-and-feel, you'll need to download and install third party libraries, e.g. for Material Design. However, those third party libraries are implemented in 100% JavaScript and do not utilise the native Android components (rather just rebasing off MDL [1]), which will just end up making your app "feel like a clunky web browser", particularly when debugging or rendering lots of those components to screen.

[1] https://getmdl.io/started/

Emoji in the commit messages. I've seen a few projects doing this now and I don't know what to think.

What should I think?

Is this best practice?

Emojis are an effective way to communicate something in a small space. Ideal for commit messages.

Premature optimization in commit messages?

I really don't understand why nativescript is not getting more coverage.

I guess many people on HN are working at FB....

NativeScript is pretty neat, for sure. I'm guessing the reason it does not get nearly as much exposure on HN is because it's quite a bit less mature with a community at best an order of magnitude smaller than React Native. Or it could be that everyone here is working at Facebook...

For those interested, NativeScript is Telerik's answer to React Native and tends to leverage Angular JS as the front end framework. One of the fundamental differences between the two are in how they give you access to device/platform functionality. React Native forces you to drop down to native code when you need access to device or platform functionality not exposed through their framework API. Conversely, NativeScript attempts to expose the device and platform APIs to your JS code. This difference has a very real convenience/performance trade-off.

I should mention that developer ergonomics is another key differentiator. NativeScript exists for Telerik's bottom line. For example, instead of providing a nice HMR facility, they invested thousands of hours into building a pay-for cloud offering (AppBuilder LiveSync). They are a company and I don't fault them for monetizing a significant investment they made in this platform, but when looking at the available options this is a negative.

I had exactly the same thought: Telerik is a tool company so must make money from nativescript (no problem with that) while Facebook can affort to make RN into something really good without it ever hurting its bottomline. For them its an investment to attract new devs.

Few questions:

Status of this project. Can I use it for production?

What are the differences from other starter kits like Este, which also could be used for building react-native and react apps.

hi yatsyk, The project is in a early stage, I've been using it in my recent production project, depends on your requirements and complexity if it'd be suitable for you in production. I also wrote a blog about it, hope this helps you: https://medium.com/@amoghbanta/write-once-use-everywhere-wit...

Why would you post something thats not even done? React-native was built to be a better alternative to Cordova, it's not like you wrote it.

Demo apps or screenshots can help

working on it, will soon be having some demos :)

no ty!

Reply on news.ycombinator.com