Ionic Studio looks exciting (I hope it will be free)

The Ionic team has just dropped a bomb in my inbox. The bomb even has a name – Ionic Studio. Still in preview, Studio is Ionic’s official integrated development environment (IDE). I believe they have done a fantastic job by concentrating on the thing that’s their defining feature — UI Components. Of course, things like managing plugins, resources and all from GUI make life easy. But by making it easier to create beautiful interfaces they have done something really good.

Those with some experience with building Ionic apps already know about Ionic Creator. But they also know that the tool is screaming to be updated since long, and is not entirely bug-free. Something like Ionic Studio will really make it easy to create apps quickly.

I like the clean looks it sports. It seems to have been built on the proven and trusty VS Code / Electron platform. Perhaps you have other ideas about its base?

Fun trip to Bangalore (March ’17 edition)

Don’t let “edition” in the title mislead you into believing I’ve had a lot of fun trip to Bangalore before. But I’m hoping I will going forward.

Nishith and I went on an official trip to attend Microsoft’s March 16-17 Tech Summit event. I have nothing much to say about the event other than it was mostly Microsoft’s product advertisement carnival, and that the only high point was the session on cross-platform mobile app development using Xamarin. Having created both native (Android and iOS) and hybrid (Ionic and Sencha Touch) mobile apps, I was instantly sold on the idea of using C# to create 100% native apps. IMHO, hybrid apps suck! They suck much less with Ionic 2, but I have found the overall UX to be still behind what native apps offer. I have made a pledge to develop my next mobile app POC using Xamarin.

Since there is not much else to talk about the summit, I’ll share a few memories of my trip.

Before leaving, we celebrated Shivam’s birthday with a cake and team lunch.
We had dinner at a very happening place Koramangala Social on 7th Street in Koramangala. These jalapeño cheese croquettes were so delicious we ordered them twice.
On day 2, our lunch was Andhra meal. We had this amazing Andhra thali at Bheema’s on Church Street. It was my first Andhra food experience.
On our return flight, we hung out at the Priority Pass lounge in Bangalore airport. It was my first lounge experience. Freebies are always good 🙂

P.S.: I have nothing against Ionic/Angular. I have always absolutely loved the development experience that they offer, it’s just the end result that is most of the times not to my liking. I’d blame the WebView more than the SDK!

Progressive Web Apps

Credit: blog.ionic.io
Credit: blog.ionic.io

You have no doubt heard of Progressive Web Apps by now, PWA for short, haven’t you? No? That’s okay. The thing is still pretty new.

Although the concept is not entirely unique, recent advances in web standards & technologies have now made it possible to create mobile-first web apps that work equally well on desktops web apps that look good & consistent on different devices and that can “progressively” use additional underlying features in a device. Still don’t get what’s new?

Google presented the concept in its I/O developers’ conference earlier this year. As per Google:

A Progressive Web App uses modern web capabilities to deliver an app-like user experience.

Do check out Google’s developer website for a more elaborate introduction to PWA, although I found Smashing Magazine’s description of the same to me much more clearer.

I had been hearing about the hype since a few months but didn’t care much to explore it in detail. Up until Ionic, my favorite mobile app SDK, made their PWA support official.

I think it’s a smart move by Ionic to include PWA support. Until now, Ionic apps were too mobile-ish to be used as web apps. PWA support is an important update to an already great mobile SDK, and I hope this changes many things for the good.

Today, creating a new app essentially means (a) creating a solid backend API (b) creating client apps for various popular platforms (Android, iOS, etc.), and (c) optionally, creating a complementary web app for the desktop. PWA could be a game changer as it takes care of both (b) and (c) in a single development cycle.

While browsing the Google developer website, I stumbled across a very interesting case study for PWA.

Flipkart, India’s largest e-commerce site, decided to combine their web presence and native app into a Progressive Web Application that has resulted in a 70% increase in conversions.

In 2015, Flipkart, India’s largest e-commerce site, adopted an app-only strategy and temporarily shut down their mobile website. The company found it harder and harder to provide a user experience that was as fast and engaging as that of their mobile app. But then, Flipkart decided to rethink their development approach. They were drawn back to the mobile web by the introduction of features that made the mobile web run instantly, work offline, and re-engage users.

Yep, going app-only was a really stupid move by Flipkart. Thank God sense prevailed.

I am going to try out Polymer, a JavaScript library, from Google, for building progressive web apps. I think I’m going to make my next web app using Polymer rather than Bootstrap.

The Problem of Run-Once Controllers in Ionic

Ionic is based on Angular. Angular has views and controllers. A view’s controller is supposed to execute each time the view is opened or navigated to. In Ionic, that doesn’t happen.

Take for instance this setup: you’re building a social app that has a Login view. You’ve configured the routes such that the Home view is set to open by default. Each time the app is loaded from scratch: (i) Home view opens, (ii) login session check is performed, and (iii) user is redirected to Login view if session has expired.

Now because Home view has loaded once and its controller executed alongside, the following piece of code will NOT execute again once login is successful on Login view and user is redirected back to Home view, perhaps through $state.go.

.controller('HomeController', function ($scope) {
 
    // Read username from local storage
    $scope.userEmail = window.localStorage['app.user.email'];
 
});

So if the value stored in local storage was an empty string when HomeController ran, $scope.userEmail would still be empty string even after LoginController has updated the local storage value.

Until this very moment, I didn’t have a damning clue to this apparently illogical problem. My searches for angular controller runs only once, angular $state.go controller doesn't execute, and so on naturally went fruitless because I wasn’t searching it right! Apparently, people were not facing the same problem.

A developer on stackoverflow reported that an NG controller should actually run each time its view loads. On the same stackoverflow question, I found my answer.

As per Ionic’s official docs on ion-view:

Views are cached to improve performance. Views can be cached, which means controllers normally only load once, which may affect your controller logic. To know when a view has entered or left, events have been added that are emitted from the view’s scope.

So the problem of run-once controllers is very Ionic specific. And so is the solution. The way to go about the problem is to move your code, that’s supposed to be executed each time a view is shown, from the root of your controller to the view’s $ionicView.enter event handler.

.controller('HomeController', function ($scope) {
 
    $scope.$on('$ionicView.enter', function () {
        // All code in this function will execute each time Home view is shown
        $scope.userEmail = window.localStorage['app.user.email'];
    });
 
});

That’s it!