Show HN: Clothes shopping app UI built in React Native

#1

Post by atf19 » Mon, Jul 09, 2018, 9:50 AM UTC

Show HN: Clothes shopping app UI built in React Native
github.com

Re: Show HN: Clothes shopping app UI built in React Native

#2

Post by estsauver » Mon, Jul 09, 2018, 10:54 AM UTC

This is really cool! Thanks for releasing it, I love seeing how other people structure medium sized applications.

Why'd you pick react native?

Re: Show HN: Clothes shopping app UI built in React Native

#3

Post by cubano » Mon, Jul 09, 2018, 12:06 PM UTC

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?

Re: Show HN: Clothes shopping app UI built in React Native

#4

Post by blacksoil » Mon, Jul 09, 2018, 12:09 PM UTC

cubano wrote: post #3

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?

I'm not exactly sure either, but if I understand correctly, react native is actually not running under web view, hence called "react native"?

Re: Show HN: Clothes shopping app UI built in React Native

#5

Post by buildbuildbuild » Mon, Jul 09, 2018, 12:11 PM UTC

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”

Re: Show HN: Clothes shopping app UI built in React Native

#6

Post by awinograd » Mon, Jul 09, 2018, 12:12 PM UTC

cubano wrote: post #3

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?

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.

Re: Show HN: Clothes shopping app UI built in React Native

#7

Post by tendencydriven » Mon, Jul 09, 2018, 12:13 PM UTC

blacksoil wrote: post #4

cubano wrote: post #3

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?

I'm not exactly sure either, but if I understand correctly, react native is actually not running under web view, hence called "react native"?

You are correct, it interacts directly with native components - it doesn't render in a webview.

Re: Show HN: Clothes shopping app UI built in React Native

#8

Post by abcdcba » Mon, Jul 09, 2018, 12:16 PM UTC

"Documentation: Coming soon" sure it is

Re: Show HN: Clothes shopping app UI built in React Native

#9

Post by giantsloth » Mon, Jul 09, 2018, 12:16 PM UTC

cubano wrote: post #3

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?

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.

Re: Show HN: Clothes shopping app UI built in React Native

#10

Post by Jamieee » Mon, Jul 09, 2018, 12:23 PM UTC

buildbuildbuild wrote: post #5

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”

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.