Table of Contents
What is uniGUI?
uniGUI is a web application framework for RAD Studio Delphi. It uses Sencha Ext JS components to create sophisticated modern web applications. uniGUI enables developers to create, design and debug web applications, using a unique set of visual components specifically created for Delphi. uniGUI provides a very comfortable development environment with a smooth learning curve, WYSIWYG visual designer and super easy deployment. uniGUI today is used by a great number of Delphi developers globally.
The History of our Ext JS Migration
I can tell you that no migration is easy, especially when you try to move across multiple versions. You always face code breaking changes that you sometimes like and sometimes not so much (I am a developer). We started with Ext JS 3.1.0 in 2010 and earlier this year we released our Ext JS 6.5 version. 6.6 is next, but that is actually easy. I will share below that may help some Ext JS developers, especially those using it in OEM capacity. In our history we considered both Angular and React, and I tell you that uniGUI would not be around if we had made some these choices.
Challenges & Benefits
The first public build of uniGUI used Ext JS 3.1.0. It was in July 2010 when the first beta version of uniGUI was made public. In those early days, uniGUI capabilities were very limited compared to what it offers today. The support library ExtPascal was a wrapper for Ext JS components which could automatically translate Ext JS to Pascal wrappers. The last Ext JS version officially used by ExtPascal was Ext JS 3.2.1. It was never updated to Ext JS 4.x and later, so it was our job to do the conversion.
We tried to delay this task, but after a while, we realized that we need to move to Ext JS 4.x which became the main trend. Therefore moving to Ext JS 4.x became inevitable. Ext JS 4.x had many new features and improvements that we couldn’t resist anymore! So our first migration challenge was migrating uniGUI from Ext JS 3.2.1 to Ext JS 4.x. Ext JS 4.x, for the most part, was a complete rewrite of the Ext JS library core. In Ext JS 4.x the DOM structure and component system were redesigned to achieve a much better render capability and overcome some of the Ext JS 3.x limitations. For example, Ext JS 3.x was not good at rendering components inside hidden containers, especially hidden tab pages. In Ext JS 4.x this problem was resolved nicely. Another major improvement in Ext JS 4.x was new chart components. In Ext JS 3.x charts was based on Adobe Flash while in 4.x chart was rewritten to become native HTML components. From what I recall, our migration from Ext JS 3.x to Ext JS 4.x was a bit difficult. It required us to rewrite parts of our Ext JS extensions and support JS libraries.
Moving from Ext JS 3 to Ext JS 4 was a leap for us. At the same time, we started adopting Sencha Touch to uniGUI. Sencha Touch was a new set of components from Sencha which was specifically designed for mobile devices. Sencha Touch was developed based on a similar library core to Ext JS, so we could integrate it into uniGUI and add its power to a uniGUI set of components.
Since we were aware of the changes in Ext JS 5.x, we decided to skip migration for a while until we could dedicate enough time to the migration process. Unfortunately, time was passing by and Sencha was too fast in publishing new versions. Ext JS 5.5, 6.0, 6.1 and 6.5 released one after another. Last year, it became apparent that we need to jump to Ext JS 6.x, so we gave the migration task the highest priority. We started migration in Q4 of 2017 to upgrade uniGUI from Ext JS 4.2 directly to Ext JS 6.5.
At first, the task looked pretty simple. By analyzing the new architecture of Ext JS 6 we realized it was mostly compatible with Ext JS 4.x. The biggest difference was the directory hierarchy which Ext JS used to keep library output. It is because uniGUI directly consumes the pre-built output of Ext JS library aka “ext-all.js”.
After adopting this new directory hierarchy and other details a few days later, we succeeded in displaying a basic uniGUI Form with a few components all with Ext JS 6.5. Eureka! We had an alpha version of uniGUI running on Ext JS 6.5. However, we soon realized the rest of the task would require more resources than we had initially planned for. Keep in mind that uniGUI maps a whole framework to Ext JS, so details matter and there are a lot of components.
Many changes in Ext JS 6.5 were due to the fact that Sencha Touch was merged into Ext JS and both now were relying on a common core base. Sencha had created a new base which was sharing lots in common with both Sencha Touch and Ext JS. The result was beautiful. Ext JS 6.5 had a much better touch device compatibility compared to Ext JS 4.x. Now you could develop touch device enabled applications directly using the Ext JS classic toolkit, something that couldn’t be easily done using Ext JS 4.x. In Ext JS 6.x, the Modern toolkit became our new “Sencha Touch” while the Classic toolkit remained our good friend “Ext JS”!
Because of Modern and Classic we decided to take a two-pronged approach. The first was upgrading Ext JS 4.2 to 6.5. The second was replacing Sencha Touch with the Ext JS 6.5 Modern toolkit. I must confess that migrating from Sencha Touch to the Ext JS Modern toolkit went much easier and smoother than what I initially expected. After a couple of days, I had a working uniGUI mobile application based on the Ext JS 6.5 Modern toolkit. The rest of the job was to fully test each component individually and applying the necessary fixes wherever needed.
One of the biggest challenges for us was with the Modern toolkit and the introduction of new themes. The new Modern themes were much simpler, so we needed to add additional CSS styles to enhance the look and feel to meet our requirements. uniGUI developers were used to the old (Sencha Touch) themes, so we had to make some modifications here and there.
Overall, I was happy with the Ext JS Modern toolkit. It offered many improvements over Sencha Touch. For instance, it had a more powerful Grid with additional features and capabilities. The library core was using many common elements with Ext JS classic toolkit, so we were able to unify parts of uniGUI JS code which implemented different methods and overrides specifically for Sencha Touch. Another major improvement was new chart components in Ext JS 6.x which were using a common library for both classic and modern toolkits. It enabled us to use same uniGUI chart components for both mobile and desktop with almost no modifications. Something which was more complicated when we were using Sencha Touch and Ext JS 4.x.
For example, take uniGUI DBGrid which is a wrapper for Ext JS grid panel component (Ext.grid.Panel). uniGUI DBGrid implements many powerful features which are not natively available in Ext JS grid. It offers DB connectivity out of the box with built-in editing and navigation capabilities. For us, the challenge was to make sure that DBGrid based on Ext JS 6.x would work exactly the same as it did with the Ext JS 4.x version. This required us to prepare for many small details in uniGUI DBGrid implementation. There were small details in the new Ext JS Grid implementation which were considered breaking changes for us. For example, there were changes in the parameter list of the some of the Grid events. Those changes needed to be analyzed and addressed on a case by case basis.
Migrating the custom Ext JS themes was one of the more difficult tasks. The internal theme variable structure in Ext JS 6.x is changed and requires thorough analysis of SCSS code. We had done excessive CSS overrides in theme source files, which were tough to resolve. We had done it to create highly customized themes based on some popular operating systems (Ubuntu theme example below). We do this a lot less with the Ext JS 6.5 version.
We should have relied on pre-defined theme variables as much as we can. Using CSS class overrides directly in theme source code should be used only when it is needed and can’t be avoided. The more you use direct CSS code, the more the chance that your custom theme will be incompatible with future versions of Ext JS. As a part of this migration, we also created two new themes: Sencha and Carbon. Carbon is a dark theme based on the Neptune theme with monochrome dark tones. Sencha is a another theme created based on the Neptune theme by inspiring from colors in the Sencha logo.
Another major lesson we learned is that we should not delay upgrades when a new Ext JS version is out. Delaying makes it more difficult by each minor or major version. Needless to say that by skipping new versions, you’ll also miss all of the benefits of features.
If you have a large application, maintaining resources to support upgrades on an ongoing basis makes sense. While it is attractive to do it every 2-3 years, at the end the expense is the same or greater. Unlike some of the “popular” frameworks, Ext JS has a much more measured and predictable approach that is more manageable for OEM and Enterprise Applications. Also, the high productivity means that you do not need a lot of resources.
Summary & Next Steps
All said and done, it took us less than 6 months to complete a huge migration. I had several developers and personally spent a good deal of time on it. However, the effort is negligible compared to the stories I hear about our migrations. Remember, we are talking about mapping the whole framework.
I can say that I’m quite pleased with the end result. Migration to Ext JS 6.5 expanded our horizon. Our next step will be to implement all new features available in Ext JS 6.x including the new Pivot Grid. Another step forward will be to take advantage of all new features in the new Ext JS charts, which now are entirely based on HTML5. We believe our next Ext JS upgrade will be more seamless, as I think the Ext JS core architecture has already got its final shape and we should expect little breaking changes in upcoming Ext JS releases.
uniGUI acts like a natural bridge between Sencha Ext JS and Delphi, and I’m sure that uniGUI developers are quite pleased to have the luxury to work with the latest version of Sencha Ext JS. From now on, we intend to make sure that we will keep up with the latest Ext JS versions.
While the migration presented some challenges, it was worth it. In the end, having a modern look and feel with many more features incorporated benefits us in the long term. We hope walking you through our journey will be helpful when you decide to take the leap, it’s worth it!
Ungui is best web framework for delphi I ever seen.
David Izada Rodriguez says
I tested unigui a it is best framwork for web application for delphi.
a simple & powerful Framework for Develop Web application by delphi
I think the UniGui is the best FrameWork for web & Mobile Application by Delphi
UniGui move us to web world
Stefano Monterisi says
Unigui is a jewel. Now the only real way to bring Delphi to the web quickly and with excellent results
5 years ago I chose to choose uniGUI to migrate our ERP to Cloud, I can say that I do not regret choosing to have uniGUI.
I hope that uniGUI and Ext JS will continue to evolve, benefiting us more and more with resources and performance to make our applications compete in the software market and please our customers.
M.Y Zerrouki says
Since i discovered Unigui (2014), my annual sales have increased by 70%.
Now, we are present in web development and I feel more comfortable with my customers.
Big thx to FmSoft team.
never did application for Web, but with UniGUI on Delphi I was able to create comercial web app for 2 month from scratch!
Denis Prince says
UniGUI makes developing web application so much easier.
Thank you Mr Farshad for this wonderful framework and keep up the good work.
Mobil sohbet says
thanks for sharing.
alaçatı mekanlar says
thank for share this
Vaw Çiçek says
Thank you for sharing
sağlıklı yaşam says
Unigui is a jewel. Now the only real way to bring Delphi to the web quickly and with excellent results
dul kadınlar sitesi
malatya oto kiralama says
malatya oto ekspertiz says
You people don’t know a thing about Web Development and good Frameworks.
Delphi is a dead language, and it shouldn’t be alow to use to develop Web Applications, to only constant about unigui is the poorly update 2 or 3 times in a row and with every update it introduces a lot of bug.
And of course, I almost forget, it even doesn’t have a quarter of Delphi components.
It seems that you have little information about current status of Delphi and uniGUI.
uniGUI web components are a super-set of standard VCL with extended functionality.
uniGUI is frequently updated and many bugs are fixed in each new build. Not sure were from you get this false impression that new bugs are introduced.
Apparently, the growing uniGUI community strongly disagree with you.
I have a lot of information about current status of Delphi and UniGUI.
I’m not saying that Delphi is a bad language for development, i’m saying is a bad language for WEB development. Is true that uniGUI is frecuently updated, but with every update it loses something or introduce a new bug, for example, did it work perfectly with Ext JS 6.7? The Grid from unigui have the same properties that the vcl grid from Delphi? The component have the same events?
Another question.. Why is it that the official forum is not develop with unigui?
Bender the air bender says
As i said. The new version of unigui (1503) get bugs, a lot.
The very funny one?
TForm1.BorderStyle := bsNone;
Is now wrong.
It is a breaking change, not a bug.
We had to define our own TFormBorderStyle class to add new options to it.
Since you have access to build 1503 you already have a license, right?
Please open a ticket in support portal.
şehirler arası nakliyat says
izmir hotpoint servisi says
Congratulations have been a wonderful sharing.