With React Native it’s not all sugar and spice

With React Native it’s not all sugar and spice(blog.addjam.com)

72 points by mdhayes 10 years ago | 42 comments

cel1ne 10 years ago |

I'm working on an Android app.

I use react-native solely for the UI which I update, redux-style, with a state-tree. The state and all it's transition and event-handling is done in Kotlin/Java. I've written a small helper that generates kotlin-Interfaces from the react/jsx-files and automatically connects everything.

This way I have react's HotReload and the other benefits for UI-design and a proper typed language and IDE for networking and everything else. Including compile-time checking of events and properties of the UI.

Plus: Kotlin can compile to JavaScript, so if I ever want to port the whole thing to iOS, i just have to switch out a few APIs.

zserge 10 years ago | |

Just to mention, if you enjoy Kotlin - you might want to try Anvil+Bansa. It is like React+Redux, but for Kotlin (or Java). Resulting APKs are much smaller than React Native and don't rely on jni code.

http://anvil.site/

https://github.com/brianegan/bansa

cel1ne 10 years ago | | |

I've thought about Anvil, but I like React and I can reuse stuff from my web-development. Like tachyons styling [0].

Regarding bansa: Sounds nice, but I've never seen the benefit of using a library for state and state-reduction. You can implement and customise for yourself in less than 50 lines. (I don't use the redux library on the web either)

The only thing I would like is being able to reuse data-structures of react-native, so they won't get serialized all the time.

Thanks for the tips, though!

[0] https://github.com/fab1an/react-native-tachyons

cel1ne 10 years ago | | |

I want to add anko, which might be more idiomatic for kotlin.

https://github.com/Kotlin/anko

agmcleod 10 years ago | | |

Wow that stuff looks pretty cool. Thanks for sharing!

ljoshua 10 years ago | |

Sounds like a great use case of React Native where RN is specifically used for what it is designed for: the UI layer. I've done apps with both approaches (all RN or UI-only RN), and I'd love to read or see more about your approach.

cel1ne 10 years ago | | |

Maybe I'll write something longer about it, but i haven't figured everything out myself yet.

I have a Controller that takes UIEvents and NetworkEvents from a BlockingQueue (CSP). The state reduces everything. Kotlin's "when" constructs are extremely convenient here, but want to make sure I'm not going to far into the functional direction, if you get what I mean.

The state is completely serialisable (in fact gets serialised to and from JSON in onPause/onResume).

I'm doing networking declaratively as well, a serialisable request-description is put into the state and it's the "NetworkManager"'s job to figure out which requests to start or stop.

Kotlin's delegated property are also awesome, because I can mix and match functions and variables.

     /* show loading animation */
     override val isLoading by stateFn {
        it.runningRequests.any { it is LoginReq }
     }

grantcox 10 years ago |

I find irrelevant gifs embedded in a blog post like this make the entire article unreadable. It's distracting and annoying.

elktea 10 years ago | |

Check out https://addons.mozilla.org/en-US/firefox/addon/superstop/ so you can pause all gifs on pages like this.

lorenzhs 10 years ago | |

Especially on a portrait screen (great for reading!) where you can't really scroll away from them.

labrador 10 years ago | |

Here, have a bookmarklet I wrote to hide them so I could read articles like this:

javascript:(function (){var x = document.getElementsByTagName("img");for (i = 0; i < x.length; i++){x[i].setAttribute("src","");}}());

zelos 10 years ago | |

Agreed. I find I have to scroll them out of view to be able to read the text.

conceit 10 years ago | |

It's supposed to be distracting, but moodlifting, seeing the post exposes essentially negative oppoinions. Of course they are devoid of content.

tjbiddle 10 years ago | | |

I agree. A lot of times I'm just perusing HN for a few minutes as a break; I'm not looking for heavy reading. Setting up the content like this gives me a quick little chuckle in-between paragraphs and I move to the next. Rather than oh god this is too long - next link.

addicted 10 years ago | |

Was about to post the exact same thing.

I really want to read the article but it's a struggle with the gifs

andyfleming 10 years ago | |

3 images is not unreasonable for an article, but I do agree they felt a bit irrelevant.

kiliancs 10 years ago |

The criticism on the tooling seems excessive for the benefits it provides. On one hand you don't spend the time equally on the terminal, the text editor, dev tools and the platform's IDE. You'll normally spend most of your time in the text editor and the emulator. You'll have to use the other tools here and there, but in exchange most of your code will be shared across platforms.

Regarding code organization, I found redux to be a well established tool with clear patterns.

JasonSage 10 years ago |

> With each framework or platform we develop with we need to adapt to the conventions. From back end work using frameworks like Rails and Elixir to native mobile projects each has it’s own way to hang together a project.

Some have their own way to hang together a project. Much of the React ecosystem is not so opinionated. A lot of JavaScript out there exists in codebases in a variety of languages and frameworks—Rails, PHP, Node... you name it. Modern JavaScript build tools reflect the need for script sources and build targets to reside anywhere based on what the site JavaScript is being used in. I'd say this historical influence is showing in React Native.

However, I also think this makes sense for React Native. It's possible it's getting introduced into apps which already have conventions based on the platform the app is for and the team writing it. It might not make sense for React Native to come up with a new set of conventions when you're working with multiple platforms and existing codebases.

> But the real value is in sharing code, maintaining projects and on boarding new members to a project team. [...] We’ve spent a long time viewing projects on GitHub and picking and choosing what we feel is the best way a project should be structured.

Conventions—whether they're forced on you by the framework authors or developed by the community—are still part of learning a framework and working with it for the first time. I'd say what author came away with here is even more important than just having some convention—they landed with something they really think is best for their projects! The real cost here is that onboarding developers will also include time for them to get familiar with this project structure, but is that really so much to ask?

imtringued 10 years ago | |

React is not a framework. It's just a templating library with a preprocessing step (JSX) and a diffing algorithm that efficiently renders to the DOM.

TeeWEE 10 years ago |

I wouldnt recommend react for any app which you want togo big. In the end, you need to rewrite it to native code anyway, because you want to use the latest feature, or because you have bugs because react native doesnt follow the platform guidelines (activities, activity stack, etc)

conceit 10 years ago |

> When you develop a fully native app you do it pretty much in one place. On iOS you’re in Xcode, for Android you’re in Android Studio. With React Native you have a terminal (with a couple of panes), a text editor, perhaps Redux Remote DevTools plus your IDE for the platform you’re targeting.

It's not like those IDEs can't be configured to work with the raw tools.

cl3m 10 years ago |

If you want a single IDE, vscode is really great.

mdhayes 10 years ago | |

Yeah I'm going to give vscode a shot.

kasparsklavins 10 years ago | |

Unless you need to open large files.

rkwz 10 years ago |

You should do your due diligence before using a framework/library/technology for production code. Don't just follow the hype.

http://www.sheshbabu.com/posts/guidelines-to-choose-a-javasc...

kelseydh 10 years ago | |

The case for React is strong in this respect, because Facebook has many lines of React committed to important production code. Your problems are also their problems... unlike Angular, which Google isn't relying on in production code nearly as much.

rkwz 10 years ago | | |

Yep, React is a good choice because FB is using it in production in their consumer facing apps. But React Native is not used that way by FB (yet?)

vikeri 10 years ago |

I don't mind switching between different contexts, I frequent the terminal for git an other stuff anyway. I think it is fairly magic that one may finally develop the same code for both iOS and Android. Huge productivity win, especially using Clojurescript!

I agree with the instability though, nothing for someone afraid of rumbling around in the RN source code to solve things like this https://github.com/facebook/react-native/issues/7720

ljoshua 10 years ago |

Many of the points made in the article boil down to React Native still being a relatively new framework, and the team and community behind it iterating very quickly.

Sure there will be growing pains starting out, but the benefits that are coming from this new direction are, in my opinion, worth all the effort. I've written several apps utilizing React Native now, and love the efficiency boost it gives me.

daverecycles 10 years ago |

If you're looking for an all-in-one development environment, my team is building an IDE specifically for React Native. It's free and open source.

Deco IDE

https://www.decosoftware.com/

https://github.com/decosoftware/deco-ide

pritambaral 10 years ago | |

I'd like to use it! But it's not available for Linux (oh, the irony).

WA 10 years ago |

HN community, how would I make my core model + business logic cross-platform? I want to re-use the model and its behavior (like some data evaluators) in my Web app, on Android and iOS without rewriting it every time from scratch. I'm fine with creating native code for the UI. but I'd like to share at least some code. What would you recommend?

Fargren 10 years ago | |

What I do is write the model and bussiness rules in Java, and I use J2ObjC[0] to export it for iOS. The configuration is not pain free, but once set up it has been extremelly reliable for me. I don't need to support web, but I hear GWT[1] works well for this. I don't see why JSweet[2] would not also work.

[0]http://j2objc.org/ [1]http://www.gwtproject.org/ [2]http://www.jsweet.org/

vikeri 10 years ago | |

If you use react native on mobile and react on the web the core model and business logic can easily be shared since it is just pure js. And you can use any of the languages that transpiles to js: TypeScript, Clojurescript etc.

WA 10 years ago | | |

What about performance and the "overhead" that React Native might introduce?

pjmlp 10 years ago |

For me C++ is all I need for portable native code, no need to add extra layers that kind of work, that only increase code entropy and debugging efforts.

Directly available in iOS, Android, WP, Tizen, Ubuntu SDKs.

The only major problem is the way Google disregards their NDK stack, while Microsoft and NVidia engineers are able to do what Google PhDs are not.

skrebbel 10 years ago | |

How do you build the ui? Just push pixels? Or vertices? Some library maybe?

pjmlp 10 years ago | | |

Since I care mostly about game related stuff, Cocos2D-x, SDL, openFrameworks.

When doing more app like coding, following MVVM patterns with the view written in the platform language.

On iOS you can use Objective-C++, on WP and UWP C++/CX.

Android is the worst because Google keeps the NDK at an arm's length, but projects like Djinni and SafeJNI help.

If you don't bother to provide a native experience, but still enjoy the portability of C++'s code, there is always Qt and QML.