JavaScript for Line of Business Applications

Writing Vue.js applications after working with AngularJS will feel familiar. Vue won't pack as many goodies out of the box, but it will still give Angular a run for its money.

Today I want to highlight the rather new and unknown JavaScript framework Tabris.js.

In contrast to many other hybrid frameworks, Tabris.js is no HTML5 + WebView framework, but still offers the possibility to use Javascript libraries, npm modules and Cordova plugins! I will show you the strengths, we will develop a simple app to get a feeling for the code structure and finally inspect the similarities and differences to other well known frameworks.

Sounds good? Let’s take a closer look!

Helping you select a cross-platform mobile framework - Apps using jQuery Mobile, Sencha Touch, Titanium and more

Some of the frameworks deliver a native user interface, whereas others construct a native-like interface using HTML5 technologies. When selecting a framework it is important to test the end-user experience that the framework delivers and ensure you are happy with any compromises.

The code-sharing which can be realistically achieved with each framework varies considerably. To aid in this comparison there is a build script which produces code metrics for guidance. Although, as developers I am sure you are aware that lines-of-code metrics are flawed.

It is also worth investing quite a bit of time familiarising yourself with tools provided by each framework. The cost and quality of these varies considerably.

Web applications are useful, but there are some cases where it’s not desirable or necessary to host an application on a remote server. As HTML5 provides low-level functionality to modern browsers, such as the ability to read and write files, it’s now possible to create offline, single-page, JavaScript applications using a web browser as a platform.

The node-webkit project, which was created at Intel and open sourced in 2011, is an attempt to take the pain out of offline single-page application development.

The project provides a WebKit browser that has been extended with the the ability to control user interface elements normally off-limits to web developers. The browser’s security configuration is relaxed, assuming that the application code you’re runnning is trusted. And, most interestingly, the browser integrates Node.js, allowing node-webkit applications to leverage a wide array of functionality other than what HTML5 APIs provide.

The bulk of the application logic (views, templates, controllers, models, internationalization, etc.) lives in the client, and it talks to an API for data. The server could be written in any language, such as Ruby, Python, or Java, and it mostly handles serving up an initial barebones page of HTML. Once the JavaScript files are downloaded by the browser, they are evaluated and the client-side app is initialized, fetching data from the API and rendering the rest of the HTML page.

This is great for the user because once the app is initially loaded, it can support quick navigation between pages without refreshing the page, and if done right, can even work offline.

This is great for the developer because the idealized single-page app has a clear separation of concerns between the client and the server, promoting a nice development workflow and preventing the need to share too much logic between the two, which are often written in different languages.

The Mobile App Framework Matrix represents a comparison and documentation of technologies for building iOS/Android apps with a single JavaScript code base.

We created the HTML5 Mobile Challenge to put perceptions about HTML5 and mobile to the test. Not just a blanket generalization, but a hands on experiment so we could start with the raw senses and move up to the truth. We gave savvy developers two seemingly identical applications, and asked them to advise us on which one was native, and which one was a hybrid application running in a browser.

The proof is in the video. Once you tell someone that an app is native or hybrid, they make immediate assumptions about it based on their perceptions. Even when there is no native application at all.

In order to be able to challenge perceptions, we first had to find out if the rumors about HTML5 were true. Could we build a mobile app with HTML5 that was indistinguishable from native? We've heard a lot about how it couldn't be done, so we decided to find out for ourselves.

Over the last few months, we put our money where our mouth was - on HTML5. We sat down, designed an app, and began to build it using our own tools and the HTML5 platform. The result was a demo app called “Cuteness”.

Cuteness is a Reddit reader (so named because it only allows you to read the 'aww’' subreddit) which aims to take a hard look at some of the most tenuous areas of the mobile web.

Over the past few months we've been developing the 2nd (and much improved) generation of the SOOMLA dashboard.  Though we use myriad front-side technologies, the jewel in the crown is Backbone.js.  Much has been written about Backbone, though still I find that most articles focus on HOW-TOs of models, views and events.  In this post, I’ll describe our dashboard’s Backbone architecture, with an attempt to zoom out a bit and understand the fundamentals of building complex, heavy single page applications (hereinafter SPA) with Backbone.  Disclaimer: this post is not about code, but about architecture concepts.  Therefore, the code examples won't be detailed to the bits and bytes, but they are all documented sufficiently to understand the idea.

We use:
* Require.js for dependency management and modular code.
* Backbone.js - for basic application structure and separation of concerns.
* Marionette.js - for composite application architecture and saving lots of Backbone boilerplate.
* underscore.js for general object, array and function utilities.
* undescore.string for extended string manipulation functionality.
* Handlebars.js - for client side templating.
* jQuery for DOM manipulation, AJAX, promises, and much more.
* These jQuery plugins: Qtip, SlimScroll, Isotope, jQuery UI sortable and jQuery validations.
* imagesloaded - for capturing and synchronizing image load events.
* Less - for CSS pre-processing.
* grunt.js - for build automation (tasks like pre-compilation, minifying and concatenating code).