TMS WEB Core v2.3.0.0 for D10.4 and D11.3 Retail
TMS WEB Core v2.3.0.0 for D10.4 and D11.3 Retail
Save valuable time and create rich user experiences with our framework for modern web applications. All our tools are backed by a dedicated team of experienced developers. You can count on an excellent service, a lively community and our continuous innovations. TMS Software is your partner for modern WEB client applications, with a lot of free learning tools, how-to guides and a passionate community of developers & support!
TMS Software Delphi Components RADical Web
Modern SPA web application model
Pure HTML5/CSS3/jаvascript based applications
Standard component framework for common UI controls and access to browser features
Debugging in Pascal code via the browser
Backed by a solid, proven & actively developed Object Pascal to jаvascript compiler
TMS Software Delphi Components Reuse skills and components
Component based RAD development integrated in the Delphi IDE and the Visual Studio Code IDE
A truly revolutionary & innovative TMS FNC component framework that is now also web enabled, allowing to create UI controls that can be used on VCL, FMX, LCL and WEB!
Open to consume other existing jаvascript frameworks & libraries
Open to use HTML/CSS for design
Open to use other jQuery controls or even other jаvascript frameworks
Offers Pascal class wrappers for jQuery controls from the jQWidgets library
Easy interfacing to REST cloud services including to TMS XData for database
RADical Web
Modern SPA web application model
Pure HTML5/CSS3/jаvascript based applications
Standard component framework for common UI controls and access to browser features
Debugging in Pascal code via the browser
Backed by a solid & proven Delphi Pascal to jаvascript compiler that was years in development
Take advantage of the Electron or Miletus framework for building cross platform desktop applications
PWA support: Start building progressive web applications out of the box
Reuse skills and components
Component based RAD development integrated in the Delphi IDE
A truly revolutionary & innovative TMS FNC component framework that is now also web enabled, allowing to create UI controls that can be used on VCL, FMX, LCL and WEB!
Open to consume other existing jаvascript frameworks & libraries
Open to use HTML/CSS for design
Open to use other jQuery controls or even other jаvascript frameworks
Offers Pascal class wrappers for jQuery controls from the jQWidgets library
Easy interfacing to REST cloud services including to TMS XData for database
Easy Deployment
Application consists of HTML & jаvascript files only that can be easily deployed on any light or heavyweight webservers
Use any existing load-balancing software and/or techniques for highest performance
Small and convenient debug webserver is included for fast RAD development
TMS Software Delphi Components Easy Deployment
Application consists of HTML & jаvascript files only that can be easily deployed on any light or heavyweight webservers
Use any existing load-balancing software and/or techniques for highest performance
Small and convenient debug webserver is included for fast RAD development
After months and months of research & development, we're eager to share with you the first beta of TMS WEB Core v2.3 that features debugging web apps from the Delphi IDE.
Since its inception, TMS WEB Core offered a debugging experience via the browser console. Thanks to a generated source map file, it is fortunately already possible to step through Object Pascal code and inspect Object Pascal variables from the browser, it is still a two step process to develop from the Delphi IDE and debug from the browser console.
Technical background
Even though technically extremely challenging, our team of experts José Leon Serna & Roman Kassebaum set their goal on offering a debugging experience for TMS WEB Core web apps directly out of the Delphi IDE. Fortunately, the Chrome browser engine features the DevTools Protocol with which it is possible to take over debugging from an external application, in this case the Delphi IDE. Technically this works via a WebSocket server with which the browser communicates in this case to the TMS WEB Core Delphi IDE plugin. Keeping the "eat your own dogfood" mantra in mind, this WebSocket server was implemented using TMS FNC WebSocket. On the other side, we could fortunately also find sufficient IDE extension APIs as well as a few places where we needed to hook code, to add this custom debugging interface to the Delphi IDE.
Browsers
At this moment, the DevTools Protocol is available with Google Chrome browser and Microsoft Edge Chromium browser. So only if you instruct TMS WEB Core to run the app in either Google Chrome or Microsoft Edge Chromium, the debugging from the Delphi IDE will be working. The FireFox browser does noy fully implement the DevTools Protocol, so it remains under research if we will technically also be able to bring this debugging experience for FireFox. Of course, it still remains possible to debug using Object Pascal code from the browser console in all browsers TMS WEB Core can target.
Configuration and limitations
From the Delphi IDE, you can globally define whether you want debugging from the Delphi IDE or debugging from the browser console. This setting is under Tools, Options, TMS WEB, "Debugging IDE / Browser". But you can also define this at project level under Project Options, TMS WEB, "Debugging IDE / Browser".
When debugging from the Delphi IDE is enabled, set your breakpoints in the Delphi code editor and the IDE will automatically stop the app at the breakpoint and you can use the shortcuts F7,F8,F4 to step in, step over, step to lines of code. When you hover over variables, the IDE will show the variable value in a hint and you can also inspect values via Debug, Evaluate/Modify. With this is a limitation though if you want to inspect objects, object properties, etc.. that the expression you specify is expected to be a jаvascript expression. Behind the scenes, this expression is sent to the browser over websocket communication and the browser only understands jаvascript. The only way we could technically overcome this is by transpiling on the fly such Object Pascal expression to jаvascript, but this is far from trivial and as such currently not yet possible. Fortunately, the jаvascript expression for variables matches with Object Pascal expressions and with some getting used to, you'll be able to inspect most of what you need this way.
Another subtle difference when you debug from the Delphi IDE is that the Delphi IDE starts a new browser instance for every session and also, when you terminate the debugging session from the IDE, the IDE will close this browser instance. This is because there is a unique websocket communication channel between the IDE and the browser instance used for debugging. Nothing prevents you to still open the browser console for the browser where the debugging session is running and inspect the DOM, code, networking tab etc...
Since its inception, TMS WEB Core offered a debugging experience via the browser console. Thanks to a generated source map file, it is fortunately already possible to step through Object Pascal code and inspect Object Pascal variables from the browser, it is still a two step process to develop from the Delphi IDE and debug from the browser console.
Technical background
Even though technically extremely challenging, our team of experts José Leon Serna & Roman Kassebaum set their goal on offering a debugging experience for TMS WEB Core web apps directly out of the Delphi IDE. Fortunately, the Chrome browser engine features the DevTools Protocol with which it is possible to take over debugging from an external application, in this case the Delphi IDE. Technically this works via a WebSocket server with which the browser communicates in this case to the TMS WEB Core Delphi IDE plugin. Keeping the "eat your own dogfood" mantra in mind, this WebSocket server was implemented using TMS FNC WebSocket. On the other side, we could fortunately also find sufficient IDE extension APIs as well as a few places where we needed to hook code, to add this custom debugging interface to the Delphi IDE.
Browsers
At this moment, the DevTools Protocol is available with Google Chrome browser and Microsoft Edge Chromium browser. So only if you instruct TMS WEB Core to run the app in either Google Chrome or Microsoft Edge Chromium, the debugging from the Delphi IDE will be working. The FireFox browser does noy fully implement the DevTools Protocol, so it remains under research if we will technically also be able to bring this debugging experience for FireFox. Of course, it still remains possible to debug using Object Pascal code from the browser console in all browsers TMS WEB Core can target.
Configuration and limitations
From the Delphi IDE, you can globally define whether you want debugging from the Delphi IDE or debugging from the browser console. This setting is under Tools, Options, TMS WEB, "Debugging IDE / Browser". But you can also define this at project level under Project Options, TMS WEB, "Debugging IDE / Browser".
When debugging from the Delphi IDE is enabled, set your breakpoints in the Delphi code editor and the IDE will automatically stop the app at the breakpoint and you can use the shortcuts F7,F8,F4 to step in, step over, step to lines of code. When you hover over variables, the IDE will show the variable value in a hint and you can also inspect values via Debug, Evaluate/Modify. With this is a limitation though if you want to inspect objects, object properties, etc.. that the expression you specify is expected to be a jаvascript expression. Behind the scenes, this expression is sent to the browser over websocket communication and the browser only understands jаvascript. The only way we could technically overcome this is by transpiling on the fly such Object Pascal expression to jаvascript, but this is far from trivial and as such currently not yet possible. Fortunately, the jаvascript expression for variables matches with Object Pascal expressions and with some getting used to, you'll be able to inspect most of what you need this way.
Another subtle difference when you debug from the Delphi IDE is that the Delphi IDE starts a new browser instance for every session and also, when you terminate the debugging session from the IDE, the IDE will close this browser instance. This is because there is a unique websocket communication channel between the IDE and the browser instance used for debugging. Nothing prevents you to still open the browser console for the browser where the debugging session is running and inspect the DOM, code, networking tab etc...