top | item 17489082

Show HN: Clothes shopping app UI built in React Native

128 points| atf19 | 7 years ago |github.com

52 comments

order
[+] IBCNU|7 years ago|reply
I used Redux when it first came out, but now use Mobx as it's just... easier and has less boilerplate. Also it's easy to extend into a reframe-like pure function state management system if you want to avoid passing around objects/inheritance.
[+] robertAngst|7 years ago|reply
My new note to self:

Dont read threads about the stack I'm dealing with.

It will only make me question everything.

[+] root_axis|7 years ago|reply
Both are usually unnecessary, just pass down functions that call setState as props. That method works for 95% of problems and has the added benefit of being idiomatic react, thus making it easier to read, maintain and reason about. There are some rare cases where something like redux makes sense, e.g. you're hooked into some kind of streaming wire protocol and your UI needs to make many updates in real time based on a variety of diverse messages streaming over the wire. Most of the time though, these opinionated state management solutions are overkill.
[+] srameshc|7 years ago|reply
I love Mobx. It was fun and easy to understand specially when I tried to understand the state management. But then I realized Redux is basically easy, two things to understand MapStateToProps and MapDispatch to props and then rest is all easy to follow from there. Then with Redux Saga and it is super fun and many possibilities.
[+] jeeeeefff|7 years ago|reply
I was surprised to see that this uses React without Redux for state management. I'm aware that Redux is a separate, optional, codebase, but from how people have been talking, it seemed like just about everyone was Redux or bust.

How many production-scale projects don't use Redux? Is this more common than I'm thinking and hearing?

[+] kbcool|7 years ago|reply
I wouldn't get too excited. This is just a shell app, a few screens, no remote data, only temporal state persistence and nothing really functions (eg no form validation, no payments etc).

I assume it was used for some tutorial?!

Not saying you can't get away with not using redux at all but this isn't an example of that. Try mobx or unstated for simple state management.

Personally my projects tend to use it because I'm used to it. Once you get your head around it the boilerplate is not too much to deal with and it slides in so nicely with react. You just need to think in a functional way.

Also features like redux-persist make it powerful. You wouldn't believe the number of apps released on the stores using RN that don't persist state and simply restart when the phone runs out of memory or gets rebooted.

[+] andrewingram|7 years ago|reply
Every app i've worked on for the last 3 years has fit in one of two categories:

1. Minimal use of Redux

2. Started with Redux, migrating to eliminating Redux.

This has mainly been due to using other technologies for dealing with API data (i'm using Relay, but there are other options), and having relatively little need for client-side state that can't be handled at the component level. When I have needed simple shared state, I just use the context API. If I absolutely needed a lot of client-side shared state, I might still consider Redux, but would also strongly consider client-side GraphQL extensions (both Relay and Apollo support these) so that everything follows the same patterns.

[+] Ilikeruby|7 years ago|reply
I personally used redux one time on a project and said, never again.
[+] sodafountan|7 years ago|reply
You can absolutely build React apps without Redux, often times however I find myself using Redux the most while communicating with the Api (Call out to the API, get some new data, put it into the Redux store, App rerenders) so if this is just a shell, then I'm assuming it would be fairly easy to get away with not using it.
[+] anderskev|7 years ago|reply
We have three RN production apps, only one is using Redux because the developer was familiar with it, not because we necessarily needed it. The other two are using Apollo Link for client-side state.
[+] x4nt|7 years ago|reply
Working on a new production app right now that does not use Redux, I do not plan on backwards integration either. For reference, our team does have two applications that utilize Redux.
[+] rhapsodyv|7 years ago|reply
We don't use redux. We are happy using js-data with a rest backend right now. We going to try graph-ql soon.
[+] buildbuildbuild|7 years ago|reply
I love exploring structure and approach in codebases written recently, it’s one of the best ways to learn a new language or mentally refresh on what new libraries and tools exist.

Anyone know of good resources or proper search terms for “show me fully executed applications built on X language/stack within the past year”

[+] Jamieee|7 years ago|reply
I've found realworld.io is pretty good for working examples of different stacks. Maybe not as up to date as you're looking for, but a good start for new languages and frameworks.
[+] estsauver|7 years ago|reply
This is really cool! Thanks for releasing it, I love seeing how other people structure medium sized applications.

Why'd you pick react native?

[+] robertAngst|7 years ago|reply
Works on android and IOS?

Is there anything else that does both?

[+] specialist|7 years ago|reply
Hi Atef. Nicely done. Good screen designs.

I'll check out your code soonest. And I'll try to dig up an android device, so I can try your demo.

I just wanted to acknowledge your effort and good taste, since everyone else got distracted by the framework wars.

Without revealing too much about me, since this is my anon account, I work in a nearby field. If you wanted to pursue this domain (fashion), I encourage you to focus on product discovery. Either something novel, or excellent execution and refinement of current solutions.

I don't mean personalization, recommenders. (Unless you have something awesome.)

Rather, I mean UX for better forraging behavior. By analogy, the digital equivalent of wandering around in libraries, museum, or retail. Whatever that looks like.

Happy hunting.

[+] cridenour|7 years ago|reply
I feel like Redux has been the love child of the React community (not necessarily HN) and I have felt like a crazy person for not loving it and clinging to AltJS and then to MobX. Good to see a lot of other MobX fans in this thread.
[+] cubano|7 years ago|reply
I am wrong to wonder why this doesn't run in a browser, or does it?

I was under the impression React uses the browser DOM (or virtual DOM of course) to render its components...wouldn't that mean it can run on the desktop in a browser?

[+] awinograd|7 years ago|reply
This project is using React Native which is slightly different from ReactDOM (commonly referred to as just React/ReactJS).

In the past, ReactJS and ReactDOM were completely interchangeable. However, some time ago now React split the DOM specific parts of the library into ReactDOM which allowed the non-DOM specific parts of the library to be shared more easily across different rendering targets. Some examples:

  * android (via react-native)
  * ios (via react-native)
  * canvas https://github.com/Flipboard/react-canvas
Since the release of React Native there have been a couple of interesting projects that allow developers to use the same APIs as React Native, but rendering to the DOM instead of android/ios native views.

https://github.com/necolas/react-native-web is a great production ready lib but requires a bit of setup to get it working with a react-native project.

https://github.com/vincentriemer/react-native-dom is an extremely cool experimental idea to bring react native projects more seamlessly onto the web. It's still in early stages and has some significant tradeoffs compared to react-native-web. For one, it includes a webassembly implementation of Yoga (https://yogalayout.com/) which makes layout much more consistent among ios/android/web but at the cost of delivering more JS upfront to the browser.

[+] giantsloth|7 years ago|reply
You can just imagine that the function that would normally generate DOM elements with something like document.creatElement(‘div’), has been replaced with boundObjectiveCCreateNativeUIView() ... there is no platform check for the browser, so in the render step it will create native UIViews or whatever Androids native View primitive is.
[+] Cthulhu_|7 years ago|reply
It runs JS in the target platform's JS engine (iirc in a background thread) and renders the UI using the target platform's components. This gives it the flexibility and development speed of a webapp, but the UI performance of a native app. In theory anyway.

Compare also with Flutter [0], a new competing application development stack from Google with a similar architecture (= components all the way down) and development experience (= live reloads), but which will in production compile everything to native (instead of interpreting JS).

[0] https://flutter.io/

[+] blacksoil|7 years ago|reply
I'm not exactly sure either, but if I understand correctly, react native is actually not running under web view, hence called "react native"?
[+] deltateam|7 years ago|reply
very nice! this is one of those "git clone and walk away" moments, because something this good and free won't be around forever