What is the Client/Server model when using Electron (Atom Shell)? - javascript

I'm trying to wrap my head around how Electron (formerly Atom Shell) works.
I'm coming from a traditional, MVC-style web application where a Browser is calling a Controller Action through a Routing System, the Controller then fetches data from a store (File System, Data Base, ...) and renders a View, which is sent back to the Browser. Some Actions may be sending back JSON instead, as they are called through JavaScript/AJAX instead of the Browser actually navigating to them.
I want to create that, but as a Cross-Platform Desktop Application. I know that Atom Shell combines both a Chromium-Browser and a Node.js/v8 runtime, but I'm not sure how they would communicate.
I guess I could run a full on web server (basically, some Node.js HTTP Middleware like Express), but that creates a network-reachable server (which might also trip up firewalls) - one of the reasons I want to make a desktop app is precisely to avoid running a real server. Basically like the MVP/MVVM pattern in a "normal" desktop app.
Can someone give me a few starting points for what I'm trying to do? How would the browser talk to the node runtime (the "Client" as they call it?) to tell it "Hey, fetch my the record with ID 12345" and would the Client return rendered HTML, or would the browser just get a blob of JSON back and render it through a JavaScript templating engine?

Electron doesn't seem to use Node.js as a web server but merely as an environment to run background JavaScript code, this code can use node modules to access the system. At the same time Chromium provides a user interface for the app, it displays regular web pages that run usual sandboxed JavaScript. Both are being embedded by the Electron executable, the former directly (Node.js can be built as a static library), the latter via libchromiumcontent. In a way, Node.js is the controller part of the application whereas Chromium is the view.
Typically, the concept used for web pages here is that of single-page applications: a web page represents one application window and as such it stays around as long as this window is visible (often for the entire lifetime of the application). Whenever it needs to display something different it requests data from the background code running in Node.js, just like AJAX applications request data from the server. The page itself is not reloaded, usually JavaScript templating will be used to update contents.
There isn't really a server/client relationship here however, the communication can actually go both ways. Both sides can use the ipc module to send messages to each other (main process, renderer). These messages can have any arguments attached to them, these don't need to be encoded explicitly (typically this is implemented by using JSON internally to encode parameters, I didn't verify whether that's the case with Electron). Internally, that message passing is implemented via platform-specific IPC mechanisms, using libuv to be exact.

We implemented fully functional nodejs server & angular UI with sqlite3, sequelize ORM using
*. https://github.com/theallmightyjohnmanning/electron-express
Some of the Projects helped us lot:
Framework: https://github.com/angular-fullstack/generator-angular-fullstack
Windows Packaging: electron-packager": "github:electron-userland/electron-packager"
Creating Shortcuts and Auto Update: "electron-squirrel-startup": "^1.0.0",
Creating Release Installer: "electron-winstaller": "^2.3.4",

Related

Where does SvelteKit, Next.js and Nuxt.js code run? And can you write http request handlers in these frameworks?

I have been using SvelteKit casually for a little bit now in my own personal projects. I have used other frameworks like Next.js and Nuxt.js in the past too. It has always confused me when working in these frameworks where the code I am writing is actually run.
For some context in my day job I use the ASP.NET Core platform to create more traditional web applications.
In ASP.NET it is clear to me where the code I write is run. I write frontend markup in Razor pages (just a way to write html but inject C# expressions inside). When the browser requests a page to view from the server, the server grabs the page and any data it needs, generates html from the Razor page markup and sends it back to the browser to render it into a beautiful web page 😁 Also within the same application I can write http handlers that can listen out for form submissions and interact with a database via an ORM.
In JavaScript frameworks such as SvelteKit, Next.js or Nuxt.js however this process has always confused me. I know that each of the frameworks use their respective component frameworks (Svelte, React and Vue) under the hood in some way. I also understand that each framework adds the ability to have file based routing so that files in a specific place in the src code map to a specific route in the browser. e.g. in SvelteKit you can have a svelte file at src/routes/myAmazingPage.svelte that gets rendered in when the browser browses to https://wherevertheappishosted.com/myAmazingPage.
However this is where my understanding becomes a bit clouded. When you browse between pages in SvelteKit it does not cause page reloads in the browser. This tells me that the framework is using some kind of client side routing to handle this behavior as the url at the top of the page and the page contents change without causing a page reload. There are also no network requests being sent to the server to fetch pages at a certain url which tells me that all the data fetching must be being done in JavaScript on component mount or within some other lifecycle hook.
So my question is in that case if there are no http requests being sent out per page request (i.e. when you navigate to a different page) to a server, then where is the code I write in SvelteKit actually run? Is it the case of all the code I write in SvelteKit is compiled and sent over to the browser on initial page load and then all run in the browser? Including code I write to fetch data within lifecycle methods like onMount().
Also if that is true then do these frameworks have any kind of http server running in the background to handle any other web requests? For example can I write a http handler in svelte kit to handle a post request from a form submission to save data to a database? That is the way I would go about handling form submissions in ASP.NET and I have always wondered if it is possible to do in SvelteKit, Next.js or Nuxt.js. The only alternative to this that I have used in the past is writing a separate http server written in node.js and express to handle communicating with a database and other operations, that I send all my requests from my SvelteKit apps towards.
May be a bit of an obvious question to more experienced JavaScript framework developers out there, but since working in a more traditional MVC framework like ASP.NET on a daily basis this subject has always confused me.
SvelteKit applications can be deployed few different ways to production.
In development mode, the request handler is run by Vite development server
In static production deployment mode, there is no request handler and nothing is run on the backend - the visitor just downloads HTML, CSS and JS files from the server
In server-side rendering (SSR) production mode, the requests are run by SvelteKit node adapter (Node.js process). The adapter allows also to write server-side request handlers that are not available in the static deployment mode.
Next.js and Nuxt.js have their respective own web servers written in JavaScript on the top of Node.js V8 virtual machine.

Use NuxtJs on server-side to Hydrate a Cordova client

I'm trying to upgrade an old mobile application written in vanilla Javascript+React hosted on Cordova. This application leverages a simple api on the server-side:
when the app requires a page, sends a request to the server
the server elaborate the request, fetch the resources, and then reply with a complete HTML+JS. The Javascript is a ReactJs view compiled with Gulp/Browserify
the app takes the reply and stores it in a local Sqlite DB, then mount the received code and the view become reactive.
if the user requests a view but has no connectivity, the app search though the Sqlite db wether there is a cached view and uses it instead of requesting a fresh copy from the server.
When developing, the React JSX code is immediately compiled to a vanilla JS so, when in production, the api only needs to merge the vanilla JS with the HTML template. Plus, adding new features and fixing bugs is quite easy, because each user essentially download any updated view, each time he enters in it.
The problems with this approach are:
developing is painful because of the continuous compilation
a "base" part of the application resides on Cordova assets (basically the utilities to fetch from server, caching etc) and fixing this parts needs a new app release or ugly override patches
the caching feature often causes problems to the Sqlite database (which is used also for other stuff on the app); as a result, the DB sometimes corrupts and the user must clear the app data.
we would like to get rid of React
We already used NuxtJs for generating static sites, and it's great, but in this case I cannot leverage the SSG because the app should be almost completely served from the api, so we can keep the easy-feature-and-fix stuff.
I never used NustJs SSR and wonder if could be suitable for my use case, for example, could I spin up a NuxtJs instance on server-side which generates the html output and hydrate a barely empty Javascript client on Cordova? Is there a better way to accomplish this task? Should I use only Vue instead?
Thanks

Write PDF files from Web-App to USB-Stick

I am concerned with the feasibility of this:
On a pre-configured machine I will have a Web-Application pre-installed, next to an Apache-Suite. So client and server are the same!
In this Web-Application Users can drag and drop PDF-Files to an USB-Icon.
Then the Web-App should write the dropped PDF to an attached USB-Stick.
I have never done something like this (writing to USB), so I am fairly insecure.
And I am well aware of the browser-restrictions concerning JavaScript and Filesystem-Access, but...
after researching a bit I found out, that there might be some possible and
relevant (I'm a Web-Platform-Guy) solutions to this:
Make a "Chrome App" with USB-Permission (does this really work?)
Use PHP to find the USB and then write to it (how would that work under Windows?)
Use some Flash as middle man (not preferred)
Now I'd like to know:
Has anyone some good experience with before mentioned possibilities?
Has anybody ever done something similar? Did it work? Which path did you choose?
How would I know which drive the USB is mounted, and how would I get sure?
What other possible solutions to this problem are there?
You have a website ('client-side' user interface) and a back-end server ('server-side') running on the same machine. This gives you 2 options:
Client-side: Download a file through the browser via HTTP GET and let the user choose where they save it.
Server-side: Build your USB interactions into the back-end (Node.js) code, as #mcgraphix suggests.
Interacting with the USB on the server-side provides the most flexibility. Furthermore, there are a number of libraries that you can leverage. Head to npmjs.org and consider, among others, the following Node.js server-side packages:
usb-detection
usb
With the server-side approach, initiate a Webservice request when the user completes the drag & drop action on the client, and implement the USB interaction within the server (Express.js or similar) method which services the request.
If the letter of the stick is known then writing a file from PHP will be simple
file_put_contents( 'E:\\folder\\file.pdf', $data );
Update
You can read a list of drives into a dropdown and allow a user to select a default drive to write to
https://stackoverflow.com/a/8210132/696535
Your question is more an architecture question than a code specific question.
Your web app (if you insist on a web app) should have two major components, a server side component that can be given arbitrary commands, and a client side component (javascript using XMLHttpRequest) that can make requests to the server side component to execute said arbitrary commands.
So your server side component, the component that serves your web page should have some server side code that can write your pdf to the file system, it should probably generate the pdf file as well rather than doing that on the web browser.
Which technology you use is up to you, whether that's PHP, .Net, Node.js etc...
The general gist is you want a server side framework that deals with HTTP requests, in your case probably a post request from the client side containing the encoded pdf, and responds accordingly. Bind a particular http route to trigger your save logic.
Your http post request to the server will contain your payload which is the pdf file to a particular path, e.g. http://localhost/savepdf that whichever technology stack http listens to (you'll need to configure that)
Your server side component should read the incoming data, decode it as appropriate then make a file system request to write the received payload to disk.

Reading and writing client files from a web application

I need to implement a mechanism in order for a remote web application to communicate with a local desktop (WinForms) application that I cannot modify nor have the source of (except by decompiling). This happens by writing a file to the temporary folder that the desktop application will consume, and waiting for that application to "return" by writing another file into temp folder. Folder has to be temp folder.
Question
Is there a Javascript way to access the file system in a non sandboxed way, even by setting specific browser configuration options?
Environment
The application runs on a private LAN where all computers trust each other within the same AD domain. Plus we are theoretically allowed to map any network drive on any computer. Working in the trust zone, we don't have to care about most security concerns.
Background explanation
I have a PowerBuilder desktop application that I need to "port" to web (using J2EE) and install to a separate server, local to the same LAN. This application (named GP) currently starts a process of the child application (GC) that will not show any UI, instead it will listen for two files on a temporary directory.
When GP needs to open a window from the GC process, it will write two files: GP_to_GC.txt with a syntax I have documentation of, and GP_to_GC.flg that serves as flag file. GC will delete both after retaining and parsing the content of txt file, thus showing the appropriate UI form based on input.
The "return" is exactly the opposite. GC will write a pair of GC_to_GP files to temp and GP will refresh its views.
How can I do this with JavaScript?
Based on what I'm reading, you are porting a Desktop based Java EE application to a web application? If so, then you can continue using Java and access the folder that way; no need to use JavaScript.
What is unclear is that you're saying you can't modify anything, yet you're trying to port an application. Which is it?
If you can't modify anything, and the only thing you can do is drop JavaScript into an existing web application, then your solution is rather simple:
Create an HTTP API application that sits somewhere that has access to those folders, and issue a POST request to that API that will then read and write to the file system. It can be in any server side language you choose: Javascript (Node.js), C#, Java, PHP, whatever. It simply needs the ability to access the file system through the webserver, and most frameworks provide that capability.
I can't give you any code because you haven't mentioned which server side language you want to use to accomplish this approach.

VB.NET and RESTful service

I'm trying to build a simple VB.NET/Express 2012 windows application that will be able to receive a POST or JSON object with two parameters:
an XML document
an array or object of parameters
It will get its data from a front-end through JavaScript. That on itself makes a query to the back-end getting the needed info and will then trigger a print task on the local machine where this software is running using a local port to 'talk' to the local application.
I'm just looking for the components to use or some simple examples. Preferably I'd like to run a background TCP listening service that works on it's own (possibly a threaded task inside the application) and fires an event when needed.
Please, remember that it has to be made on the Express version of Visual Studio. I do not have all the extended possibilities the regular Studio has.
All the help is appreciated.
BTW, I've found This thread and this one, but they don't seem to going in the direction I'm wanting to go, as in that they run a continuous loop that seems to disable any and all other input or interaction unless you quit (kill) the application.
[edit]
I'm not creating a web application/server - I'm using a PHP solution for that. It's supposed to be a sort-of printserver.
[/edit]

Categories

Resources