Ionic2 Production Essentials
Starter app with Multi Language Support, Charts, CodePush, Redux and more
- iOS, Android
- 4 years ago
- 4 years ago
Essentials features for a production-ready mobile app
Ionic2 is a great mobile framework (built on top of another great framework – Angular2), however the starter app generated by ionic-cli doesn’t contain a few essential things that every production mobile app needs, like:
DEVELOPMENT / PRODUCTION CONFIGURATION FILES
For example when working in development mode you need to use a local API endpoint, but for production you have a different endpoint. You can change the endpoints manually, but a better solution is to have separate configuration files to store these values to avoid typos (or forgetting to change them)
MULTIPLE LANGUAGES SUPPORT
Translating the app into multiple languages increases its chances of success. We’ve included and configured ng2-translate module. Even if you don’t need multiple languages support from the beginning, it’s really easy to start the right way with this setup (even for 1 language) and add more languages in the future.
HOT CODE PUSH
Updating a mobile app by submitting a new build to the App Store / Google Play can be time consuming (a few hours for Google Play and a few days for iOS). Luckily Cordova apps can be updated by pushing JS, CSS and images updates in just a minute (by using Microsoft CodePush – a free service).
Additional tools and features
Ionic storage is an additional Cordova plugin that makes it easy to work with Local Storage, IndexedDB, Web SQL or Sqlite. Why not using just the Local Storage? Because iOS will currently clear out Local Storage (and IndexedDB it’s been shown) when the device runs low on memory. Using Ionic Storage makes it very easy to use a more persistent storage when available (the best storage medium is selected based on what’s available at the app runtime).
Ionic2 and Angular2 come with a lot of great built-in components, however we’ve added a few more just to speed up your development experience:
This is a full page panel that can be used to display a big icon, a title, some additional details and a button (the call-to-action). It is usually used there’s an error communicating with your backend server or when a view is empty.
SPLASH SCREEN PAGE
This is the first page displayed when the application launches and it’s purpose is to some initalization. For example, in this starter, we use the Splash page to check whether we should display a Tutorial (for first-time users) or the main tabs (for returning users)
First-time user are presented with a nice slider introducing them to the app. The tutorial is displayed automatically for first-time users. When user returns a second time to the app he won’t see the tutorial, but he can still access it from the side menu.
A basic login form with username/email and password.
A signup panel with username/email and password (with password confirmation).
We’ve added a few examples of charts: pie chart, line chart and bar chart. The charts are rendered using ng2-charts (which in turns depends on Chart.js).