First Steps with Smart Mobile Studio

“JavaScript is Assembly Language for the Web” 
[original author unknown]

I learned about that idea from the omnipresent Hanselmann and I fully agree with it. JavaScript has its good moments, but they are completely outweighed by the total mess and confusion that is the JavaScript language and by some awful decisions made by the original designer.

If you don’t believe me, try answering the following question. “What does JavaScript expression ++[[]][+[]]+[+[]] evaluate to?” I’m not kidding you – this mix of plus signs and square brackets is a legit JavaScript expression and its result is ‘10’. [For proof, see Stackoverflow question Can you explain why ++[[]][+[]]+[+[]] = 10.]

As you may have guessed, I don’t like programming in JavaScript. I can read it on a good day but I never managed to write more than few lines of JavaScript code. On the other hand, I would like to write a browser application from time to time, as that would allow me to run such an app on different platforms (and by that I mean a PC, Mac, iOS, and Android).

When I learned about the OP4JS project, which promised a cross-compiler from Delphi-like language to a JavaScript and an integrated development editor, I was almost ecstatic with joy. Truly, such a tool would be a great addition to my toolset – if the authors managed to pull it through. It looked like a tough project for just two people. But … as the Lennart (one of the authors) likes to say – one good Delphi developer is worth hundred mouse-pushers (or something to that effect). They struggled and they succeeded. Just before the end of 2011, select few people received the alpha version of the IDE so that we could play with it over the holiday season.

I’ve got the permission from the authors to write about it so in the next weeks you can expect posts that will follow my road to Delphi-generated HTML+JavaScript applications.

But first, some basics.

OP4JS (which stands for Object Pascal for JavaScript) was later renamed to Smart Mobile Studio. There’s already a domain registered for the product, but it only redirects to www.op4js.com, which further redirects clicks to op4js.optimalesystemer.no, which is a subdomain of the Optimale Systemer AS, which is the company that will stand behind the Smart Mobile Studio. Got it? Currently, the home page is mostly empty, with the honorable exception of some introductory articles which will give you some idea about the product.

The whole projects is a brain child of Lennart Aasenden and Eric Grange (at least as far as I’m informed). Eric provided the Delphi-to-JavaScript cross compiler – a special version of his excellent DWScript Delphi interpreter – and Lennart worked on the RTL and IDE (again – if I’m correctly informed). DWScript understands a version of Delphi language, similar to the Delphi 7 dialect but quite different in some aspects [more info].
The whole development process can be summarized in few items:

• Start the Smart Mobile Studio.
• Create new application or open existing application.
• Press F9 to compile and run the application in the emulator.
• Compilation phase converts the DWScript Pascal into a JavaScript, creates index.html containing this script and displays it in the built-in browser.
• Emulator is also a web server, so you can open the application in your favorite desktop browser or on your iOS/Android device connected to the same local network.
• To deploy, copy index.html and supporting files to a web server and access the application via browser. Alternatively, you can use PhoneGap service to package your application into iOS/Android specific format which you can then submit to the appropriate store.

In the initial release, Smart Mobile Studio will support Visual projects (form-based approach similar to VCL), Commandline projects (a.k.a. Console applications) and Game projects (useful for writing games where you handle all canvas painting).

Today I will show you a very simple console application which proves that indeed ++[[]][+[]]+[+[]] is 10.

unit Project4;

interface

uses w3system, w3scroll, w3console, w3components,
     w3application, w3consoleapp, w3lists;

type

TApplication=class(TW3CustomConsoleApplication)
protected
  procedure PopulateConsole; override;
end;

implementation

procedure TApplication.PopulateConsole;
var
  weird: string;
begin
  asm
    @weird = ++[[]][+[]]+[+[]]
  end;
  console.writeln('JavaScript is weird and this proves the point: ' + weird);
end;
 
end.

What can we learn from the code?

• Language is similar to Delphi (actually, it is almost indistinguishable from Delphi in this small example).
• TApplication is still the basic application building block.
• ‘Asm’ keyword is reused to execute ‘web assembler’ i.e. JavaScript.

Executing this program in Chrome proves that indeed that weird JavaScript expression returns 10.

Next time I’ll show you how I started writing my Mandelbrot program and then I’ll improve and change it in further installments. In the meantime, point your feed reader to OP4JS blog and read past articles. You can also watch some demos on the You Tube.

Nickel Iron is a demo of the Game application …

… while the Mandelbrot explorer is implemented as a Visual project (although at this point it doesn’t really include any visual controls except the canvas).