Layout optimization in NativeScript with Angular

I started my adventure with NativeScript from creating views according to the graphic design. The beginnings were not particularly difficult thanks to previous experiences with native Android mobile applications, I already had an idea of what the structure of Android XML looks like. At the beginning the main problem turned out to be incomplete and sometimes outdated documentation and my attempts to transfer the web HTML to NativeScript layouts.

An overly loose approach to using native elements like HTML divs made the first application I worked on quickly begin to get sluggish. Despite the high efficiency of current phones, weaker devices can have problems generating complicated structures of nested views that make up the mobile app.

NativeScript layouts

In NativeScript, we have 6 predefined layouts to choose from:

• AbsoluteLayout - allows you to set views by their coordinates. In such a container, we can stack views and precisely determine their location. Responsiveness can be troublesome - the layout of our view on different screen sizes.

• DockLayout - a very useful container, if you want to keep the view pinned to any part of the screen, eg a button that is always stuck to the very bottom of the page.

• FlexboxLayout - the equivalent of a web flexbox - a very flexible container that gives a lot of possibilities.

• GridLayout - a layout in which we can set almost anything. It allows you to arrange any complicated view and apply views on top of each other. The basic container in our daily work.

• StackLayout - views in this container are placed under or next to each other, depending on the orientation we set.

• WrapLayout - we can use this layout if we have views that will be smoothly passed to subsequent rows or columns depending on the size of the screen.

The NativeScript documentation describes each layout along with its attributes well, so I won’t talk about each individually. You can find that information here. Instead, I prefer to focus on one layout that suits almost every case!

Special task layout

GridLayout allows you to minimize the number of layers generated by the application. Each additional container is another layer to display. The structure of application layers can be checked in Xcode for example.

 

This is an unoptimized view. Each layout generates another UIView container.

 

We can limit the number of these views using GridLayout.

 

In the case of a simple interface, it won’t matter much, but in the case of a long list of complex elements, optimization of the system may be necessary.

We will build a simple interface with a view of the card in the NativeScript Playground, and then we will optimize its structure.

 

 

Full code can be found on github.

 

App's basic layout

We are starting a new {N} + Angular project on the Nativescript Playground website. To install the application on your phone, just click Preview and scan the QR code with your phone via the Playground application.

 

In the left panel, we can see the structure of our project files. Below are the components that we can move to the code using the drag & drop method. The basic view of the application is app.component.html, which contains <‌page-router-outlet>. This is the so-called frame for all application screens on which we can navigate and which is defined in the same way as in Angular applications, using Router. Detailed information about the navigation and structure of the application can be found here.

The main screen of the application to which we are redirected automatically is home.component. It contains 2 main elements: ActionBar is always displayed at the top of the application and GridLayout, which is the main container for our views.

Important: If the component is an object of the Page class, it can contain only 1 ActionBar and only one main component. Otherwise, NativeScript may display an error.

Our application has a card and a button at the bottom of the screen. DockLayout will be perfect for such a layout. Let's change the basic GridLayout to DockLayout, add the page class to it and insert Label and Button. Note that NativeScript does not support so-called self-closing tags (e.g. <‌Label text="Label"/>), i.e. each tag should have a closure. Otherwise, a template error will occur.

Such a layout, however, is not enough for the button to be at the very bottom. We need to add the dock attribute to Label and Button.

We still haven't gotten the desired effect. For clarity, we can add backgroundColor attributes to elements.

 

 

The code should look like this now. You can now see that Button is stretched to the full height of the screen. All you have to do now is set the stretchLastChild attribute in DockLayout to false and get the button moved to the very bottom of the screen.

 

 

Current layout structure can be found here.

Web layout structure in mobile apps

Let's now create a card view according to the structure suggested by the popular front-end library - Bootstrap.

 

Instead of the Label, we’ve put StackLayout with the css class ‘card’. It contains 3 more containers: card-header, hr-light and card-body. The hr-light class is an auxiliary class from the main NativeScripte theme, which is imported in the app.css file. The header of the card is GridLayout with two columns and one row. Attributes "columns" and "rows" accept the list of elements "*" or "auto". An asterisk means that the column with this index will take the maximum width, and the "auto" column will have the minimum width in which its content will fit. There is also a picture that I’ve added in the images folder. It is worth to mention the fragment:

In NativeScript, we can’t style the text fragment directly. To do this, use the <‌FormattedString> element, which I will discuss in another other post. For the purposes of this tutorial, we will use StackLayout with a horizontal orientation with two separate elements of the Label type.

Now add some css spices in home.component.css

The app should now look like this:

 

 

You can find full code for this version here.

Optimization using GridLayout

The appearance is consistent with the design, but its structure is excessively complicated, which will negatively affect the performance of the app with more elements. To create a card, instead of a few nested containers, you need 1 GridLayout. When creating views, you don’t have to worry about their 'flat' structure right from the start. If the component we are working on will be immutable and we know its final shape, we can immediately think about how to put it in the grid, otherwise in order to fully optimize the structure, we need to know the final layout. Our card view consists of 3 columns and 4 rows, with the middle column containing the Label with date, occupying the maximum width so that the image is on the right. We should now add the appropriate column and row indexes to our elements, bearing in mind that the first element always has an index = 0. The final layout of the card will look like this:

More information about further optimizations of the app created in NativeScript with Angular can be found on the {N} blog here. Using GridLayout can be tricky when we do not know the final number of rows and columns, for example when we dynamically retrieve data from a database. We must then bind the attributes of the grid with the variable that we would create in the logic of our view. Do you want to know how to do it? Let me know in the comments!