One of the easiest technologies to develop for the web is ASP.NET Web Forms. Building website with Sitefinity Web Forms widgets and pages is even more easier. But today, I want to share something with you that it is not so obvious: all Sitefinity developers are mobile developers as well. This is not a joke, but it may be something that you haven’t realized yet.
It can be challenging to build native apps for iOS and Android at the same time. You need two development teams with different technology and language expertise. Because of this, you may wonder, "How can I reuse my current knowledge and skills as a Sitefinity developer and start creating mobile apps from day one?"
If you are a seasoned Sitefinity developer, you went through Web Forms or MVC. It means that you have a lot of experience with things like markup languages, JavaScript, CSS, C#, IntelliSense, ASP.NET Master Pages, user controls, global variables, and configuration. Your first impulse may be to explore hybrid app development, but a better alternative exists in NativeScript. NativeScript is a framework that allows you to build truly native apps in a way that feels familiar – with markup, JavaScript and CSS. The end result is that you can develop and maintain only one code base that can be deployed for both Android and iOS.
Similarities
Let's look at aspects of developing NativeScript apps and how they compare to Sitefinity development with Web Forms in general. All the examples below will be in the context of pure Web Forms development in order to simplify the idea.
Language
Every Sitefinity developer already uses AJAX controls and the JavaScript language. The only thing that you'll need to learn is how Observable objects work. These objects are bound to your controls so that when values are changed the components are immediately updated. It's like a two-way binding without the need for a refresh.
If you have doubts about your JavaScript skills, you shouldn't be worried. Your experience in C# will prepare you for writing JavaScript. However, TypeScript can be used as well and offers a familiar, strongly-typed syntax. In fact, Anders Hejlsberg, the lead architect on C#, also works on TypeScript.
IDE
You don’t need a specific IDE. Visual Studio or its little brother Visual Studio Code are enough. For Visual Studio Code, NativeScript offers a great extension, which accelerates your development by giving you IntelliSense and debug options.
File Structure
To explore the file structure, let's create a "HelloWorld" project. After you install NativeScript, use the following command in the CLI to create a project – tns create HelloWorld. Now, open the “HelloWorld” folder and review the app folder.
It should look like the following:
The pages in NativeScript are called views. In this case, main-page.xml is the place where we declare our controls, main-page.js is the code behind file where our logic resides. The markup and the code behind files should have the same name, only the extension is different.
We use the main-view-model.js file as the place where we declare the data sources for our components. Keep in mind that the model file is not required, it is used for an abstraction to separate the logic and the data.
App.js is the equivalent of the Global.asax file. The logic here is executed when the app starts.
App.css is the CSS that is applied on each view. In case that you want specific styles for a particular view/page you could do it by creating a css file with the name of the page, in our case – main-page.css.
Declaring Controls
Now that we know where to put our components, as Siteifnity developers we'll want IntelliSense in order to declare controls in our markup files. This feature is supported in Visual Studio Code with the NativeScript extension installed.
In the following screenshot you can compare the process of declaration in Web Forms and NativeScript.
The IntelliSense covers not only the controls declarations but also properties:
As a side note, you are not limited to static declaration of controls. When we have dynamic content, we would add controls from the code behind.
var btn = new Button();stackLayout.addChild(btn);Find Controls on a page/view
We need to have full control on the components at any time. Finding a control is easy, get a reference to the page and pass the id of the control:
function pageLoaded(args) { var page = args.object; var tabView1 = view.getViewById(page, "tabView1"); tabView1.selectedIndex = 1;}
Data binding and events
We need to start thinking about how to visualize tons of data. NativeScript has data-binding controls that allow us to display our content in the best possible way. The main concept here is "two-way data-binding," which is well-known.
You need only to connect the controls to the data source and items will display and update automatically.
<ListView items="{{ items }}" height="200"> <ListView.itemTemplate> <Label text="{{ $value }}" /> </ListView.itemTemplate></ListView>You can add an event handler to your markup:
<Button text="TAP" tap="onTap" />
The function should be declared in the code behind:
function onTap(args) { ...}exports.**onTap** = **onTap**;
Lifecycle
During the application lifecycle, different events are triggered including start, exit, resume, error handling and others. Just like in the events that we handle in the Global.asax file for Web Forms, here we handle them in the app.js file. Pages have two main events, pageLoaded and navigatingTo. I found the similarities between how Web Forms and NativeScript handle lifecycle to be straightforward.
Global variable and state persitence
To mimic a static class and functions, we would define them in the app.js file as follows:
global.myAppKey ="{my key}”global.formatString =function(value, replacements) { ... }
If we want to persist some settings and interactions, even after the application is restarted, we'll need to use the application-settings feature. Think of application-settings as a small storage location where you can hold your data until server synchronization. If the application settings are reset the your values will be lost, similar to Application State in Web Forms when the application pool is reset.
CSS and layouts
The UI in NativeScript is styled with a subset of CSS. You can assign a class to each element or use inline styles. Custom fonts and external style sheets can also be applied.
Here is a simple example of how easy is to style a NativeScript component using CSS. First we define the CSS class:
.theme { background-color:yellow; }
And then we apply it in the markup:
<StackLayout class="theme"> <Label text="Tap the button" class="title"/> <Button text="TAP" tap="{{ onTap }}" /> <Label text="{{ message }}" class="message" textWrap="true"/></StackLayout>
NativeScript layouts use concepts that should seem familiar to anyone in Web Forms development such as GridLayout, DockLayout and more.
Shared views AKA User Controls
To avoid duplication of markup and code, we can create a shared view, similar to creating user controls in Web Forms, and reuse them through the pages. Here is a quick example how this is done:
Here is how the user control is registered in the Page directive.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" xmlns:rad="SharedView"> <StackLayout class="theme"> <rad:content></rad:content> </StackLayout></Page>
Comparison Table
I've created this quick comparison table of features in NativeScript and Web Forms. As you can see, everything you are comfortable with in Sitefinity, you can also do in NativeScript.
| ASP.NET Web Forms | NativeScript | |
| Markup files |  |
|
| Code behind files | |
|
| Controls declaration in the markup files | |
|
| Markup IntelliSense | |
|
| Dynamic control creation | |
|
| Finding controls on the page | |
|
| Application lifecycle | |
|
| Styling with CSS | |
|
| User controls | |
|
| Static methods and variables | |
|
| Application state | |
|
| Run under Android and iOS | |
|
Start using your mobile development skills!
If you give it a try, please share your experience in the comments!
If you give it a try, please share your experience in the comments!Peter Filipov
Peter Filipov (Pepi) is a Product Builder focused on building the future of Sitefinity, relying on the newest technologies such as .NET 6 (and up), React and Angular. His previous experience as a Developer Advocate and Manager of Engineering helps him to understand the customers’ and market needs of Sitefinity. He also is passionate about being active and healthy.