mirror of
https://github.com/ElectronNET/Electron.NET.git
synced 2026-02-03 21:25:13 +00:00
Review Electron.NET-React-Typescript-MobX? #67
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @yoDon on GitHub (Nov 14, 2017).
Originally assigned to: @robertmuehsig, @GregorBiswanger on GitHub.
If you have a moment to look over and give feedback on the Typescript React boilerplate sample I just prepped, any suggestions would be much appreciated (and yes, I realize the un-themed app currently looks terrible, I'm aiming to clean that up in the next commit but wanted to get a functionality check first).
The repo is at https://github.com/yoDon/Electron.NET-React-Typescript-MobX
A couple notes: I'm a big fan of so-called static React architecturs where the frontend and backend are nicely decoupled and just data is exchanged between browser and server after the initial HTML/JS/CSS loads, so this sample uses webpack to build the React Typescript into a static /wwwroot/index.html and /wwwroot/bundle.js.
The React pages in this sample communicate with the C# server code entirely over Electron's Ipc API, so there isn't really any need for the ASPNET Controllers but I left the support for them in place in case others want to make use of them. Eventually I'd prefer to use strongly-typed SignalR communications between client and server rather than the text-based Ipc routes, but with the dotnet core version of SignalR still at alpha1 I wasn't convinced now was the time to bake that in. On the Server side, the Ipc routes are registered via code in /Ipc/Register.cs that's called by Startup.cs. I'm currently using a dictionary to ensure uniqueness of the Ipc route names because I wasn't sure if either Electron or Electron.NET would warn/throw an exception if I accidentally screwed up and registered two handlers with competing text paths on a larger project.
The index.html generated by webpack (npm run build) is currently loaded into the renderer process by putting a window.location redirect in the Home View .cshtml file. That's kind of a weird way to go about it but I wasn't sure how to keep the ASPNET MVC intact while routing Electron to open /index.html rather than /, and as with the Controllers I wanted to make sure that the basics of the boilerplate could support either static React sites or MVC sites built using whatever rendering engines the developer might prefer.
I wasn't able to figure out how to get hot reload working on the C# code. I don't know if that's pilot error on my part or a feature that's not implemented yet. I also didn't try to turn on hot reload of the React code into the browser as a result of a currently open bug elsewhere in the React/Typescript ecosystem.
Super excited to start trying to use this for something real.
@GregorBiswanger commented on GitHub (Nov 14, 2017):
Hey @yoDon,
I´m happy to see your involved with ASP.NET Core, React and Electron.NET.
I tried your app, but I can only see a small part from github on the header and a "go to chat..." link.
After I clicked the link, I input my name and went back with "back to home page...". The home page showed me the same from the start again. Is this your expected behavior?
Architecture review
I´m not familiar with React and I only compared it with the default ASP.NET Core React project template. Do you use an other archtitecture? I think a lot of ASP.NET devs are more familiar with the default templates and have a simpler entry. It´s only an idea.
Thank you for your exciting project sample!
@yoDon commented on GitHub (Nov 14, 2017):
Thanks for verifying that it builds and runs and that the instructions were viable enough to make that happen.
There is currently zero CSS applied to any of the elements in this repo, so yeah it looks ugly and the WebView is oddly sized. My hope is to get another commit in later this week to apply some CSS styling to it.
As a general note, since you mention not being familiar with React, I'd highly recommend spending a bit of time getting familiar with it, as it's an incredibly well architected tech that's going to be a huge part of what people are doing on the front end of your Electron.NET tooling.
As to the ASP.NET Core React project template, I've not been able to find a good walkthrough on it (perhaps your googlefu is better than mine), and I'm frankly puzzled as to what ASP.NET would be offering on the SPA frontend side given that modern front end development is a world of npm and webpack whether you want it to be or not (the backend advantages of ASPNET I totally get, which is why I'm so excited about Electron.NET, and I can see how ASPNET SPA can facilitate the backend development for modern frontends).
Totally ok to mark as closed this if you're so inclined
@yoDon commented on GitHub (Nov 15, 2017):
I've updated the boilerplate to have a better looking sample app, improved the Readme, and added a few helper commands to project.json to make it easier to build the app
https://github.com/yoDon/Electron.NET-React-Typescript-MobX
@GregorBiswanger commented on GitHub (Nov 15, 2017):
I sync your new update and can see and use it:
I like it! Go for it! :)