Tag Archives: Smart Mobile Studio

Understanding smart

Posted on by Posted in News and articles
Compiler technology

Compiler technology

First, we are extremely grateful for all the positive feedback and questions regarding Smart Mobile Studio! We cannot underline enough how the enthusiasm really makes us work that much harder to deliver a knockout product that will serve the community for a long time. It is indeed clear that we have hit “bulls eye” and a serious gap in the modern programming model can now be filled. We are equally excited to that the emails stem from every corner of the software developing world, from the Delphi community, the C# community and believe it or not -the javascript community itself.

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.

The compiler

Like all code generating systems, the Smart compiler knows only a handful of things. It knows how to handle units (source files), procedures, classes, enumerations, assignments and other important language features. But on it’s own the compiler have no “built in knowledge” of neither what a browser is or what a control looks like. A compiler and code generator is a very complex piece of software that is able to take your source-code, break it down and transform it into something else. Which is javascript in our case. But it could equally have been machine code or C#.

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 VJL

Just like in Delphi

Just like in Delphi

As you should expect, all the components and classes that ship with Smart was actually coded in Smart itself. We also ship the source units for our RTL (called the visual javascript library, or VJL in short) so that people can examine, learn and also make changes if they want to.

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

And of-course, with a real compiler you can create as many classes and components as you wish. And you don’t have to be a javascript guru to do so. All you need is some basic understanding of object pascal and you are set to go.

Boundless possibilities

Just like you can create anything under the sun with Delphi, C++ builder or C# due to the fact that these environments have a real compiler – you can create anything you like with Smart Mobile Studio. Smart both compiles to and can interface directly with javascript – which means that whatever javascript can do, Smart can do.

Cool! I created my first OP4JS control: a DHTMLX grid
-André Mussche, Delphi developer via Google +

Smart Mobile Studio, early Alpha

Smart Mobile Studio, early Alpha

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.

So the question is not really if Smart Mobile Studio can support feature X. If you can sculpt it in either JavaScript or Object Pascal, then Smart can support it. We will provide you with the Visual Component Library and all the tools you need to create and interact with HTML5 and the latest web developments. We will also work hard to provide you with a standard set of components – but also give you the option to extend our technology with your own packages and components.

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.

 

Sincerely

The Smart Mobile Team

What can smart offer me?

Posted on by Posted in News and articles

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.

Advertising

You need an edge in what you do

You need an edge in what you do

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.

As a bonus all your web skills remains relevant as ever before. Smart can interact with other frameworks and you can easily add your own, native javascript code.

With Smart Mobile Studio you finally have a tool that can deliver HTML5 friendly advertising with no dependencies. No plugins, no custom browser extensions needed. What you get is cutting edge javascript which runs incredibly fast.

Entertainment and multimedia

With touch based devices like the iPad (or the rapidly expanding Android based market) almost everywhere these days, the future of tablet based gaming and multimedia is golden. But moving code from a classical programming environment to the web requires time, patience and money. Javascript is a fantastic language that commands great power and potential, but compared to C# or Object Pascal you will find yourself cutting corners.

Browser games are getting more and more advanced

Browser games are getting more and more advanced

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.

Business software

No matter if you are focusing solely on the mobile market or want to create dynamic browser applications, Smart will help you get started straight away. As a modern developer with a background in C#, C++, object pascal or java – first contact with the alien landscape of javascript is often a culture shock. It has been said that going from Delphi or Visual Studio to javascript is almost like trading in your PC or Mac for a Commodore 64.

Javascript can now deliver serious applications

Javascript can now deliver serious applications

As a language javascript has no support for OOP in the true sense of the word, no virtual methods, no abstract methods, no interfaces and absolutely no var parameters. These restrictions alone makes it very difficult to create and maintain large scale applications in native javascript. When we add the fact that you must create, or buy, a GUI framework on top of this, the financial aspects involved in “going native” can hardly be justified.

Smart Mobile Studio removes 2/3 of the challenge straight away. You get a language which is very popular, has a massive code-base the world over, is easy to learn (especially if you have OOP background) and which supports modern concepts like interfaces, classes, inheritance and other “must have” features. So instead of spending months learning in-depth javascript, circumventing it’s pitfalls through trial and error, buying a ton of books and basically re-inventing the wheel — You can pick up Smart and deliver a killer app in no time.

Smart will take your object pascal code (the same flavour as made popular by Delphi and Free-pascal) and compile it into cutting edge javascript. The compiler even sculpts the missing language features, like interfaces and inheritance, in javascript itself. So the generated code have no dependencies. You don’t need a plugin or browser extension at all. It will run “as is” in any webkit based browser (Chrome, Safari, Safari Mobile and more).

Further reading

Tired of handcrafting your Javascript apps?

Posted on by Posted in News and articles

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.

But one thing we did notice was that Javascript had come a long way. While all the native systems were struggling to get aboard the iOS and Android bandwagon – javascript was all over the place. Doing things it’s not supposed to do in classical terms. Everything from silky smooth animations to action packed platform games.

This is a snapshot from a game written in BlitzBasic which demonstrates what modern Javascript can do. We are old fans of Mark Sibly at Optimale Systemer!

Javascript can now do amazing things

To make a long story short we continued working in C# and object pascal, but as the idea behind cross compilation and using javascript as a medium began to grow, we found ourselves seeking out like-minded people, putting our ideas to the test. Unlike the “app machines” however, we did it properly from the ground up.

So the question is not if javascript works. The question is how to use that power properly.

Working with ordinary web technologies

When we took the time to look at javascript with new eyes, three things became apparent. First, browsers are not just page readers anymore but rather fully fledged multimedia environments. Secondly, Javascript has grown and can make use of the browser in a whole new way. And last but not least: javascript’s lack of structure is both it’s strength and it’s downfall.

Take something simple like a visual component. When you dig into the complexities of this simple task it turns out it’s not that simple after all. As of writing there exist no single standard between the different javascript frameworks on the marked. It is also highly unlikely that it ever will – because it’s not financially beneficial for these companies to work together. They would lose their uniqueness if they did, not to mention the technical difficulties getting two javascript frameworks talking to each other. When you use a framework you stick to it, mixing two different systems could in theory work – but in real life it quickly becomes a mess.

Classic remake of capcom streetfighter using gameQuery JS framework

Classic remake of capcom streetfighter using gameQuery JS framework

Encapsulation and portability of source is also an issue, not in terms of browser compatibility – but in terms of programmers sharing solutions. There are several ways a javascript developer can create the same thing – and the lack of a common approach (which classical languages solve by syntax, classes and a common foundation like the VCL) makes it extremely time consuming.

After we created a small demo/game in Javascript, testing out ideas and playing around with the multimedia features, it became crystal clear that it simply takes to much time to hand-craft large projects in javascript. You can use one of the many ready-made frameworks out there, but the amount of source code you need to write for a large game or application is ridicules.

So what is the alternative?

HTML5The alternative is not to ignore javascript, but rather to use javascript as a medium. What we did with Smart Mobile Studio was to transform a disadvantage into an asset. Javascript is the proverbial “wax that takes many forms”. We projected the rigid and time proven structure of object pascal onto the “everything goes” landscape of javascript. The end result is that you can now use the power of object pascal, it’s encapsulation, it’s class hierarchy, it’s true object inheritance and (thanks to our super clever compiler guru Eric Grange) even fancy concepts like interfaces, closures and var parameters. So not only do you get the power of javascript – you also gain the wisdom and experience of more than 18 years of pascal evolution (not to mention the object pascal community which is a living genius factory).

With a few hundred lines of pascal code you can achieve what it would require thousands – if not tens of thousands lines of javascript to match. But the central strength of pascal is that of scope and size. A large object pascal code-base can be maintained due to the architecture of the language. The same project in “native” javascript terms would be nearly impossible to keep track of. The time and cost involved in developing and maintaining a 200.000 lines long javascript project cannot be justified when you can achieve the same with 20.000 lines of pascal. Object pascal was designed to handle large projects. Javascript was not.

So. Are you tired of spending days hand-crafting javascript that could be delivered in hours?

Taking advantage of classical programming

Posted on by Posted in News and articles
10.000 lines of javascript can be hard to maintain

Javascript can be hard to maintain

Let’s face it, Javascript is both a powerful and flexible language, but developing and maintaining large scale projects in a dialect not really designed for it is frustrating. The reason javascript libraries like jQuery, jQTouch and Sencha have remained more or less unrivaled for years now – is first and foremost because of the monumental effort involved.

The key factor itself have to do with the actual language. Javascript is a fantastic language, but sadly it lacks many of the traditional programming concepts native to languages like C++ and object pascal. Concepts like classes, true object inheritance, interfaces and type casting – techniques and technology created exactly for the purpose of making large frameworks manageable and robust.

Changing the game

With Smart Mobile Studio however you can take full advantage of these classical concepts. This is because our product allows you to write ordinary, classical object pascal (made famous by Delphi, Free-pascal or other incarnations of the language) and it’s instantly converted into super charged javascript.

The compiler at the heart of Smart generates javascript in a way that implements all the aforementioned technologies. So even if javascript itself doesn’t support concepts like interfaces, it is crafted by the compiler in javascript itself. And if you are worrying about speed – you will find that even with all these powerful and classical technologies – Smart Mobile Studio can run with the best of them. To make it plain: Smart does for the browser what Delphi did for the Windows platform.

You also get an IDE (integrated development environment) specifically designed for Smart programming

Write pascal, compile to javascript

Write pascal, compile to javascript

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 (!)

So what would you rather maintain? 10.000 lines of javascript code or 1000 lines of pascal code to achieve the same thing? Object pascal is a proven, tested by time and established language designed to handle large scale projects. Javascript is not. The benefits of using a compiler that generates javascript are just to great to ignore.

Your first OP4JS custom control

Posted on by Posted in Documentation 1 Comment
There is a lot of work behind OP4JS

About 0.1% of the total OP4JS RTL system

Since the basic framework is nearing completion at high speed (although some modifications might appear) I thought it could be interesting to demonstrate how to create your very own custom control under OP4JS.

In the Delphi world there are two archetypal programmers: Those that stick to the high level interface of Delphi, meaning that they only use pre-made controls and rarely go beneath the bonnet so to speak – and the second group which create components, packages and love to fiddle around with low-level coding. This type of stereotyping is something more or less unique to RAD languages (which would include Delphi, Lazarus, Visual Basic, Real Basic and languages that are “design” based). In more mature languages like C++, Delphi (yes delphi is just as low level as the C++) or C# low-level work is almost unavoidable. But with Object Pascal you at least have a choice (!)

With OP4JS we have tried to retain much of the HLA (high level abstraction) of Delphi, but the system demands that if you want something unique – you have to create your own controls in order to stand out. If not, you might as well go with the many template-based “app machines” out there that produce programs that all look and feel the same.

The basics of a control

There are two types of controls you can create under OP4JS: Graphical controls and ordinary parent/child controls (like you are used to from Delphi). A graphical control is an object that contains a HTML5 graphics context and canvas, which means you have to draw it yourself. This is good for things like games, charts or anything that cant be represented using “normal” html.

The second type, which is the one 90% of all the standard controls that ship with OP4JS derive from, is TCustomControl. So let’s have a look at how setting up a fancy iPhone header looks like:


type

TW3HeaderControl = Class(TCustomControl)
private
  FLabel:     TLabel;
  FBackBtn:   TW3ToolButton;
  FNextBtn:   TW3ToolButton;
Protected
  Procedure   Resize;Override;
protected
  Procedure   InitializeObject;override;
  Procedure   FinalizeObject;override;
  Procedure   StyleTagObject;override;
End;

Under Delphi you would probably expect to see a constructor and destructor in the above code, but under OP4JS we try to synchronize the number of steps taken to establish a control (i.e number of resize and position operations). So to solve this we have introduced 3 new methods: InitializeObject, FinalizeObject and StyleTagObject. As the names imply you create any sub-controls and initialize your variables in InitializeObject (just think of it as your constructor), you destroy those instances in FinalizeObject, and you apply any extra styling or property alteration in the StyleTagObject method.

Clever styling

When a control is in the state of creation, it automatically set it’s own style class (think html here) to the name of it’s class. So in order to give our little control a nice look – we edit the default style sheet (this is automatically created when you create a new application) and make it look like a true iPhone header. The rule of thumb is: The name of the CSS class always matches the name of the OP4JS control:

.TW3HeaderControl
{
	background-image:-webkit-gradient(linear, left top, left bottom,
		from(#b2bbca),
		color-stop(0.25, #a7b0c3),
		color-stop(0.5, #909cb3),
		color-stop(0.5, #8593ac),
		color-stop(0.75, #7c8ba5),
		to(#73839f));
	border-top: 1px solid #cdd5df;
	border-bottom: 1px solid #2d3642;
	-webkit-box-shadow: rgba(33, 33, 33, 0.2) 0px 1px 1px;
}

Adding behavior

If you don’t know anything about CSS or HTML, don’t worry, you can always copy a style you like from the default skin, and there are plenty of examples around the Internet to learn from (or just get a good book, that would save you a lot of time). OK now we need to add some code to our unit to make it come alive:

Procedure TW3HeaderControl.InitializeObject;
Begin
  inherited;
  FLabel:=TLabel.Create(self);
  FLabel.BorderStyle:=bsDotted;
end;

Procedure TW3HeaderControl.FinalizeObject;
Begin
  FLabel.free;

  if assigned(FBackBtn) then
  FBackBtn.free;

  if assigned(FNextBtn) then
  FNextBtn.free;

  inherited;
end;

Procedure TW3HeaderControl.StyleTagObject;
Begin
  inherited StyleTagObject;
end;

Procedure TW3HeaderControl.Resize;
var
  wd,hd:  Integer;
  mTemp:  Integer;
  dx:     Integer;
Begin
  wd:=Width;
  hd:=Height;

  mTemp:=wd;
  dx:=4;
  dec(mTemp,4); //left margin
  dec(mTemp,4); //Right margin

  if  assigned(FBackBtn)
  and (FBackBtn.Visible) then
  Begin
    //space between "back" & label
    dec(mTemp,FBackBtn.width);
    dec(mTemp,2);

    //offset the left edge of the label
    inc(dx,FBackBtn.Width);
    inc(dx,2);

    // position the back-button
    FBackBtn.Left:=4;
    FBackBtn.Top:=4;
  end;

  if  assigned(FNextBtn)
  and (FNextBtn.Visible) then
  Begin
    //space between label & "next" button
    dec(mTemp,FNextBtn.width);
    dec(mTemp,2);
    FNextBtn.Left:=mTemp;
    FNextBtn.Top:=4;
  end;

  FLabel.left:=dx;
  FLabel.top:=4;
  FLabel.Width:=mTemp;
  FLabel.Height:=Height-8;
end;

Why all that code? First of all because it’s just a quick example and secondly, because a typical iPhone header have 3 parts: A back button, a next button and some text in the middle. The above code checks to see if you actually have created a back or next button and shrinks the text area accordingly. Let’s see how it looks so far:

That was easy enough

That was easy enough

I have set the label to have a dotted frame just to make it easier to work with, we will of-course remove the frame all together later. But now, let’s add some more methods to the class interface. We want to expose the label object to give the user access to it’s full capabilities (caption, font, background, orientation and all the rest), and we also want both back and next buttons.

But, we want to keep resources to a bare minimum, so we will use the old “need” trick and only create the buttons when asked for. So the buttons will only be created when you access them:

TW3HeaderControl = Class(TCustomControl)
private
  FLabel:     TLabel;
  FBackBtn:   TW3ToolButton;
  FNextBtn:   TW3ToolButton;
  procedure   ReleaseButtons;
  Procedure   NeedBackButton;
  Procedure   NeedNextButton;
  function    getBackButton:TW3ToolButton;
  function    getNextButton:TW3ToolButton;
protected
  Procedure   Resize;Override;
protected
  Procedure   InitializeObject;override;
  Procedure   FinalizeObject;override;
  Procedure   StyleTagObject;override;
public
  Property    BackButton:TW3ToolButton read getBackButton;
  Property    NextButton:TW3ToolButton read getNextButton;
  property    Title:TLabel read FLabel;
  Property    Options:TW3HeaderButtonOptions read FOptions write setOptions;
End;

And the implementation for our new methods are (this is just a quick example):

Procedure TW3HeaderControl.NeedBackButton;
Begin
  // Create object on the fly if required
  if not assigned(FBackBtn) then
  Begin
    BeginUpdate;
    FBackBtn:=TW3ToolButton.Create(Self);
    SetReSized;
    EndUpdate;
  end;
end;

Procedure TW3HeaderControl.NeedNextButton;
Begin
  // Create object on the fly if required
  if not assigned(FNextbtn) then
  Begin
    BeginUpdate;
    FNextbtn:=TW3ToolButton.Create(Self);
    SetReSized;
    EndUpdate;
  end;
end;

function TW3HeaderControl.getBackButton:TW3ToolButton;
Begin
  NeedBackButton;
  result:=FBackBtn;
end;

function TW3HeaderControl.getNextButton:TW3ToolButton;
Begin
  NeedNextButton;
  result:=FNextBtn;
end;

procedure TW3HeaderControl.ReleaseButtons;
Begin
  if assigned(FBackBtn) then
  Begin
    FBackBtn.free;
    FBackBtn:=NIL;
  end;

  if assigned(FBackBtn) then
  Begin
    FNextBtn.free;
    FNextBtn:=NIL;
  end;
end;

The final product

To use our new control, all we have to write (in our Form’s InitializeObject for instance) is something like:

FMyCoolHeader:=TW3HeaderControl.Create(self);
FMyCoolHeader.BackButton.Caption:='Back';
FMyCoolHeader.BackButton.onClick:=HandleBackButtonClicked;
FMyCoolHeader.Title.Caption:='My cool header!';

And voila – we have a nifty iPhone header that looks and feels like the real thing 🙂

Easy but effective

Easy but effective

Notes and addendum

This example is very, very simple. It was put together in 5 minutes just to demonstrate how easy it is to get going and is in no-way an example of code quality or approach. I can think of 1000 ways of making a better header control (the one that ships with OP4JS has a lot more code and does not create buttons this way, and yes — exceptions and error handling is a must).

Control complexity and mobile resource management

Posted on by Posted in News and articles 2 Comments
This is not just a picture, but actually the background set for a picture

This is not just a picture, but actually a multi layered view. The buddha is a background for an image placeholder. Quite dynamic and neat

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

One of my primary concerns when we sat down to talk about OP4JS control library was simply that it would be over-kill to even attempt to emulate the VCL under javascript. In my notes the primary points were:

  • The amount of JavaScript generated would exceed the restrictions of these devices
  • The HTML5 architecture is incompatible with classical VCL programming
  • The controls would be to slow for practical use

Thankfully my worries were unfounded on all accounts, because we have more or less built a VCL clone. It is and has been quite a challenge. As you may know HTML5 introduces a high-level interface onto ordinary html. It is different not so much in terms of syntax, but rather in philosophy, inspired no doubt by the MVC (model view controller) paradigm imposed on the world by Apple computers. In short, the CSS styling represents the “view” part, the actual html tags the “model” and Javascript the controlling factor. Javascript is what provides behavior to otherwise empty, stateless constructs.

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

CSS transitions and events

CSS transitions and events

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

So an app consisting of 200 javascript objects is really not that huge. It would result in quite a bit of generated code of-course, but the browser chews through this like it was nothing at all. And you wouldn’t even be close to the limitations set down by Apple or Google regarding size. Strange as it may seem – my test app written in Op4JS both loads and executes faster than it’s native counterpart written in C# (which compiles to a single binary on iOS). The only exception being complex graphics (which you would normally use a DIB library for) and heavy-duty number crunching. But those are things you don’t want to have on your phone anyways. It’s possible of-course, but not practical.

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.

External resources

Focus, callstack and recursive processing

Posted on by Posted in Documentation 6 Comments
Call stack limitations

Call stack limitations

The world of mobile computing is getting better and better, but there are some limitations when dealing with smart gadgets running iOS or Android. The first thing is obviously the speed, which doesn’t even come close to what an average home computer can muster. Even my 5 year old test machine can outrun any mobile device without making so much as a dent in the cpu-o-meter.

The second limitation people are going to discover, depending of-course on the line of work you do, is that mobile devices is the proverbial banker when it comes to memory – implying that your call stack is but a microbial-fraction of what we are used to. What does this mean? Well every time you call a method under Javascript, you eat up one call-slot. If this procedure in turns calls another, and another (and so on) it quickly gobbles up the meager call stack limit. The size of the call stack is varied and depends on the vendor, as of writing iOS is sticking to it’s near obsolete range of 100 recursive calls while Android is said (I couldn’t find any official information on this) to have a call stack of about 800.

To kiss or not to kiss, that is the question

Kiss (keep it simple stupid) is one way to go when it comes to mobile development. But there are times when you must resort to classical speed mechanisms to reach the full potential of a system. As such I am in the process of optimizing the base-classes for speed and simplicity (some form of balance preferably). The method is really simple and it’s known as loop expansion (or just “unrolling”). Let’s for sake of argument say you have a control with a lot of child objects, like a grid or a list. Instead of doing a simple for/next loop, like this:

[sourcecode language=”delphi”]
Procedure TMyObject.DoSomething;
var
x:Integer;
Begin
for x:=0 to FChildren.Count-1 do
Begin
process(FChildren[x]);
end;
end;
[/sourcecode]

The above example is perfectly valid, but it’s quite slow depending on the data-load you expect. A list control could be expected to handle hundreds if not thousands of elements – so we want to speed things up and minimize loop time:

[sourcecode language=”delphi”]
Procedure TMyObject.DoSomething;
var
mLongs:Integer;
mShort:Integer;
mCount:Integer;
mIndex:Integer;
begin
mCount:=FChildren.Count;
mLongs:=mCount shr 3;
mShort:=mCount mod 8;

while mLongs>0 do
Begin
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
process(FChildren[mIndex]);inc(mIndex);
dec(mLongs);
end;

while mShort>0 do
Begin
process(FChildren[mIndex]);inc(mIndex);
dec(mShort);
end;
end;
[/sourcecode]

Speed-wise, at least when it comes to crunching fixed data like pixels or typed JS arrays, is nearly incomparable to the first approach. It obviously produce more code – but the benefits are just to good to ignore (roughly 4 times as fast).

As long as your final build does not exceed 10 megabytes, which is Apple’s limit on single javascript files, it’s not a problem (and that would be a huge, huge project if you ask me).

Men first, women and children last

When doing recursive calls that affect an entire object model you have to deal with the men first, meaning of-course those elements that does not have children attach to them (oh this is gonna get me into so much trouble if my wife reads it). Why? Because we want to minimize the number of recursive calls (or steps taken) a control has to make. Let’s use the simple formula to demonstrate (this would also be loop expanded in the final release):

[sourcecode language=”delphi”]
Procedure TMyObject.DoSomething;
var
x:Integer;
mCount:Integer;
mStack: TObjectList;
mObj: TObject;
Begin
//avoid multiple calls to getCount in FChildren array
mCount:=FChildren.Count-1;
for x:=0 to mCount do
Begin
//minimize call to getItem in FChildren array
mObj:=FChildren[x];
if mObj.count=0 then
// No kids? Do singles first
process(mObj) else
Begin
//kids? Ok, we’ll handle that later
if mStack=NIL then
mStack:=TobjectList.Create;
mStack.add(mObj);
end;
end;

if mStack<>NIL then
Begin
mCount:=mStack.Count;
while mCount>0 do
Begin
mObj:=mStack[mCount-1];
process(mObj);
dec(mCount);
end;
mStack.free;
end;
end;
[/sourcecode]

And last but not least, the “process” method should be inlined if possible, thats 50% of the point here. If you can avoid a secondary call – then avoid it, that’s how you cut down on call-stack overload and as a nice benefit you get a speed boost.

Notes

#1 [29.09.11, 18:31]: Eric Grange pointed out (as did two readers on this page) that the same effect will happen if we apply FChildren.Count-1 and start from zero. That would be slightly faster to since we dont execute a continous subtraction of the index. A clear error on my part.

#2 [29.09.11, 18:31]: Interestingly, the -1 trick was originally used for string processing (hence starting at 1) and has nothing to do with speed per-see, except that you save an “if FChildren.Count>0 then” in some languages. But this tiny advantage is indeed lost by the use of [-1] in the loop itself. Some basic compilers will execute the code even if FChildren.count =0. This is an old habit from the days of Amiga BlitzBasic programming.

#3 [29.09.11, 18:35]: Also the “process()” call should only be concidered pseudo code. It’s the loop expansion that’s being demonstrated. Preferably you would work with the data directly at this point rather than call another proc, since the whole point is to limit the number of calls while speeding up a process. It’s not meant as a literal example, but as the bare-bones of a technique.