Steve McNiven-Scott shows you how use NativeScript by Telerik and the Sitefinity CMS to build a cross-platform native mobile app.
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.
The clear benefit for web developers is that their existing HTML5, CSS3 and JavaScript skills are immediately transferable. It's also possible to leverage frameworks such as jQuery Mobile or KendoUI Mobile, which take care of tedious routing and styling. The downside? You must be careful about optimisation, because DOM manipulation can be expensive on a mobile device.
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.
What if you could use your JavaScript skills to write a native mobile app, using far less code than a hybrid mobile app, in a fraction of the time, and have all that data exposed to your frontend website users at the same time? With Telerik NativeScript and Sitefinity CMS, this is all possible.
Introducing NativeScript
NativeScript is a framework that enables developers to use pure JavaScript to build cross-platform native mobile apps for Android, iOS and Windows phones, using much of the same code (although you also have the option of writing platform-specific code, as needed).
JavaScript is the underlying language, while the UI layouts are described though XML. NativeScript then converts the XML layout into the platform's native UI components, so there are no compromises in user experience. You have access to all the power, flexibility and extensibility of JavaScript to build your business logic, and this business logic will remain the same, regardless of the targeted platform.
The NativeScript runtime provides full access to the underlying native APIs, such as the camera, location and file system, through a JavaScript abstraction layer. iOS, Android and Windows all provide JavaScript virtual machines that enable users to access their native core.
Trying out your code with NativeScript is as simple as holding down three fingers on the companion app after changing the XML, JavaScript and CSS. This propagates changes almost instantly – no rebuilding or deploying required.
Enter Sitefinity
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.
Sitefinity’s module builder makes it fast and easy to create dynamic complex objects that you can use to store your data
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.
Syncing options
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.
Syncing data
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.
It’s simple to add or remove services from your Telerik platform project
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.
Click a task to enter edit mode, then hit save to push the description and completion status back to the Telerik Backend using the pure JavaScript SDK. If you check the code, you'll notice you can even use JSON.stringify to display debug data into a dialog.
The final result
That's it! As you have seen, with NativeScript and Sitefinity you can build a fully functional native mobile app with very little code. The result will be a beautifully rendered mobile app that provides a native user experience. All this, while using your existing JavaScript skills.
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.
