In the forums there was a post about a detailed description of the compiler options. Since there are currently no in-depth information available this post tries to clarify the topic a bit.
Source maps are a very powerful way to support the debug process of HTML5-based web-apps. It actually maps the JS code to the higher level language (in this case Object Pascal). While this is very handy, especially in combination with obfuscation, it also reveals how the software is build internally. Thus you probably don’t want it to be shipped to customers.
In the last article we have focused on how to use Cordova to build hybrid web applications with Smart Mobile Studio. In this article we focus about writing Node.js command-line tools (like Cordova) itself in Smart Mobile Studio.
In the forums there was a discussion about how to wrap existing libraries transparently and with a minimum of overhead. In that discussion an example was given about how to wrap the neural network library brain. To avoid posting the same text here as well, this blog post is about translating another neural network library called ‘Synaptic‘.
Believe it or not but this time Smart Mobile Studio actually got something Delphi doesn’t (Delphi 7 was our initial model): global renaming. When you rename a unit under Smart, it doesn’t just alter the source-code for the unit in question – it alters all references to that unit in the entire project. No need to backtrack and update the uses declaration elsewhere, they are all changed in a single sweep.
We can actually map the use of a class or method throughout a whole project, and it’s super quick as well!
Database mapped RTL
But we have more tricks up our sleeve. I took the time to make a recursive database indexer for our RTL files. So the first time you run Smart it will parse and extract every inch of information about the RTL and store it in a database table. This table is kept in memory and used to speedup extraction of data regarding classes, methods and properties.
It also has the benefit of giving me instant access to things like class ancestors, data types, fields, scope, interfaces and all those tiresome look-up chores that makes a mess of a codebase. So armed with a TClientDataset map (what did you expect? No self respecting Delphi app is complete without at least one instance of TClientDataset) of the RTL, it is now super easy to beef up and compliment the compiler. On top of my head here are a few things i’m gunning for:
- Complete class at cursor
- Rename class at cursor
- Add interface to class
- Merge classes
- Support for documentation remarks above methods
- Mouse-over information about symbols
I doubt we will be able to stuff all the goodies into version 1 of Smart Mobile Studio, but rest assured that I will do my best to get as much features into Smart as I can.
And now that the indexing and background compile is up to speed, the time has come to finish the globals feature. Globals allows you to edit a list of object (of any class) that should be created automatically by TApplication. Very handy if you have a database connection or some game logic you want to be created on startup.
These are exciting days!
My favorite is without a doubt: http://js1k.com/2010-first/demo/171 but all the demos on the website are really spectacular. Especially considering the size of the sourcecode.
So head over to JS1k and have a look!
This is quite possibly the most significant Pascal
development to be watching right now, and brings
the wonderful Pascal language to the world of
Internet development! -Simon Stuart, Delphi developer via Google+
Since so many people have asked more or less the same questions, it would be a good idea to outline just what Smart is and what it does, so that people can appreciate even further the depth and broad application of what we are building and what we hope to achieve.
Beginners will discover a language that has withstood
the test of time with unparalleled elegance.
This is where Smart differs radically from a lot of the other products on offer, namely that its built from the ground up to be “real”. Where other HTML5 products out there have a fixed set of classes, and knowledge of what you are allowed to do is pre-determined by the vendor – Smart has more in common with a classical C++ or Object Pascal environments where you are in charge.
The underlying [RTL] work must have been tremendous -Michael Thuma, Delphi developer via Google +
You could in fact replace the entire RTL with your own version if you so desired. And that is something that no other mobile development studio on sale today can match. They all come with a predefined set of classes, and in the majority of cases these are closed API’s. Meaning that you dont have access to the source.
Smart blows this to pieces just like Borland Delphi once did. While the list of classes you get for free out of the box is to large for this document, the most noteworthy are:
- TW3Component and TW3CustomControl
- Full implementation of HTML5’s canvas
- CSS animation classes
- Font and bitmap handling, both on-screen and off-screen
- Buffer classes and buffer-view classes, painstakingly implemented from the WC3 standard
- Form classes, TApplication and smooth scrolling when navigating between forms
- Timers, style mapping and much much more
Cool! I created my first OP4JS control: a DHTMLX grid
-André Mussche, Delphi developer via Google +
It is by definition impossible to say what people will use Smart for. So far people have created games with it, connected to remote web-services, displayed database grids, added control bindings, created fantastic fractal explorers and much, much more. Just like Embarcadero ignited a firestorm of creativity on the Windows platform – our aim is carry that fire into the next frontier which just happens to be the browser.
Nothing is impossible
Smart Mobile Studio is a vision and an idea. An idea brought to the table by Jon Lennart Aasenden, and embraced by the management at Optimale Systemer AS and a some key developers in the Delphi community. It was by many said to be impossible, if not heretical. When we presented the concept for the general public back in December 2010, it was met by applaud from the few and ridicule by the many. To make it a reality we have worked extremely hard, considering the technical difficulties involved.
Right before Christmas we shipped the first Alpha version, and some smart programmers of the Delphi community immediately created some stunning demos and thus proved the concept right.
And now, in February of 2012, the product has matures further, and we can proudly say that the vision has become a reality.
This tool should really get a place be in every Delphi developers toolbox.
The Smart Mobile Team
Smart Mobile Studio has a lot to offer modern developers. If you are looking for a way to maximize the potential of the HTML5 platform then Smart has a recipe unlike any other on the market. No matter what industry or field of expertise you focus on – Smart provides benefits that saves time. It makes technological and financial sense.
Beginners will discover a language that has withstood
the test of time with unparalleled elegance.
The world of advertising and content production operates with high demands. The market is constantly changing and the tools of the trade you have relied on for years – might not even be there tomorrow. Some vendors have consciously banned technologies like Adobe Flash in favour of HTML5 – which means you better start looking for a new method. A method which enables you to deliver quality content, on time, according to your clients expectations. Customers are simply not interested in flash banners any more.
Smart Mobile Studio allows you to take your HTML5 code to the next level. We provide a rich set of visual components ready for use out of the box. No fiddling with styles to get that native look, no experimental hacks to get it working and no shortcuts. This means you can spend your time focusing on delivering rich content and lasting impressions straight away.
Entertainment and multimedia
Smart Mobile Studio means you don’t have to cut corners. You get all the missing pieces of a real programming language, like actual object inheritance, variants, var parameters and interfaces. This means that converting already existing code from Visual Studio, Flash or C# to HTML5 is radically faster.
Finally you can focus on getting your game or multimedia app out there. Need an off-screen bitmap? No problem. Need a high speed drawing surface? No problem.
With Smart, creating online games becomes far easier because all the boring stuff is already done. You have classes for drawing graphics, both on-screen and off-screen. You get classes for communicating with your web service and you get a native looking GUI skin out of the box. Altering the look of your GUI is just a matter of editing a CSS style-sheet.
Before we started developing Smart Mobile Studio we did a survey of the alternatives for developing mobile apps. That’s actually where the initial idea and motivation came from. During this survey we must have tested at least 14 different “app” machines, languages and “rapid” development environments. We tested the serious players like C++, object pascal, C# and Java – to the outright scams which usually include the phrase “create your app in a day” (but the app you get is just a template with no real value what so ever).
The result of our survey was disappointing to say the least. At the time, using Free-pascal to work with iOS was a bit of a black art so while that was our initial choice – any substantial information regarding cross compilation was virtually non existent, so we decided to go for C# in developing our iOS apps. This involved learning a new language, a new platform and to some extent a whole new way of thinking.
Working with ordinary web technologies
So what is the alternative?
Changing the game
You also get an IDE (integrated development environment) specifically designed for Smart programming
Easy to use, easy to learn and very rewarding
If you haven’t used pascal before then don’t worry. It was designed to be taught in school to students of object oriented software development. Chances are you have already used it yourself or have heard about Delphi or Free-pascal from a co-worker. Object pascal is responsible for hundreds of thousands of applications in the Windows world – and it’s still knocking out killer apps today.
Easy to use doesn’t make it a lightweight in terms of features however. Object pascal is fast, dynamic, robust and can do pretty much everything C++ can do.
With Smart you can now take your knowledge of classical programming one step further – into the domain of super fast HTML5 web applications. You can also use third party products like Phonegap and compile your generated web app into a real, binary executable program – ready for app-store. In fact, only hours after Smart was released to it’s testers, demo projects made it’s way onto the Android marketplace (!)
Products like Embarcadero Delphi comes with a rich set of controls ready for use in your applications. If we compare the resource demands of these controls today (Delphi XE or XE2) to those that once shipped with Delphi 1 – or Delphi 7 even, the amount of resources a well designed form consumes has grown exponentially over the years.
As the operative system was grown more complex both in terms for functionality, responsiveness, mobility and the developers need for modern features, the amount of methods and auxiliary classes connected to a single control has become very large. As a result, the amount of memory and CPU requirements have grown with it.
The mobile scene
- The HTML5 architecture is incompatible with classical VCL programming
- The controls would be to slow for practical use
Getting these things to even resemble the VCL has been, well, let’s just say I havent played with my kids in a few weeks.
Doing the math
Luckily, the complexity versus efficiency argument is turning in our favour. Delphi developers like myself have a tendency to over-think the actual needs of our customers, and inside our own heads we are always trying to outsmart other programmers that may – or in most cases – may not be going over our code with a fine tooth comb. This can either drive us to excel at what we do or into obsessive nerds that polishes a piece of code so long – that the platform is dead if he ever finishes.
So, once in a while it’s wise to do a sanity check on your code-base (and your own expectations). Fact is that mobile apps are for the most part quite lightweight. If we for sake of argument say that a mobile app has 10 forms (or views if you prefer) and each of these views is populated by 20 controls. Some controls are composite, meaning that they have child controls (like a toolbar which uses a buttons) while other are vanilla, run of the mill stuff like labels and lists. You may also have a database running under the hood as well.
Adaptable and suitable
To me at least, mobile development is about information and communication and presentation. It’s about getting or storing data and presenting it on a portable device in a practical manner. It’s also about using the format in a way that makes sense to the consumer.
The factors are many, yet the organization of the latest HTML5 multimedia functions is neither fish nor foul. It’s not truly object(ive) in the C++/Delphi sort of way, nor is it linear like basic or old school pascal. It’s both, and none of them at the same time . which makes it difficult to set up generic rules that would apply everywhere in our object model. The only solution is to let go of what the W3C has marked as “legacy features”. Which is hard to do when they produce results so easily
Threading, security and overkill
- All communication between a worker and the DOM is through a message pipe
- The only datatype you can pass to and from is a blob
- All bindings are late-binding
- Worker code cannot reside in the main document
Thankfully I found a “loophole”, I’ll document it later – but it wont make it into OP4JS because it’s basically a hack. You can use TW3GlobalStorage (one of our classes) as a mirror cache for the data – and it’s actually faster than creating, populating and moving a blob into the thread context. Although it does require initialization ofcourse. But i suspect that loophole will be closed in the next release.
This week we are seeing some very cool ideas finally maturing onto the visual canvas. First and foremost: inline graphics. Under the traditional HTML paradigm resources such as images or soundfiles were always losely bound external entities. So before an image could be used it naturally had to download its content from a webserver or read it from a local file. But under HTML5 all of that goes out the window, because now you can embed your graphics as Base64 encoded characters. In short: transform your graphics into text and they can be applied anywhere.
So today our TW3MenuListItem class got automatic support for inline glyphs. The default glyph is of-course the ordinary iPhone chevron picture, but when TImageList is done you will be able to apply just about anything. Since this is HTML5 you can also make use of your styles to add further “bling” to your elements – but we will leave that part up to you. Our job is to deliver a system with the basic iOS widgets ready – but object pascal style, which means easy to use, easy to work with and as little fluff as possible.
Another cool feature that is now going through the test phase is the Angle property. All components that derive from TCustomControl have this property, and as the name suggests you can use it to rotate the control as you see fit. While it’s not the biggest feature in the world it does open up for a more colorful expression in the user interface. Want a yellow price banner over a product? Put a label on it, set the color and put -30 in the degree property.
This feature is my favorite, but it’s also the most complex to capture under object pascal. Webkit allows you to define animation sequences, which can then be applied to a html element or a style. You then use a trigger rule to activate the animation. The cool part is of-course that most of these effects have hardware support – so they run smoothly and without any flicker what so ever.
But of-course, under OP4JS you don’t have to worry about that