Ionic V1 Try Again Later in Browser

Introduction

Ionic has been effectually for two years now. It is a great prepare of tools for developing hybrid applications based on AngularJS. Ionic is extremely popular at the moment, with more than one million applications built and a growing community of thousands of developers.

Since Ionic'south beginning release, time has passed, and web technologies and best practices have evolved in many ways. Therefore, it is difficult to decide which path to follow when starting a new project. In these conditions, developers tin can make mistakes potentially impacting the quality of their applications or the productivity of their team.

By reading the following Mutual mistakes, you will have the keys to avoiding fundamental problems and to create performant and scalable applications with Ionic.

Native Scrolling allows Ionic to listen to scrolling events on supported webviews. It makes Pull to Refresh, List Reordering and Infinite Coil possible without JavaScript scrolling, which was created in a fourth dimension when browsers lacked proper scroll events.

Native Scrolling is enabled past default on Android since Ionic i.ii (December 2015). It is a huge functioning and user feel improvement, every bit it ensures a smoothen scroll due to asynchronous events.

Unfortunately, due to the lack of proper events on iOS the native scrolling is not enabled for that platform yet.

If you are using a version prior to 1.ii, you can enable Native Scrolling for Android using $ionicConfigProvider:

          // Enable Native Scrolling on Android $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);                  

You also tin enable or disable Native Scrolling on any page using overflow-scroll directive on any ion-content:

          <!-- Disable Native Scrolling on this page simply --> <ion-content overflow-gyre="false">                  

Delight note that unfortunately collection-repeat, which allows your awarding to show huge lists of items, cannot be covered by native scrolling.

Common Error #2: Not Using the Ionic CLI to Install Platforms and Plugins

Ionic CLI adds features to the Cordova CLI. Platforms and plugins persistence is a great characteristic that Ionic CLI adds.

The problem with Cordova CLI is that the platforms and plugins you install are installed on your machine only. When working on a team, to avert bugs you desire to share the aforementioned surround, platforms, and plugins. With Cordova CLI, it'southward harder to keep the project in sync between developers machines. Aye, you lot could commit the platforms and plugins folders, simply it is not recommended.

When using Ionic CLI to install platforms ionic platform add ios and plugins ionic plugin add camera, the package.json file is edited accordingly.

Platforms and plugins are stored in cordovaPlatforms and cordovaPlugins properties:

          "cordovaPlugins": [     "cordova-plugin-whitelist@1.0.0",     "cordova-plugin-inappbrowser@1.0.one",     "cordova-plugin-splashscreen@ii.1.0"   ],   "cordovaPlatforms": [     "android",     "ios"   ]                  

It is now easy for other developers to get in sync when pulling a new code, just past running ionic land restore when necessary (add-on, deletion or version update).

Mutual Mistake #3: Thinking Performance Comes out of the Box

Ionic is based on AngularJS, and performance on the device is oft questioned. I would like to reassure you on this point: with a little AngularJS background, yous can create globe-class applications with Ionic.

The perfect case is Sworkit app that is congenital with Ionic, has a 9M+ userbase, 7M+ downloads and an average of iv.5 stars on Google Play.

If you want to get the best out of AngularJS, here are a few things you should learn before starting your project.

$sentry

Watchers are used to listening to scope changes in AngularJS. There are basically four types of $spotter: $lookout man (normal), $sentry (deep), $watchCollection and $watchGroup.

Every single ane of them is different, and choosing the right 1 can make a huge departure in terms of performance.

$spotter (normal)

Using the normal $watch will only check existing Object properties or Assortment items. Shallow changes, similar adding an Object belongings or push button a new item into an Array, will not be taken intendance of.

          $scope.$watch('watchExpression', role(newVal, oldVal){     if(newVal){         // watchExpression has changed.     } });                  

$watch (deep)

The deep $watch takes care of shallow changes and deep changes, similar Nested Object backdrop. With this $picket you lot are certain non to miss any modification. However, using deep $watch has performance implications. I would propose to utilise it with caution.

          $scope.$watch('watchExpression', office(newVal, oldVal){     if(newVal){         // watchExpression has changed.     } }, true);                  

$watchCollection

$watchCollection can be considered in between the normal $watch and the deep $scout. It too works comparison object references, but with the advantage to as well shallow watches the properties of your object by adding an Object property or push button a new item into an Array.

          $scope.$watchCollection('watchExpression', role(newVal, oldVal){     if(newVal){         // watchExpression has changed.     } });                  

$watchGroup

Introduced in AngularJS 1.3, $watchGroup allows watching several expressions at in one case.

While $watchGroup might not improve your awarding performance compared to the normal $watch, it has the advantage to be more constructed when watching several scope expressions.

          $telescopic.$watchGroup([     'watchExpression',     'watchExpression2',     'watchExpression3' ], office(newVals, oldVals) {     if (newVals[0]) {         // watchExpression has changed.     }     if (newVals[1]) {         // watchExpression2 has inverse.     }     if (newVals[2]) {         // watchExpression3 has changed.     } });                  

Track Past

The track by is used to avoid useless DOM manipulation when using ng-echo. Indeed, if the digest cycle finds that at least one element of your collection has changed, ng-echo will re-render all the elements. DOM manipulation always has effects on the application operation, so the less you have the improve.

To avoid re-rendering the consummate collection and only update the elements that need to be updated, utilise track by with a unique identifier.

          <!-- if items have a unique id --> <div ng-echo="item in items track by item.id"></div>  <!-- if not, you lot tin use the $index that ng-repeat adds to every of its items  --> <div ng-echo="user in users track past $index"></div>                  

Just avoid using rail past on drove-echo.

Old Bounden

One-time bounden, or :: was introduced in Angular 1.3, and it has a real impact on your application functioning.

Basically, using one-time binding :: on an expression will remove it from the $watchers list when populated. Information technology ways that the expression volition not exist able to update even if the data changes.

          <p>{{::user.firstName}}</p>                  

Our advice is to go through all your application'south views and think nearly what could or could not exist updated, and employ one-fourth dimension bounden :: appropriately. It will be a huge relief for the assimilate cycle.

Please note that unfortunately one-fourth dimension binding cannot be used in a collection-repeat, considering the list of items displayed on screen changes on the coil.

If you wish to know more about AngularJS and Ionic operation tips and tricks, I recommend reading the Ultimate AngularJS and Ionic functioning cheat sheet .

Mutual Mistake #4: Having Confusions with the View Cache Logic

Single folio applications exercise not enshroud pages by default. Yous accept probably experienced information technology using AngularJS applications, where the scroll or the user inputs are not saved when y'all navigate back and forth between the pages.

With Ionic, ten pages are cached by default, and this can be changed globally or per platform.

          // Globally $ionicConfigProvider.views.maxCache(5);  // Per platforms $ionicConfigProvider.platform.android.views.maxCache(v); $ionicConfigProvider.platform.ios.views.maxCache(5);                  

This is a cracking feature, but sometimes it's hard for beginners to understand how to bargain with cached pages.

The trouble is that when the user goes dorsum to a buried page, the controller is not re-instantiated again, which is different from AngularJS applications, and everything is like you lot never left that page.

In these conditions, how should you update the data on the page?

Introducing Controller Life Cycle Events

Compared to AngularJS, Ionic offers many life cycle events:

          $scope.$on('$ionicView.loaded', office(){}); $scope.$on('$ionicView.unloaded', function(){}); $scope.$on('$ionicView.enter', function(){}); $scope.$on('$ionicView.leave', role(){}); $scope.$on('$ionicView.beforeEnter', function(){}); $scope.$on('$ionicView.beforeLeave', function(){}); $scope.$on('$ionicView.afterEnter', part(){}); $scope.$on('$ionicView.afterLeave', office(){});                  

These events are necessary if you want to have control over the view cache.

$ionicView.loaded event, for case, is triggered the first time a view is loaded. This outcome volition not be triggered any longer while this view is cached, even if the user comes back to it. This is generally the upshot you would utilize to initiate variables the same fashion you practice with $viewContentLoaded event in AngularJS.

If you lot want to fetch information every time you enter a view, cached or not, you can apply the $ionicView.enter event.

By using the correct event at the right time, you tin improve the usability of the awarding.

Regarding performance, using the cache view only impacts the size of the DOM. When a page is buried, all its watchers are disconnected and the page is therefore just some more DOM elements lying on your folio waiting to exist used over again.

The size of the DOM matters to have a bang-up user experience, but caching up to ten pages seems to work fine (of course, depending on what you lot load in your pages).

Common Fault #5: Not Knowing About Crosswalk for Android

Every Android version runs a dissimilar WebView (a browser that runs your application). The performance is different across devices, and information technology can exist really bad on the old Android devices. To become the same feel with fluidity and responsiveness on every Android device, you can install Crosswalk. Information technology basically embeds the latest Chromium browser into your application, and is adding effectually 20Mb per APK, both ARM and X86.

Crosswalk can be installed simply using Ionic CLI or Cordova CLI:

          ionic plugin add together cordova-plugin-crosswalk-webview                  

Common Fault #6: Trying to Run Cordova Plugins Inside the Browser

The majority of developers using Ionic will want their app to run on iOS and Android. Afterward adding the platforms ionic platform add together ios android and some plugins ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts, a rooky mistake is to think you can examination them in the browser. Well, you could, but only after you lot install the proper browser platform. Keep in listen, it does not piece of work with all plugins.

Cordova'south plugins are meant to interact with the native device API through JavaScript. The contact plugin or the device orientation plugin will therefore merely piece of work on a device.

However, you can easily examination your code on a device and remotely debug information technology through your reckoner.

Remote Debug on Android

Plug in your device and make sure it is correctly detected past your computer by running adb devices (Android SDK is required).

Build your app and install it on your device past running ionic run android. One time your app is launched on the device, open up the panel via Chrome dev tools (on your figurer) chrome://inspect/#devices, and inspect your device.

Remote Debug on iOS

Plug in your device and make sure it is correctly detected by your computer. Build your app and install it on your device by running ionic run ios --device.

Once your app is launched on device, open Safari dev tools (on your computer) by clicking on Develop > Your iPhone > Your app:

Run Cordova Plugins Inside the Browser

Running Cordova plugins within the browser is an advanced feature that you should know about. Since Ionic 1.2, the browser is officially supported, so it opens the era of cross-platform applications way beyond iOS and Android platforms.

With Cordova Browser platform, Electron and only Web technologies (JavaScript, HTML, and CSS) we tin now build Ionic applications for the browser and the desktop (Windows, Linux, and OSX).

A starter kit is available on Github.

Cordova Browser Platform

With the Browser platform, yous can create Cordova applications for the browser. It ways that you can use Cordova's plugins on the browser as well.

It can be installed the aforementioned way you install iOS or Android platforms:

          cordova platform add together browser                  

Your application needs to exist compiled before usage exactly as with iOS or Android:

          cordova run browser                  

This command will compile your app and open your default browser.

Cross Platform Plugins

A lot of plugins such as Network, Photographic camera and Facebook support iOS, Android, and the Browser platform at the same fourth dimension - all with the same API.

To illustrate that there is a way to know if your device is online or offline on every platform (iOS, Android, Browser and Desktop) using ngCordova API:

          // heed for Online event $rootScope.$on('$cordovaNetwork:online', (effect, connectionType) => {     this.isOnline = truthful; });  // heed for Offline result $rootScope.$on('$cordovaNetwork:offline', (result, connectionType) => {     this.isOnline = false; });                  

With this in mind, you tin now imagine creating products that can run anywhere with ane unmarried code base of operations.

Common Error #vii: Following the Starter Kit Architecture for Large Scale Applications

When using the ionic beginning myapp control, a starter projection is created with the following folder structure:

          world wide web/     js/         app.js         controllers/             aaa.js             bbb.js             ccc.js         services/             xxx.js             yyy.js             zzz.js         templates/             aaa.html             bbb.html             ccc.html                  

This is called a Folder-by-Type construction, where JavaScript, CSS, and HTML files are grouped by types. As it might seem easy for beginners, this kind of architecture gets out of hand pretty quickly. Information technology but does not scale.

Here are some reasons not to utilize the Binder-by-Type structure:

• The number of files in your folders can go vast
• Finding all the files you need to modify for a specific characteristic tin be catchy
• Working on a feature will lead to many open folders
• Doesn't scale well, the more the app grows the more difficult working on it is

I rather recommend using a Folders-by-Feature structure, where JavaScript, CSS, and HTML files are grouped by characteristic or AngularJS module:

          myNewFeature/         index.js (AngularJS module)         config.js         service.js         controller.js         index.html         manner.scss                  

Reasons to utilize Folders-by-Feature structure:

• The number of files in your folders is express to few
• Finding all the files you need to modify for a specific feature is easy - they are in the same folder
• You can work independently on a feature
• Knowing what the module represents is piece of cake - the folder proper noun is sufficient
• Like shooting fish in a barrel to create a new characteristic, simply copy/paste an existing one
• Scales well, you can add as many new features as you want without making it hard for your team to work on

Please notation that this architecture is close to the Folders-by-Component structure that is now the default in Angular2/Ionic2 applications.

This single pitfall is ordinarily beginner's fault, but it may have probably the worst impact on performance. Consider this:

          <ion-content on-scroll="getScrollPosition()"> // … </ion-content>                  

          $scope.getScrollPosition = function () {   // heavy processing, similar manipulating DOM   // or anything that triggers a $digest()   // will be called every ~80ms,   // and will touch on UX }                  

Even though Ionic provides throttling for these actions, it can still be very irksome. Basically, anything that triggers a assimilate loop should exist deferred and non triggered together with heavy painting, which also is the outcome of scrolling.

Many of the goals that developers have been trying to accomplish by binding to gyre events, and especially animations, can likewise exist achieved using a different method. Behold requestAnimationFrame.

          var myElement = certificate.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() {   if (window.scrollY >= elemOffsetFromParent) {     customTweenFunction(myElement, options);   }   window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame();                  

The code above is a very simple example, checking if the user scrolled past the top of the element. Retrieve to add vendor-specific alternatives for cross-browser compatibility if you intend to apply the example. It will basically run at an optimal speed, depending on the browser, at 60 FPS or at the screen'southward refresh rate. But it is optimized, and high-functioning animation frameworks utilize that simple method.

You may also want to look into chemical element.getBoundingClientRect(), which provides information on an HTML node's size and position.

Common Mistake #9: Prototyping Ionic Applications Manually

Ionic has a specific design, almost a visual language. Especially with prototypes and early-stage products, a lot of time and expenses can be saved by utilizing the available components and styles. They are really rather minimal and have a good aesthetic.

Presenting wireframes and mockups with basic functionality has get an industry standard. To encounter a picture and to see an actual app with dynamic components on a mobile device are two very different cups of tea. Many designers, and as well UX developers, employ tools like Axure or Balsamiq, which allow quickly making wireframes with minimal functionality.

At present, the creators of Ionic released a like tool made exclusively for Ionic developers. It is called Ionic Creator. It has a drag and drop spider web interface, and supports close to everything core Ionic provides. What's smashing about it is that information technology allows to consign the epitome into several formats, with standard working Ionic code, and fifty-fifty build the application and share it. The tool is proprietary, but many of the options are free to employ.

Conclusion

Ionic revolutionized the hybrid application industry in a way nobody could have imagined. Yet, over fourth dimension the best practices and tooling lacked evolution. Equally a issue, the number of potential mistakes which developers tin make increased.

Proficient Ionic developers take a clear way to deliver Globe-Class applications to multiple platforms simultaneously. The manner is to leverage the available tools, keep operation equally a top priority, and follow the all-time practices.

This postal service would not have been possible without the creativity of the amazing Ionic community, Michał Mikołajczyk, Mike Hartington (Ionic Core team) and Katie Ginder-Vogel (Marketing & Communications Director, Ionic). Thank you all very much.

mattiewilier.blogspot.com

Source: https://www.toptal.com/ionic/most-common-ionic-development-mistakes

Share this post