Recently I discovered a framework I wanted to share with my readers, especially because it should appeal to every jQuery/jQuery Mobile developer. It’s called PhoneJS and it is developed by DevExpress. This company also has several other products in its lineup that could be of interest to you like ChartJS so feel free and look.
 
This article will cover only PhoneJS and what it can do in the world of mobile development.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Intro

 
 
Framework website: http://phonejs.devexpress.com/
Demo examples: http://phonejs.devexpress.com/Demo
Documentation: http://phonejs.devexpress.com/Documentation
Download: http://phonejs.devexpress.com/Download
Pricing: Non-commercial use is free, commercial use is 199$ per developer per year
 
Before we start let me tell you few words about PhoneJS. This framework is built on HTML5 and uses JavaScript/CSS to style the components to work cross-platform. It will automatically adapt its look and feel to mimic the native OS (iOS, Android, WindowsPhone, and Tizen).
 
Even more, you can decide if you want to deploy it to a web server or use Apache Cordova (Phonegap) and wrap it into a native mobile application. The framework offers more than just UI, every widget includes a jQuery plugin and KnockoutJS binding so you can decide which approach to follow. If you prefer MVVM them jump on KnockoutJS bandwagon but if jQuery Mobile is your pair of sleeves then freely choose a jQuery way.
 
PhoneJS uses something called “Adaptive Layout System” which allows you to create separate views depending on used native OS. This is important and I can’t express that enough. This will allow you to create a single mobile application and share it among different app stores, imagine how much time can be saved through this functionality alone.
 
Framework documentation and samples are very well done and useful, from my experience, this is the best HTML5 framework documentation I so, to this date.
 
PhoneJS promo
 

Size and Speed

 
 
PhoneJS javascript file is 676.46KB (Uncompressed) in size or 258.88KB minified and gzipped. Which is several times bigger then current version of jQuery mobile (1.4 RC1) or at the same time several times smaller than current Kendo UI version, which is to my account PhoneJS biggest competitor.
 
PhoneJS css file is several hundred KB in size, depending on native OS platform application is built for. So it will range from 150KB if Android is your only target up to 3.128KB if you want to cover every available platform.
 
Some developers (including me) would consider this problematic and they would be partially correct. A size of this files is almost unacceptable when creating pure mobile HTML5 application, at least until 4G becomes a widespread standard. Currently, this is a problem because file size will affect the download time of the resources on mobile bandwidth, it will also significantly increases the parse & render time in mobile browsers.
 
Then again this should not scare you, pure mobile HTML5 applications are still rare not to mention not often used. At the same time, this will not cause you any problems when working on a hybrid mobile application (Phonegap) or classic desktop web applications.
 
Last few weeks I spent working with PhoneJS I haven’t seen file size affecting Phonegap app execution. To be more transparent I have only tested iOS and Android applications. My experience with mobile app development should also be accounted here, previous problems with jQuery Mobile applications thought me how to successfully optimize code for the best performance (humanly possible).
 
 
PhoneJS promo
 

Performance

 
 
Mobile devices have very limited processing power compared to modern desktops. It’s essential to keep performance optimization in mind when developing touch applications. Other HTML5 mobile frameworks usually perform very well on iOS since it has the best support for HTML5, but on Android and Windows Phone they usually become slow and sluggish (I am looking at you jQuery Mobile).
 
PhoneJS on the other hand performs very well on both platforms, where iOS devices have better performances than their Android cousins, but only so much. This amazed me, mostly because I so this only once while working with Kendo UI (Sencha is also fast but at the same time it has much bigger iOS/Android performance gap).
 
Let me get back to the PhoneJS . From my previous experience app scrolling is one of the best indicators of how mobile application performs. Thankfully PhoneJS provides a powerful list widget to meet a wide-range of use-case scenarios. When creating scrolling content framework will automatically select most effective scrolling strategy, depending on platform, thus producing amazing very nice performance.
 
 
Again do not expect native mobile app performance levels, current mobile frameworks are still far from it. PhoneJS developers went step further, they’ve solved large list scrolling problems simply implementing infinite lists with ‘pull-down’ feature. This is of course not a perfect solution, thankfully it works extremely well here.
 
Usually, I also talk about framework UI but there’s nothing to talk here. Every theme perfectly mimics used platform and you can modify them as you want/need. Unfortunately I can’t find a theme builder tool. A framework of this size should/must have such functionality.
 
See how it performs:
 
 

Cross Platform Capabilities

 
 
I have already mentioned that PhoneJS provides support for every currently major mobile OS, including Tizen. Each platform is covered with a native look and feel so additional customization is not needed. To see what they look like and how they work, check this Kitchen Sink demo. If you want to check it on your device just follow this link: PhoneJS promo
 
Depending on your needs you will need to choose are you going to create a single application that covers available platforms or are you going to separate them. During my testing process I have created a single app that works on both iOS and Android. At that time, I haven’t seen any performance degradations but I still need to warn you to be careful while creating larger apps. So you should be safe creating one single application just be careful how much stuff you’re trying to squeeze through DOM.
 
If you want to go PRO you may consider using DXTREME Mobile package. It includes PhoneJS and ChartJS libraries including support for Visual Studio 2012. That same Visual Studio support includes JavaScript project types, project templates and wizards.
 
It also includes browser based device emulator which allows you to debug your app in Visual Studio. It goes even further buy helping you publish (Phonegap wrapping also) your app to different app stores. That alone will save you a lot of time. I should warn you that unlike PhoneJS (which can be used freely for non-commercial use) DXTREME Mobile package is not free, thankfully 30 day trial is available.
 
There are also differences between it running on various platforms. iOS application behaves slightly/mostly better (depending on a scenario) then Android one, this is of course related to platform alone.
 
PhoneJS promo
 
Continue Reading

  • azicchetti

    I’ve done a mobile framework comparison a few weeks ago and I’ve picked up PhoneJS.

    I especially love its app structure and the automatic cache management.
    Writing large and complex applications in Kendo Mobile scared me away from an otherwise wonderful product.

    As far as I could understand during the days it took me to review the impressive large pool of frameworks you can find with a few google searches, Kendo doesn’t help the developer to keep the DOM clean, nor to load views on demand and this is a big limitation to me. In addition, PhoneJS seems to have native localization support.

    However, PhoneJS lacks a couple of useful widgets, for instance left/right panels (you can find something similar but it’s quite different from the jquery mobile, kendo or sencha counterpart) and a zoomable view.

    Hope this random considerations could be useful to people doing similar framework evaluations.

  • Joao

    Thanks for the great post, your contributions on Stackoverflow+your blog put you as a reference for the HTML5 mobile application development world.

  • “Fuc**** great documentation, even better then Sencha Touch one”

    Anything is better than the shitty Sencha Touch documentation.

  • Adha

    sir i used phonejs why my application getting slow when the users open for long time

    ??

    • You probably have some kind of memory leak, make sure everything you don’t know is removed from the DOM.

  • Jim Beam

    Have you been looked at your site on a phone or mini tablet? Your obnoxious share buttons block the left margin and your page is unreadable.