When you develop an app, you choose one of two paths: hybrid or native. Hybrid apps use Apache Cordova, which runs your app in a full-screen web browser on the phone, but enables platform access to core device functions.
Cross-platform native apps, on the other hand, leverage frameworks such as Xamarin or NativeScript, which abstract some of the core native tools to a common layer that you build with. They then compile down to an app that can run on the device's platform (iOS, Android and so on).
As a result, with native apps you can use pure, hardware-accelerated native UI elements on the device. This approach also usually means you have full, platform-level access to APIs, so you're not limited to the Cordova plugins available.
Hybrid versus native
It can be difficult to tell whether a mobile app is hybrid or native. A well-written hybrid app shouldn't look or behave any differently to its native equivalent, but they often do. A hybrid app needs to manipulate the DOM (which is an expensive task), and any noticeable lag can sour a user on your app and lead to bad reviews in the app store. Both LinkedIn and Facebook famously left HTML5 behind in favour of native apps, and they both have pretty significant developer talent behind them.
Sitefinity is a content management and customer analytics platform from Telerik. Along with the license, you get access to a suite of HTML5 controls in the Kendo UI platform. Sitefinity comes with a mobile module that enables you to expose your data into a Kendo UI mobile Cordova-powered hybrid application, and generates an entire framework through which you can view and edit your data with just a couple of clicks.
The Kendo\Cordova code required to accomplish tasks like routing is not insignificant. However, with a NativeScript app we can abstract away a lot of the basic plumbing and just concentrate on the data. Shockingly little code is required – and on the Sitefinity side, no code at all.
Sure, at the moment there's no one-click button that will enable you to generate a NativeScript app yet in Sitefinity. However, you could visit the Telerik Platform right now and use its ScreenBuilder tool to do effectively the same thing. It'll basically let you design your app screens, you just need to plug in your data.
I recently developed a native app using NativeScript and Sitefinity and was blown away by how easy it was. In this tutorial, I will walk you through, step by step, how to build an app with NativeScript and Sitefinity, and demonstrate the elegance and simplicity of the approach.
Modules and tasks
In the Sitefinity backend administrative UI, start by defining your new Sitefinity module. Create a content type (for example, 'task'), and designate the parent content type (if any). Then, add the appropriate fields and define them using the drop-down menu. Click 'Finish' and Sitefinity will generate all the backend database tables for you.
Now you can start to create data. The Sitefinity interface makes it easy to create tasks for your module. Simply click the 'Create Task' button on the toolbar and the UI will let you enter new items with the fields you just defined.
The next step is to sync your data. For this, I'd recommend using Telerik Backend Services. It's a simple, speedy, NoSQL database, and no extra processing is needed to get the data. If your site goes down, mobile app users can still browse and edit data, and when it fires back up, the system triggers the sync at the defined interval and then consumes all the changes.
Sitefinity CMS leverages ServiceStack technology to provide and support some of its functionality. However, if you do want to use ServiceStack to develop and customise the CMS, you will be required to purchase the respective ServiceStack licenses.
To sync the data you've entered in the Sitefinity platform, first select your new module by checking the box provided, then set the sync interval. Every time the interval trips, Sitefinity will reconcile changes bi-directionally with the Telerik Platform Backend Services. This means that if you add new data in the Telerik Platform Backend Service UI, it will sync automatically back to Sitefinity at the next sync interval.
Once you save the connector, a sync button will become available, to enable you to bypass the wait time and sync data manually. Clicking the 'Details' link at the top right (under 'Bandwidth') will send you right into the Telerik Platform and your new backend services project.
To add your project into Telerik Platform, go into 'My Workspace' to configure the services. Click 'Add to project' in the 'Cloud Data Services' box. Finally, select 'Types' from the left-hand menu. You should see all the tasks you created in the CMS appear.
Create the NativeScript project
Telerik Platform works with the concept of workspaces, and each workspace can contain one or many project types. The data project defined for this tutorial is the backend data storage portion. Now we need to add a new project type.
Start inside your root tasks workspace and click the 'Create Project' button. Now, choose 'AppBuilder Native Project'. Once selected, you can choose to create a blank project, load a pre-built sample, or clone a repository. For this tutorial, I chose the 'NativeScript MasterDetail' sample, because it's a good starting point from which to consume a list of data.
Next we'll remove the code that populates the list and replace it with the Telerik backend code. We will also change the detail pair script to enable data editing/saving to the backend.
To edit code and build the apps, you need to use the Telerik AppBuilder. This comes in many flavours: Command Line Interface (for use with Sublime Text, for example), Windows Client, Visual Studio Extension, or even an in-browser variant! Personally I prefer the AppBuilder Windows Client, which enables me to pull down the same project on to multiple PCs with no extra configuration.
Check out the GitHub repo accompanying this article to see how little code is required to list the tasks on the main listview, and create the native app that runs on iOS, Android and Windows. Furthermore, there is no coding necessary within the Sitefinity platform.
Testing the app
The NativeScript companion app is a testing utility for those using Telerik Platform and Telerik AppBuilder to develop native mobile apps with NativeScript. After installing the NativeScript companion app, you can use AppBuilder LiveSync to instantly view and test code changes on your device. Simply hold three fingers on the screen of our device for a few seconds to pull the tasks from the Telerik Backend.
The final result
Words: Steve McNiven-Scott
Steve is a Telerik/Sitefinity e-fan-gelist (it's like an evangalist but you don't get paid). This article originally appeared in issue 271 of net magazine.