RealWorld spec and API.NativeScript codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the
This codebase was created to demonstrate a fully fledged fullstack application built with NativeScript including CRUD operations, authentication, routing, pagination, and more.
See how a Medium.com clone (called Conduit) is built using NativeScript to connect to any other backend from https://realworld.io/.
For more information on how to this works with other backends, head over to the RealWorld repo.
I've gone to great lengths to adhere to the NativeScript community styleguides & best practices but had to adapt between the RealWorld specification and general mobile layout of Medium.com.
It is assumed that you have installed and configured NativeScript properly. If not, head to https://docs.nativescript.org/start/quick-setup and validate its correct functionality.
To start the emulator with this repository:
git clone https://github.com/nea/nativescript-realworld-example-app.git
tns run androidor
tns run ios
How it works
This app works as a NativeScript real-world showcase and is based on NativeScript 4 Angular/TypeScript style.
Head over to the NativeScript Docs to find out how to get started with NativeScript, Angular and Typescript.
This RealWorld app tries to show the following NativeScript concepts:
- Custom Component inclusion
- SideDrawer Menu
- Application Settings
- Custom ActionBar
- Modal Dialogs
- TTF inclusion
- e2e testing
To show as many concepts as possible the structure is not necessarily consistent but may differ between views. This example app does not claim best-practice or anything similar but just one way of achieving a result.
The project follows the general NativeScript/Angular structure without any specifics. It uses lazy-loaded modules to encapsulate functionality further. It uses frame and router navigation to go back and forth between pages.
The project itself is mainly located in the
app/ folder. It follows this general architecture:
module/contains the different views and according logic, split into a general, lazy-loaded module structure resembling the UIs
service/contains shared services used to encapsulated global, view-independent logic, i.e. the backend calls
model/contains shared entity classes used as models throughout the other files
fonts/contains FontAwesome icons used in the app. See nativescript-ngx-fonticon for more information
i18n/contains the translation files. See nativescript-localize for more information
Each component comes in two parts:
Everything is loaded in their according modules and reached via module-specific routing files:
x.module.tsthe general module
x.routing.tsthe routing file
Not all files are necessarily needed to be encapsulated in such a granularity, but the structure was executed through the source to stay consistent.
This repository orientated on the frontend instructions but adapted to some specifics and based all styling and routing on a mix of the Medium.com app and the overall RealWorld StarterKit instructions.
The UI is composed based on the Medium.com app. If information was missing/different between Conduit and Medium.com a mixed adaptation has been implemented.
Nearly all routes have been adapted one-to-one into the app. Some differences occur such as
Obviously, this RealWorld app is a frontend app. But it can connect to all backends implementing the RealWorld spec and API. To test you own backend implementation just change the URL in the settings dialog.
This example app uses a set of available NativeScript plugins to visualize the possible usage. Head over to the NativeScript Market for more information.
Used NativeScript plugins from https://market.nativescript.org:
- nativescript-feedback to show general, fancy messages
- nativescript-floatingactionbutton to add new articles
- nativescript-localize to localize the static text
- nativescript-ngx-fonticon to include FontAwesome icons in menus
- nativescript-ui-listview to present the articles
- nativescript-ui-sidedrawer to add a side-menu
- nativescript-ui-dataform to create and edit articles
- nativescript-ui-autocomplete for the editor tag fields
- nativescript-social-share for article sharing
- nativescript-dev-appium for e2e Appium tests
Other NPM plugins:
This project has been manually tested against
- Pixel 2 Android SDK 23
- Samsung S8 Android 8.0.0
The project contains an example e2e test to illustrate an end-to-end test case.
License & Credits
Thanks to all the plugin developers and articles by so many people on the NativeScript blog, forums and https://www.thepolyglotdeveloper.com/. Big thanks!
This project is licensed under the MIT license.
This source and the whole package comes without warranty. It may or may not harm your computer or cell phone. Please use with care. Any damage cannot be related back to the author. The source has been tested on a virtual environment and scanned for viruses and has passed all tests.
I don't know if this is very useful for a lot of people but I wanted a real-world tutorial with NativeScript, so here we are :) I hope this proves helpful to you... with all its Bugs and Issues ;) If you like it you can give me a shout at INsanityDesign or let me know via this repository.