Recent

Author Topic: LainzTron - use command line FPC with Electron  (Read 3789 times)

lainz

  • Hero Member
  • *****
  • Posts: 3699
  • Leandro Diaz
LainzTron - use command line FPC with Electron
« on: May 25, 2017, 02:41:47 am »
This is a draft but already works. As I discussed in the Modern UI in Lazarus (http://forum.lazarus.freepascal.org/index.php/topic,36502.msg247311/topicseen.html#new) there are two ways of using FPC with Electron (electron.atom.io), one is with a .dll (that escapes my understanding) or with a command line application, that I choose for LainzTron.

Electron is Chrome with Node, and works better (faster) than fpCEF (Chrome Embedded Framework). Is a good candidate to make nice UI but also using the power of FPC (or any command line language).

This is how it works. These are the source files of a Hello World application (yes, nothing big right now, but it helps to see how easy to work with LainzTron is). We're using JSON, that's a nice way of communication between our command line application and Electron.

This is your index.html
Code: Javascript  [Select][+][-]
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>LainzTron</title>
  7. </head>
  8.  
  9. <body>
  10.   <div id="main">
  11.   </div>
  12.   <div id="list">
  13.   </div>
  14.  
  15.   <script src="lainztron.js"></script>
  16.   <script src="app.js"></script>
  17. </body>
  18.  
  19. </html>

This is the LainzTron utility for Electron, pretty small :)

Code: Javascript  [Select][+][-]
  1. "use strict";
  2. class LainzTron {
  3.     constructor(executable) {
  4.         this.executable = executable;
  5.     }
  6.     get(parameters, success, error) {
  7.         let child_process = require('child_process').execFile;
  8.  
  9.         child_process(this.executable, parameters, (err, stdout) => {
  10.             if (stdout)
  11.                 success(stdout);
  12.             if (err)
  13.                 error(err);
  14.         });
  15.     }
  16.     getJSON(parameters, success, error) {
  17.         this.get(parameters, (data) => {
  18.             success(JSON.parse(data));
  19.         }, error);
  20.     }
  21. }

This is the actual application, yes, you at least need some basic JS knowledge that doesn't come bad these days, OR let your web developer do this part (as well as the index.html):
Code: Javascript  [Select][+][-]
  1. "use strict";
  2. (function () {
  3.     // This application returns a JSON array
  4.     // [{"name": "Hello"}, {"name": "World!"}]
  5.     let test = new LainzTron('./resources/app/test');
  6.  
  7.     // Get a JSON array from the command line application
  8.     test.getJSON([], (data) => {
  9.         // Join each 'name' property to make 'Hello World!' string title
  10.         let helloworld = data.map((value) => {
  11.             return value.name;
  12.         }).join(" ");
  13.         document.getElementById('main').innerHTML = `<h1>${helloworld}</h1>`;
  14.  
  15.         // Create an unsorted list with each returned value of the array
  16.         let helloworldlist = data.map((value) => {
  17.             return `<li>${value.name}</li>`
  18.         }).join("");
  19.         document.getElementById('list').innerHTML = `<ul>${helloworldlist}</ul>`;
  20.     }, (error) => {
  21.         // Handle error here
  22.         console.log(error);
  23.     });
  24. })();

And this is your favorite part, using FPC!
Code: Pascal  [Select][+][-]
  1. program test;
  2.  
  3. begin
  4.   writeln('[{"name": "Hello"}, {"name": "World!"}]');
  5. end.

The result of running this on Electron is this nice application:

Hello World!
  • Hello
  • World!
« Last Edit: May 25, 2017, 03:43:57 am by lainz »

tudi_x

  • Hero Member
  • *****
  • Posts: 538
Re: LainzTron - use command line FPC with Electron
« Reply #1 on: May 25, 2017, 08:56:33 am »
hi,
please advise what would be the advantage for a beginner of switching to an Electron environment in which I need to master and deploy the below technologies :
- NodeJS
- Javascript
- Chromium
- HTML
- CSS

versus using the Pascal environment and striving into improving the current layout?
anyway NodeJS is on the way out with people switching to Golang?

thank you
Lazarus 2.0.2 64b on Debian LXDE 10

Thaddy

  • Hero Member
  • *****
  • Posts: 10462
Re: LainzTron - use command line FPC with Electron
« Reply #2 on: May 25, 2017, 09:54:07 am »
hi,
please advise what would be the advantage for a beginner of switching to an Electron environment in which I need to master and deploy the below technologies :
- NodeJS
- Javascript
- Chromium
- HTML
- CSS

versus using the Pascal environment and striving into improving the current layout?
anyway NodeJS is on the way out with people switching to Golang?

thank you
Uuhmmmm. FPC can compile to JS even in two ways:
Pastojs.. which is getting better every day! Try it! You need trunk for optimum drooling..
A compiler effort in one of the branches. I don't know the exact status of that.

But anyway, you should be able to write Pascal code and run it on node.js. Only not -yet - everything and every feature.(close to typescript, in a sense)
And node.js is a server platform and not a language, written in C++ that runs javascript code. Golang IS a language and is a neat variant of a curly bracket language but on itself on the way out...
« Last Edit: May 25, 2017, 10:02:00 am by Thaddy »
When you ask a question that is actually answered in the documentation, you are either lazy or a moron.

lainz

  • Hero Member
  • *****
  • Posts: 3699
  • Leandro Diaz
Re: LainzTron - use command line FPC with Electron
« Reply #3 on: May 25, 2017, 03:06:44 pm »
hi,
please advise what would be the advantage for a beginner of switching to an Electron environment in which I need to master and deploy the below technologies :
- NodeJS
- Javascript
- Chromium
- HTML
- CSS

versus using the Pascal environment and striving into improving the current layout?
anyway NodeJS is on the way out with people switching to Golang?

thank you

This is a single case usage, for all other cases you can use FPC directly or convert it to JavaScript as Thaddy said.

This case is for a desktop application that renders the UI with HTML/CSS/JS (Electron) and the core of the program is in FPC. Not for a web application.

Edit: A case of usage in fact is where your FPC code is a lot faster than converting it and running with JS. Else convert directly to JS and put that in Electron and that be all, no need of command line.

Another case is when conversion is not possible (for example Libraries that can't be converted to JS), usage of third party dll's, an so on.
« Last Edit: May 25, 2017, 03:18:54 pm by lainz »

 

TinyPortal © 2005-2018