Topcoat HTML5 mobile UI framework review

What is Topcoat?

Recently I created few mobile apps using HTML5 and JavaScript.At that time I was in search of Topcoat is open source CSS library to build web apps and mobile apps.You can create free apps or paid apps using it.It is backed by people from Adobe.You can download it from Github and modify it according to your needs.As per the Topcoat website the library is built for speed.While creating mobile apps I was in search of HTML5 mobile UI framework.

In previous post I have wrote about App Framework.It is also HTML5 UI framework developed by Intel.It can also be used in your free as well as commercial projects.I had used it in my mobile applications.It gives your app native look and feel on all platforms.

But on my other mobile apps I wanted to have same look and feel on all platforms.Due to this requirement I gave up App Framework and tried TopCoat.There were other options as well like Bootstrap,jQuery mobile.There were two more famous options.Both the frameworks are well tested and are very popular.But instead of using them I went with Topcoat due to below mentioned features.

I used Topcoat with Intel XDK.If you are not aware about Intel XDK then read this post.It is awesome tool for mobile app development and is completely free.

Topcoat features

The features which helped me make my decisions are

Performance – It was one the main deciding factor.Topcoat does not depend on any third party library.It has no outside dependency and does not make use of JavaScript.It is only CSS.So the performance is better.Performance was big issue for my app.The target market for App was India.App which is fast is really loved.

Performance wise App Framework was right there with Topcoat and these two were better placed than jQuery mobile and Bootstrap.

Small Footprint – As mentioned above Topcoat does not any outside dependency.This helps to keep your app size small.On 2G powered devices downloading and installing an large sized app may be problematic.So keeping app size small is big plus.Since there were few apps available similar to mine.I tried to keep the size small so that potential users can try this one if they have problem installing the others.

Small app size helps users in decision making.Along with reviews and rating of an app it can be a factor.So to give my app maximum chance in competition I focused on keeping the size small and Topcoat certainly helps in this regard.The other libraries like jQuery mobile and Bootstrap does add more meat to original app size.Though App Framework performs better than Topcoat in this area.

Look and Feel – Topcoat is backed by Adobe.The controls look very professional and polished.This is one thing you can associate with Adobe products.Others libraries also offer good looking controls.So look and feel was not really a big difference maker.But having a consistent look across all platforms was something which was not present in App Framework.

Also the library worked well in Visual Studio 2013 as well.I have used Topcoat while creating Facebook Apps,Windows Phone Apps using Visual studio 2013 and Windows store apps using Visual Studio 2013.It worked well in all these cases and gave a consistent performance to the users.The same code base with small code changes were used on all these platforms.

Readability – This is one area in which Topcoat beats other libraries mentioned above.My app was question answer based so readability was going to be one of the most important feature.The content should be readable on all phones,tablets,phablets.Topcoat was the best library in this area.The default setting was good enough.

I made only single change.I increased the font size by 2 units and that’s it.There was no customization on my part.I tried my app on different screen sizes and it worked well.The clean and good looking fonts make reading a pleasure.So if you app is too much content based then this is one library to look into.It will lessen your develop time.I personally do not like changing the CSS and tailoring the libraries to suit my reading needs.

Topcoat worked out of box and it was one of the major reason I selected it.I did not want to dedicate time in making CSS changes for cosmetic look and feel of the app.I compared the default configuration of each library and choose the option which worked best.

Controls – This point is for reader who might be considering using this HTML5 UI framework.Topcoat is not the framework with more number of controls than others.jQuery and Bootstrap easily outperform Topcoat in this area.Even the App Framework has one or two more controls then Topcoat.So you can go through the list of controls available in Topcoat before making any decision.


TopCoat Controls on Intel XDK

It is worth mentioning that Topcoat does have all the basic controls.It does miss some advanced control like select combo box.So if you are looking for that then you may look to other libraries.You can also check if new version has included some other controls as well.Since my app required only basic controls I was fine with what Topcoat had to provide.

Easy to Customize – Topcoat comes in a single CSS file.It has two themes dark theme and light theme.Each of the theme has separate file.So including TopCoat in your application is as simple as including a CSS file in your app.

The best part is you can easily customize the CSS file as per your need.It does require some knowledge of CSS.Since it is simple CSS file you can create a HTML page using this file.You can then change the CSS rules as per your need.It is relatively easy to change CSS file if you have embedded it in a HTML file which you can open in web browsers like Chrome or Firefox or Internet explorer then in an app.

I choose the option of web developer in Chrome or Firefox to edit CSS rules and see the impact on the page.If satisfied I make the changes in CSS file.So this web developer approach you can use for TopCoat customization as well.I have not customized it as it suited my need out of box.

Conclusion

I was more than satisfied using TopCoat in my apps.It worked great on all platforms with out any lag.The app was fast to load and controls worked without any issues.So based on my experience I would definitely recommend using this framework on your apps.

Have you tried using it in your app? If yes feel free to share your experience.Also are you using some other HTML5 UI framework then share your knowledge and experience with it as well.

2 thoughts on “Topcoat HTML5 mobile UI framework review

  1. Hi Esha Upadhyay,
    I really respect your works , I’ve a small question: ” How to make a page that loads text content responsively” i.e like a page/subpage where the text is updateable.
    A very good illustration of my request is the bbc apps/Google news app or a basic news app . where text is updated
    I would like to do an app for a church, so we need a page where the minster will constantly update for people to see.
    Thank You Ma.

    • These HTML5 frameworks take care of all that for you.There is no action from your side to make the elements responsive

Leave a Comment