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.
Framework website: http://phonejs.devexpress.com/
Demo examples: http://phonejs.devexpress.com/Demo
Pricing: Non-commercial use is free, commercial use is 199$ per developer per year
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.
Size and Speed
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).
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:
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.
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.