My Stuff!!

Technical blabber.

Dynamic Class Names in Ember

| Comments

One of the strong points of ember is binding. It is so easy to update values without having to write observers and doing ugly stuff on DOM (I won’t pretend I know much about Javascript).

As I’m rewriting my website Fanzy.in in Ember, I’m facing lot of minor issues which tell me either Ember has a steep learning curve, or docs aren’t good enough (both are not good).

While displaying player’s scores in Fanzy, players in the gamer’s(Gamers are users who are playing Fanzy) team should be highlighted, along with special highlighting of captain and vice captain. So my html is like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table class="table table-bordered">
  <tr>
      <td>James Anderson</td>
      <td>Points: 251</td>
  </tr>
  <tr class="info">
      <td>Peter Siddle</td>
      <td>Points: 146</td>
  </tr>
  <tr class="success">
      <td>Ashton Agar</td>
      <td>Points: 251</td>
  </tr>

James Anderson is not in the gamer’s team. Peter Siddle is in the team and hence class="info". Ashton Agar is either captain or vice captain and is shown by class="success"

Surprisingly, doing this turned out to be hard in Ember. (Because I just started and couldn’t find how to do it) and finally used a custom view to acheive this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Fansy.ScheduledMatch = Fansy.Model.extend
  matchPlayerScores: DS.hasMany("App.MatchPlayerScore")
  matchPlayerSelection: DS.belongsTo("App.MatchPlayerSelection")

Fansy.MatchPlayerSelection = Fansy.Model.extend
  matchPlayerScores: DS.hasMany("App.MatchPlayerScore")
  captainId: DS.attr("number")
  viceCaptainId: DS.attr('number')

Fansy.MatchPlayerScore = Fansy.Model.extend
  totalPoints: DS.attr('number')
  name: DS.attr('name')
  matchPlayerSelection: DS.belongsTo('App.MatchPlayerSelection')
  scheduledMatch: DS.belongsTo('App.ScheduledMatch')

Every match is modeled as ScheduledMatch and players scores as MatchPlayerScore. MatchPlayerSelection represents the team of the current logged in gamer. So ScheduledMatch might have around 30 players(MatchPlayerScore) but MatchPlayerSelection will exactly have 11 players(that is how many a gamer is allowed to select in his team.)

Captain and vice captain are just ids for simplicity. Code is below:

Template code:

<table class="table table-bordered">
    {{#each matchPlayerScore in matchPlayerScores}}
        {{#view Fansy.MpsTrView mpsIdBinding="matchPlayerScore.id" matchPlayerSelectionBinding="matchPlayerSelection"}}
            <td>{{matchPlayerScore.name}}</td>
            <td>{{matchPlayerScore.totalPoints}}</td>
        {{/view}}
    {{/each}}
</table>

Custom View:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Fansy.MpsTrView = Em.View.extend
  mpsId: null
  matchPlayerSelection: null
  tagName: 'tr'
  classNameBindings: ['selectionClass']

  selectionClass: (->
    mpsId = parseInt(this.get('mpsId'))
    matchPlayerSelection = this.get('matchPlayerSelection')
    selectionScores = matchPlayerSelection.get('matchPlayerScores.content')
    if mpsId == matchPlayerSelection.get('captainId')
      return "success"
    else if mpsId == matchPlayerSelection.get('viceCaptainId')
      return "success"
    else
      for selectionScore in selectionScores
        if parseInt(selectionScore.id) == mpsId
          return "info"
      return null
  ).property('mpsId', 'matchPlayerSelection')

We write our own custom view Fansy.MpsTrView which will render each MatchPlayerScore. The view will have the tag tagName: 'tr'. Also, we bind className to selectionClass function. So in the selection class function, we return "info" or "success" as appropriate.

The view will render the handlebars block within {{#view}} {{/view}} and we provide our table columns there. Since we have declared tag, handlebars block will be surrounded with

Excited for Barcamp Ember.js Talk and Rails Meetup Group

| Comments

I’m pretty excited and happy about my open source initiatives for this month.

I was surprised that there is no Rails meetup in Bangalore. Rails is exciting!! More I use Rails, more I fall in love. A very well thought framework indeed. So I just went ahead and created one. I hope the community drives it forward.

More I use Ember.js, more I’m convinced of the potential of Javascript MVC frameworks. While Ember is still not a finished product (lots of polishing is required. And can do with good docs too.) I’m giving a session on Ember in Barcamp Bangalore on Sept 14th.

Do join Rails Meetup: http://www.meetup.com/Bangalore-Ruby-on-Rails-Enthusiasts/

Barcamp session: (I wanna Attend!!) http://barcampbangalore.org/bcb/bcb14/ember-js-a-framework-for-creating-ambitious-web-applications

A Look at Ember Data

| Comments

I’m learning Ember.js to use it for Fansy.in website and it has been a wonderful experience so far.

Why client side MVC? Better user experience. A game like Fantasy Cricket has to have a dynamic website to keep the gamers interested. And as I understand, Javascript MVC’s make it very easy to build dynamic web apps.

I chose Ember because I want to integrate Discourse to Fansy.in (still a few months away!!) so choosing Ember was an obvious choice. I’m loving the framework and the benefits look obvious. There is discourse project to look for some inspiration.

But Ember-Data!! while ember-data looks cool from the outside, it is still raw and too restrictive to fit to anyone’s needs (according to me atleast.). Today’s websites are complicated and cannot fit into one model per page category.

For example, in Fansy.in, Tournaments have Matches and Tournament user rankings. It is expensive and unnecessary to load all the ids of the hasMany relationships when loading tournaments in the tournaments page where we do not need them. And then, when we go to a Tournament’s page where we will need Matches and User’s rankings, two requests are made to fetch the relationships and increases with the number of relationships for a model.

I’ve been thinking about how to handle it so that the number of json requests do not shoot up and also we are fetching only the data we need. My thought process as of now:

  1. From the server, Send all the data required for displaying the particular page.
  2. For relationships, side load relationships and never send only ids. (This will make sure extra calls are not made for fetching the those objects later. Yes it is expensive to send all the data. Will handle it in the next step.)
  3. Send only the data required for displaying the particular page. If matches are not required while showing list of tournaments, do not send down the ids of the matches too. (This will break the ember-data loading part but will handle it in the next step.)
  4. In the setupController, reload the model if loaded already. This way, we will make sure that the model is reloaded and the server will send all the request necessary to show the particular page.
1
2
3
4
setupController: (controller, model) ->
  if model.get('isLoaded')
      model.reload()
  controller.set('model', model)

Google Ditching Android? What a Joke!!

| Comments

AppleInsider wrote a lengthy article stating Google is ditching Android!! It’s a classic example of coming to a conclusion first and then looking for evidence. The article here: http://appleinsider.com/articles/13/07/29/google-appears-ready-to-ditch-android-over-its-intellectual-property-issues . Last article I’ve read in AppleInsider!! What a joke of an article!! It was actually fun reading all wrong conclusions :D

Why? Because Android is not making money. Why? Intellectual issues. Why? Samsung’s dominance. Why? Decelerated progress?. Why? Chromecast not named Androidcast!! Hahaha!!

Android not making money? Seriously? That is why Microsoft spending billions popularizing Windows phone, firefox coming up with firefox os, Canonical, Ubuntu for phones. Android will make tons of money. From Motorola’s hardware division, from Google services like email, app engine, from search etc etc. Do you think other divisions of Microsoft like Microsoft office would have been as popular as they have been if it were a standalone product?

Intellectual issues? Microsoft had to pay so much in legal fines, so much bad press, bad blood I would say. Did they give up on Windows? Given that that was their main product but Android is not so for Google. But Android will be central to Google’s bigger aspirations. to become more than just a search engine.

Samsung’s dominance? That is a cause for concern. Google should do something about it. But abondoning because of it? I believe with Google need not worry about Samsung’s dominance. Samsung’s software is just pathetic. Touchwiz is such a mess (not about extra features, mind you). They can never become a software company in the near future. And with Google play services, Google has made it extremely difficult to fork Android and be successful.

Decelerated progress? Seriously? Let’s take a look at what’s new in the last year in Android. New location services, Game center for Android, design standardization, exciting hardware at affordable cost (Nexus 4), and finally Android 4.3. Google is now adding many of the features through Google play services instead through Android versions. Advantages: No need to wait for the new Android version to make it to the phone, make it harder to fork Android(for Google!!)

Chromecast? Hahaha.. Chrome head. Business decisions. I’m not commenting on that. Nor am I going to read too much into it.

Chrome head now leading Android? Sundar Pichai is credited with resounding success of Chrome browser. Google will be hoping he takes Android to new heights. Not so that he will kill the popular OS and try and make Chrome OS popular.

ActionBarCompat With NavigationDrawer

| Comments

ActionBarSherlock was one of the most popular libraries for Android which emulated the ActionBar functionalities for lower versions of Android. Now with Google releasing Compatibility library, we can use ActionBarActivity to have actionbar in our app instead of using ActionBarSherlock.

I believe every app (majority of the cases) will have ActionBarCompat and NavigationDrawer. If the app is simple enough, there is no need for a NavigationDrawer. So how well do they both play with each other? Pretty well actually. I did not have any problems integrating both even though the Navigation Drawer example given by Google uses native ActionBar and for API levels higher than 14.

Github repo: https://github.com/gauthamns/blog-actionbarcompat.git

The way Navigation Drawer is designed, I believe a better way to design the apps is by having a Single Activity for the whole app and changing the Fragments. (Single Activity does not mean it is only opened once, but might be opened many times with different intents. Intents are consumed by FragmentFactory class which will spit out the required Fragment for the current page.) Will write a new blog post on this.

I Should Blog Daily!!

| Comments

This is my blog. I plan to spend some time to blog everyday. Trying out Octopress since it seems to be very simple and built for hackers!!

So here is what I would like to do: Every blog post will be accompanied by a Github project. Every post will have a common theme. A question. And an answer to it.

All posts are divided into 3 catagories: beginner, intermediate & advanced.

Test embeding code

1
2
3
4
rake deploy
def fansy_super(is_true)
  is_true
end