Ionic 3 has been released!

Actually, I’m confused to say it, but Ionic 3 has been released!

It hasn’t been that long since Ionic 2 has been officially released, here we are with the 3rd stable release of the framework.

It has the number 3 because it’s depending on Angular 4 (which has been released recently) instead of Angular 2. Angular 4 is a major change that could break the code in the future, so Ionic team increased the semantic versioning to the next major version.

If you’re wondering like me, why Angular 3 has been never released? here’s the answer:

Because the latest Angular router’s version, currently 3.3.0, is not in alignment with the rest of the modules which are at 2.3.0, the team plans to bring them in sync, releasing the next major version as Angular 4, not 3.


In short, Ionic 3 changes are:

  • Depending now on Angular 4
  • Bug fixes
  • Refactoring
  • Small features to existing components

I’ll leave you now to read the full changelog of the newly released version!

[Tip] Material design for all platforms in Ionic 2

Material design is what I like most of the time if you’re like me, here’s how to implement it inside your Ionic 2 application.

Whether it’s Android, iOS or Windows Phone, you can use the material design for all of the platforms.


I search about this and found couple out-dated answers on Stackoverflow because that was when the ionic was still in beta. But then I found the solution on Ionic 2 docs.

  • Open app.modules.ts
  • In the import section, find the sentence IonicModule.forRoot(MyApp)
  • Add {mode: 'md'} right after MyApp
  • Final import statement will look like: IonicModule.forRoot(MyApp, {mode: 'md'})

Building mobile and desktop apps with Ionic

Have you had a dream to use the code of a nice mobile to create a nice desktop web app?

Yay! You can easily now build apps for both desktop and mobile devices using the same codebase.

Let’s cover the news!


Desktop Support

Here’s an example of responsiveness in desktops:

Responsive grid, allowing to design for mobile and desktop
Source: Ionic blog


Ionic team is working really hard, please read their recent blog post on Responsive Grid to get all the details.

You can read the documentation here on the Desktop Support.

Ionic v2.2.0

Another thing is the new Ionic 2.2.0 the team released recently, that version includes 2 major updates:

  • Split Pane component
  • Updating the framework to run on Angular 2.4.8

The split pane is a core component for building the responsive apps (apps that work on mobile and desktops).

The split pane is actually the main menu displayed on the sidebar instead of being collapsed in a hamburger menu.

Here’s how it works:

Split pane in action


Ionic 2 is finally released! here’s what to do

The time has arrived when we stopped waiting for Ionic 2 to be release, and now it’s time to get our hands dirty!

Two hours ago Ionic team has announced that version 2 is officially released.

What to do next?

1. Read v2 announcement

2. Check the documentation

3. Get your hands dirty and create a new app right away!


ionic start cutePuppyPics --v2

4. If you’re already familiar with Ionic 1, check out the differences introduced in v2 to be up to date in short time.


Great new features in Ionic 2

Personally, one of the best new features is the theming.

In the past we all struggled with the default theme in version 1, it was good but wasn’t following the latest trends e.g. Material Design.

We had to create the required theme ourselves.


Another great thing is the performance; scrolling with 60 fps, reduced layout thrashing and repaints, and of course it’s built on top of Angular 2 which had moved Angular performance to a whole level.


I will not spoil everything, it’s very recommended to read the full announcements to get all new features.

Ionic, Yay!

Ionic: 5 reasons to start learning it

You already know about Ionic, it’s a JavaScript framework for building mobile apps.

Here are 5 reasons why Ionic is a good material to learn and use in 2017:

1. Big companies support Ionic

Quote from Ionic blog post announcement:

… total funding raised to $12.2M

Plus 22 companies as trusted partners.

2. Using latest web technologies.

Ever heard of Progressive Web Apps? what about ES6 or Material Design?

If you know them, that’s great they all included inside Ionic 2. if not, you should have a quick look at these great technologies and titles.

3. Easier to learn than other frameworks

With the huge amount of resources, it has never been that easy to learn the framework.

It’s not that there are a lot of resources, it’s also easier that other frameworks.

See the following code snippet from Ionic to built tabs:

While the tabs in React Native… oops!

There are no tabs included by default in React Native, we need to use an external library!
The following is a sample of using tabs in that library:

While Ionic code is importing 2 files one for each tab,  you can notice which one has more readability.

4. Ease of use

Have you heard of a mobile developer, who spent a lot of time fixing small issues? like generating icons with different sizes to suit the wide range of devices!

In ionic we even think about it, we run a single command:

ionic resources

And all the icons are ready to be used on any device!

You liked how we generate icons didn’t you?

Besides tools efficiency, we have a wide range of components and themes to choose from. Ionic 2 has Material for Android, Metro for Windows phone and iOS style for iPhones and iPads.


All this is part of the huge amount of components ready!

5. Cross-platform support

The good thing is, with Ionic you write your app one time, and it runs on Android, iOS, and even Windows Phone!

Do you want to learn Java, Swift, and C# to write your app? You write it in JavaScript and your app is ready for publishing on the major mobile platforms.

For these reasons, I started this blog to publish the latest news for the wonderful framework!

There are definitely more reasons to use Ionic, feel free to add yours in the comments :)