Kartones Blog

ZeptoJS is a lightweight Javascript library that mimics JQuery selectors and typical functionality, while being much smaller (~25KB, can go under 10KB GZipped). It was meant for mobile so works on most widely used platforms and its only major drawback is no support of Internet Explorer.

I have one micro-site to keep my bookmarks, really really simple: I manage the bookmarks by editing a C# array that when the page gets loaded renders the contents in this format:

<div id="bmarks">
  <h3 id="0">__SECTION_NAME__</h3>
  <p id="s0">
    <a href="__URL__">_DESCRIPTION__</a>
    <a href="__URL__">_DESCRIPTION__</a>
    <a href="__URL__">_DESCRIPTION__</a>
  </p>
  <h3 id="1">__SECTION_NAME__</h3>
  <p id="s1">
    <a href="__URL__">_DESCRIPTION__</a>
    ...
  </p>
  ...
</div>

Previously, I had additional markup and lots of "onclick" added to every section and item tags, plus no javascript library, only pure JS to toggle displaying one category, hiding another, and other fancy stuff.

The page weighted around 12KB and, while it was really fast loading with a lot of bookmarks, response when using it just after loading was not as good at my mobile phone as in the desktop. In my context this meant that my javascript either was slow due to lots of DOM elements (few hundreds only so unlikely) or due to having to attach and manage too many event handlers (one per bookmark, one per section in my original code).

This, combined with some DOM lookups that were redundant, were for sure the source of unoptimal performance in such a simple webpage.

Yesterday I decided to reduce a lot the markup, do more CSS styling for removing tags (like <br>), and reduce the Javascript to the minimun after adding ZeptoJS. I removed some visual stuff that really was not so interesting, like +/- icons before the section name (which I could have done with CSS too).

This is the resulting javascript I need to toggle displaying and hiding of sections:

$('#bmarks').on('click', 'h3', ToggleSection);
function ToggleSection(eventData) {
    $("p").each(function () { $(this).hide() });
    $('#s' + eventData.currentTarget.id).show();
}

Keeping DOM lookups to the minimum with event delegation proved really easy to achieve, and toggle() function saved me some ifs and extra lines of code to handle the logic of hide/show.

Now the page weights ~50KB because I have inlined ZeptoJS library and CSS. With proper a caching header and unfrequently changing contents (as it is my scenario) this means a single HTTP request to fetch everything and then cached read from the browser onwards.

On my phone the first load feels equally faster under 3G (where latency downloading content sucks) but now the page is really really responsive. As it only keeps one event handler for the whole document's clicks feels way more responsive.

When starting to shard databases, one problem that sooner or later will arise is: how to manage auto-incremented unique IDs between multiple databases?.

The simplest way that some giants like Etsy or Flickr employ is to use "ticket servers", dedicated database servers with single instances (no replication) that generate the unique ids.

It uses a not so well known MySQL statement, "REPLACE INTO", which since SQL Server 2008 is also present at MSSQL as "MERGE INTO". It simply does an INSERT if no row with same value is present, else does a DELETE + INSERT.

Flickr explains everything in great detail, including how to use more than one database for the same "tickets table", so I recommend reading it first.

Etsy have a more visual and broader sharding talk that summarizes quite simply the process (it's interesting that they have exactly the same code example ;) :

Not trivial to think about at first, but really simple concept and quite easy to implement.

UPDATE:

Thanks to @dahernan, some non-DB alternatives:

• Snowflake
• Redis

Another (small) book that I had almost finished since a while. In theory about teamplay and people management, but really has a general scope.

Read the review at the Book reviews section.

As usual, can be read from the Book Reviews section of this blog.

After almost four years, last week I finished working at Tuenti. I will always remember the so many good times I've had, the fantastic people I've met and the huge amount of knowledge and skills I've learned while working there.

But personal goals, priorities and desires change, so since this week I've joined the Minijuegos team, where I'll help developing cool new stuff.

Small company, small development team, lots of things to do and great ideas for the future.

I'll keep working with PHP, but code is fully PHP 5.3, namespaced and documented. And finally learning and switching to Git. And as I'm playing with Orchard CMS for a pet project I also have my dose of C#, now mixed with ASP.NET MVC. And my neverending "2 Read" articles list…

As Steve Jobs said, "stay hungry, stay foolish". I'm happy to be a fool again and have so much to learn.