Fetch API – was I living on Mars?

I stumbled upon Fetch API today. It’s this simple:

fetch(url)
  .then((resp) => resp.json()) // Transform the response object into json
  .then(function(data) {
    // Do what the hell I want to do with received JSON data
    })
  })

 

Seriously! I must have been living on Mars to have not noticed it earlier. XMLHttpRequest and jQuery.ajax — time to move on, ba bye!

Sencha Touch: Accessing a remote API that is under Basic Authentication

ST makes it pretty straightforward to access webservices or APIs through its various data proxies and Ext.Ajax. But consuming an API protected under basic authentication can be tricky. Both data proxies and Ext.Ajax provide setUsername() and setPassword() methods, and they work fine on most browsers. But in my experience using these methods, I had big time face-palm moments in case of Safari, iOS, and some Android versions. When these methods are used, an ST app sets the Authorization header AND makes all API requests through URLs formed such as this:

http://user:passwd@www.server.com/api/user/2627

I’m not sure why this is such a big deal for some browsers, but they seem to get confused due to the presence of these two things — Authorization header and user:passwd URL.

The trick to solving the issue is to NOT use setUsername() and setPassword(), and instead set the HTTP headers yourself.

Data Proxies have a headers config.

someModel.getProxy().setHeaders({
	'Authorization': 'Basic ' + btoa(username + ':' + password)
});

Ext.Ajax has a defaultHeaders config.

Ext.Ajax.setDefaultHeaders({
	'Authorization': 'Basic ' + btoa(username + ':' + password)
});

Mobile App Development: Lessons Learned

  1. Sencha Touch is a great framework, but requires a LOT getting used to. The officials Docs do not always have the answer you’re looking for. ST forums and stackoverflow are excellent resources to consult when in need.
  2. If you are a web developer, DO NOT waste time learning Objective-C or Java for creating native iOS and Android apps. Instead use something like ST to develop a mobile web app, and then convert it into a native app using Cordova / PhoneGap.
  3. Cordova is the renamed, open-source version of PhoneGap.
  4. If your app is data-centeric, most probably it will depend on a webservice / API. If the API and the app are hosted on the same server, no problemo. In case of native apps, that are basically web apps PhoneGapped into native apps, that’d mean calling a remote API, and that is the problem. See same origin policy.
  5. Most googled solutions will point to making the service JSONP supported; but JSONP works only for GET requests. CORS is a recent W3C standard that supports all HTTP methods, but it still doesn’t work for PhoneGapped apps. ASP.NET Web API provides an easy CORS implementation.
  6. The perfect solution is to keep making Ajax calls normally, but using the full URL of the remote API. That will work because a PhoneGapped app doesn’t render in a browser but in a WebView (through a file:// URL). So it’s not restricted by browser’s same origin policy.
  7. ASP.NET MVC 5 and Web API are awesome!
  8. You may frequently encounter annoying cache issues with PhoneGapped apps. Just place a super.clearCache() in your Android app’s main activity’s onCreate().
  9. A PhoneGapped iOS app will run in fullscreen mode, by default, such that the status bar in iOS 7+ will appear over it. A fix is right here!
  10. One can create an IPA archive for testing on iOS devices via Build > *.app > iTunes > ?*.ipa. Believe me, it’s one of the most stupid things you will ever do. This is the correct way to create IPA archives for ad hoc distribution.
  11. Here’s how to create an animated splash screen in Android (though I have yet to figure out how to correctly use this in a ST-PhoneGapped app).
  12. If your device has Android 4.4+, you can remote debug your WebView-based Android apps using Chrome.
  13. JavaScript is yummy!

Tutorial: AJAX with jQuery

jQuery is a very powerful JavaScript framework, and to put in their own terms, is The Write Less, Do More JavaScript library. jQuery’s slogan indeed holds true to its claim, as you’ll discover as soon as you start coding using jQuery. Although jQuery has an extensive set of API and a collection of many functions in its arsenal, I would be concentrating more on the AJAX capabilities of jQuery in this tutorial.

Most of the modern websites, irrespective of whether they offer a simple or a complex interface, usually use AJAX for some task or the other. While designing in order to cater to today’s needs, it becomes almost indispensable to use AJAX to make the end-user experience faster and more pleasant. So, if you had been deferring the use of AJAX till now owing to it’s complexity in raw JavaScript, here is your chance to start using it with utmost ease.

It is really amazing to see how much simplified AJAX is with jQuery. The developers have seemingly (and painstakingly) done a lot of hard work behind the scenes to make it easy for the web developer to implement even the most complex JavaScript concepts, including AJAX.

For the purpose of demostrating AJAX, I’ll be making use of a simple web application (that I designed using HTML, PHP, jQuery, CSS and MySQL). I call it the Albums Database.

Continue reading Tutorial: AJAX with jQuery