
ReactXP – A library for building cross-platform apps - nthtran
https://microsoft.github.io/reactxp/
======
vmarsy
> ReSub

> The Skype team initially adopted the Flux principles, but we found it to be
> cumbersome. It requires the introduction of a bunch of new classes
> (dispatchers, action creators, and dispatch events), and program flow
> becomes difficult to follow and debug. Over time, we abandoned Flux and
> created a simpler model for stores. It leverages a new language feature in
> TypeScript (annotations) to automatically create subscriptions between
> components and stores. This eliminates most of the code involved in
> subscribing and unsubscribing. This pattern, which we refer to as ReSub, is
> independent of ReactXP, but they work well together.

That's interesting, I wonder how this differ from redux and others

I wonder also how is navigation is handled, is it easy to add react navigation
in the mix?

Clicking on Next while on
[https://microsoft.github.io/reactxp/docs/animations](https://microsoft.github.io/reactxp/docs/animations)
navigates to a 404

~~~
barake
I was curious too, so:
[https://github.com/Microsoft/ReSub](https://github.com/Microsoft/ReSub)

Looks similar to rxjs or mobx based state stores.

~~~
doublerebel
I've very successfully used the observable pattern since backbone/knockout
days with Spine, on web, node, and Titanium. It is easy to create reusable
components and follow the data flow, regardless of data source or view
implementation.

These days I use virtual DOM for performance but the architecture hasn't
changed in years. The observable pattern with viewmodels is very efficient.

------
hoodoof
Despite explaining that XP stands for "cross platform", I still think that
this is mis-named and many will assume it relates to one of Microsoft's
biggest ever brand names with global recognition.

At first glance I decided not to read the article because I thought it
irrelevant due to the XP.

~~~
coldtea
> _I still think that this is mis-named and many will assume it relates to one
> of Microsoft 's biggest ever brand names with global recognition._

Don't worry, most of the target audience of devs wasn't even 10 when Windows
XP was a thing that mattered...

~~~
jszymborski
End of Support for Windows XP was 2014, and still had a large home/enterprise
install base at that time.

------
roryisok
I would really love if MS brought out some kind of .net core electron
alternative. Xaml is nice enough to build UI with, .net core works across
macOS and Linux, and the whole package wouldn't need an entire copy of
chromium for each install

~~~
mlsarecmg
React-native is different from electron apps, though. I don't think they need
chromium, just the Javascript portion of it.

XAML is an abandoned platform. I've been with WPF for maybe 8 years. Haven't
enjoyed coding like i do now. If you have ever worked with React, it will
change you. It is something else to be able to make a UI with ease, to be
absolutely confident about state, and to tap into the biggest community on
earth (npm) to import whatever you want. Also tooling, the ability to edit
modules live while the rest of the application just stays put.

~~~
roryisok
I've heard react native is not very performant because it essentially operates
through a webview?

~~~
Can_Not
You heard the opposite of reality. Here are the key facts:

\- React Native is faster than apps using a webview because it uses native UI
components for their OS targets (e.g. Android and iOS). They also look more
native.

\- React Native runs the JS code in a separate thread from the native UI
components rendering. Webview apps will use the same thread for their app code
and the DOM rendering.

~~~
roryisok
Ok, that makes more sense

------
migueloller
I'm a bit skeptical this is needed at all. I would've much preferred if
Microsoft contributed to the already popular React Native for Web [1].

React Native already supports iOS, Android, and UWP. To add browser support
all you need is something like React Native for Web. I made a small
presentation a few months ago that shows this. Here's the source code: [2].
Take a look at the web folder.

Libraries like React Navigation [3] have also been built to support any
platform that runs React code. It looks like Microsoft built yet another
navigation library [4].

Also, check out React Primitives [5]. It aims to define a set of primitives
that work on any platform that can be used to build more complex components.
This is highly experimental, but I'm liking the direction where it's going, a
unified React interface for any platform.

In addition, ReactVR is a great example of how React Native primitives can be
extended to new emerging platforms [6].

Finally, React Native for macOS [7] answers the question that many have here
about building native apps for macOS without relying on Electron.

[1] [https://github.com/necolas/react-native-
web](https://github.com/necolas/react-native-web)

[2]
[https://github.com/migueloller/HelloWorldApp](https://github.com/migueloller/HelloWorldApp)

[3] [https://github.com/react-community/react-
navigation](https://github.com/react-community/react-navigation)

[4]
[https://microsoft.github.io/reactxp/docs/components/navigato...](https://microsoft.github.io/reactxp/docs/components/navigator.html)

[5] [https://github.com/lelandrichardson/react-
primitives](https://github.com/lelandrichardson/react-primitives)

[6] [https://github.com/facebook/react-vr](https://github.com/facebook/react-
vr)

[7] [https://github.com/ptmt/react-native-
macos](https://github.com/ptmt/react-native-macos)

------
nathan_f77
I've been developing a cross-platform app with React Native, and react-native-
web has been working really well. It took almost no effort to get my React
Native app working in a browser. I might be wrong, but it looks like ReactXP
is just an alternative to react-native-web, with some additional abstractions
and conventions for stores, etc.

I'm not sure I want to switch to ReactXP. I really like being able to use the
React Native Animated API on the web, and I can also use wrapper libraries
such as react-native-animatable.

~~~
swah
A simple app protoype for Windows though, would be interesting.

~~~
nathan_f77
I should have mentioned, there is also `react-native-windows` [1]. I haven't
tried it yet, but I think it should also be pretty easy to get running.

[1] [https://github.com/Microsoft/react-native-
windows](https://github.com/Microsoft/react-native-windows)

------
Kiro
Am I the only one who thinks this is a big deal? This basically means you can
finally share your React code across platforms. It has always felt off that
React and React Native are so similar, yet you can't use the same code for web
and apps.

~~~
jameslk
Like Java? Or QT? React Native being different for different platforms was
kind of the point. "Learn once, write anywhere." This meant they could focus
on wrapping the features of each unique platform without having to worry about
how that affects supporting all of them simultaneously. Otherwise you get the
lowest-common-denominator effect of supporting only the available APIs common
between all platforms. And all of the painful effort of making sure everything
works consistently and predictably across all platforms.

~~~
Kiro
It fits some kind of apps. I've built one React Native app where the "lowest-
common-denominator" was more than good enough (no special code for different
platforms) and would have worked just as well as a web app but wasn't possible
due to the nature of React/React Native. If I would have used ReactXP I could
have published it on the web as well and used just one React code base so this
is good news for me.

I don't understand what you're trying to argue about. If you don't like it,
don't use it.

~~~
jameslk
> I don't understand what you're trying to argue about. If you don't like it,
> don't use it.

I'm not arguing for or against ReactXP. Although if others start pushing the
default to using ReactXP over React/React Native, that will be a disappointing
repeat of history. My comment was addressing your statement:

> It has always felt off that React and React Native are so similar, yet you
> can't use the same code for web and apps.

------
jfilter
>With React and React Native, your web app can share most its logic with your
iOS and Android apps, but the view layer needs to be implemented separately
for each platform.

As far as I understand, you don't need to do this in react-native. Only when
you want to use some special features. Or am I missing something?

~~~
Kiro
> Or am I missing something?

Yes, it's not possible. You can't just use your React code as React Native.
There are many small API differences.

~~~
coldtea
Parent is not saying (or asking whether) you can "use your React code as React
Native".

They are saying that from what they know, if you use React Native, you
shouldn't have to recode your UI layer for different platforms.

Which is true, but the point parent misses, is that it might not be necessary
if you just want a cross platform app, but it is needed if you also want it to
behave more like each platform users are used to.

~~~
Kiro
What are different platforms referring to here? The quoted sentence sounds
like it means web vs apps but you (and the parent?) make it seem like we're
talking about Android vs iOS.

~~~
coldtea
And Windows vs OS X vs Linux.

~~~
Kiro
Parent was saying "you don't need to do this in react-native" regarding the
following sentence:

> With React and React Native, your web app can share most its logic with your
> iOS and Android apps, but the view layer needs to be implemented separately
> for each platform.

This is referring to web vs apps, in other words React vs React Native. That's
the context of my reply. They are not talking about the (optional) differences
within a React Native app to fit different platforms.

------
i336_
_Ahem_. I nearly thought Microsoft had partnered with ReactOS for a minute
there :)

But XP is EOL, so "XP" is never going to be used in anything now, thinking
about it.

I can wish...

------
josteink
So Microsoft now have -2- cross-platform application-frameworks they offer:

\- Xamarin with .NET. Mobile apps only.

\- ReactXP. Which also supports regular web-applications

It will be interesting to see if these two end up competing, or if one will be
ditched in favour of the other.

~~~
xname2
AS a C# programmer, I hope MS can be more focused on Xamarin. Have tried react
kind of staff, just can't get into javascript.

~~~
mlsarecmg
As a previous c# programmer, the language is pretty powerful now, it has
things now that can make c# look poor in some aspects, but, you get there only
through a setup. If you have tried JS with node being installed, npm, webpack,
babel and all this stuff, the experience will be poor. Though with these
things in check, there's nothing that will pull me back.

------
hdhzy
Is there a screenshot somewhere to see how it looks like our am I missing
something?

~~~
e2e4
indeed a set of cross-platform samples would have been nice

~~~
mtw
There's a hello world in the samples directory
[https://github.com/microsoft/reactxp](https://github.com/microsoft/reactxp)

------
d0100
I really want React for desktop apps. Currently we are running into some
performance issues with large datasets and spreadsheets, and being able to
offer a performant desktop app would be ideal.

Right now we're considering using .NET and ReoGrid, since Qt is too expensive
and we only target Windows anyways.

~~~
rco8786
You can use Electron and do that. Not a ton of love for it around here because
omg a web page as a desktop app the horror but I've had good experiences with
it. (And if you e ever used Slack or Atom, you've used Electron)

~~~
coldtea
> _You can use Electron and do that. Not a ton of love for it around here
> because omg a web page as a desktop app the horror but I 've had good
> experiences with it._

Parent specifically mentions they want to get away from the performance issues
of web apps [1] -- and you suggest they use Electron -- and even bring up Atom
and Slack as examples, the worst CPU/slowness offenders of all time?

[1] "Currently we are running into some performance issues with large datasets
and spreadsheets, and being able to offer a performant desktop app would be
ideal"

~~~
rco8786
"I really want React for desktop apps". There's currently one way to achieve
that, was simply suggesting it.

They didn't mention web apps at all.

------
roryisok
I'm missing something. How is this different to react native, which is already
supported on ios, android, web and UWP?

~~~
Kiro
How do you use React Native on the web?

~~~
roryisok
Well, in case of the web I meant react

~~~
marksomnian
And that's the thing. You need to reimplement your UI code separately for
react and react-native. react-xp abstracts all that away.

------
enobrev
> ReactXP currently supports the following platforms: web (React JS), iOS
> (React Native), Android (React Native) and Windows UWP (React Native).
> Windows UWP is still a work in progress, and some components and APIs are
> not yet complete.

Seems interesting. Hope they add linux support.

------
skdotdan
If they add Linux and Mac support, this will be HUGE.

~~~
aichi
Linux, Mac and Windows 7+8 support is via Web in Electron wrapper.

~~~
zerr
If that had wrapped native controls (Win32 Button, NSButton, etc...) that
would have been awesome.

------
srikz
Interesting to see if this will co-exist with xamarin or will target different
type of apps.

------
mwcampbell
See also
[https://microsoft.github.io/reactxp/blog/2017/04/06/introduc...](https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-
reactxp.html)

It came out of the Skype team. But it doesn't look like they're currently
using it in their universal Windows app, which is built directly on XAML.

~~~
zerr
And I believe the desktop (Win) version of Skype is still in Delphi, right?

~~~
gfody
The latest Skype is UWP

~~~
zerr
I don't think so. Just checked with Spy++, I can see a lot of TControl-s
(Delphi/VCL controls).

~~~
gfody
Skype preview in win10?

~~~
zerr
No, latest version for Win7.

~~~
gfody
ah, yeah that hasn't changed. I've been using Skype preview on Win10 and it's
very nice. It's very much a native desktop app - certainly it's the successor
to the old Delphi client.

~~~
i336_
Wow, they finally rewrote it.

------
DenisM
I can't find any instructions on how to try any of the samples: supported host
platforms, prerequisites, downloading the toolkit, building the samples, etc.

------
nonsince
This name is _really_ confusing in the presence of ReactOS

------
matt_lo
At first when I landed, I thought this was another Facebook tech site since
the template was reused from the old site of Jest and React Native.

------
Roritharr
Having macOS in there would have made it perfect.

~~~
aichi
You can address MacOS and Linux with current support. Just pack web app in
Electron.

~~~
Nullabillity
Then why would Windows need explicit support?

~~~
aichi
Don't forget that UWP targets only Windows 10 and moreover it unifies
development cross Desktop and Mobile. So we can read React UWP as small
support of easy deployment to Windows 10.

There is no support of ReactXP for Window 7/8 so there is again Electron+Web
as only viable option when using ReactXP.

------
skynode
This is simply awesome. Nothing more to add.

------
alekratz
At first I thought this was somehow related to the ReactOS project...

------
uncensored
With RN's and Expo's out of the box support for Android/iOS, I find the
missing piece is native support for Responsive Grid layout. Till then, I've
derived one based on the new support in RN v0.42 for relative dimensions. I've
taken the liberty of correcting the mental model for Grid to eliminate the
decoherence that results from using both an absolute column count together
with relative sizing (!) by letting the developer specify grid column width as
a percentage of screen size and allowing the specifying of the width of a
given column in the layout as a multiple of that percentage. This way the
developer doesn't have to divide the screen size in pixels (assuming they know
that for the screen they're testing on, which is not always the case) by some
arbitrary number of grid columns in order to get the width they desire per
grid column (indirect route.) They can instead use visual intuition about
relative sizes to define the column width directly as a percentage of screen
width. I also found RTL support (for Hebrew/Arabic apps) generally lacking in
RN, so I added RTL layout support to it.

[https://github.com/idibidiart/react-native-responsive-
grid](https://github.com/idibidiart/react-native-responsive-grid)

------
idibidiart
It's not just different platforms but _different screen sizes_ (and RTL
layouts) that's the biggest challenge I found in developing React Native apps.
To solves those challenges, I'd like to share something I've been working on:
a responsive grid for RN with RTL layout support. It has reduced the time it
takes to build relative size and responsive layouts by a factor of 10, easily.
It's based on previous similar work but with some radical changes and a few
functional and usability enhancements. Looking for testers!

[https://github.com/idibidiart/react-native-responsive-
grid](https://github.com/idibidiart/react-native-responsive-grid)

------
debt
microsoft owns 5% of facebook

------
wsgeek
Embrace.... extend.... extinguish.

Be very careful when an OS vendor makes a move like this.

