Create mobile apps with HTML5 and JavaScript for different screens and platforms

HTML5 JavaScript framework for smartphones and tablets

PhoneJS contains everything you'll need to create native client applications using HTML5 and JavaScript with a single codebase and deliver solutions that target today's most popular smartphones and tablet devices.

With a touch-optimized user experience, natively rendered widgets, straightforward page navigation, view management, and data access layers, PhoneJS is a single page application (SPA) framework for your next iOS, Android and WindowsPhone application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap).

Leverage your existing skills. Reuse your code.

Use your knowledge of HTML5, CSS3, and JavaScript to create applications for any mobile device using a single codebase that can be reused across all supported platforms.

PhoneJS libraries fully leverage jQuery and optionally support Knockout for MVVM user interface development. With PhoneJS, you can build multi-device applications without knowing or being forced to learn a single native platform SDK.

Native UI and experience,
on all supported devices

Deliver applications with a native look and feel for iOS, Android and Windows Phone, without extra effort, code or UI customization.

PhoneJS detects the platform at run-time and automatically applies the appropriate "native" styling to all widgets and navigation elements used within your application.

A real app,
not just a webpage

Although PhoneJS applications can just be deployed to a web server, they are also ready to be compiled by Apache Cordova (PhoneGap) into a native package that can then be submitted to app stores. If you follow this route, PhoneGap also gives you libraries to access your device’s built-in functionality such as camera, accelerometer, or contact list.

What’s inside?

Touch-optimized widgets

PhoneJS includes a comprehensive library of widgets - ready-to-use UI elements rendered to a page. Typically, a widget is bound to data and provides user interactions. It is represented by an HTML element (container), JavaScript code behind and CSS stylesheets. When using widgets in a PhoneJS application, the framework automatically changes the appearance and behavior of individual widgets to match the look and feel of the platform. As a result, all PhoneJS applications look and behave just like a native application.

Each PhoneJS widget includes a jQuery plugin and KnockoutJS binding. You can choose whether to create a widget via the standard jQuery approach or use the dependency tracking feature offered by KnockoutJS and use Knockout binding instead. Regardless of the approach you choose, you create and initialize the widget once, passing an object with specified configuration options.

JQuery Approach

<div id="checkBoxContainer"></div>
<script>
    $(function() {
        $("#checkBoxContainer").dxCheckBox({
            //checkBox options go here
            checked: true
        });
    });
</script>

Knockout Approach

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

Infinite lists with 'pull-down' feature

Because information lists are a common visual theme across mobile applications, PhoneJS provides a powerful list widget to meet a wide-range of use-case scenarios. The PhoneJS list widget ships with an impressive feature-set, including: kinetic scrolling, infinite paging, support for the pull-down gesture to refresh the list, and custom item templates.

$(function() {
    var app = new DevExpress.framework.html.HtmlApplication(),
        PAGE_SIZE = 20,
        from = 0;
    $("<div/>").appendTo(app.viewPort())
        .dxList({
            dataSource: {
                load: function load(options) {
                    var pageItems = [];
                    from = options.refresh ? 0 : (from + PAGE_SIZE);
                    for(var i = 1; i <= PAGE_SIZE; i++)
                        pageItems.push("Item #" + (from + i) + ". Generated at " + new Date().toLocaleTimeString());
                    return pageItems;
                }
            },
            pullRefreshEnabled: true
        });
});

Device-optimized kinetic scroller

In the mobile device world, users expect widgets and other UI elements to offer responsive and fluid scrolling. As a mobile web-developer, you know how difficult it can be to deliver high-performance scrolling across different devices and platforms using a single codebase. PhoneJS solves this high-value usability issue by automatically selecting the most effective scrolling strategy, producing unmatched scrolling performance for any target device.

Horizontally scrolled gallery

The Gallery widget displays a set of items as cards. Items can include individual images, allowing you to create a full-featured photo gallery in an instant, or as complex as templates with text blocks and interactive elements. Swipe gestures can be used to navigate through items and a tap to select it.

Input form widgets

Whether you are developing a line-of-business (LOB) application or just a settings view, you are likely to create input forms. PhoneJS contains a comprehensive collection of form widgets to help you create these forms with ease. Visually and functionally familiar text, number, and date inputs widgets, a touch-optimized switch, grouping widgets, and many others are available for all supported platforms. And since PhoneJS uses the Model View ViewModel (MVVM) pattern, it is extremely easy to populate the form with data and to read it back for processing.

Other widgets

The PhoneJS framework also contains many other useful widgets, such as ActionSheets, Toolbars, NavBars, Buttons and others. In addition, PhoneJS provides a complete CSS framework, so you can apply different styles and behaviors by simply adding a CSS class to any given HTML element. A look-and-feel customization feature is coming soon; keep in touch.

Mobile Application Framework

Using your current knowledge of HTML5, CSS3, JavaScript, and a few moments learning the basics of the PhoneJS framework and its API, you can build a multi-device application quickly, with minimal effort. Your app will look and behave as a native app with all the performance you and your users have come to expect from native solutions. And because PhoneJS is fully extensible, you can extend the framework as your requirements dictate.

SPA View Management

PhoneJS is a Single Page Application (SPA) framework. It supplies all the necessary tools and features an SPA requires: view management and rendering, url routing, device-specific layout engine, view caching and state management.

URL Routing

The framework uses familiar routing rules to define the relationship between the URL the user navigates to and the corresponding view that should load. As a developer, you specify the routing rules and define the application views your app requires and the framework's run-time takes care of actual navigation. For example, here's a simple routing rule that displays a product's category in a view named showCategory:

// register routing rule
MyApp.app.router.register("products/:category", { view: "showCategory" });

Here's the view markup. It uses Knockout-style data binding to render the title property from the ViewModel:

<!-- define the view's markup with bindings to the ViewModel --> 
<div data-options="dxView: { name: 'showCategory' }">
    <h1 data-bind="text: title"></h1>
</div>

Because we use Knockout MVVM in view markup we must implement a ViewModel. Here's the simplest ViewModel for the showCategory view:

// define the view's code-behind function
MyApp.showCategory = function(args) {
    // return a ViewModel object with a single property called title
    return { 
        title: args.category 
    };
};

When navigating to the #products/computers URL, the following markup gets rendered:

<h1>computers</h1>

When a view is navigated to and rendered, it will be made visible using the required animation or transition. The framework also tracks navigation between views and will automatically add the Back button should it be needed. Of course, you can override this behavior when necessary.

Read more about Navigation and Routing.

Flexible View Rendering Engine

The PhoneJS app framework uses a built-in ViewEngine object to render views. Apart from the basic view rendering technology, this engine also provides sophisticated features you won’t find elsewhere.

Partial Views

Among the advanced capabilities found in the ViewEngine are its partial views. These allow you to share and reuse similar HTML markup among multiple views:

<!-- The first view -->
<div data-options="dxView: { name: 'Boats' }">
    <h1>Welcome to the Boats view</h1>
    <!-- Another shared view will be rendered here -->
    <div data-options="dxViewPlaceholder : { viewName: 'InviteFriends' }"></div>
</div>

<!-- The second view -->
<div data-options="dxView: { name: 'Planes' }">
    <h1>Welcome to the Planes view</h1>
    <!-- Another shared view will be rendered here -->
    <div data-options="dxViewPlaceholder: { viewName: 'InviteFriends' }"></div>
</div>

<!-- The shared view -->
<div data-options="dxView: { name: 'InviteFriends' }">
    <h2>Invite your friends!</h2>
</div>

Device-dependent Views

One specific use case scenario readily solved by partial views is the rendering of different content based upon the device:

<!-- The main view -->
<div data-options="dxView: { name: 'Games' }">
    <h1>Welcome to the Games view</h1>
    <!-- The following content will depend on platform -->
    <div data-options="dxViewPlaceholder: { viewName: 'VisitStore' }"></div>
</div>

<!-- The iOS-related partial view -->
<div data-options="dxView: { name: 'VisitStore', platform: 'ios' }">
    <a href="http://www.apple.com/iphone/from-the-app-store/">Apple App Store</a>
</div>

<!-- The android-related partial view -->
<div data-options="dxView: { name: 'VisitStore', platform: 'android' }">
    <a href="http://play.google.com">Google Play</a>
</div>

Master Pages or Layouts

You can also extract common application page layout as separate HTML markup (this is known as Master Pages or Layouts in some server-side technologies):

<!-- Layout definition -->
<div data-options="dxLayout: { name: 'MyLayout' }">
    <!-- Corresponding content from the view will be placed here -->
    <div data-options="dxContentPlaceholder : { name: 'main' }"></div>
    <!-- Common content shared among all the views -->
    <div class="footer">All rights reserved</div>
</div>

<!-- View definition -->
<div data-options="dxView: { name: 'index', layout: 'MyLayout' }">
    <div data-options="dxContent : { targetPlaceholder: 'main' }">
        Hello World!
    </div>
</div>

Pluggable template engine

Since PhoneJS follows the MVVM pattern and is extensible, the ViewEngine binds data to the view markup with the help of a special TemplateEngine object. PhoneJS comes with a template engine for Knockout, but you can write your own to target any desired template library.

Separate view files

Another major advantage of the PhoneJS ViewEngine is the separation of views into their own files. With PhoneJS you do not have to place all your markup into a single HTML file - different views can be placed in different files and your application structure can be made more clear and logical.

<!-- References to the separate view-related files including the HTML file -->
<script type="text/javascript" src="views/Settings.js"></script>
<link rel="dx-template" type="text/html" href="views/Settings.html"/>

Adaptive Layout System

Every mobile platform has its own strict UI guidelines published by the platform’s vendor. These rules define how to navigate within an app, the type and location of different UI elements on the screen, colors, margins, fonts, animations and transitions, etc. As you know, the amount of effort required to meet these guidelines is tremendous. For a framework that uses HTML5 and JavaScript to create solutions that are compiled into native apps for the relevant App Store (where the rules are applied before approval), this workload is magnified.

PhoneJS provides built-in layouts that follow device UI guidelines set by supported platform vendors. It offers separate layouts for iOS and Android, so your apps can be approved quickly. The framework also provides layouts and navigation options that mimic Facebook and YouTube, out of the box and ready to use.

Navbar Layout

MyApp = new DevExpress.framework.html.HtmlApplication({
    //...
    navigationType: "navbar",
    navigation: [{
        "title": "Home",
        "action": "#Index",
        "icon": "home"
    },
    {
        "title": "About",
        "action": "#About",
        "icon": "info"
    }]
});

SlideOut Layout

MyApp = new DevExpress.framework.html.HtmlApplication({
    //...
    navigationType: "slideout",
    navigation: [{
        "title": "Home",
        "action": "#Index",
        "icon": "home"
    },
    {
        "title": "About",
        "action": "#About",
        "icon": "info"
    }]
});

The layouts included in the PhoneJS framework provide different ways of displaying the same views: landscape versus portrait, phone versus tablet. Since views are separate from layouts, the framework can easily render the best, most accurate, display for the relevant device and orientation. This approach dramatically decreases the time needed to develop applications with the correct native look-and-feel.

View Caching and State Management

In order to deliver superior performance and a better user experience, PhoneJS implements intelligent view caching. Views are cached using efficient smart algorithms that balance data storage (always at a premium on mobile devices) with performance. When a view is rendered, the view cache determines whether to save the rendered view and for how long, in case the user returns having visited it before. Again, since PhoneJS was created to be extensible, you can implement your own caching strategy or disable it completely.

Another feature that the view cache provides is to cater for a common occurrence: receiving an incoming phone call or switching to another app. In this instance, the application would be immediately halted and even unloaded. When the user switches back to the app, it is loaded again. The application has a very short period of time to save its state in this scenario, such that, on returning, it can reload the state and present exactly the same view to the user. The PhoneJS framework provides this capability and will automatically store the current view to local storage and restore it on return.

Download PhoneJS