Telerik blogs

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.

We encourage you to join us on the NativeScript GitHub page and help us make NativeScript the best it can be.

If you are new to NativeScript I will advise you to read our extensive FAQ page.

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 and CSS. We now have an application lifecycle, navigation framework, layouts, CSS styling, the first UI components that work cross-platform and much more! We are understandably very excited to share all these things with you.

Note: If you still do not have access to the bits please request to join the NativeScript Beta group and then drop me an email (valentin.stoychev@telerik.com) to make sure that you will be among the first to have access to the fresh bits.

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 Telerik 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).

makingsense.jpg

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. Stay tuned XML declaration is coming very soon. 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 enabling 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.

    // 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” sample.

  • 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 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's exactly the same format that you are using in a web application. It is just limited to the properties that we support. Here is a quick code snippet to see how it looks 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.

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 third party ObjC libraries. This feature alone enables you to achieve a huge code sharing boost. You can now use existing third party iOS libraries right in your NativeScript application. Tons of third party libraries are already available, so check here or here. Support for third 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 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 gurus.

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 are preparing separate blog posts for the other major additions as part of our Insiders program.

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 at valentin.stoychev@telerik.com.


About the Author

Valio Stoychev

Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.

 

Comments

Comments are disabled in preview mode.