Smart Mobile Studio - Hybrid UI

I can say that is possible to write complex applications with Smart Mobile Studio, you just have to know its limitations. Limitations, you will also face with other tools like TypeScript. For instance, depending on what you plan to do, you can use only the SMS IDE, and use pure Object Pascal, of course, you have to do everything by hand, at least you have control over everything.

Sooner or later, you will stumble working on the user interface. This is often the biggest challenge facing any mobile development project. SMS offer a solution to the user interface - the SCL framework.

SCL approach

As you know, the SMS UI part is handled by the SCL (SmartCL Framework). It has a basic component library, including source code. Simply dragging and dropping visual components on the visual designer, and changing their appearance and behaviors as desired with the Object Inspector, like the old Delphi 7.

You even can create new components based upon existing components and add then to the component library. These components responds to events, typically user actions, and it invokes changes on the view.

Hand-written code

One thing that I tend to disagree is using the RAD approach to build, develop and manage the user interface. I sincerely do not like of this methodology, which I believe is difficult to work on real projects (with a lot of views).

I'll prefer hand-written code (write HTML/CSS code manually), I consider to be more readable, more maintainable and believe to offer more customization and abstractions. CSS is all about presentation, and it takes a good amount of tweaking to get things looking right across different browsers.
Using this approach, the visual designer is not required.

Hybrid Approach

SCL (SmartCL framework) has its strengths, removing completely SmartCL* components from your smart project can severely restrict the use of the some nice features.

The short of it is: You’re not going to be able to build an entire application in SMS Visual Designer (at least not yet anyway), but it is an nice tool for quickly creating UI and prototype apps.

What is a hybrid? The proposal is using hybrid designer-developer combo.  Part developer (views created using the visual designer / SCL), part designer (views polished by true designers).

Once you understand the limitations of the SmartCL*, what is and what isn't possible currently in your design. Some views, can be created by using the visual designer. Another part —  a talented person, a HTML5/CSS designer. I’m convinced that hand-coding is an essential to create beautiful views. Hand-coding also lets you create smaller files than a software package. It's faster to create finished, tidy web page templates by hand-coding than it is to use a WYSIWYG editor, for instance.

Using this methodology, it is possible to interfacing some mostly used frameworks like ionics, F7, Material Design UI with the SCL visual designer. Using this idea will give us plenty of benefits.  

In the following experiment, I'm going to use the hybrid methodology. The intro, blog, gallery, tabs, login, social, video and contact views should be created by using hand coding approach. Only two views (Form1 and Form2) were created using the SMS visual designer.

My 2 cents

I, myself, know how to code pascal to some extent. But I find myself coding less and less, ultimately. Since designing a more complex component task is time consuming. I still feel obliged to learn and pick up new coding skills every once in a while, which is nice – I always got overloaded styling a component.

I'm frustrating with the UI processes, instead of focusing on the smart strengths - on the logic, the smart compiler to write and debug business logic in its powerful language. Using the current approach we need to be a rockstart designer-developer to design beautiful designers.