TGIMBA .NET Core Upgrade – React JS client research

Welcome back!

All my reading has shown that Angular Type Script and React JS are the ‘hot’ JavaScript frameworks.  So, because I want to stay employed and I like eating, I want to them to add them both to The Globe In My Bucket list Application (TGIMBA) software ecosystem 🙂

To start out, I created a React JS project in Visual Studio 2017 to start exploring. There are two options – React JS and React JS w/Redux.

1

My first question is what the heck is Redux? 2-3 articles later (reference #1 gives a lot of good insight), it seems like Redux adds architecture behind React JS. It is not required, but if your React JS application grows to any size, more people seemed to have a positive opinion about using Redux than negative. So, I threw it into the sample project and started poking around.

Observations:

  • React JS appears to be only JavaScript. So, any type safety like Angular/Type Script gives you is lost.
  • Reminiscent of what I understand ASP .NET 1.1.x to be, React JS mixes the view w/JavaScript code in one file.  Though, the combinations seem to be in smaller chunks called ‘Components’.  I have some more reading to do, my my initial understanding is that these components are core to React JS.
  • After building and running the app, I get this error:

System.TimeoutException: The create-react-app server did not start listening for requests within the timeout period of 50 seconds

Reference #2 shows that it happens on launch and refreshing the browser loads the app (this happened for me as well).  Their recommended of adding additional time to Startup.cs -> Configure(args) also worked for me.

spa.Options.StartupTimeout = new System.TimeSpan(0, 0, 80);

  • Upon running the VS 2017 sample, it looks exactly like the Angular 5 Type Script sample

2

  • Debugging seems easier than Angular/Type Script. If you remember, I had some issues figuring out where the authentication token was inside the JSON object being returned to TypeScript client. I was able to figure this out only when I turned on the Client Side Debugging offered by Visual Studio 2017. I was not able to easily do this using the Chrome tools becaused the TypeScript is compiled. The Vanilla JavaScript client I am building is also much easier for debugging client side.

3

  • For this to live with the Angular 5 Type Script client, we cannot have any conflicts with the package.json since their dependencies are completely different. I don’t know how this will play out when I try to combine them, but the client is contained in ‘/ClientApp’ like the Angular 5 client. Assuming there is not conflict renaming one of them, the React JS lives in the /ClientApp folder. So combining them should not be a problem.
  • The React JS/Redux package uses .NET Core 2.1 which will not play nicely with the intermediate Angular 5 client I got working yesterday 😦 On the positive side, the Angular 6 template places the package.json inside its /ClientApp. I am assuming this is because others have required client isolation from other part of their .NET Core application. On the negative side, I am going to have to upgrade to Angular 6 BEFORE being able to see if I can combine it with React JS/Redux.

Stay tuned!

References

  1. https://www.reddit.com/r/reactjs/comments/4d9bq4/would_you_use_react_without_fluxredux/
  2. https://github.com/aspnet/JavaScriptServices/issues/1512
  3. https://reactjs.org/docs/getting-started.html
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s