{"id":833,"date":"2012-11-22T16:06:33","date_gmt":"2012-11-22T16:06:33","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=833"},"modified":"2012-12-12T12:14:10","modified_gmt":"2012-12-12T12:14:10","slug":"why-mosync-could-be-a-better-alternative-to-phonegap","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/mobile-development\/why-mosync-could-be-a-better-alternative-to-phonegap\/","title":{"rendered":"Why MoSync could be a better alternative to PhoneGap"},"content":{"rendered":"

Developing mobile applications using HTML5 is a very discussed subject these days. Using only HTML<\/strong>, CSS<\/strong> and JavaScript<\/strong> sounds attractive to a lot of people because of the lean learning curve and the cross-platform<\/strong> ability.<\/p>\n

Two of the frameworks that make this happen are MoSync<\/a> and PhoneGap<\/a>.<\/p>\n

The open-source MoSync Software Development Kit (SDK) is a rich cross-platform mobile application development environment that makes it easy to develop apps for all major mobile platforms from a single code base. The SDK enables mobile developers to build and compile apps for up to nine different platforms at once, using C\/C++ or HTML5\/JavaScript, or a combination of both to create hybrid apps.<\/p><\/blockquote>\n

PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS. Building applications for each device\u2013iPhone, Android, Windows Mobile and more\u2013requires different frameworks and languages. PhoneGap solves this by using standards-based web technologies to bridge web applications and mobile devices.<\/p><\/blockquote>\n

From these descriptions MoSync stands out by two things: single code base<\/em><\/strong> and C\/C++<\/strong>. The latter may not be a deciding factor for some but is certainly a great feature as you’ll see if you really want to build truly cross-platform hybrid mobile apps<\/strong>.<\/p>\n

For the rest of the article I will present to you the most important issues you might encounter while using PhoneGap<\/strong> and how MoSync<\/strong> could solve them.<\/p>\n

PhoneGap’s shortcomings<\/h2>\n

1. Different projects for different platforms<\/strong><\/p>\n

With PhoneGap for each platform you have to maintain a different project. The burden for that increases when there is a need to use multiple PhoneGap plugins<\/strong> because you need to search and update different files on each platform.<\/p>\n

2. Different JavaScript files on each platform<\/strong> for PhoneGap itself and plugins<\/strong><\/p>\n

One of the reasons to choose to create HTML5 mobile apps<\/strong> is having the same code base for all the platforms. Most of the code is the same for all of them, but when it comes to PhoneGap’s JavaScript files and its plugins they are different in each case.<\/p>\n

A solution for this problem could be to include the files dynamically, a solution which worked for me.<\/p>\n

3. Inconsistent plugins code<\/strong><\/p>\n

If some functionality is not available in PhoneGap there is a chance that you will find a plugin that does the trick. The problem with this is that some of the plugins that have the same functionality are not consistent between platforms and most of the time you either use them enclosed in if statements for specific platforms, either you write wrappers to create a unified interface<\/strong>.<\/p>\n

An example for this is represented by the Push Notification<\/strong> plugins which work differently. For Android<\/strong> I ended up doing something like this for registering a device:<\/p>\n

\r\n\r\nwindow.GCM.register(Config.gcmProjectId + '', 'TApp.app.onGcmEvent', function () {\r\n\/\/console.log('Success to register GCM. Waiting for token now.');\r\n}, function () {\r\n\/\/console.log('Failed to register GCM because: ' + JSON.stringify(arguments));\r\n});\r\n\r\n<\/pre>\n
and for iOS<\/strong>:<\/p>\n
\r\n\r\nwindow.plugins.pushNotification.registerDevice({alert:true, badge:true, sound:true}, function(status) {\r\n\/\/ if successful status is an object that looks like this:\r\n\/\/ {"type":"7","pushBadge":"1","pushSound":"1","enabled":"1","deviceToken":"blablahblah","pushAlert":"1"}\r\n});\r\n\r\n<\/pre>\n
As you can see,\u00a0registering for push notifications requires different approaches for each platform.<\/p>\n
4 No native UI support<\/strong><\/p>\n
There is no UI support in PhoneGap, so if there is a need to replicate a native widget we need to do that by using HTML\/CSS\/JS, the way we would when using Sencha Touch. A good example for this could be a date select widget that can be implemented as a popup.<\/p>\n
5. Java, Objective-C or C# requirement to create new plugins<\/strong><\/p>\n
To extend PhoneGap through plugins one must know how to program in the native language of each platform. Of course, for a team that has developers available with knowledge of each technology this won’t be a problem, but for only one person or teams of web developers this is will be a real issue.<\/p>\n
6. No built-in support for push notifications<\/strong><\/p>\n
Push notification<\/em> is a very nice and frequently used feature and it should be built-in or at least implemented in some unified plugins.<\/p>\n
Now, after we covered the key disadvantages of using the now popular framework PhoneGap, we can get to the up sides of using the less known but very promising alternative:<\/p>\n
MoSync’s key features<\/h2>\n
1. Only one project structure for all the platforms<\/strong><\/p>\n
With MoSync you’ll have only one project to maintain for all the platforms. For iOS you will still need to use Xcode<\/strong> because MoSync outputs a project for it but, other than just building it, there is no need to dig deeper in Apple’s IDE.<\/p>\n
2. The same JavaScript file
\n<\/strong><\/p>\n
The entire provided functionality for JavaScript is placed in the same file for all of the operating systems. There are no files for plugins because it has none (at least that I know of), but the same extensibility is achieved in ways described in the next section.<\/p>\n
3. No plugins, but…<\/strong><\/p>\n
If there is some functionality that MoSync doesn’t provide on the JavaScript side, there are no plugins that you can use, but there is another way. MoSync provides a lot of features from the C++<\/strong> side and if they aren’t accessible from JavaScript by default they can be easily made available.<\/p>\n
I’m sure that in the future the MoSync team will add more features to the JavaScript library.<\/p>\n
4. Native UI support<\/strong><\/p>\n
With MoSync you are not restricted to only JavaScript frameworks to replicate native UI, you can truly create native UI elements that are more responsive using only JavaScript.<\/p>\n
5. Extend JavaScript functionality using C++ or Java and Objective-C<\/strong><\/p>\n
If there is something that JavaScript can’t do or there is a need for more performance there is always the power of C++ to support you and the code written with it will work on every platform, no need to code in different languages for each.<\/p>\n
If you need to code in a native environment to use some specific features of a platform you can always modify the MoSync runtimes (more info<\/a>) and code your stuff in Java and Objective-C (just to name the two most popular at the moment). I think\/hope MoSync developers will make this process easier in the future by allowing us to write extensions without modifying the runtime. I didn’t modify the runtime for iOS (yet) but I was able to build and modify it for Android to add a custom animation.<\/p>\n
6. Built-in support for push notifications<\/strong><\/p>\n
MoSync provides built-in support for push notification with a unified interface on every supported platform.<\/p>\n
Conclusion<\/h2>\n
Besides the native UI support, the feature I like the most in MoSync is the C++ support because it gives me more power over my application without the need to code the same functionality for every single platform.<\/p>\n
As an example of how MoSync gives me more flexibility is how I can handle the application startup. When the app is launched a loading screen is displayed until the content is ready. The problem is that after the WebView<\/strong> is shown I need to add another loading indicator until all the needed files and data are loaded in it. With MoSync I was able to use C++ to display the WebView only after everything was loaded. To do that with PhoneGap I would need to do add the functionality in all the different platform projects.<\/p>\n
If you know some C++ or you are willing to learn, MoSync is definitely worth checking out if you want to built cross-platform<\/strong> and hybrid apps<\/strong>.<\/p>\n
What do you think?<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
Developing mobile applications using HTML5 is a very discussed subject these days. Using only HTML, CSS and JavaScript sounds attractive to a lot of people because of the lean learning curve and the cross-platform ability. Two of the frameworks that make this happen are MoSync and PhoneGap. The open-source MoSync Software Development Kit (SDK) is …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[88],"tags":[92,113,83,112,55,111,110],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/833"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=833"}],"version-history":[{"count":23,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/833\/revisions"}],"predecessor-version":[{"id":875,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/833\/revisions\/875"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

When frameworks like Sencha Touch<\/a> are used and you have only one bootstrap file (index.html) the issue above can be easily handled by maintaining only different versions of this one file. When using jQuery Mobile<\/strong> we could have more than one bootstrap file so more differences.<\/p>\n