Styling Native Apps with CSS

Now that the second major preview of Telerik’s open source NativeScript product has been released, I am quite excited to share with you where we are now and what we are after in terms of code reuse and a cross-platform UI API. This release is an important milestone for us as we managed to prototype and initially implement most of the fundamental building blocks of the UI layer. Briefly, these are:

• Visual Tree (or DOM), following W3C’s best practices and standards;
• Event observing following the Observable design-pattern;
• Data-binding (including binding context propagation along the visual tree);
• Extended property system to enable cascading values and inheritance;
• Layout engine with predefined containers – e.g. Grid, allowing for any complex layout to be easily achieved;
• Navigation Framework to simplify and unify transitions among different application screens;
• CSS-like styling mechanism over the Visual Tree;
• Initial set of cross-platform UI widgets.

For more details on this release you may refer to my colleague’s announcement post.

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

CSS in Native Mobile Applications?

Yes, it is possible and it’s what we have done in NativeScript! In this post I will share some more details on the technical side of the feature, how it is implemented and what our vision is for future updates.

Why CSS?

Cascading Style Sheets is, of course, the styling mechanism for the web and, as such, is widely used and well known. Since NativeScript aims to provide some (if not complete) reuse of JavaScript and web development skills, and given that we will have our version of markup UI declaration, the only logical styling mechanism for us from the very beginning was CSS.

What’s Currently Implemented?

Being the styling mechanism of the web, CSS has been extended and enriched continuously through the years. As of today it is so feature rich and complex that it is technically impossible for us to enable all the standardized functionality. Still, we have built the foundation and future extensions should make it much easier and much faster.

Our implementation strictly follows the CSS specification on syntax and rules, including selectors and declarations. The set of properties however will differ from what’s available in the web CSS since we are targeting the common denominator of three different mobile frameworks, providing different features than the HTML DOM.

Supported selectors

1. Type selector
   button { … }

2. Class selector
   .my-class { ... }

3. ID selector
   #login-button { ... }

4. Pseudo-classes selector (or what we call State selector)
   button:pressed { ... }

Supported properties

1. color – allows for solid-color modification of the matched View’s foreground.
2. background-color: allows for solid-color modification of the matched View’s background.
3. font-size: allows for modification of the matched View’s font size (works in Device-independent units only).

There are many more coming in future releases.

The above three properties were enough for us to meet the milestone we have set – to implement a simple Reddit reader app using cross-platform code only. But, as I mentioned earlier, having the foundation built will enable us to continue to deliver new features and properties.

The Style object

Like the DOM Style Object, each View instance exposes a style property. Actually, when the CSS is parsed and processed, this property is used to apply the declarations to each matched View. Then, it is the View and its Stylers that decide how to map the applied properties to the underlying native widgets.

Can I See Some Real Code?

The following snippet is extracted from the main.js file in our Hello World template project:

//Create and return the page.
var page = new pages.Page();
page.content = panel;
page.css = " button { font-size: 42 } .title { font-size: 30 }" +
    " .message { font-size: 20; color: #284848; }";
exports.Page = page;

And this code demonstrates how to apply red background to a Button instance using its style property directly:

var buttonModule = require("ui/button");
var button = new buttonModule.Button();
button.text = "Click me!";
button.style.backgroundColor = new colorModule.Color("red");

How About Existing CSS?

You may be curious what will happen if you paste an already existing style sheet in NativeScript. Well, it will get parsed and processed but most of the rules will be ignored and only the currently supported Selectors and Properties will be applied.

The good news is that our implementation is extensible and allows new properties to be registered and mapped to the underlying native widgets. Still, some complex rules like transitions and layouts will require additional implementation, while others will be impossible to implement due to the differences in the HTML DOM and our Visual Tree. We have plans provide an easy and intuitive high-level API over our CSS layer to allow developers to register and implement custom properties without diving deep into the internals of the framework.

What Comes Next?

Our immediate plans are:

• Enable layout properties like width, height, margin, etc.;
• Extend the pseudo-classes selectors, which are more complex and require additional handling of various events on the native side;
• Implement some combinators – e.g. gridpanel button { ... } meaning “all buttons within a grid panel”.
• Platform-specific selectors and declarations – e.g.
  -ios-button { ... } or button { -ios-color:red }

This list may grow almost infinitely and we have to carefully decide what’s with higher priority and what may be implemented at a later stage.

We Need Your Feedback

We believe this second preview version provides much better developer productivity through our cross-platform UI layer and the command-line interface. You may use either AppBuilder or your own preferred JavaScript editor to experiment with the new goodies. We really hope to receive your feedback on what we have implemented well and what needs to be improved. We also rely on you to help us validate and prioritize the list with features we plan to implement in the near future.

Header image courtesy of Kārlis Dambrāns