Ionic 1 vs Ionic 2 April 2016 : What should i use?

Hello again guys, after exploring ionic framework for several times, now let’s discuss about ionic 1 and ionic 2 (which is now is still in beta version, current beta 8).

I’ve been learing for the last 2 months (o my good, may be it took so long) *or because no progress on my project, i learn about ionic, both ioinic 1 and 2 (beta). I have 2 projects, at first, both using ionic 2, but at the end, my senior said the project would be in ionic 1 (stable) for development because we don’t have so much time and we need stable version that have everythings work well. As we know, in beta version some function still can’t be used (read,  http://blog.ionic.io/ ) and may be we don’t think much about migration.

As for my second project, until this time i still make it in ionic 2. Because we still have time to build, and we don’t need some complex function right now, we still develop from the very beginning. Have enough time to wait about ionic 2 issues. And with current beta version, we still had enaugh. Based on what i’ve read here.

Ionic 1 using angular 1, ionic 2 using angular 2. Here’s good article for you to read : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/

I’ll write some for you :

  1. Organization and Structure
    In Ionic 2, every page or component in your application has its own folder with its own class file, template file and style file. If I have two pages in my application, Home and About, I would have the following structure :

    • home
      • home.js
      • home.html
      • home.scss
    • about
      • about.js
      • about.html
      • about.scss

    While ionic 1 project collect all html files in templates folder, and all js files in js folder, but you can still organized your ionic project file just like the structure above, but it’s not the default style that was used. It would require prior knowledge and motivation to achieve a sensible and scalable structure like this in Ionic 1.

  2. Toolingionic g page mypage

    you run it from CLI, and you would have MyPage folder with the following :

    • mypage
      • mypage.js
      • mypage.html
      • mypage.scss

    With the Ionic 2 CLI you can automatically generate pages, providers, tabs, pipes, components and directives and it will set up all the files you need and some boiler plate code for you.

  3. Navigation
    with ionic 1 you need to define $stateProvider like this

    $stateProvider
      .state('intro', {
        url: '/',
        templateUrl: 'templates/mypage.html',
        controller: 'IntroCtrl'
      })

    and for ionic 2 , you can do it just like this
    this.nav.push(mypage);
    you can push a page onto the navigation stack to make it the current page, and you can pop a page to remove it from the navigation stack and go back to the previous page. Just like pushing and popping an array.

  4. Template syntax
    Ionic 1:

    1
    <img ng-src="{{photo.image}}" />

    Ionic 2:

    1
    <img [src]="photo.image" />

    The difference here is inconsequential really, but the second code block certainly looks cleaner. Here’s another example:

    Ionic 1:

    1
    <button ng-click="doSomething()">

    Ionic 2:

    1
    <button (click)="doSomething()">
  5. Building
    In Ionic 2 almost all of your coding will be done inside of the app folder, which is completely separate to the www folder which contains the code that is actually served to the browser. When you run an Ionic 2 application, the code in the app folder is automatically transpiled and bundled into a single Javascript file which is copied into the www folder and served. For the most part, you don’t have to touch your index.html file at all.

    Of course, you can read more about it here : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/ and Josh Morony also provide a good e-book for us to learn about ionic 2, it’s so helpful.  You can also buy it here : https://www.joshmorony.com/building-mobile-apps-with-ionic-2/?utm_source=homepage&utm_medium=banner&utm_campaign=incontent#buy

    Also, if you already have ionic 1 project, may be you want to read about ionic 2 migration here : http://ionicframework.com/docs/v2/getting-started/migration/

    Thanks for visiting my blog! Cheers ^^,

Advertisements

Onsen UI vs Ionic Framework for Hybrid Mobile Apps

Hello Guys, hmm.. Yesterday, one of my friend ask me how to work with mobile apps, how to start ? A very good designer with a very good design product. He also a game developer, and build game using HTML5 and javaScript. He want to build a mobile application to discover some nice place to hang out. Need to display maps, and he want to work with AngularJS.

So, i think he sould try to build a hybrid apps. Why hybrid? Cz formerly he work with html5+css+angular and hybrid apps alows you to work with it, cz its build in a webView. So it is easier to adapt, instead of build a native apps.

But, what is hybrid mobile apps? Okay, i find a nice quote to help you understand :

Hybrid mobile apps are like any other apps you’ll find on your phone. They install on your device. You can find them in app stores.

Like the websites on the internet, hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript. The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. (You can think of the WebView as a chromeless browser window that’s typically configured to run fullscreen.) This enables them to access device capabilities such as the accelerometer, camera, contacts, and more.

In easy way, its a webview application (just like you see in other web browser like chrome), it is viewed in full screen, and the url is  hidden, and it is installed on your mobile phone 😀 Get it?

Ah, and why you should try with hyrbid apps? You can take a look and read this nice article : http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/

Oh ya, and hybrid apps is cross-paltform. So you can build on android, iOS, Blackberry ect. For me, i’ve try to build it on android and iOS. Still, to build iOS app, you need MAC with its XCode to compile your apps on your phone 😀

And, how to build it ? You can start form installing phonegap to try. Apache cordova  is a platform that provides a consistent set of JavaScript APIs to access device capabilities through plug-ins, which are built with native code. I already wrote an article about it and you can find it here https://mylovelycode.wordpress.com/2015/05/06/cara-menginstall-phonegap-untuk-android-apps-development/

But, in this article, actually i want to talk about the framework. A sets of UI components that can help you to build hybrid mobile apps. I read some article and found 2 framework that most popular. And then i found some issue form the developers who confuse :  to decide which is better? Which one i should use for my applications?

For me, i’ve try both of them : Onsen and Ionic. I’ve download onsen and try to make a little project to try it. Oh, and it is so lightweight when i install it on my phone, smooth animation and easy to use it. As for ionic, i just try to install demo version on my phone, it also lighweight. But, i prefer onsen still, cz i think it has nice ui sets, hehe. And i think its easier for my friend since he knows a lot about JavaScipt, AngularJS, so, he can adapt from web apps to mobile apps 😀

Ahh, and i found this good answer, so i quote it

One year has passed since both frameworks are available on the market. Onsen UI is currently in stable 1.2 version while Ionic is in the last release candidate state.
I have worked with both of them so let me give you a short overview, I also wrote a much larger blog article, you’ll find it at the end of this answer.
I won’t go into much details about the core framework; if you have a previous AngularJS knowledge you will easily transition to Ionic or Onsen UI.

  • Both frameworks are built around AngularJS and they heavily depend on directives, you can also easily build your own custom directives. Onsen UI also features a jQuery support (unnecessary if you ask me).
  • Both frameworks support Android 4+, iOS 6+ (some features are available on Android 2.3), Onsen UI also officially supports Firefox OS and desktop browsers. Ionic don’t have an official desktop support, but it will still work (it will not be pretty, imagine ).
  • Ionic currently don’t support Windows Mobile platform (it will have it in the future), Onsen UI support is currently in development (since November 2014).
  • Both frameworks support some kind of splitview feature so they can be used for table development.
  • Both frameworks have a distinctive nice looking flat UI. I prefer Ionic over Onsen UI look and feel, but this is a matter of personal taste. Both default themes look iOS 7 like.
  • Onsen UI supports native looking themes for Android and iOS. Ionic framework uses the same theme for all platforms, but some features will depend on the platform (for example tab look and feel)
  • Both frameworks have a working theme builder.
  • Ionic supports SASS while Onsen UI is built around Topcoat CSS library.
  • Both frameworks have a large widget support (directives)
  • Onsen UI has a better documentation. It is separated at two different locations. First one is “Components” where you can see different directives and each one has a working example you can use and replicate. Second part is a “Guide” where you are guided through the application creation process.
  • Ionic has a disorganized documentation (heavily fragmented). It lacks a real “getting started” tutorial, even if you have previous AngularJS experience. It shows you pieces, but not how to connect them correctly.
  • On the other hand Ionic has much larger community so you will easily find problem solutions.
  • Ionic framework has a great official forum + large StackOverflow community. At the same time, Onsen UI uses only StackOverflow as a help center (I would call this a fail).
  • Onsen UI has an HTML5 IDE called MONACA IDE (great tool), Ionic IDE is currently in production, you can participate in beta test.
  • Ionic has a growing 3rd party plugin community (for example date picker), I couldn’t find any 3rd party Onsen UI plugin

I wrote a much larger article covering Ionic / Onsen UI changes, find ithere.

 

And finally, which one you decide to use?

Ahh, and for question form my friend : how do i start ? And my answer is :

  1. Try to install phonegap untill you can successfully install .apk.
  2. For android, since this is hybrid apps, i prefer use genymotion as emulator.
  3. Not only on the emulator, but try to install it directly on your phone.
  4. Try to download and isntall the framework ( Have you decide it? hha )
  5. Is it can work with angular? Oh yeah of coure yes. Onsen and ionic both built in angular, so, absolutey yes! Just do it like you do on web apps.
  6. Try to viewing maps on your apps
  7. Server side? Lets read about webservice API. It use http response, and for client side you can request data with ajax.
  8. Oh, last but not least. Instead of build on emulator/hp each time you make a change and want to see it works, you bettertry to emulate in chrome 😀 Chrome have a very good device emulator. Right click -> Inspect Elemet -> On the left the is icon seacrh, and then icon “mobile phone” just click it and you will see, also you can choose many model device on it.

Taraaaaa…. Next, build your own applications 😀

Keuntungannya pakai framework ya lebih mudah, lebih cepet kan tinggal pakai UI sets yang disediakan, dan yang peling penting animasi2 seperti pull down, slide, transition itu udah ada, jadi ga perluu repot2 bikin animasi *kalo aku dulu repot karna cuma pakai jquery dan dibantu dengan css3 untuk bikin animasi2, itu pun patah2, nggak smooth jadinya setelah diinstall di hape :(*

Some nice site/article for you :

https://onsen.io/

http://www.gajotres.net/best-html5-mobile-app-frameworks-onsen-ui/

http://stackoverflow.com/questions/23715679/onsen-ui-angular-js-google-maps

http://onsen.io/blog/onsen-ui-tutorial-angularjs-essentials-for-using-onsen-ui-part-1/

http://ionicframework.com/

http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/

http://www.drdobbs.com/web-development/restful-web-services-a-tutorial/240169069

http://rest.elkstein.org/