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?"
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.
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.
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.
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.
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:
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.
You can add an event handler to your markup:
The function should be declared in the code behind:
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,
navigatingTo. I found the similarities between how Web Forms and NativeScript handle lifecycle to be straightforward.
To mimic a static class and functions, we would define them in the app.js file as follows:
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.
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:
And then we apply it in the markup:
NativeScript layouts use concepts that should seem familiar to anyone in Web Forms development such as GridLayout, DockLayout and more.
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.
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|
|Code behind files|
|Controls declaration in the markup files|
|Dynamic control creation|
|Finding controls on the page|
|Styling with CSS|
|Static methods and variables|
|Run under Android and iOS|
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 (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.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.