NatvieScript is a free and open source framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular, Vue and CSS, and get native UI and performance on iOS and Android. Here's how you can improve the performance of the NativeScript Apps.

1. NativeScript Best Coding Practices

2. A free and open source framework for building
truly native mobile apps with JavaScript. Use
web skills, like TypeScript, Angular, Vue and
CSS, and get native UI and performance on iOS
and Android.
NativeScript is…

3. 5 Reasons to use NativeScript
• 1) Rich, animated native UI
• 2) Maximum code and skill reusability
• 3) Ease of doing native-y things
• 4) Vibrant and growing community
• 5) Supported by a major software company

4. Maximum
code and skill
reusability 🌮
2

5. or or
Architecture Choices 🔧

6. NativeScript modules for UIs

7. Reuse existing native Android and iOS libraries

8. NativeScript community forum
(forum.nativescript.org)

9. NativeScript community Slack channel

10. How we can improve the performance of the NS Apps

11. Architecting your application
correctly can have a
significant impact on
navigation time, on-page
render performance and
application maintenance

12. Web Mentality in Native Applications Does Not Work
Code For a Showing a simple dropdown with date and Alphabet
<StackLayout borderColor="#D6D6E4" borderWidth="1"
borderRadius="5" backgroundColor="white">
<StackLayout orientation="horizontal">
<Label class="accent" text="Date"></Label>
<!-- Custom Icon Directive -->
<Label horizontalAlignment="right" icon=“sort"></Label>
</StackLayout>
<StackLayout orientation="horizontal"
<Label text="Alphabetical"></Label>
</StackLayout>
</StackLayout>
When this code renders natively you create 3 view containers.Assume you
follow this mentality for the navigation, the card design, the search bar and every
other micro component in your application…. You start to end up with huge
rendering burden for your native application.

13. NativeScript is Single Threaded
• All the UI and interactions are ran on the main UI thread
• This means you are taxing your application for each container it has to render. The
number of containers also affect the performance of the underlying native frameworks
and their rendering and layout times
NativeScript does allow you to use background workers, but these are not meant for UI
and are instead used for services such as http calls, large data manipulations, etc.

14. Before Optimizations
<GridLayout>
<StackLayout>
<dropdown></dropdown>
</StackLayout>
</GridLayout>
After Optimizations
<GridLayout>
<StackLayout borderWidth=”1” borderColor=”#D6D6E4”
dropdown></StackLayout>
</GridLayout>

15. UI OPTIMIZATION TECHNIQUES
1. Avoid nested layouts
2. Use the least possible UI elements to build a
component
3. Avoid inline styles as much as possible
4. Try to reuse the most of NativeScript Theme
5. Use only lowercase and dashes for selectors
6. Prefer HEX over RGB color codes
7. Define global / local SCSS variables as
needed

16. Angular Optimisation Techniques
• Webpack, AOT and Uglify
Application will bootstrap faster - eliminating a lot of the “white screen” effects you may be
experiencing and the size of the application will be reduced.
• Lazy Loaded Modules
By breaking up your modules, they will be built into separate “chunks”. This means your
application will only request that chunk when it actually needs it. This avoids a lot of overhead
with fetching more information than your application needs per view.
• Wrapping Complex Views
By delaying the rendering of complex views, it allows your navigation event to complete soon
on the main thread, giving your user the illusion that the app isn’t lagging

17. • Reduce View Complexity
Some designs just do not make sense for a native application, especially a NativeScript application.
NativeScript is prestigious for its ability to access native APIs - not rendering complex UI
• Use Local Database
Using database like couch db or sqlite for storing data instead of saving it in cache for large applications

18. Thanks!
Suralal.S
Sr. Software Developer, Neoito