Lazarus
Announcements => Third party => Topic started by: qdos on June 04, 2014, 10:52:04 am
-
The Smart Mobile Studio object pascal to JavaScript compiler is about to be released as "free to use by all".
This has to be the single most important HTML5/Object Pascal announcement for 2014.
This compiler makes Embarcadero HTML5 builder and Microsoft typeScript look like a joke. Sadly it's not portable to FPC due to a bug in the generic's system - so only Win32 and Mac (Delphi) compiled binaries will be released.
And it is a real compiler, not just a function-mapper (which other companies pass off as a "compiler" these days). It actually sculpts a VMT in javascript to provide classes, inheritance, partial classes, interfaces, lambdas etc.. from object pascal into JS. The code is fast, compact and gives any1 serious about mobile app development using phonegap -- or just kick ass javascript for a website, a serious edge. What takes 3 months in hand-written JS takes 3 days or less with this compiler.
Check it out!
www.smartmobilestudio.com
I will be writing a tutorial on how to use it here: jonlennartaasenden.wordpress.com
-
Can this take an arbitrary fpc/Lazarus program and convert it to a javascript program?
-
Can this take an arbitrary fpc/Lazarus program and convert it to a javascript program?
Certainly no, but surely the language compatibility is great. They explain the difference in this article (http://smartmobilestudio.com/documentation/differences-between-delphi-and-smart/), though I believe it's not just as what the articles say, could be more or less. Platform difference should be a big obstacle in making the code compatible, esp. for I/O.
-
That article is quite old, and a lot has been added since then.
Lambdas, property expressions and partial classes - not to mention better "delphi" support.
The only real difference between native delphi and smart mobile, is that you dont have raw disk access (except for nodeJS projects, there you have full system access like any other server side language), no pointers, and also that JS is heavily callback based. So the RTL have differences quite simply because VCL cannot be shamelessly copied without destroying all that is cool with HTML5 (and breaking copyright laws).
Other than that, it's actually easier to make advanced custom controls (by inheriting from TW3CustomControl) under SMS than Delphi. TeeChart was one of the first components that were converted, and it took only a few hours (the author said). You also get the full benefit of CSS, both via code and stylesheets. And yes, inheritance is there as well - which is nothing short of fantastic work on our part if i say so myself. It took a long time to get this right.
The CSS names match the classes, so if you have a custom control called "TW3MyCoolControl" then it will automatically try to use a CSS style with the same name. Most iOS and Android controls are emulated and there are plenty of skins to pick from.
But the really cool thing is that you get to use inheritance and classes just like in Delphi/FPC -- but under javascript. Which has no such concepts. It produces code that is compact, fast and very robust. You get components, a OOP framework, class helpers galore, an IDE to work with - and javascript suddenly becomes exciting and fun!
About direct Delphi translation:
Obviously you cant compile a delphi/fpc program into javascript directly since you dont have pointers in javascript, and also dealing with resource files and native callbacks just wont work at all.
But you can write code that you can compile both under Delphi / FPC and Smart. As long as you stay clear of pointers, and also remember that events have no "of object" postfixed, then roughly 90% of the language is identical.
Property expression are very helpful. Where you used to write:
Property Active:Boolean read getActive;
and ..
Function getActive:Boolean;
Begin
result:=FActive and (FCount>0);
end;
You can now declare this straight in the interface section of the class:
Property Active:Boolean read (FActive=True and FCount>0);
To access the DOM, you can either link to the methods as external, for instance:
function someJSFunction(aValue:Integer;aData:Variant):variant;external;
or via an ASM section..
function myWrapper(aValue:Integer;aData:Variant):Variant;
Begin
asm
(@result) = someJSFunction(@aValue,@aData);
end;
end;
It really is very, very fun to work with once you get the hang of it.
Here is the button class implementation in full. Styling is done in the CSS, so as you can see it's very easy to create your own re-usable components:
unit w3button;
interface
uses W3System, W3Components;
type
TW3Button = class(TW3CustomControl)
private
function getCaption: String;
procedure setCaption(Value: String);
protected
function makeElementTagObj: THandle; override;
procedure InitializeObject; override;
published
property Caption: String read getCaption write setCaption;
end;
implementation
{ **************************************************************************** }
{ TW3Button }
{ **************************************************************************** }
procedure TW3Button.InitializeObject;
begin
inherited InitializeObject;
Width := 100;
Height := 32;
end;
function TW3Button.makeElementTagObj:THandle;
begin
Result := w3_createHtmlElement('button');
end;
function TW3Button.getCaption: String;
begin
if (Handle) then
Result := Handle.innerHTML;
end;
procedure TW3Button.setCaption(Value: String);
begin
if (Handle) then
Handle.innerHTML := Value;
end;
end.
Which compiles into:
[code language="javascript"]
var TW3Button= {
$ClassName:"TW3Button",
$Parent:TW3CustomControl,
$Init:function ($) {
TW3CustomControl.$Init($);
}
/// function TW3Button.getCaption() : String
/// [line: 39, column: 20, file: w3button]
,getCaption:function(Self) {
var Result="";
if ($Check(Self," in TW3Button.getCaption [line: 41, column: 7, file: w3button]").FHandle) {
Result=$Check(Self," in TW3Button.getCaption [line: 42, column: 13, file: w3button]").FHandle.innerHTML.toString();
}
return Result
}
/// procedure TW3Button.setCaption(Value: String)
/// [line: 45, column: 21, file: w3button]
,setCaption:function(Self, Value$6) {
if ($Check(Self," in TW3Button.setCaption [line: 47, column: 7, file: w3button]").FHandle) {
$Check(Self," in TW3Button.setCaption [line: 48, column: 9, file: w3button]").FHandle.innerHTML=Value$6;
}
}
/// function TW3Button.makeElementTagObj() : Variant
/// [line: 34, column: 20, file: w3button]
,makeElementTagObj:function(Self) {
return w3_createHtmlElement("button");
}
/// procedure TW3Button.InitializeObject()
/// [line: 27, column: 21, file: w3button]
,InitializeObject:function(Self) {
TW3CustomControl.InitializeObject(Self);
TW3MovableControl.SetWidth$($Check(Self," in TW3Button.InitializeObject [line: 30, column: 3, file: w3button]"),100);
TW3MovableControl.setHeight$($Check(Self," in TW3Button.InitializeObject [line: 31, column: 3, file: w3button]"),32);
}
,Destroy:TW3TagObj.Destroy
,AfterUpdate:TW3CustomControl.AfterUpdate
,FinalizeObject:TW3CustomControl.FinalizeObject
,InitializeObject$:function($){return $.ClassType.InitializeObject($)}
,makeElementTagId:TW3TagObj.makeElementTagId
,makeElementTagObj$:function($){return $.ClassType.makeElementTagObj($)}
,StyleTagObject:TW3CustomControl.StyleTagObject
,Resize:TW3MovableControl.Resize
,setHeight:TW3MovableControl.setHeight
,SetWidth:TW3MovableControl.SetWidth
,supportAdjustment:TW3MovableControl.supportAdjustment
,Invalidate:TW3CustomControl.Invalidate
};
[/code]
Also, TObject supports Interfaces, so you dont need TInterfacedObject. Interfaces are emulated in it's own dictionary so they are just as fast as everything else.
But to see what the fuzz is about, download the demo for windows and have a look (note, our servers are overloaded, to many users downloading right now, but be patient if you dont get through immediately): www.smartmobilestudio.com
It's pretty awesome and it will save you months of hacking away in HTML5
The next update is due any day now -- there you will find live debugging, just like in Delphi :)
A better presentation of the product can be found here: http://jonlennartaasenden.wordpress.com/products/smart-mobile-studio/
-
The Above JS was compiled with type-checking on, hence the $CHECK() call everywhere
-
It sounds interesting, but one could find strange that you announce that something is about to be released, and that a tutorial will be written. :)
-
It sounds interesting, but one could find strange that you announce that something is about to be released, and that a tutorial will be written. :)
So if you knew that Embarcadero would give away the Delphi compiler in a couple of days, you would not classify that as newsworthy?
-
So if you knew that Embarcadero would give away the Delphi compiler in a couple of days, you would not classify that as newsworthy?
Yes, I would.
-
Then this should be newsworthy as well, since it's probably the best compiler which targets html5 on the marked. The same codegen is also used with LLVM, so it's not a toy but a serious compiler with high quality code
-
Sounds good, but I don't use Delphi anymore :-)
hopefully they can get it working with FPC
-
The Smart Mobile Studio object pascal to JavaScript compiler is about to be released as "free to use by all".
This has to be the single most important HTML5/Object Pascal announcement for 2014.
This compiler makes Embarcadero HTML5 builder and Microsoft typeScript look like a joke. Sadly it's not portable to FPC due to a bug in the generic's system - so only Win32 and Mac (Delphi) compiled binaries will be released.
<snip>
Is it the Smart Studio IDE itself that is free for the public, or just the stand alone compiler?
When you say there is a bug in the generics implementation of FPC do you mean an incompatibility between FPC and Delphi's generics implementation, or an actual bug in the code generation?
-
Apparently it's been released
http://smartmobilestudio.com/2014/06/04/giving-back-community/
though without RTL etc I wonder how useful it would be?
-
It looks like this announcement was premature.
-
it comes with the Basic Edition, there is the smcs.exe (or something) compiler that you can use.
I tried it and it works quite well, but without docs it is very difficult, however I managed to compiler a simple hello world with 1 button and 1 text edit and it generated about 560KB javascript file.
Smart Studio is in general a great product but I could not find a use for it just yet to be honest.
-
Hello.
Sorry for the necroposting!
What happened to this? Any possibility to make FPC compile to javascript+html5?
I started programming with Delphi in 95 but abandoned it. I get really confused with any other language and want to back to Delphi-like to start to learn computer programming. But I would also like to know if my applications would be available in the web, that would provide me some incomes :D
I just found this old (2011) project:
http://p2js.gelicon.biz
http://www.lazarus-components.org/Components-with-sources/Hardware-sound-video-system-network/Memory/Compilers/pas2js-Convert-Pascal-to-Javascript/
(it's in french, but I see (c)2011 despite there's 2016 in other parts of the site.
And this nearly unmaintained one.
https://github.com/bytbox/pas2js
Kind regards.
-
What happened to this? Any possibility to make FPC compile to javascript+html5?
I don't know anything about Smart Pascal, but FPC trunk does have the fppas2js converter that's in active development. You could take a look at that.
I'm not sure where something like this would be useful in Web development, quite honestly. The idea of "recompiling" a desktop app into JS and putting it up on the Web doesn't really make sense, from the UI perspective and everything else.
Maybe it would be useful if you needed to write quite a lot of JS and so you did it in Pascal instead.
Almost all modern Web apps integrate with existing Javascript libraries. I don't really see how the Pascal code would work with these. Seems like you would need a Pascal "interface" to the JS libraries.
-
What happened to this?
I've download the latest "SMS command line compiler" and it doesn't work (generates empty .js files) and nobody seems to reproduce the bug (I suspect there's something in the SMS IDE that is needed by the compiler and they forgot to include in the "command line compiler" version). I didn't use it since last year.
What happened to this? Any possibility to make FPC compile to javascript+html5?
I don't know anything about Smart Pascal, but FPC trunk does have the fppas2js converter that's in active development. You could take a look at that.
I should test this. Is it stable enough?
Almost all modern Web apps integrate with existing Javascript libraries. I don't really see how the Pascal code would work with these. Seems like you would need a Pascal "interface" to the JS libraries.
SMS's interface system is quite nice. It uses "EXTERNAL" keyword in a similar way FPC and Delphi does with DLL and .so files.
-
I should test this. Is it stable enough?
Yes. Some features not yet or missing, but updates flying around on almost a daily basis.
Note there is also a branch to compile to js by Florian. Status unknown to me atm.
And I am still working on a TCanvas implementation with underlying a html5 canvas. Christian Budde is doing something likewise I believe.
Currently I am focussng on an OpenVG TCanvas first, because I need that more.
-
What is the actual practical use? Is the intention to use it for new code only, or to recompile old desktop parts? If so, what about language limitations of the pas2js subset?
-
What is the actual practical use? Is the intention to use it for new code only, or to recompile old desktop parts? If so, what about language limitations of the pas2js subset?
The practical use is:
- Use a strongly typed, familiar language to generate js that has atm very performant ways to execute it,( including webasm, although some say otherwise (wrongly) )
- In the case of the canvas: choose an existing low-level class to render to browser within the current LCL structure/architecture.