Creating an hybrid app in minutes with Ionic Framework

Creating hybrid apps with Ionic is really fast and powerful. I have gather a year of information to create an ultimate presentation of Ionic in a airpair blog post: A year using Ionic to build hybrid applications

If you only want a summary of what’s inside this post you can check out the below presentation. It contains all you need to know to create, build and package an hybrid app with Ionic!

[iframely]http://www.slideshare.net/julienrenaux/hybrid-apps-withionic[/iframely]

Some quick tips:

  • Develop in the browser with live reload: ionic serve
  • Add a platform (ios or Android): ionic platform add ios [android] Note: iOS development requires OS X currently
  • Build your app: ionic build
  • Simulate your app: ionic emulate
  • Run your app on a device: ionic run
  • Package an app using Ionic package service: ionic package

AngularJS memory stats

If you are familiar with AngularJS development, you know that memory consumption is one of the highest challenge you must face using it.

Introducing angular-memory-stats

angular-memory-stats

angular-memory-stats is a NPM package that allow you to follow the memory consumption of your AngularJS application.

Install via NPM

npm i angular-memory-stats --save

Include the AngularJS module to your application

angular.module('yourModule', [
    'angular-memory-stats'
])

Insert the directive in the dom

<angular-memory-stats></angular-memory-stats>

Enable/Disable angular-memory-stats

angular-memory-stats is enabled by default, if you wish to disable it use the angularMemoryStatsProvider Provider

angular.module('yourModule').config(function(angularMemoryStatsProvider){
    angularMemoryStatsProvider.enable(false)
});

Then all you need to do is to launch Chrome (only available on Chrome for now) with the --enable-precise-memory-info and --enable-memory-info flags

# Linux
google-chrome --enable-precise-memory-info --enable-memory-info

#MacOS
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --enable-precise-memory-info --enable-memory-info

Open your application and you will have the following indicator on the bottom right corner of your browser:

angular-memory-stats

Source available on Github