Blog

All Blog Posts | Next Post | Previous Post

TMS WEB Core : a reader's digest blog post

Bookmarks:

Thursday, December 2, 2021

It's well over 2 years ago that we took the wraps of TMS WEB Core and meanwhile a lot has been written and said about TMS WEB Core. We had numerous blog posts, webinars and of course the book written by our colleague Holger Flick.

So much content is spread in several places and users keep asking questions that were covered somewhere but aren't easy to find.

That is what inspired us to bring a reader's digest blog post of worthwhile information for developers wanting to get started with TMS WEB Core. And for sure, with the upcoming XMas holiday season, it is an excellent time to sit down and explore the wonderful world of TMS WEB Core.

What server do I need for TMS WEB Core web applications?

A TMS WEB Core web application consists of JavaScript code that was transpiled from Object Pascal and HTML, CSS, image resources and maybe some other JavaScript libraries. As such, any web server that can server HTML pages will do. Evidently, this is IIS, Apache, embed in WordPress... we even have customers who deployed a TMS WEB Core web client application on an Arduino web server hat.
TMS WEB Core comes with a debug web server, that is a small HTTP server that will immediately show your application running in the browser after compiling. This small web server (built using our own TMS Sparkle product) is just intended for debugging purposes and is in no way meant to use to deploy a TMS WEB Core app.

Can I compile any Delphi code with TMS WEB Core?

No! While TMS WEB Core offers via the pas2js transpiler and its RTL a wide coverage of the Delphi language as well as the RTL, it is not 100% at the same level for various reasons. For example, pointers cannot be used. In a browser, the concept pointer doesn't exist, hence, it is impossible to work with pointers in TMS WEB Core code. Another example that isn't supported yet, is inline variables. This is a newer Delphi language feature not yet widely used nor requested. But be assured that most is supported, including generics, anonymous methods, RTTI, ...

How do I access databases?

Typically, you will want to have a central hosted database where the data used by the users of your web application will be managed. A mechanism is needed to ensure your database is not wide open to just anyone with a browser. The common pattern to handle this, is by creating a REST API server that offers access to your database. There are many ways to create such REST API server. The good news is that TMS WEB Core is open to use any such REST API server. For somewhat more out of the box convenience, we have TMS XData that includes not only the REST API server part but also web client helper classes.

Can I access device hardware in the web application?

It is amazing how the browser technology has evolved and offers access to a myriad of hardware on your machine or devices. This includes the camera, microphone, GPS, USB port, motion sensor, compass, Bluetooth connectivity, audio output ... And yes, TMS WEB Core includes components for easy access to these devices.

Can I use existing JavaScript libraries?

Given the wealth of existing (and often free) JavaScript libraries, it would be a shame when not. In a TMS WEB Core web client application, you can add an ASM block. In this ASM block you can directly write any JavaScript code that uses a library and you can access Pascal variables & objects from this ASM block as well as JavaScript ones. You can go a step further and create a more sophisticated solution by mapping Pascal classes on JavaScript objects and access JavaScript functionality this way. Many TMS WEB Core built-in controls use such techniques, so with the product, you have a vast array of working example code showing how to do these things.

How can I debug a TMS WEB Core app?

First of all, the browser itself offers excellent debugging facilities. Open the browser console and a wealth of debugging tools open up. De facto, the debugging is done via the JavaScript code but with TMS WEB Core in debug mode compiled apps, a source map file is generated that enables to step through the code as Object Pascal code in the browser. When you use TMS WEB Core via Visual Studio Code, you can debug directly with Object Pascal code in the Visual Studio Code IDE.

How do I use cryptography functions?

Having cryptography code running in the browser is not always a good idea. Anyone with a browser will be able to step through this code and this will undo much of the desired secrecy of what you wanted to protect with cryptography to begin with. But the browser itself has several built-in encryption like AES and hashing functions that run directly in the browser engine and that one cannot step through. TMS WEB Core offers classes that let you take easily advantage of these built-in browser functions. A product like TMS Cryptography Pack, that uses native code for cryptography functions cannot be used in a TMS WEB Core app.

I guess 3D graphics are out of question in a web app?

No way, the modern browser has built-in support for WebGL, the API for rendering 3D graphics. TMS WEB Core comes with built-in ThreeJS support (a famous JavaScript library for dealing with 3D Graphics) that allow you to setup and render 3D scenes.

Is there a way to have socket communication?

In a browser, socket based communication between the web client app and a server is offered via web sockets. TMS WEB Core includes a web socket client component and a small web socket server implemented in Delphi. Using web sockets, you can have a web client app that is receiving data from the web socket server and responding to it. The web socket server can as such do quasi real-time updates of the web client in the browser. TMS WEB Core comes with a chat app demo that shows the concept of socket communication.

Can I create custom controls?

Yes, TMS WEB Core is open to add custom controls. In fact, there are already several free custom controls at our partner page. Custom controls are installed via a package in the IDE. The same applies to TMS WEB Core for Visual Studio Code. Note that our huge range of TMS FNC (universal) components are also web enabled meanwhile, meaning you can use all TMS FNC controls also in a TMS WEB Core web client application.

Is TMS WEB Core for Delphi compatible with TMS WEB Core for Visual Studio Code?

Yes, the framework in TMS WEB Core for Delphi and TMS WEB Core for Visual Studio Code is 100% identical. It is as such possible to develop a TMSM WEB Core project both from the Delphi IDE as the Visual Studio Code IDE. Or in a team, some developers can use Delphi and some can use Visual Studio Code to work on the same application.

Do I need to know HTML & CSS?

When you create a web application, it will be rendered in the browser and the browser's primary way to render a page is via HTML & CSS. So, some knowledge of HTML & CSS will greatly help you delivering nicer web applications. Strictly spoken, it is possible to create a web client app with TMS WEB Core without touching HTML and CSS. The framework handles all the basics for you.

What when I really want to use HTML & CSS?

TMS WEB Core uses an unique binding mechanism allowing you to use an existing HTML/CSS template for a page and bind framework controls to such HTML/CSS template elements (via the unique Element's ID attribute and control ElementID property). This also enables your organization to have dedicated graphically talented people to work on the page layout and use software developers to write all the UI control logic.

Can my app use barcodes or QR codes?

Sure, components are available for a TMS WEB Core app to generate barcodes or QR codes as well as components to scan via the camera barcodes and QR codes and retrieve the content of these codes in the web client application.

How am I supposed to do data-binding in the web client app?

In a TMS WEB Core web client app, there is a client dataset. This client dataset can be connected to a database in the backend interfaced with though a REST API. The client dataset can then be bound to DB-aware controls in the same way as classic databinding is done in VCL applications. There is a datasource that acts as intermediary between the DB-aware control and the datasets.

I need to do some custom drawing in my app, how do I approach this?

We loved to make this super easy for you. We introduced the TCanvas class in TMS WEB Core. And the TCanvas has the same interfaces in a TMS WEB Core web client application as it has in a VCL application. As such, you can reuse VCL code that draws on a TCanvas in a TMS WEB Core web client app.

What about responsive design?

Responsive design means to design your application UI in such way that it looks good and is fully functional on a wide variety of screens, ranging from a small smartphone screen to a large 4K monitor. There are various ways in TMS WEB Core to ensure the UI will adapt according to the screen size. This includes built-in controls like the TWebResponsiveGridPanel or TWebResponsiveGrid control that can be setup to look & behave different on different screens, but it is equally possible to reuse a Bootstrap based HTML/CSS template with built-in responsive design for your forms.

Any chance for a student who wants to learn about TMS WEB Core?

Sure, there is the free & fully functional TMS WEB Core Academic for students. TMS WEB Core Academic works together with the free Delphi Community Edition. So, a student is very well equipped with this combo.

I am a teacher and want to learn about TMS WEB Core to introduce it to my students?

The TMS WEB Core Academic edition has you covered. As a teacher, you can freely use it and you can invite your students to use this same academic version.

How to handle online payments in a TMS WEB Core web client app?

First of all, there is built-in support for handling Paypal payments from a TMS WEB Core web client application. This is done via a Paypal component and a sample app demonstrates this. Other payment services will typically also offer JavaScript APIs and you can use these APIs also from your TMS WEB Core web client application.

Can I work with PDF files in a TMS WEB Core app?

Of course, you can work with PDF files at various levels. You can open PDFs from the TMS WEB Core app in a separate browser tab. You can invoke a download of a PDF file. The TMS FNC Core library offers a class to generate PDF files on the fly that you can call directly from the web client app. And finally, the TMS FNC WX Pack also offers a component for rendering PDF with an area of your form in the web app. So, TMS WEB Core apps are wide open for any form of using PDF files.

I'm interested in artificial intelligence, machine learning, can I use it from TMS WEB Core?

Also here, there is good news! One of the most popular JavaScript libraries for artificial intelligence is Tensorflow.js and given it is easy to consume JavaScript libraries from a TMS WEB Core app, it is also possible to use Tensorflow.js from TMS WEB Core. We have shown this in an example project.

What about security?

With respect to security in web client applications, there is one rule: everything that should not be seen by others does not belong in the web client application but belongs in the backend. Tokens, passwords or any other secure content should be handled server-side, in the backend and not directly accessible, visible from the browser. As mentioned in the previous topics, the browser provides pretty strong debugging tools that will reveal anything that is in the web client app to the user who has an interest in it. So, anything that should not be seen, does not belong in the web client app.

My question or doubt is not listed here?

Sure, I can imagine there are so much more questions in connection with TMS WEB Core that aren't listed here. We will be happy to answer these for you and add it here. Contact us via email or add a comment here and our team will handle your concern!

Happy coding in Delphi & TMS WEB Core!

Bruno Fierens