Monday, November 19, 2012

KendoUI and Pokki living in symbiosis

Today I’m writing for two products that I really like – KendoUI and Pokki. For those of you that are not familiar – KendoUI is a framework for building desktop applications using HTML5. KendoUI is a comprehensive HTML5 and JavaScript framework for web and mobile development, brought by Telerik. What I find really fascinating about these two products is that they work together really well, even though there are not tested for integration. The main reason is that both of them are based on open standards (HTML5) which is really awesome and shows that HTML5 is a game changer for all of us.

How Pokki works

imageThe idea behind Pokki is awesome – developers can build little nice applications that sits in the taskbar of the user and updates him from time to time what’s going on on your app. There are hundreds of applications already built that brings your favorite websites even closer – Facebook, Gmail, grooveshark, etc. Pokki are even trying to fill the gap that Windows 8 left by removing that start menu from desktop environment by bringing the most frequently used operations back to you.

To achieve this, those guys use webkit (which is the browser engine used by most of the modern browsers today) to display your application to the user. This basically means that you can do everything you have used to do in webpages and even more – Pokki gives you the ability to use a local storage, show notifications to the user, update your application to all users through their infrastructure – basically what every developer needs. To make use of all this – you just have to develop your Pokki (you can even use the Developer Tools that you know from Chrome) and submit it for approval to the team. It’s so easy that I needed less than a day to build the Pokki I will write about in a minute.

Why using KendoUI

KendoUI is a great productivity booster when it comes to HTML5 development – with KendoUI you have it all MVVM framework, UI components, themes and much more. I’m not part of the team in Telerik that develops it, but our web teams try to adopt KendoUI as much as possible. Last time, we used it in Telerik.Tv quite successfully. Powered by JQuery the learning curve almost doesn’t exist you can start using it right away.

Building my first Pokki

When building my first Pokki, I wanted to create something useful for our customers at Telerik or at least a proof of concept that it worth investing time in this framework. As a first iteration I built something really simple – Pokki that takes some information from your Telerik account and shows it to you. To achieve this, I used a web service that we already use in our sites – the main obstacle is that it requires the user to be authenticated in
Pokki solves this problem quite elegantly – you can use a Web sheet. Web sheet is a chromeless browser loaded in your pokki that navigates the user to a pointed by you url. You can navigate the user to a login screen and once he authenticates in the website, a proper cookies is created in your Pokki (after all, this is a webkit based browser) and from then I can call our web service to bring the information for the authenticated user. Once I get this information from the server, I use KendoUI to create a grid show the information to the user in a useful form.
In this first version, after authentication users will be able to see if they have unread messages, products added to their shopping cart, a list with all bookmarked pages and their Telerik avatar. Users will get a notification in the task bar, once they get a new message. If this proves to be successful, we can add information about products releases, shortcuts to different Telerik resources, etc.

Final touches

I still need some final touches from our front enders to create a nice user experience that conforms Pokki design guidelines and will push the application for approval. If you are curious, you can take a sneak peak of the app in github where the whole source is published. The application still needs a lot of polishing and you can hit a lot of sharp edges, but it is good enough if you need an example of how to get started.
Github project:
kendo-logo                                                                                        pokki_logo