NativeScript - second preview version release

[Valio]

Several months ago, at the start of the summer, we announced the first preview version of NativeScript and shared with you our vision of building cross-platform native mobile applications. Summer is the time when we have most fun, and here at Telerik we have most fun when writing and breathing code! JavaScript code that is.

During these four months we implemented a lot of the fundamental building blocks for a cross-platform runtime for building native mobile applications using only JavaScript - we now have an application lifecycle, navigation framework, layouts, styling, the first UI components that work cross-platform and much more. We are understandably very excited to share all these things with you.

This group of Insiders will be the first to get access to the new bits, so if you see any issues or any feedback please let us know.

With this release, we enabled full JavaScript code reuse for the Android and iOS platforms. All your data models and business logic written in JavaScript will be shared across the platforms. We are using standard-based ECMAScript 5, modern JavaScript language so if you have an existing JavaScript code you will be able to reuse it all in a NativeScript project. You can use JavaScript to access 100% of the native platform APIs. That means any and all Android and iOS APIs are now fully accessible from JavaScript.

If you are a .NET developer we haven’t forgotten you! We have a full TypeScript support with intellisense as part of our integration with AppBuilder. You can use generics, enums, interfaces, static analysis, compile-time errors and everything an object-oriented language provides.

In terms of performance, during this release we optimized our runtime for iOS a lot and now we can honestly share that you will not notice any difference between NativeScript app and an iOS app written in ObjC. Get into the most critical mood and check out our sample app on the Apple App Store (link or search for NativeScript from your device) to see if you will be able to smell any difference. If you do - drop me an email with details, but I’m warning you - it is not an easy task! :)

As for Android, in terms of performance, we made a good progress, but there is still a room for improvement. We need to adjust how and when the garbage collection happens, because right now this happens more often than it should. We are several commits away from enabling a true native performance so stay tuned for updates. Check out the current state of the app on the PlayStore (link or search for NativeScript from your device).

One of top priorities we set for the NativeScript framework is to provide you with rich and modern tools for building rich UI application. We are still missing the declarative way of building application UI, but with this release we implemented the fundamentals that will help us achieve this goal in the next release. Here is the list of the cross-platform building blocks that we are shipping today:

• Navigation model, enabling you to describe the navigation model with Pages  and Frames for your application. Full history and hierarchical navigation support for both iOS and Android. Here is a code snippet:
  
  

// Page2 is the name of the page module you want to navigate to.
page.frame.navigate(“Page2”);

//or if you like to open an existing page instance:
page.frame.navigate(Page2);

Read more about the possible options in our API reference.

• Powerful cross-platform layout engine allowing you to easily create the UI you need by combining existing layout panels, or writing your own. In this initial release we implemented vertical and horizontal stack panel and grid panel. These two panels should help you build 90% of the UI you need, but we have also plans to create wrap and canvas panels in a future release. Here is how a simple layout declaration looks like.
  
  

  // Setup a button.
  var btn = new button.Button();
  btn.text = "TAP";
  
  //Setup a message label.
  var messageLabel = new label.Label();
  messageLabel.text = "Label text";
  
  // Setup a stack layout panel
  var panel = new stackPanel.StackPanel();
  panel.addChild(btn);
  panel.addChild(titleLabel);

You can read more about the layout in our “Create your first app using NativeScript” post (coming soon).

• CSS styling is another big thing we are introducing with this release. This is just the initial version and contains only three properties (background, font size, and font color) , but more are coming with the following releases. The styling engine supports extensions, so that you can write your own CSS properties and implement them in a custom way. Web developers are going to love this feature. We are not introducing a new format for styling - it is exactly the same format that you are using in a web application. It is just limited to the properties that we support. More info about the styling is available in this blog post, but here is a quick code snippet to see how it look like (nothing new or surprising here):
  

  button
    {
       font-size: 42
    }
  .title
    {
       font-size: 30
    }
  .message
    {
       font-size: 20;
       color: #284848;
    }

• We also implemented several basic UI components which you can use cross-platform

  • Image

  • Button

  • Label

  • TabControl

  • see all in our docs here.

In order to achieve the best UI building experience we plan to introduce markup declaration, binding engine and a full set of rich UI components. Stay tuned to see these things popping out in our future releases.

Another big thing we are introducing with this release is the ability to use 3rd party ObjC libraries! This feature alone enables you to achieve a huge code sharing boost. You can now use existing 3rd party iOS libraries right in your NativeScript application. Tons of 3rd party libraries are already available - check here, here, or here. Support for 3rd party Android libraries is on its way and will be live with our next release.

Last, but definitely not least is the introduction of CLI for NativeScript. And this is actually the first thing we are releasing as an open source! You are welcome to contribute, star or branch the source code here - https://github.com/NativeScript/nativescript-cli. With the CLI we enable many scenarios - you can use it on Windows, Linux or Mac-based machines. You can create, build and deploy an application using these tools. You can also use your favorite IDE to edit the application code. Just edit the files and using the CLI - build and deploy the application on the native emulators or on a real device. To see a small part of the power of CLI, here is how to create, build and run a NativeScript application with a single line of code, thanks to our CLI guru Erjo.

npm i -g nativescript && tns create app1 && cd app1 && tns platform add ios && tns prepare ios && tns run ios

With the open source version of the CLI you need to install the native SDKs on your working machine. This requires to use a Mac machine if you want to target iOS devices. If you are using the tools inside Telerik AppBuilder, you will be able to build iOS apps directly from your Windows machine. Check-out AppBuilder CLI here.

The number of new features we’ve introduced with this release is much bigger than what can be covered in a single blog post. That’s why we’ve prepared separate blog posts for the other major additions. If you want to know more please read the following in-depth technical blog posts:

// Page2 is the name of the page module you want to navigate to.
page.frame.navigate(“Page2”);

//or if you like to open an existing page instance:
page.frame.navigate(Page2);

NativeScript Open source CLI in depth
[comming soon]Building your first native cross-platform mobile application with JavaScript and CSS.
[coming soon] CSS Styling

Open Source

We are on track with our commitment to release the source code of NativeScript around the February 2015 release. If you would like to contribute to the platform please contact me. There are a lot of interesting areas where we could use help. Our thinking about the platform is to make it open for everyone and to enable integration with existing native and JavaScript libraries a breeze, so that you don’t need to learn new patterns and new ways to build applications. We need your help here! - we will try to provide integrations for the most popular JavaScript libraries, but we can’t integrate with all the libraries available and it will take time. If you want to port your favorite JavaScript library to work with NativeScript please give it a try and we will do everything possible to support you from engineering perspective. Support for AngularJS in NativeScript anyone? :)

What is next for you? If you are a NativeScript Insider you can start building an app right now. If you are not an Insider and want to try the bits now, the key for this is in my pocket - please drop me a line to give you access to the bits - [e-mail].