Neoito — NativeScript Best Coding Practices
Download as PPTX, PDF1 like782 views
The document discusses best practices for using NativeScript, a framework for building native mobile applications with JavaScript, highlighting its advantages like rich UI and reusable code. It offers performance optimization techniques, emphasizing the importance of appropriate application architecture to reduce rendering burdens, and advises on UI and Angular optimization methods. Additionally, it stresses the need to simplify layouts and use background workers for non-UI tasks to enhance application performance.
Neoito — NativeScript Best Coding Practices
- 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
- 6. NativeScript modules for UIs
- 7. Reuse existing native Android and iOS libraries
- 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