Blog


Previous  |  Next  |  Index

Visiting the TMS lab day 8: TMS WEB Core meets Electron

Bookmarks: 

Thursday, October 11, 2018



One of the more exciting technologies of past years is Electron. For those not familiar with Electron, a small background first. Electron was first created to enable the development of Github's Atom editor, which is meanwhile a highly popular a cross platform editor. Via Electron, it was possible to write the Atom editor code once with JavaScript and create desktop applications for Windows, macOS and Linux. Electron consists of the Chromium browser and node.js packaged in a native Windows, macOS or Linux executable. The application code consists of JavaScript, the layout and design of the appliction is equally done with web technologies HTML5 and CSS3. The Electron API meanwhile offers a wide set of bridges to the operating system the executable is running on and most parts of this API is of course fully operating system agnostic. As such, it is possible to use the local file system, use shell dialogs, clipboard access and much more. You can explore the Electron API here.

So, where does TMS WEB Core fit in? As you are aware, with TMS WEB Core, you can create web client applications in an RAD OO component based way. The web client runs JavaScript code that is compiled from your Pascal code. Connecting the dots, this JavaScript client application can of course also run under Electron and as such, offer the ability to have a desktop cross platform application for Windows, macOS and Linux, all with the same code base.

Although it is virtually dead-easy to let any JavaScript web client run via Electron in a desktop application, the real power comes from the bridge to the native operating system. And this means, using the Electron API which is a JavaScript API. As it is TMS WEB Core primary goal to facilitate Delphi developers to continue using the beloved Pascal language and a RAD component based development methodology, we've explored exposing the Electron API via components.

Therefore, during this 8th lab visit, we'd like to present you a first experimental version of a TMS WEB Core application running under Electron. It is a kind of Notepad editor. It uses the TWebMemo as editing control and to open and save text files to the local file system we have introduced TElectronOpenDialog, TElectronSaveDialog and also TElectronStringList. To have access to the application main menu, there is also the TElectronMainMenu. On the main form of the application, it looks like:



The TElectronOpenDialog and TElectronSaveDialog are nearly identical to the VCL counterparts TOpenDialog and TSaveDialog. As such, opening and saving local files from the TMS WEB Core application running as desktop application via Electron becomes as easy as:

Opening a local file:

var
  sl: TElectronStringList;
begin
  ElectronOpenDialog1.Title := 'Select text file';
  if ElectronOpenDialog1.Execute then
  begin
    sl := TElectronStringList.Create;
    sl.LoadFromFile(ElectronOpenDialog1.FileName);
    Meditor.Lines.Assign(sl);
    sl.Free;
  end;
end;
Saving to a local file:

var
  sl: TElectronStringList;

begin
  ElectronSaveDialog1.Title := 'Save to text file';
  if ElectronSaveDialog1.Execute then
  begin
    sl := TElectronStringList.Create;
    sl.Assign(MEditor.Lines);
    sl.SaveToFile(ElectronSaveDialog1.FileName);
    sl.Free;
  end;
This application in action on the Windows operating system looks like:



Now that we have this proof of concept working, it is a matter of further wrapping the full Electron API in easy to use functions, classes, components. And that will enable you to create not only web client applications with TMS WEB Core, but also desktop applications that can be deployed to Windows, macOS, Linux. And this comes with many advantages. To name a few:

  • Many existing web technologies can be used & integrated in the desktop application
  • The UI look & feel can be created with web technologies, i.e. graphics artists can create the HTML template for you with designs that outshine any classic desktop application design
  • A lot of code can be reused between web and desktop application if the company has a strategy for web access + desktop deployment


Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Bruno Fierens


Bookmarks: 

This blog post has received 5 comments.


1. Friday, October 12, 2018 at 8:16:28 AM

Hi,
I dont know about react much. But it is so populer. Has Using react any advantage and how can i use react on TMS Web Core?

Best Regards

Murat Ak


2. Friday, October 12, 2018 at 4:28:06 PM

Hello!
It would be very good if you showed an example using FMX, it’s still a native environment than Electron!
For example, creating an application on FireMonkey with one form and with WebBrowser, where the code created in WEB Core is executed!

VADIM


3. Saturday, October 13, 2018 at 12:16:59 AM

VADIM, it is very interesting your idea. We could to replace Cordova/Phonegap by a FMX application. We only need any way of calling the FMX functions declared in the FMX host application from JavaScript. It would give you the abilities to make custom functions in FMX that are native and undecompilable. For example, if I need to use Sqlite or any other local database in a web desktop app or in a web mobile app, I would be able to use it calling the api exposed by our FMX app. Or if I want to capture a photo I would call to a FMX function to make this work. The posibilities are great. We can mix the native and crossplatform capabilities of FMX with the UI of a web SPA apps and make an aplication crossplatform to all the FMX platforms ( Windows, Mac, Linux, iOS and Android ), all made in pascal. Fo example, If I need any new functionality that need speed, or confidentiality, I could to hide it in my FMX host application and I could to call it from the javascript code of my SPA app. For security reasons, the link between Javascript and FMX need to be for exclusive use from the javascript running in the browser hosted by the FMX app. The result is that if a FMX application is able to do a work, your SPA application also can do it. Another profit would be that the chain to make a hybrid SPA application could be extended to make a native app in the Delphi IDE. It would be great to have this posiblity.. I do not know if I''m saying nonsense..

Manuel


4. Saturday, October 13, 2018 at 2:21:14 AM

Hello,

I am remembering that Bruno answered me that TMS team was working in a TWebDataSet descendant that internally work with indexeddb for local storage..

Thinking in my previous comment, I am thinking that for Hybrid apps if we would have a way to call code of the FMX host application from the javascript code, it would be very easy to create new components in TMS Web Core, components like TWebHybridFdTable, TWebHybridFdQuery ... etc, that would be identical in properties and methods to those existing in the FMX application. For example the design of the TWebHybridFdTable could be to instanciate in the Create constructor a TFDTable of the FMX host app, destroy this instance in the destroy destructor procedure, in the setters and getters of the properties of the TWebHybridFdTable set or get of the same property of the TFDTable of the FMX app, and in the call to methods of the TWebHybridFdTable make the call to the same method of the TFDTable with the same parameters. The work would be done in native by the FMX application ( speed ) and the most important is that I do not need to develop any code in Javascript to do the same work that a component already does in FMX.

This work is not uncompatible with the actual development of creating components in TMS Web Core that has no dependencies of any other things that javascript ( it is useful for no hybrids apps ), but for some hybrids applications would be very useful to pack a web core app into a FMX application being able to call FMX code from javascrip.

Of course, the disadvantage is that FMX still cannot target all the platforms as for example RaspBerry PI, but I think that many people could live developing hybrid cross platform applications that only run on Windows, Mac, iOS, Android and Linux.

But the advantage is that you can quickly give new functionalities to a great percent of developers who need access to native resources.

It could be decision of the developer to know the difference of working with Cordova hosting the SPA application vs a FMX application hosting a SPA application ( with TWebBrowser ). The difference would be that the Cordova app could target more platforms than FMX application, knowing it, is your decision to use one or the other.

I would like to know your opinions about this.

Thank you.

Manuel


5. Tuesday, October 16, 2018 at 9:49:05 AM

Please contact us by email for your discount coupon.

Masiha Zemarai




Add a new comment:
Author:
Email:
  You will receive a confirmation mail with a link to validate your comment, so please use a valid email address.
Comment:
 
Change Image
Fill in the characters from the image above:
 

All fields are required.
 




Previous  |  Next  |  Index