PhoneJS - New HTML5 framework for mobile applications

New development tools for mobile devices appear today almost every day. Most of them are HTML5 frameworks, with which, with the skills of a web programmer, you can create applications for smartphones and tablets, without delving into the learning platform SDK and other languages.

We see this trend and see examples of the implementation of user interfaces on HTML5, which are not inferior in quality to native applications, and we believe that HTML5 is the future of cross-platform mobile applications.


')
Currently, web technologies and JavaScript, in particular, are a very liberal environment, not tied to specific tools and development methodologies. As in any such situation, on the one hand, it gives freedom, on the other hand it introduces a share of chaos.

We in DevExpress organized a small team that for several months analyzed and tried various existing tools and approaches. The result of this experience - PhoneJS - is our complete solution for creating cross-platform mobile applications in HTML5.

We did not write PhoneJS from scratch. We took jQuery, because today for many it is synonymous with the word JavaScript. Then we added the Knockout library , mentioned several times on Habré, which implements the Model-View-ViewModel (MVVM) pattern for JavaScript, and chose MVVM with the recommended approach to structuring the application. Using Apache Cordova (aka PhoneGap ) made it possible to get out of isolation inside the WebView browser and get access to the camera, file system, accelerometer and other functions of the device. The combination of these components helped create an excellent foundation for the framework.

On this foundation, we built a layout engine and UI components that adapt their appearance to the three most popular platforms - iOS, Android and Windows Phone 8.

It is worth mentioning that an increasing number of company employees are using their own mobile devices in the workplace. The idea of ​​creating cross-platform applications agrees well with this trend (known as Bring Your Own Device, BYOD) and will allow employees to install the necessary corporate software on their smartphones and tablets.



Now, using the example of a very simple TipCalculator demo, let's see how the application looks on the PhoneJS framework . Despite the fact that TipCalculator consists of one screen, it will be enough to understand the approach and the basic principles of work.

The application implements the tip calculation algorithm. The source code is available on GitHub , and you can watch it in action in the online simulator .

In essence, this is a single page application on HTML5. The entry point is the index.html file, in which you will see only the necessary META tags and the connection of all other resources. Notice how the view files are connected.

<link rel="dx-template" type="text/html" href="views/home.html" /> 

This approach avoids the common problem of Single Page Applications, when all HTML markup has to be kept in one long index.html. We follow the principles of decomposition of the application and facilitate the subsequent stages of development and debugging.

The index.js file declares the TipCalculator namespace and creates an application object:

 TipCalculator.app = new DevExpress.framework.html.HtmlApplication(...) 

We tell the application the default layout type. In this case, it is the simplest possible - empty layout, however, there are more functional options with a navigation bar and so popular lateral navigation today.



Here it is necessary to make a digression about what layout is in general. In PhoneJS, we applied the familiar, proven and long-known idea of ​​decorating pages (views, screens) with the help of layout. This is done in numerous server web frameworks (Ruby on Rails, ASP.NET MVC and many PHP libraries).

You can read more about Views and Layouts in our documentation .

There are routing (routing) :

 TipCalculator.app.router.register(":view", { view: "home" }); 

Thus, we registered a simple route, which from the address bar (or, more precisely, from the hash segment) receives the name of the current screen (view), and the “home” screen will be used by default. We will consider it.

View Model

In the views / home.js file, the home function is added to the TipCalculator namespace, which creates a view-model for the home screen.

 TipCalculator.home = function(params) { . . . }; 

There are three input parameters: the amount of the check ( billTotal ), the number of participants ( splitNum ) and the amount of remuneration ( tipPercent ). They are declared as observable so that they can be bound to UI components and track changes in values.

 var billTotal = ko.observable(), tipPercent = ko.observable(DEFAULT_TIP_PERCENT), splitNum = ko.observable(1); 

Based on user input, 4 results are calculated: totalToPay , totalPerPerson , totalTip and tipPerPerson . All four are dependent observable (or computed) - that is, they are updated automatically when at least one observable involved in the calculation of the result changes.

 var totalTip = ko.computed(...); var tipPerPerson = ko.computed(...); var totalPerPerson = ko.computed(...); var totalToPay = ko.computed(...); 

The final sum is usually rounded, for which there are two functions roundUp and roundDown , changing the value of roundMode . Its change entails recalculation of the totalToPay dependent on it:

 var totalToPay = ko.computed(function() { var value = totalTip() + billTotalAsNumber(); switch(roundMode()) { case ROUND_DOWN: if(Math.floor(value) >= billTotalAsNumber()) return Math.floor(value); return value; case ROUND_UP: return Math.ceil(value); default: return value; } }); 

However, when changing each of the input parameters, it is necessary to reset rounding so that the user can see the exact numbers. To do this, we subscribe to change them using the subscribe method:

 billTotal.subscribe(function() { roundMode(ROUND_NONE); }); tipPercent.subscribe(function() { roundMode(ROUND_NONE); }); splitNum.subscribe(function() { roundMode(ROUND_NONE); }); 

View model is very simple, especially for those readers who are already familiar with Knockout. And for those who are not familiar, this is a good demonstration of its capabilities.

View

Let's move on to the HTML markup, namely the views / home.html file . At the top level, there are two special div elements: for the view named “home”, the markup for the area named “content” is set.

 <div data-options="dxView : { name: 'home' }"> <div data-options="dxContent : { targetPlaceholder: 'content' }"> . . . </div> </div> 

Inside the toolbar is located:

 <div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div> 

dxToolbar is a dxToolbar widget. Its description in the markup is implemented as a Knockout binding.

Below are the fieldsets. To create them, the dx-fieldset and dx-field classes predefined in the CSS framework are used. Inside the field to enter the amount and two sliders for interest and number of people:

 <div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup', min: 0 }"> </div> <div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div> <div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div> 

Next - two buttons ( dxButton ) to round the final amount and display the results.

 <div class="round-buttons"> <div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div> <div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div> </div> <div id="results" class="dx-fieldset"> <div class="dx-field"> <span class="dx-field-label">Total to pay</span> <span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span> </div> <div class="dx-field"> <span class="dx-field-label">Total per person</span> <span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span> </div> <div class="dx-field"> <span class="dx-field-label">Total tip</span> <span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span> </div> <div class="dx-field"> <span class="dx-field-label">Tip per person</span> <span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span> </div> </div> 

Even on such a simple example, we clearly see how quickly using PhoneJS to create a mobile application with web programming skills. Minimum code structured and easy to learn.

Running, debugging and packaging for markets

HTML5 applications are very easy to debug. Simply configure your local web server (Apache, IIS, nginx or any other) to the source folder and open the URL on the device, in the device emulator or in the browser. True, in the browser it will be necessary to replace the UserAgent string so that it appears as a smartphone or tablet. Fortunately, the developer tools of modern browsers make it easy.



Another convenient option is the Ripple Emulator running in the browser.



But we want to get a real mobile application, with the possibility of publishing to the market (AppStore, Google Play and Windows Store).

Of course, you will have to register as a developer on Apple, Google and Microsoft, but this process is well described for each of the stores, so we will not focus on this separately.

PhoneGap contains the necessary tools and project templates. The main scenario of working with PhoneGap is tied to the SDK of the mobile platform. For example, to build an APK for Android, you will need to install the Android SDK and create a PhoneGap project in Eclipse, and for iOS development you will need a Mac.

A simpler way that saves us from installing platform SDKs is to use the online service PhoneGap Build , which allows you to build one application for free (for a larger number you must purchase a paid account). Having the necessary certificates, using PhoneGap Build, in just a couple of clicks we can get a mobile application for different platforms. It will only be necessary to prepare descriptions, promo materials, pictures, icons and start publishing your application.

A small fly in the ointment: to date, PhoneGap Build does not support packaging for Windows Phone 8 (they plan to add it later this year), and for building packages, you need the Windows Phone SDK and the CordovaWP8App template included in the PhoneGap distribution.

For Visual Stuido users, we have a separate DXTREME Mobile product (including PhoneJS as one of the components), which allows you to build applications for iOS, Android and Windows Phone 8 directly from the development environment.



So PhoneGap + PhoneJS - all you need to develop mobile applications

PhoneGap implements access to hardware capabilities and solves the problem of packaging in native packages.

PhoneJS provides the infrastructure for Single Page applications and a set of touch-optimized elements for building a cross-platform UI.

Lists with elastic scrolling, “endless loading” and support for the gesture “pull down to refresh”, ON / OFF switches, various buttons and input fields, a gallery, maps and navigation elements - all this is in PhoneJS. View examples in the Kitchen Sink demo.

All widgets can be used in two modes - like Knockout binding:

 <div data-bind="dxCheckbox: {checked: checked} "></div> <script> var myViewModel= { checked: true }; ko.applyBindings(myViewModel); </script> 

and as a jQuery plugin:

 <div id="checkboxContainer" ></div> <script> $(function() { $("#checkboxContainer").dxCheckbox({ checked: true }); }); </script> 

Anticipating the reader’s natural question, how PhoneJS is better / worse / stands out from the existing known solutions, we prepared our implementation for PropertyCross . This is an interesting project, which aims to compare different existing approaches to mobile development.

Note an important detail: PhoneJS is not like most of our products - it is not tied to a specific development tool. The distribution is a zip archive, and you can use your favorite text editor, your favorite web server and the developer tools of your favorite browser as development and debugging tools. Download PhoneJS at this link .

PS PhoneJS is free for non-commercial use . And our support service is ready to answer your questions and help overcome the difficulties encountered.