<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <title>Jasim A Basheer</title>
  <subtitle>Writing on programming and software by Jasim A Basheer.</subtitle>
  <link href="https://jasimab.com/atom.xml" rel="self" type="application/atom+xml"/>
  <link href="https://jasimab.com/" rel="alternate" type="text/html"/>
  <id>https://jasimab.com/</id>
  <updated>2026-04-28T06:30:00Z</updated>
  <author>
    <name>Jasim A Basheer</name>
    <uri>https://jasimab.com/</uri>
  </author>
  <entry>
    <title>Notes on Legible Code, for both humans and AI</title>
    <link href="https://jasimab.com/legible-code/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/legible-code/</id>
    <published>2026-04-28T06:30:00Z</published>
    <updated>2026-04-28T06:30:00Z</updated>
    <summary>Short set of notes on how code should be written, so it is habitable by humans and legible to AI. It is drawn from practitioners, but based on what I&#39;ve come to want in my projects. It is written as a guide for humans to read, and as a skill for AI coding agents to use.</summary>
    <content type="html">Short set of notes on how code should be written, so it is habitable by humans and legible to AI. It is drawn from practitioners, but based on what I&#39;ve come to want in my projects. It is written as a guide for humans to read, and as a skill for AI coding agents to use.</content>
  </entry>
  <entry>
    <title>An invitation to ReasonML</title>
    <link href="https://jasimab.com/posts/an-invitation-to-reasonml/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/an-invitation-to-reasonml/</id>
    <published>2017-05-10T10:40:00Z</published>
    <updated>2017-05-10T10:40:00Z</updated>
    <summary>Poorly designed data models spread special cases throughout a codebase. ReasonML offers a way to make the shape and flow of data explicit, replacing the fragility of dynamic languages with stronger guarantees.</summary>
    <content type="html">
&lt;div class=&quot;mt0&quot;&gt;
  &lt;p&gt;
    Peter Deustch once quipped that if you get the data structures and their invariants right, most of the code will
    just kind of write itself. If I had to pick just one nugget of learning from my career in programming so far,
    that would be it.
  &lt;/p&gt;
  &lt;p&gt;
    The effects of a poorly designed model cascades across the codebase, forcing us to litter it with special cases.
    That is
    probably why Linus Torvalds once claimed that the difference between a bad programmer and a good one is whether
    they
    consider their code or their data structures more important. Terry Crowley&#39;s article &lt;a href=&quot;https://hackernoon.com/education-of-a-programmer-aaecf2d35312&quot;&gt;Education of a
    Programmer&lt;/a&gt; makes a similar observation about how important the data flow is in the design of a system:&lt;/p&gt;

  &lt;p class=&quot;quote sans-serif&quot;&gt;Jon Devaan used to say “design the data, not the code&quot;. This also generally means when looking at the
    structure
    of a system, I’m less interested in seeing how the code interacts — I want to see how the data interacts and
    flows.
    If someone tries to explain a system by describing the code structure and does not understand the rate and
    volume of
    data flow, they do not understand the system.&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p&gt;I decided to learn ReasonML because I wanted to work in a language that revolved around data. I had become
    dissatisfied with programming in dynamic languages like Ruby and Javascript, and all my code started feeling
    fragile
    and rickety as soon as it was written. To build large systems, I needed to have a crisp, confident knowledge of
    the
    shape and flow of data across the codebase at all times. But the unpredictability inherent in dynamic languages
    made
    this impossible.&lt;/p&gt;
&lt;/div&gt;


</content>
  </entry>
  <entry>
    <title>The evolution of view templating in 9 easy steps</title>
    <link href="https://jasimab.com/posts/evolution-of-view-templating/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/evolution-of-view-templating/</id>
    <published>2014-12-25T14:40:00Z</published>
    <updated>2014-12-25T14:40:00Z</updated>
    <summary>Web templates began by separating content from code, then slowly reinvented programming languages as web apps demanded loops, conditions, and abstractions. For programmatically constructed views, code and components are the more natural medium.</summary>
    <content type="html">

&lt;p&gt;
  If you squint hard enough, &lt;a href=&quot;http://en.wikipedia.org/wiki/Greenspun&#39;s_tenth_rule&quot;&gt;Greenspun&#39;s tenth rule&lt;/a&gt; says:
&lt;/p&gt;
&lt;p style=&quot;margin-left: 2em;&quot;&gt;
  Any sufficiently complicated templating language contains an ad hoc, informally-specified, bug-ridden, slow
  implementation of a turing complete programming language.
&lt;/p&gt;
  &lt;p&gt;
    Hindsight is a wonderful thing. Let&#39;s see what it teaches us about the current state of the V in MVC:
  &lt;/p&gt;

&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;1.&lt;/span&gt; It all started with the render method.
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;token method-definition&quot;&gt;&lt;span class=&quot;token function&quot;&gt;greet&lt;/span&gt;&lt;/span&gt;
  name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; params&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
  render text&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Hello &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;!&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;
  &lt;span class=&quot;bigNumber&quot;&gt;2.&lt;/span&gt; Then the text grew rich and spouted HTML tags:
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;token method-definition&quot;&gt;&lt;span class=&quot;token function&quot;&gt;greet&lt;/span&gt;&lt;/span&gt;
  name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; params&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
  render text&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&amp;lt;html&gt;&amp;lt;h1&gt;Hello &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;!&amp;lt;/h1&gt;&amp;lt;/html&gt;&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;3.&lt;/span&gt; It became unwieldy, and multi-line string was born.
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;token method-definition&quot;&gt;&lt;span class=&quot;token function&quot;&gt;greet&lt;/span&gt;&lt;/span&gt;
  name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; params&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
  render text&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;%{
    &amp;lt;html&gt;
      &amp;lt;h1&gt;Hello &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;!&amp;lt;/h1&gt;
    &amp;lt;/html&gt;
  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;/div&gt;



&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
  &lt;span class=&quot;bigNumber&quot;&gt;4.&lt;/span&gt; There was more to say and more to do. We had to render a todo list, for which the code acquired loops:
  &lt;/p&gt;
&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;token method-definition&quot;&gt;&lt;span class=&quot;token function&quot;&gt;greet&lt;/span&gt;&lt;/span&gt;
  name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; params&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
  todos &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;wake up&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;step into the hamster wheel&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;

  todosView &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; todos&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;map&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;with_index &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt;todo&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; index&lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt;
    &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;%{
      &amp;lt;p&gt;
        &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;index&lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt; -
        &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;todo&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
      &amp;lt;/p&gt;
    }&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;join&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&#92;n&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  render text&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;%{
    &amp;lt;html&gt;
      &amp;lt;h1&gt;Hello &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;!&amp;lt;/h1&gt;
      &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;todosView&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
    &amp;lt;/html&gt;
  }&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;/div&gt;


&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;5.&lt;/span&gt; But this violated certain principles, to rectify which the first templates were born.
   Instead of muddling the code with string munging, we split the view into a separate template file, and passed just the
    required data into it:
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;token method-definition&quot;&gt;&lt;span class=&quot;token function&quot;&gt;greet&lt;/span&gt;&lt;/span&gt;
  name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; params&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
  todos &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;wake up&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;step into the hamster wheel&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;

  render file&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;greeting.html.erb&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token symbol&quot;&gt;locals&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token symbol&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token symbol&quot;&gt;todos&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; todos
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;/div&gt;

&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;6.&lt;/span&gt; The template, mostly static, contained a few dynamic portions
    for which it had to do things like asking questions (conditionals), repetition (loops), and re-use (partials).
    This meant interspersing the content with code:
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Hello &amp;lt;%= &quot;#{name} !&quot; if name %&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

  &amp;lt;% todos.each_with_index do |todo, index| %&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &amp;lt;%= index+1 %&gt; -
      &amp;lt;%= todo %&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &amp;lt;% end %&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;/div&gt;


&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;7.&lt;/span&gt; But &lt;em&gt;everyone knew&lt;/em&gt; that mixing logic and view was wrong. Logic-less
    templates were born to get rid of this uneasy co-existence. They absorbed the imperative ugliness of code into declarative
    directives. Purity!&lt;br&gt;
  &lt;/p&gt;
  &lt;p&gt;
    Things started to get weird just about then:
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Hello {{name }} {% raw %}
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-if&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{name}} !&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; {% endraw %}
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-repeat&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;todo in todos&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{% raw %}
    {{ $index+1 }} -
    {{ todo }}  {% endraw %}
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;/div&gt;


&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;8.&lt;/span&gt; This got the ball rolling. Templates went on an acquisition spree. It gets expressions and filters:
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-model&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;searchText&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-repeat&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;todo in todos | filter:search&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; {% raw %}
  {{ $index+1 }} -
  {{ todo }} {% endraw %}
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;/div&gt;

&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;bigNumber&quot;&gt;9.&lt;/span&gt; There is a limit to the expressive powers of a language if it doesn&#39;t let the user
    build their own abstractions. Logic-less templates compensates for this by opting-in the abstractions of its host language:
  &lt;/p&gt;
&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% raw %}
{{#list people}}
  {{firstName}} {{lastName}}
{{/list}}
{% endraw %}

Handlebars.registerHelper(&#39;list&#39;, function(items, options) {
  var out = &quot;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&quot;;

  for(var i=0, l=items.length; i&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;l;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;i++)&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;out&lt;/span&gt; &lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt; out&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;&quot;&amp;lt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&quot; + options.fn(items[i]) + &quot;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&quot;;
  }

  return out + &quot;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&quot;;
});&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;p&gt;
    And thus we come full circle.
    What started out as logic-less templates became &lt;em&gt;template programming languages&lt;/em&gt;, replete with expressions,
    conditionals, loops, scoping rules, interop with a host language, in short, an ad-hoc bug-ridden implementation of a
    programming language.
  &lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;content-section&quot;&gt;
  &lt;p&gt;
    View Templates began as a way to separate &lt;em&gt;content&lt;/em&gt; from &lt;em&gt;code&lt;/em&gt;. This used to work reasonably well
    in the past when most of the web was just content. The occasional need for programmable expression
    was easily satisfied by string interpolation. I&#39;m writing this very post in a content-primary format (HTML with
    a few Jekyll helpers). It is a good compromise.
  &lt;/p&gt;

  &lt;p&gt;This paradigm however doesn&#39;t suit webapps. A website is a programmatically &lt;em&gt;enhanced&lt;/em&gt; view, but a
    webapp is a programmatically &lt;em&gt;constructed&lt;/em&gt; view. Construction calls for abstractions. We can either port back
    programming abstractions in the form of
    helpers and directives into templates, giving rise to unwiedly templating languages with custom syntax and
    innumerable quirks, or we could simply use code, the best tool for the job.
  &lt;/p&gt;

  &lt;p&gt;
    So how did view templates become so pervasive? I can count a few reasons:
  &lt;/p&gt;
  &lt;ul class=&quot;bullets&quot;&gt;
    &lt;li&gt;The web was historically content oriented for which view templates were a natural medium.&lt;/li&gt;
    &lt;li&gt;
      It is easier for designers and front-end developers who solely write HTML+CSS to work on a view template than
      code.
    &lt;/li&gt;
    &lt;li&gt;Code was not suited for view templating because it couldn&#39;t differentiate between strings and
      XML view templates.
      &lt;/li&gt;
  &lt;/ul&gt;

      &lt;p style=&quot;padding-top: 0.8em;&quot;&gt;
        The HTML snippet embedded in &lt;span class=&quot;code&quot;&gt;titleView =  &amp;quot;&amp;lt;h1&amp;gt;#{&quot;Hello!&quot;.upcase}&amp;lt;/h1&amp;gt;&amp;quot;&lt;/span&gt; can only be parsed
        as a string, and not as an XML view. This means we cannot get any tooling support from the editor. Moreover,
        building large strings using concatenation is unwieldy.
      &lt;/p&gt;
      &lt;p&gt;
        But it is easy to parse view templates. Consider the following ERB template: &lt;br&gt;
        &lt;span class=&quot;code&quot;&gt;&amp;lt;h1&amp;gt;&amp;lt;%= &quot;Hello!&quot;.upcase %&amp;gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;. The point at which the template
        ends and code begins is very clear cut. This enables programming editors to parse and
        and provide tooling around it - linting, syntax highlight, auto-indent, autocomplete, jump to etc.
      &lt;/p&gt;

  &lt;p&gt;
    Out of the above three points, both the first and last ones no longer hold. The web has become dynamic and content
    takes the back-stage. As to tooling, Facebook made code friendly to XML in 2010 with the &lt;a href=&quot;https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919&quot;&gt;release of
    XHP&lt;/a&gt;.
    With XHP, developers could embed XML into PHP with no extra syntax. This idea was brought to front-end development
    by JSX+React.
    Building applications with React&#39;s component model is very pleasant, the resulting view code is better organized and
    more maintainable (I talk about how React makes the front-end a fully-programmable system in &lt;a href=&quot;http://www.jasimab.com/posts/on-react.html&quot;&gt;this post&lt;/a&gt;),
    and the tooling support for JSX on IntelliJ IDEs is excellent.
  &lt;/p&gt;

  &lt;p&gt;
    With JSX, we are able to do templates better than they could. We can mix and match code and views and build
    well organized front-end code without having to reinvent programming constructs into yet another templating language.
  &lt;/p&gt;
&lt;/div&gt;
</content>
  </entry>
  <entry>
    <title>On React</title>
    <link href="https://jasimab.com/posts/on-react/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/on-react/</id>
    <published>2014-11-18T14:40:00Z</published>
    <updated>2014-11-18T14:40:00Z</updated>
    <summary>React turns the view into ordinary programmable code: components encapsulate view logic, compose like functions, and map directly to the interface. The same component boundaries can also organize CSS and make a front-end easier to explore.</summary>
    <content type="html">





&lt;div class=&quot;react-section&quot; id=&quot;fully-programmable&quot;&gt;
  &lt;h3&gt;React makes the front-end a fully programmable system&lt;/h3&gt;

  &lt;p&gt;
    This is why programmers are going gaga over it. And that it takes just two and a half days
    to grok.
  &lt;/p&gt;

  &lt;p&gt;
    A React component is a self-contained unit that encapsulates both the view and view logic. This abstraction is
    fundamental to a front-end
    application, just like classes are to an object-oriented app, or tables to a database app.
  &lt;/p&gt;

  &lt;p&gt;
    Here is how a hierarchy of React components for an imaginary Project Management page would look like:
  &lt;/p&gt;

  &lt;p&gt;
  &lt;/p&gt;&lt;ul class=&quot;tree&quot;&gt;
    &lt;li&gt;&lt;strong&gt;ProjectPage&lt;/strong&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;strong&gt;StoryWall&lt;/strong&gt; title=&amp;quot;Current&amp;quot;
          &lt;ul&gt;
            &lt;li&gt;&lt;strong&gt;Story&lt;/strong&gt; title=&amp;quot;I should be able to see the Project&amp;quot;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;StoryWall&lt;/strong&gt; title=&amp;quot;Backlog&amp;quot;
          &lt;ul&gt;
            &lt;li&gt;&lt;strong&gt;Story&lt;/strong&gt; title=&amp;quot;I should be able to see the Walls&amp;quot;&lt;/li&gt;
            &lt;li&gt;&lt;strong&gt;Story&lt;/strong&gt; title=&amp;quot;I should be able to see each Story&amp;quot;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p&gt;
    These components map directly to both your front-end code and the actual UI, making the project
    highly explorable.
  &lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;react-section&quot; id=&quot;first-class-citizen&quot;&gt;
  &lt;h3&gt;View as a first-class citizen&lt;/h3&gt;

  &lt;p&gt;
    In React, the views are written in Javascript. With that kind of power, this is the kind of things you get to write:
  &lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;var story = {
  title: &quot;I should be able to see the project&quot;,
  isCompleted: true
};

function storyView(story) {
  var title = story.title
  var isCompleted = story.isCompleted ? &quot;completed&quot; : &quot;pending&quot;;

  return (
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Story&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{title}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;({isCompleted})&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  );
}&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;
  If that was crazy, then look at how easily you can render an array of stories using &lt;span class=&quot;code&quot;&gt;_.map&lt;/span&gt;:
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;var wall = {
  title: &quot;Current&quot;,
  stories: [story]
}

function wallView(wall) {
  var stories = wall.stories;
  var title = wall.title

  var storiesView = _.map(stories, storyView);

  return (
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;StoryWall&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{title}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;StoryWall-stories&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        {storiesView}
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  );
}&lt;/code&gt;&lt;/pre&gt;
  &lt;/pre&gt;

  &lt;p&gt;
    Contrast this with traditional HTML based templating: they reinvent conditionals and other control
    structures, and the only way to reuse code is string munging through partials.
    Helpers and directives are
    &lt;a href=&quot;https://docs.angularjs.org/guide/directive&quot;&gt;high&lt;/a&gt; &lt;a href=&quot;http://handlebarsjs.com/#helpers&quot;&gt;ceremony&lt;/a&gt;
    and can&#39;t be used as often as they should be. Add to that there are a &lt;a href=&quot;http://garann.github.io/template-chooser/&quot;&gt;whole slew&lt;/a&gt;
    of these languages that are conceptually similar but has the overhead of different syntaxes.
  &lt;/p&gt;

  &lt;p&gt;
    React makes the view layer fully programmable and thus elevates them to be first-class citizens of the codebase.
    This means you can can use variables and methods and control structures and all the other programming abstractions
    to write and refactor beautifully organized view code.
  &lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;react-section&quot; id=&quot;component-syntax&quot;&gt;
  &lt;h3&gt;The React component syntax&lt;/h3&gt;

  &lt;p&gt;
    The simplest React components are state-less. All they do is interpolate parameters into the view template. In this capacity
    it works as a functionally pure templating function, like Handlebars or Mustache.
  &lt;/p&gt;

  &lt;p&gt;React components are built using &lt;span class=&quot;code&quot;&gt;React.createClass({})&lt;/span&gt;. The API is minimal:
    it just needs a &lt;span class=&quot;code&quot;&gt;render&lt;/span&gt; method that returns a view.
  &lt;/p&gt;
  &lt;p&gt;Let us build &lt;em&gt;Story&lt;/em&gt;, our first component, using the view code in the first example.&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;var Story = React.createClass({
  render: function() {
    var story = this.props.story

    var title = story.title
    var isCompleted = story.isCompleted ? &quot;completed&quot; : &quot;pending&quot;;

    return (
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Story&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{title}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;({isCompleted})&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    );
  }
});&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

  &lt;p&gt;Once you define a component using &lt;span class=&quot;code&quot;&gt;React.createClass&lt;/span&gt;, you render it using &lt;span class=&quot;code&quot;&gt;React.render&lt;/span&gt;.
    The first argument to &lt;span class=&quot;code&quot;&gt;React.render&lt;/span&gt; is the React view that you want to render, and the second is the
    DOM element into which you want to mount it. Here, let us render the component:&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;var story = { title: &quot;I should be able to see a Story&quot;,
              isCompleted: true }

React.render(
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;Story&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;{story}&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;,
  document.getElementById(&#39;example1-Story&#39;)
);&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

  &lt;p&gt;
    And the result looks so:
  &lt;/p&gt;

  &lt;div id=&quot;example1-Story&quot;&gt;&lt;/div&gt;

  &lt;p&gt;
  Any parameter that
  you pass to a React component (like &lt;span class=&quot;code&quot;&gt;story&lt;/span&gt; in the above code) is available in the hash &lt;span class=&quot;code&quot;&gt;this.props&lt;/span&gt; inside the component.
  React considers &lt;span class=&quot;code&quot;&gt;props&lt;/span&gt; to be immutable, and so should you.
  &lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;react-section&quot; id=&quot;css&quot;&gt;
  &lt;h3&gt;React and CSS - take one get one free&lt;/h3&gt;

  &lt;p&gt;
    CSS used to be the one part of an otherwise clean codebase that first turns into a &lt;a href=&quot;http://en.wikipedia.org/wiki/Big_ball_of_mud&quot;&gt;ball of mud&lt;/a&gt;.
    Turns out the trick to good CSS is to avoid &lt;em&gt;cascade&lt;/em&gt;, the C in CSS.
    Cascade makes the style bleed from one unconnected part of
    the codebase to another, often in hard to predict ways. Modern CSS conventions -
    OOCSS, SMACSS, BEM etc. are all about containing this by isolating one component from the other.
  &lt;/p&gt;

  &lt;p&gt;
    However, each of these frameworks use their own terminology: BEM is about identifying reusable &#39;blocks&#39;, while
    SMACSS calls them &#39;modules&#39;.

    But if you use React, there is nothing new to learn - you are already extracting reusable components naturally, and
    if your CSS adequately mirrors them,
    you are getting the benefits of well-factored code in your CSS for free. This is exactly what we did with our code examples:
    the CSS class names are the same as the component names. Naming is already hard enough; you shouldn&#39;t have to do it twice.
  &lt;/p&gt;

  &lt;p&gt;
    Any object oriented CSS framework should work well with React. I have recently started using &lt;a href=&quot;http://suitcss.github.io/&quot;&gt;SUIT CSS&lt;/a&gt;
    which works especially well with component-based UI frameworks. To begin with, these three conventions will take you far:
  &lt;/p&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td style=&quot;width: 300px;&quot;&gt;ComponentName--modifierName&lt;/td&gt;
      &lt;td&gt;eg: &lt;span class=&quot;code&quot;&gt;Notification--error&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ComponentName-descendentName&lt;/td&gt;
      &lt;td&gt;eg: &lt;span class=&quot;code&quot;&gt;StoryWall-stories&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ComponentName.is-stateOfComponent&lt;/td&gt;
      &lt;td&gt;eg: &lt;span class=&quot;code&quot;&gt;Story.is-active&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/div&gt;

&lt;div class=&quot;react-section&quot; id=&quot;composing-components&quot;&gt;
  &lt;h3&gt;Composing components&lt;/h3&gt;

  &lt;p&gt;Now let us build the &lt;span class=&quot;code&quot;&gt;StoryWall&lt;/span&gt; component - it is also similar to the
plain view code we first wrote, except that this time we wrap it as a React component.&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;var StoryWall = React.createClass({
  render: function() {
    var wall = this.props.wall;

    var stories = wall.stories;
    var title = wall.title

    var storiesView = _.map(stories, function (story) {
      return (&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;Story&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;{story}/&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;);
    });

    return (
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;StoryWall&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{title}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;StoryWall-stories&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
          {storiesView}
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    );
  }
});&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;
  We&#39;ll render it with some data:
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;var currentWall = {
  title: &quot;Backlog&quot;,
  stories: [
    {
      title: &quot;I should be able to see a Wall&quot;,
      isCompleted: true
    },
    {
      title: &quot;I should be able to see the Project&quot;,
      isCompleted: false
    }
  ]
}

React.render(
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;StoryWall&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;wall&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;{currentWall}&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;,
  document.getElementById(&#39;example2-StoryWall&#39;)
);&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

  &lt;p&gt;In action:&lt;/p&gt;

  &lt;div id=&quot;example2-StoryWall&quot;&gt;&lt;/div&gt;

  &lt;p&gt;
    Here we used the &lt;span class=&quot;code&quot;&gt;Story&lt;/span&gt; component inside &lt;span class=&quot;code&quot;&gt;StoryWall&lt;/span&gt; as seamlessly
    as we would use a normal HTML tag. There was nothing extra to be done. This is the other aspect of React
    that makes it highly programmable: components are almost as fluid as functions; they are parameterized, and are
    easy to both compose and reuse. There are no &lt;a href=&quot;https://docs.angularjs.org/guide/directive&quot;&gt;arcane incantations&lt;/a&gt;
    to be initiated into.
  &lt;/p&gt;

&lt;/div&gt;

&lt;div class=&quot;react-section&quot; id=&quot;what-next&quot;&gt;
  &lt;h3&gt;What next?&lt;/h3&gt;

  &lt;p&gt;
    React is built on simple concepts and there is very little magic going on -
    as soon as you understand how to do something, you also understand how it works behind the scenes.
    React also favors the &lt;em&gt;explicit is better than implicit&lt;/em&gt; philosophy, even if it comes with the overhead of
    extra code at times. Becoming productive with the library involve just a few days of learning curve, after which you are
    building and reusing components with ease.
  &lt;/p&gt;

  &lt;p&gt;
    If you are a back-end developer with a bad taste for Javascript, you&#39;ll be surprised how React and a
    sane collections library like &lt;a href=&quot;http://underscorejs.org/&quot;&gt;Underscore&lt;/a&gt; can make the language pleasant
    to use. Quoting a convert:
  &lt;/p&gt;

  &lt;div class=&quot;quoted-text&quot;&gt;
    &lt;p&gt;
      React completely changed the way I thought about rich clients. It took me a little longer than 2 days, I went into React with an absolute hatred of anything Javascript and came out 2 weeks later loving it. There is something to be said for a library that can wash away over 10 years of built up anger for a particular technology. It&#39;s not just another revamped library thrown into the frying pan, it&#39;s a complete rethink of how rich clients can be developed almost effortlessly with code that anyone can read. When I got into react, all I could think was &quot;yes, this makes sense, this is how it should have been all along.&quot; Moving into the future I expect most libraries will unify under the concepts introduced by React in the same way that most web applications frameworks are different flavors of MVC.
    &lt;/p&gt;
    &lt;p&gt; - as response to &lt;a href=&quot;https://news.ycombinator.com/item?id=8507849&quot;&gt;you&#39;ll never go back to anything else&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;

  &lt;p&gt;
    If you work with Rails, there is good news: it is far easier to get started using React in Rails
    than it is to setup an independant Javascript project with Gulp, watchify, reactify et al. Just drop &lt;a href=&quot;https://github.com/browserify-rails/browserify-rails&quot;&gt;browserify-rails&lt;/a&gt; and &lt;a href=&quot;https://github.com/reactjs/react-rails&quot;&gt;react-rails&lt;/a&gt; and you are good to go.
  &lt;/p&gt;

  &lt;p&gt;
    Here are a bunch of areas that you&#39;ll cover as you start using React for real-world applications:
  &lt;/p&gt;&lt;ul&gt;
    &lt;li&gt;building stateful components and managing UI state&lt;/li&gt;
    &lt;li&gt;explicit communication between React components using callbacks&lt;/li&gt;
    &lt;li&gt;using the &lt;span class=&quot;code&quot;&gt;key&lt;/span&gt; attribute to help React differentiate between sibling elements&lt;/li&gt;
    &lt;li&gt;component lifecycle events, so that you can use external libraries like jQuery plugins&lt;/li&gt;
    &lt;li&gt;making use of the node.js ecosystem through npm and browserify&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p&gt;
    The &lt;a href=&quot;http://facebook.github.io/react/index.html&quot;&gt;official React documentation&lt;/a&gt; has a comprehensive tutorial
    that covers all these topics and more, including in-depth documentation on the working of the library itself.
    You should also watch &lt;a href=&quot;http://www.youtube.com/watch?v=x7cQ3mrcKaY&quot;&gt;Pete Hunt&#39;s excellent introduction to the
    React way of thinking&lt;/a&gt; to get a firm grip on the thinking behind React. I also recommend &lt;a href=&quot;https://twitter.com/ryanflorence&quot;&gt;Ryan Florence&lt;/a&gt;&#39;s
    &lt;a href=&quot;https://github.com/rpflorence/react-training/tree/gh-pages/lessons&quot;&gt;React Training lessons&lt;/a&gt; - the best resource
    on the web that covers real-world React use cases.
  &lt;/p&gt;

  &lt;p&gt;With React, becoming a front-end developer is easier than it has ever been before.
    You can start using it in your projects today - the component based approach means it does not need a big-bang adoption.
  If you have a rich widget that you&#39;d otherwise build using jQuery and or Backbone, give React a go instead.
    You would be surprised at how fast you are able to write clean Javascript UI code, and how happy it makes you.&lt;/p&gt;
&lt;/div&gt;


</content>
  </entry>
  <entry>
    <title>Review: Growing Rails Applications in Practice</title>
    <link href="https://jasimab.com/posts/book-review-growing-rails-applications-in-practice/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/book-review-growing-rails-applications-in-practice/</id>
    <published>2014-09-21T05:50:00Z</published>
    <updated>2014-09-21T05:50:00Z</updated>
    <summary>Long-lived Rails monoliths do not have to collapse into fat models, callback-heavy controllers, and tangled CSS. This book assembles a practical toolbox for keeping them well-structured as both the codebase and team grow.</summary>
    <content type="html">
&lt;p&gt;If you are a Rails developer with a few years under your belt and struggle with the occasional fat model,
  unwieldy controller and go berserk when you see
  the horrible mess of CSS we make, this book is for you.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;

&lt;p&gt;It is published directly by the authors on LeanPub. Here is the link: &lt;a href=&quot;https://leanpub.com/growing-rails&quot;&gt;Growing Rails Applications in Practice&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  What is it about?
&lt;/h3&gt;

&lt;p&gt;
  Rails gives our programs an implicit shape: ActiveRecord models hold domain logic, controllers
  orchestrate communication with the outside world, views hold forms, helpers can talk to views, and then there are CSS
  files. The amount of organization is minimal and works during the early duration of a project, but over time we find
  the control of
  the project slipping from
  our hands: the models become too fat, there is callback hell, the controllers
  seem to do too many things, and the CSS is a complete mess.
&lt;/p&gt;

&lt;p&gt;We develop coping mechanisms as we encounter them and over time a good developer will end up with a toolbox to manage
  this complexity. The authors of this book, Henning Koch and Thomas Eisenbarth, both from Makandra, the makers of
  Rails-LTS and Makandra Cards, have distilled the toolbox they built over years of working with Rails into this book.
&lt;/p&gt;
&lt;p&gt;
  They talk about namespacing - an under-appreciated technique in the Rails world, how to tease out PORO objects from
  ActiveRecord models, how to write clean, consistent controllers, and among others, how to use BEM to structure our
  CSS.
  Some of it reinforces existing wisdom about Rails code organization, and some of it taught me new tricks to manage large
  Rails projects.
&lt;/p&gt;

&lt;h3&gt;Why is it relevant?&lt;/h3&gt;
&lt;p&gt;
  This is a common complaint from developers working on long-lived Rails projects: &lt;em&gt;the codebase is too big, a tangled web
  of
  dependencies that are hard to reason about&lt;/em&gt;. And far too often the proposed solution is to split the large project into smaller ones. Wise advice, but
  it can be an extreme remedy.
&lt;/p&gt;

&lt;p&gt;
  Monolithic applications can go out of hand quickly if we don&#39;t pay attention.
  The reasons can be many: the Active Record pattern, Ruby&#39;s dynamic nature, and the inherent issues with
  monolithic systems. But when done right, monolithic applications can scale in both project complexity and team-size quite a
  bit before they need to be cut up into a finer grained architecture.
&lt;/p&gt;
&lt;p&gt;
  This book teaches how to do exactly that: building well-engineered monolithic systems that can be a delight to work on.
  Everything is described in the context of Rails, but the principles can apply to other programming situations as well.
&lt;/p&gt;

&lt;p&gt;
  Check out the book here: &lt;a href=&quot;https://leanpub.com/growing-rails&quot;&gt;Growing Rails
  Application in Practice&lt;/a&gt;.
&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Tracking time</title>
    <link href="https://jasimab.com/posts/tracking-time/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/tracking-time/</id>
    <published>2014-08-19T05:00:00Z</published>
    <updated>2014-08-19T05:00:00Z</updated>
    <summary>We spend less of the day doing focused work than we think. Tracking time exposes the gap, and the running timer behind Pomodoro can itself change how we work.</summary>
    <content type="html">
&lt;p&gt;What percentage of your daily working hours do you think you actually work?&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    I sometimes ask executives who pride themselves on their memory to put down their guess as to how they spend their
    own time. Then I lock these guesses away for a few weeks or months. In the meantime, the executives run an actual
    time record on themselves. There is never much resemblance between the way these men thought they used their time
    and
    their actual records.
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-footer&quot;&gt;
    -- &lt;a href=&quot;http://www.amazon.com/Effective-Executive-Definitive-Harperbusiness-Essentials/dp/0060833459&quot;&gt;The
    Effective Executive&lt;/a&gt;, Peter Drucker.
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;I can confirm from experience that this is as true for programmers as it was for Drucker&#39;s executives. We spend a lot
  lesser time in productive work than what we imagine we do. Sometimes we manage to get good work done only for half the
  time we think we did. If
  you aren&#39;t tracking your time yet, try it and see whether this holds.
&lt;/p&gt;

&lt;p&gt;
  A few months back I started weighing myself once every day. I didn&#39;t hit a gym
  nor did I enter a diet plan, I did nothing apart from being conscious of my weight on a daily basis. But over time I
  dropped a few kilograms and it has remained there since.
&lt;/p&gt;
&lt;p&gt;
  Measuring and tracking a metric - be it our weight, our expenses, or in this case how we spend
  time, is the first step to optimizing it. And often, just measuring alone can do the trick.
&lt;/p&gt;

&lt;p&gt;
  The Pomodoro technique is famous among programmers as an effective way to keep ourselves fresh and productive.
  It divides your day
  into intervals of 25-minute work followed by a 5-minute break. The crux of Pomodoro however is not the specific time
  intervals you choose,
  nor that you take a break often, but the fact that a timer is running when you work.
  A timer focuses you like nothing else can. A quick look at the email or a peek at your Twitter feed
  are out of question while you are timing yourself. Simple but pretty effective.
&lt;/p&gt;

&lt;p class=&quot;related-post&quot;&gt;If you enjoyed this post, you might find &lt;a href=&quot;https://jasimab.com/posts/software-estimation-for-great-fun-and-profit.html&quot;&gt;Software Estimation for great fun and profit&lt;/a&gt; interesting.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Software estimation for great fun and profit</title>
    <link href="https://jasimab.com/posts/software-estimation-for-great-fun-and-profit/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/software-estimation-for-great-fun-and-profit/</id>
    <published>2014-08-14T13:35:00Z</published>
    <updated>2014-08-14T13:35:00Z</updated>
    <summary>A reliable estimate is not a number pulled from intuition; it emerges from a concrete plan. Planning work into actionable steps surfaces assumptions, improves feedback, and makes the eventual implementation calmer and more predictable.</summary>
    <content type="html">
&lt;p&gt;
  Have you seen a well-oiled agile team go about their work? It is a pleasure to watch. They have a rhythm for software
  delivery &amp;dash; the programmers work in a sustainable pace and they meet business goals. I think this is because agile
  project management does two things right: story points for relative sizing and predicting future performance by using
  past averages (velocity and volatility). These two methods account for the fact that &lt;em&gt;individual estimates are
  fallible&lt;/em&gt; and work around it.
&lt;/p&gt;

&lt;p&gt;
  But not all teams are agile. One reason is that customers don&#39;t understand how unpredictable software development can
  be.
&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p&gt;
    &quot;&lt;em&gt;when will you ship?&lt;/em&gt;&quot; asks the customer.
  &lt;/p&gt;

  &lt;p&gt;
    The requirements are a bunch of implied expectations scattered over many email threads. Do we fall into this trap?
  &lt;/p&gt;

  &lt;p&gt;
    &quot;&lt;em&gt;That is a trick question&quot;&lt;/em&gt;, says you.
    &lt;em&gt;&quot;Imagine that you decide to &lt;a href=&quot;http://www.michaelrwolfe.com/2013/10/19/50/&quot;&gt;take a hike on the coast from San
      Francisco
      to Los Angeles...&lt;/a&gt;&lt;/em&gt;&quot;
  &lt;/p&gt;

  &lt;p&gt;
    But you are interrupted.
  &lt;/p&gt;

  &lt;p&gt;
    &lt;em&gt;&quot;Hold on a sec, I&#39;m not hiking anywhere! Just give me a date, okay?&quot;&lt;/em&gt;
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  Thus begins a long conversation, the first, in a series of long
  conversations.
&lt;/p&gt;&lt;p&gt;
  The other reason for projects to not use common-sense project management is that they simply can&#39;t.
  They may be in constant flux to allow any rhythm to take hold and their timelines too short to even start calculating
  a reliable average velocity. Real world, things hairy.
&lt;/p&gt;

&lt;p&gt;
  We have to up our game to work well in those environments. Without the luxury of sensible agile practices, we will
  have to
  get better at estimating individual tasks. The challenge then is to deliver software predictably without a working
  process to do so.
  It is an interesting challenge, and can even come with a few benefits. In this post, I&#39;ll argue that done right, estimating
  individual tasks well is a great productivity booster and makes software development a bit more fun.
&lt;/p&gt;

&lt;p&gt;
  But first, we have to understand what we are up against.
&lt;/p&gt;

&lt;h3&gt;Estimates are commitments to ourselves&lt;/h3&gt;

&lt;p&gt;
  Is there a wall-poster which says &lt;em&gt;&lt;a href=&quot;http://cwd.dhemery.com/2003/08/estimates_are_not_commitments/&quot;&gt;estimates
  are not commitments&lt;/a&gt;&lt;/em&gt;? We should get one. We should read it in the mornings and evenings, before food and after
  food.
  Because the first casualties of an estimate are us, the developers.
&lt;/p&gt;

&lt;p&gt;
  You are working on a story that you had estimated to be a 1-pointer. It typically takes you a day to finish a point,
  but this one is taking longer.
  Anxiety creeps in, but you don&#39;t recognize it yet: &lt;em&gt;this story is not supposed to take this long, ergo, I&#39;m too
  slow&lt;/em&gt;.
&lt;/p&gt;
&lt;p&gt;
  We become wedded to the estimate, an arbitrary number &amp;dash; a guess made from incomplete data, and it worries us when
  reality doesn&#39;t match up. This is &quot;anchoring&quot;.
&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    a cognitive bias that describes the common human tendency to rely too heavily on the first piece of information
    offered (the &quot;anchor&quot;) when making decisions.
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    Various studies have shown that anchoring is very difficult to avoid. For example, in one study students were given
    anchors that were obviously wrong. They were asked whether Mahatma Gandhi died before or after age 9, or before or
    after age 140. Clearly neither of these anchors can be correct, but the two groups still guessed significantly
    differently (average age of 50 vs. average age of 67)
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-footer&quot;&gt;
    -- &lt;a href=&quot;http://en.wikipedia.org/wiki/Anchoring&quot;&gt;Anchoring&lt;/a&gt;, Wikipedia.
  &lt;/p&gt;
  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    Dan Ariely has run significant experiments on Anchoring, about which he talks in his engaging book &lt;a href=&quot;http://www.amazon.in/Predictably-Irrational-Revised-Expanded-Edition/dp/0061353248&quot;&gt;Predictably Irrational&lt;/a&gt;.
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  The anxiety induced by anchoring is not an articulated thought. It is a nagging thread in the back of
  the mind chipping into the joy of our work.
&lt;/p&gt;

&lt;p&gt;
  But it is a silly game that the mind plays and we can eradicate it by simply being aware of it. That is both easy
  and hard. Easy because once recognized, the worry is disposed off easily, and hard because mindfulness require
  an awful lot of practice.
&lt;/p&gt;

&lt;p&gt;
  We could have produced an accurate estimate in the first place and avoided this anxiety. But before we get to that, we
  have to look at what estimates do to our customers.
&lt;/p&gt;

&lt;h3&gt;Estimates are commitments to our customers&lt;/h3&gt;

&lt;p&gt;Let me illustrate. You are asked for an estimate on when a big feature can be released, and the following
  happens:&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p&gt;&lt;em&gt;You think:&lt;/em&gt; The stories total to around 45 points. Our average weekly velocity is 16 and volatility is
    negligible. We still have some nice buffer if I get four weeks.&lt;/p&gt;

  &lt;p&gt;&lt;em&gt;You say:&lt;/em&gt; if &lt;strong&gt;everything goes well&lt;/strong&gt;, our &lt;strong&gt;projection&lt;/strong&gt; tells us that &lt;strong&gt;it
    looks like&lt;/strong&gt; we &lt;strong&gt;should be able&lt;/strong&gt; to ship by end of December.&lt;/p&gt;

  &lt;p&gt;&lt;em&gt;Your customer hears:&lt;/em&gt; bla bla bla, bla bla, &lt;strong&gt;end of December&lt;/strong&gt;.&lt;/p&gt;

  &lt;p&gt;&lt;em&gt;They are thinking:&lt;/em&gt; Fred, our customer, has been asking for this feature for a while now, and their account
    has been shaky of late. I&#39;ll promise him the feature a few days before Christmas. The team will work harder (they
    always do, longer
    and on weekends) when I tell them how dire the situation is.&lt;/p&gt;

  &lt;p&gt;&lt;em&gt;What actually happens:&lt;/em&gt; The customer checks in on the progress by the end of the first week. You just
    knocked off a 3-pointer faster than you expected. Your confidence is palpable and it shows. Customer is relieved,
    things are going better than plan.

  &lt;/p&gt;&lt;p&gt;But Monday morning welcomes you with bad news. Your datatable widget&#39;s filtering option isn&#39;t working &amp;dash; a hitherto
    unknown bug.
    It seems fixed in a later version, but to use it, you&#39;ll have to upgrade your version of Angular, which simply can&#39;t
    be done now.
    There is a StackOverflow question with the exact problem you face, but it has zero answers.
    Your luck has run out, but you are no timid programmer. You roll your sleeves up and jump into the library code
    and fix it. But the delay has a cascading effect, and you are able to ship only by January mid.&lt;/p&gt;

  &lt;p&gt;That didn&#39;t go well. The feature was not a show-stopper for Fred, he was simply keeping us on our toes. However, we
    did promise him a timeline, and optimistic promises have a way of spreading, so he in-turn promised his VP and it
    became a big deal. He had to break his promise, which isn&#39;t boding well for your business.&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;The moral of the story is that no matter how many ifs, buts and other caveats we insert, the customer will treat our
  estimates with an inappropriately high level of certainty.
&lt;/p&gt;

&lt;p&gt;There are a few things we could have improved on though. At least next time, we&#39;ll:&lt;/p&gt;

&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;
    Re-iterate that &lt;em&gt;estimates are not commitments&lt;/em&gt;.
  &lt;/li&gt;
  &lt;li&gt;
    Ask what our estimates are going to be used for. We should always know the full implication of the numbers we
    provide.
  &lt;/li&gt;
  &lt;li&gt;
    Be careful to not amp up expectation in others because today&#39;s good weather does not translate into tomorrow&#39;s.
    But we respect our business owners and understand that they are capable of dealing with reality. We keep them aware
    of slips in the plan as they happen. We remain stoic in the face of both progress and setback.
  &lt;/li&gt;
  &lt;li&gt;
    Not work on weekends. We worked on weekends, and it didn&#39;t help. It never does, in the long run. Don&#39;t work on weekends, and don&#39;t give
    optimistic
    estimates thinking you would.
  &lt;/li&gt;
  &lt;li&gt;
    Relax and reflect. When the going gets tough, we forget to think. The stress creates adrenaline, and it clouds our judgement. The datatable
    filtering was not a show-stopper. It could have waited and we could have shipped on time, only
    if we had the presence of mind to consider the possibility.
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
  Our estimates are going to come back and bite us &amp;dash; that is the nature of the beast &amp;dash; we ourselves become bound to it
  through anchoring and our
  customers become bound to it because they need a number to plan things around.
&lt;/p&gt;

&lt;h3&gt;Casual estimates&lt;/h3&gt;
&lt;p&gt;
  Casual conversations are the minefield when it comes to dangerously wrong estimates:
&lt;/p&gt;
&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p&gt;
    &lt;em&gt;&quot;So, how hard is this feature? Is it like an hour&#39;s worth of work, or a few?&quot;&lt;/em&gt;
  &lt;/p&gt;

  &lt;p&gt;
    And you say, &lt;em&gt;&quot;definitely not a quick one. A day, probably.&quot;&lt;/em&gt;
  &lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;
  Stop right there and take note:
&lt;/p&gt;
&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;The customer did your job for you and supplied an estimate in the question itself. In fact they started from the
    lowest possible number, putting pressure on you to
    anchor on it. That is negotiation. &lt;em&gt;Estimation should never be a negotiation&lt;/em&gt;.
  &lt;/li&gt;
  &lt;li&gt;We thought this was a casual question and gave a casual (aka wrong) answer. But when you get around to actually
    estimating this, telling the customer
    that the earlier estimate was wrong is akin to backtracking on a commitment. It wouldn&#39;t matter that it was a
    ballpark number, that detail
    will be forgotten by both the customer and you. Casual promises are promises nonetheless, so don&#39;t make them.
  &lt;/li&gt;

  &lt;li&gt;Have conversations based on time instead of story points. Story points are a useful abstraction, try to stick to it if
    you can.
    (&lt;a href=&quot;http://pm.stackexchange.com/questions/2765/why-use-story-points-instead-of-hours-for-estimating&quot;&gt;Why use
      story points instead of hours for estimating&lt;/a&gt;).
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;

&lt;/p&gt;

&lt;p&gt;Now the same conversation would go like this:&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p&gt;
    &lt;em&gt;&quot;So, how hard is this feature? Is it like an hour&#39;s worth of work, or a few?&quot;&lt;/em&gt;
  &lt;/p&gt;

  &lt;p&gt;
    And you would take a moment to reflect on it, and say:
  &lt;/p&gt;

  &lt;p&gt;
    &lt;em&gt;&quot;I am not able to say off the top of my head. I&#39;ll estimate this story, probably need an hour to do that, and
      get back
      to you.&quot;&lt;/em&gt;
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  This is obvious but overlooked &amp;dash; the accuracy of an estimate is proportional to the time &amp; effort you spend on it.
  The more you invest, the better the estimate. And no matter how &lt;em&gt;quick and approximate&lt;/em&gt;
  an estimate your customer needs, you cannot afford to be lazy and put out a number that you don&#39;t have maximum
  confidence in.
&lt;/p&gt;

&lt;p&gt;Estimation is a high-risk activity and should be treated with the gravity it deserves. Casual estimation
  underplays
  the risk involved and the time it takes to come up with a reliable estimate. It makes us rush through and produce
  unreliable numbers which ultimately leaves everyone worse off.
&lt;/p&gt;

&lt;p&gt;
  We should explicitly allocate time for estimation. This conveys the time &amp; cognitive
  effort required to do it and ensures that stakeholders think through what they really need before they ask us to spend
  time on estimating them.
&lt;/p&gt;

&lt;p&gt;Now the question becomes what do we do with all that time we allocated for estimation? To answer which, I have to
  first hate on fuzziness.&lt;/p&gt;

&lt;h3&gt;Fuzziness&lt;/h3&gt;
&lt;p&gt;
  Fuzziness is a knot in the stomach. I feel it when I estimate a story without thinking it through. It is my body
  telling me that I&#39;m painting myself into a corner. But fuzzy is easy; we see a story and put a number to it without
  expending the mental energy to articulate it.
&lt;/p&gt;

&lt;p&gt;
  We say this story is a 1-pointer or a 2-pointer based on a hazy intuitive notion. This is fuzzy, it doesn&#39;t work well
  when you have a short-term delivery horizon. We tend to underestimate the task at hand and overestimate our abilities,
  and no matter how many times we have been wrong, we fool ourselves that we can do better this time. We are also people
  pleasers, we hate giving bad news and tend to default on the most optimistic numbers.
&lt;/p&gt;

&lt;p&gt;Getting better at estimation involves replacing fuzzy estimates with concrete data. It is hard to defend
  estimates made based on gut feeling, but data can speak for itself. Data doesn&#39;t people-please &amp;dash; it gives us the
  conviction needed to
  communicate well and set the right expectations with our customers.
&lt;/p&gt;

&lt;p&gt;We defeat fuzziness by concretizing, aka, planning a task to its actionable items.&lt;/p&gt;

&lt;h3&gt;Plan, don&#39;t estimate.&lt;/h3&gt;

&lt;p&gt;
  &lt;em&gt;We have to know what we are estimating to be able
  to estimate it.&lt;/em&gt; Sounds obvious? It is not. We often don&#39;t know the specifics of a story when we estimate it;
  we simply do a high-level sizing and throw a relative number. We keep aside the figuring out of what needs to be done
  for the later implementation stage.
&lt;/p&gt;

&lt;p&gt;
  The reason we default to such fuzzy estimation has a lot to do with the economics of energy of the
  &lt;a href=&quot;http://en.wikipedia.org/wiki/Prefrontal_cortex&quot;&gt;prefrontal cortex&lt;/a&gt;. This is the part of our brains that is
  responsible for decision making, prioritization and deliberate thought.
&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    The prefrontal cortex is the biological seat of your conscious interactions with the world. It’s the part of your
    brain central to thinking things through, instead of being on “autopilot” as you go about your life.
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    The prefrontal cortex holds the contents of your mind at any one point. It’s where we hold
    thoughts that are not being generated from external sources or from the senses. We ourselves are generating them.
  &lt;/p&gt;

  &lt;p&gt;
    Conscious mental activities chew up metabolic resources, the fuel in your blood, significantly faster than automatic
    brain functions such as keeping your heart beating or your lungs breathing.
    The stage (&lt;em&gt;prefrontal cortex&lt;/em&gt;) requires a lot of energy to function. It’s as if the lights are a long way
    back from the stage, so you need a lot of them, all on full, to see the actors. To make matters worse, the power to
    light the stage is a limited resource, decreasing as you use it, a bit like a set of batteries that constantly need
    recharging.
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-footer&quot;&gt;
    - &lt;a href=&quot;http://www.amazon.in/Your-Brain-Work-Strategies-Distraction/dp/0061771295&quot;&gt;Your Brain At
    Work&lt;/a&gt;, David Rock.
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;Deliberate thinking is a formidable productivity booster (duh!). But generating thought is energy intensive.
  So we resist it and rely on gut feeling, which is simply the brain cruising on auto-pilot. It is not an effective
  strategy. Here, look at what
  some upfront planning did to Rachel Aaron, a writer (emphasis hers):

&lt;/p&gt;&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    Looking back, it was so simple I feel stupid for not thinking of it sooner. If you want to write faster, the first
    step is to &lt;strong&gt;know what you&#39;re writing before you write it&lt;/strong&gt;. I&#39;m not even talking about macro plot
    stuff, I mean working
    out the back and forth exchanges of an argument between characters, blocking out fights, writing up fast
    descriptions. Writing this stuff out in words you actually want other people to read, especially if you&#39;re making
    everything up as you go along, takes FOREVER. It&#39;s horribly inefficient and when you get yourself in a dead end, you
    end up trashing hundreds, sometimes thousands of words to get out. But jotting it down on a pad? Takes no time at
    all. If the scene you&#39;re sketching out starts to go the wrong way, you see it immediately, and all you have to do is
    cross out the parts that went sour and start again at the beginning. That&#39;s it. No words lost, no time wasted. It
    was god damn beautiful.
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-contents&quot;&gt;
    Every writing session after this realization, I dedicated five minutes (sometimes more, never less) and wrote out a
    quick description of what I was going to write. Sometimes it wasn&#39;t even a paragraph, just a list of this happens
    then this then this. This simple change, these five stupid minutes, boosted my wordcount enormously. I went from
    writing 2k a day to writing 5k a day within a week without increasing my 5 hour writing block. Some days I even
    finished early.
  &lt;/p&gt;

  &lt;p class=&quot;quoted-text-footer&quot;&gt;
    - &lt;a href=&quot;http://thisblogisaploy.blogspot.in/2011/06/how-i-went-from-writing-2000-words-day.html&quot;&gt;How
    I Went From Writing 2,000 Words a Day to 10,000 Words a Day&lt;/a&gt;, Rachel Aaron.
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  She managed to increase her daily output from 2000 words to 10,000 words a day, mostly thanks to planning. Programming
  is also in its basic form, just writing. There are many lessons to be learnt from that craft,
  and this one is a case in point. Instead of wallowing in the code for hours &amp;dash; going where the code takes us, ending up
  in blind alleys and
  backtracking, and getting lost in the trees and losing sight of the forest, a little bit of thought &amp; planning can do
  wonders for our days
  as programmers.
&lt;/p&gt;

&lt;p&gt;
  The earlier we plan, the better. In fact, going into as much detail of a story as we possibly can before we estimate
  is the simplest way to increase the accuracy of our estimates. It will also bring out any hidden assumptions before we
  give out invalid estimates, or worse still, get neck deep into implementing the wrong thing.
&lt;/p&gt;

&lt;p&gt;Implementation becomes a breeze once we have a solid plan to follow. It is a beautiful day of writing code when that
  happens.&lt;/p&gt;

&lt;h3&gt;Estimate as a by-product of a plan&lt;/h3&gt;

&lt;p&gt;So what has planning got to do with estimation? It obviously makes for a more enjoyable programming experience.
  But it also brings our estimates to ninja precision. That is the whole point of this post.
&lt;/p&gt;

&lt;p&gt;
  Estimate is a by-product of a plan. It can&#39;t help but jump out at us when we look at a well thought out, written
  plan. At a sufficiently fine level of granularity, we would have the very implementation steps in the plan,
  and to come up with an accurate estimate, all we need to answer is &lt;strong&gt;&lt;em&gt;how hard is it to convert this into
  code&lt;/em&gt;&lt;/strong&gt;.
&lt;/p&gt;

&lt;p&gt;Drilling into this level of granularity might not be practical in many large agile environments. There will be too
  many people and stories for us to go into depth for each of them. But remember we are not talking about those
  environments.
  They have their own strategies which we cannot afford to have.
&lt;/p&gt;

&lt;p&gt;
  However, it is easy to make mistakes even in the relative sizing of stories as is done in a pure agile practice. Some
  of the stories turn out to be much larger than we anticipated. That is fine, the process accounts for such errors. But
  the feedback that the story was not estimated correctly is a lot more useful when we have a plan backing the estimate.
  Without a plan, the estimate is a one dimensional number, and that is all we are left with to evaluate any feedback
  on. But with a plan, the feedback is more useful &amp;dash; it is easier to find out what went wrong in our assumptions and
  account for that when estimating similar stories in the future.
&lt;/p&gt;

    &lt;p&gt;
To conclude, plan early, plan often, plan deep. And good things will follow.
    &lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Getting started with AngularJS in Rails</title>
    <link href="https://jasimab.com/posts/angular-rails/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/angular-rails/</id>
    <published>2014-01-31T14:40:00Z</published>
    <updated>2014-01-31T14:40:00Z</updated>
    <summary>For a rich internal Rails app, AngularJS works best when the client owns the interface instead of straddling server- and client-rendered pages. The article turns that choice into practical guidance for routing, serialization, forms, directives, and debugging.</summary>
    <content type="html">
&lt;p&gt;
  I have found that emails are how I get started with writing anything substantial that people find useful. The
  following post originated as an email to the &lt;a href=&quot;http://lrug.org&quot;&gt;London Ruby Usergroup&lt;/a&gt; when someone asked
  for pointers in integrating AngularJS with Rails. It was written in a hurry and is presented without any modification.
  Read on to listen to what I have to say about building an AngularJS project within Rails. I welcome your thoughts.
&lt;/p&gt;

&lt;h3&gt;General&lt;/h3&gt;

&lt;p&gt;
&lt;/p&gt;&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;Use Coffeescript.&lt;/li&gt;
  &lt;li&gt;Start with Egghead.io. Read &lt;a href=&quot;http://shop.oreilly.com/product/0636920028055.do&quot;&gt;AngularJS&lt;/a&gt; by Brad
    Green, Shyam Seshadri. Spend a few hours and skim it cover-to-cover at least once. Angular documentation on the web
    is quite fragmented; a book is the best way to begin learning Angular.
  &lt;/li&gt;
  &lt;li&gt;If you aren&#39;t familiar with Underscore.js already, go through it. Add it to the project as soon as you begin.
    You&#39;ll need it.
  &lt;/li&gt;
  &lt;li&gt;Drop &lt;span class=&quot;code&quot;&gt;gem &#39;ng-rails-csrf&#39;&lt;/span&gt; into your Gemfile to make Angular AJAX requests play well with Rails CSRF
    protection.
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;

&lt;h3&gt;Directives&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;Some material on the web might lead you to think that a deep understanding of Directives is crucial to ‘get’
    Angular. But for a beginner, the important thing is to just have fun doing things the Angular way (it is loads of
    fun, let me assure you). The basic directives Angular provides (eg: ng-repeat and ng-show) can go a surprisingly
    long way. Worry about transclusion, $compile, $digest and other arcane incantations only after you get comfortable
    with the basics.
  &lt;/li&gt;
  &lt;li&gt;One reason for you to write a directive is when you need to use existing widgets. A lot of popular widgets already
    have Angular wrappers. For example, we use the &lt;a href=&quot;https://github.com/angular-ui/ui-select2&quot;&gt;select2
      wrapper&lt;/a&gt; for multi-select.
    There is also &lt;a href=&quot;http://mgcrea.github.io/angular-strap/&quot;&gt;AngularStrap&lt;/a&gt; with a bunch of nice components that
    wraps over Twitter Bootstrap. The v1 (&lt;a href=&quot;http://mgcrea.github.io/angular-strap/1.0/&quot;&gt;http://mgcrea.github.io/angular-strap/1.0/&lt;/a&gt;)
    version has Datepicker and Timepicker which isn&#39;t available in the new version yet.
  &lt;/li&gt;

  &lt;li&gt;You would hit a point when off-the-shelf directives won’t be enough and you&#39;d want to do something that requires
    DOM manipulation. That would be a good time to start digging into Directives. You can also start exploring
    Directives when you start seeing patterns in your controllers that can be extracted out into reusable components.
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;

&lt;h3&gt;Serialization&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;We use &lt;a href=&quot;https://github.com/rails-api/active_model_serializers&quot;&gt;ActiveModel::Serializer&lt;/a&gt;. It is a
    safe choice.
  &lt;/li&gt;

  &lt;li&gt;Pay close attention to what you include in each serializer. Here is the obvious thing: you can put a bunch of
    &lt;span class=&quot;code&quot;&gt;has_many&lt;/span&gt; in your User model, and if you keep doing that for other objects, a &lt;span class=&quot;code&quot;&gt;render json:
      User.all&lt;/span&gt; will end up sending your entire db graph to the client. 
  &lt;/li&gt;

  &lt;li&gt;
    We implement a base serializer for most entities with some basic fields and no associations. When we need more
    data/associations, we sub-class them for that specific use case. Discourse follows a similar style - &lt;a href=&quot;https://github.com/discourse/discourse/tree/master/app/serializers&quot;&gt;https://github.com/discourse/discourse/tree/master/app/serializers&lt;/a&gt;
  &lt;/li&gt;

  &lt;li&gt;Try not to do any decoration on the server side; it is tempting with all the view helper goodness Rails provides,
    but then you are splitting logic between client and server and it causes all sorts of headaches. You can use Angular
    filters as client-side helpers on some occasions. For example,
    &lt;span class=&quot;code&quot;&gt; {{ start_time | date }} &lt;/span&gt;
    prints out nicely formatted dates. 
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;


&lt;h3&gt;Forms, validations and POJO form objects&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;
    Angular gives you validation attributes like ng-required, ng-minlength, ng-maxlength etc. on all form INPUTs. For
    simple use cases, this is the best way to go. But for a complex form, we ended up building an ActiveModel-like POJO
    Form Object to hold validation information, and for doing some slight transformations on the data before submission.
    We bound this object to the scope and removed a lot of clutter from our controllers that had begun to get bloated.
    We have to see how this pans out in the long run; I can give code snippets if you wish.
  &lt;/li&gt;

  &lt;li&gt;
    When I introduced Angular to our Rails project that was already under development, I tried to minimize the amount
    of change required by trying to keep form POSTs as they were.
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;

&lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;text&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-model&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;post.title&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;post[title]&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;submit&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;p&gt;&lt;/p&gt;


&lt;p&gt;It worked for the most part, but we ran into some edge cases that wasted a lot of time. That was when I learned to
  let go and fully embrace the Angular way. We switched over to something like this:
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;text&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-model&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;post.title&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;post[title]&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-click&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;submitForm()&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;And the controller:&lt;/p&gt;

&lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;angular&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;myApp&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;controller &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;postCtrl&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;$scope&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;$http&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;$state&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;flash&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token variable&quot;&gt;$scope&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;$http&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;$state&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; flash&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token variable&quot;&gt;$scope&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;submitForm &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token variable&quot;&gt;$http&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      Routes&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;posts_path&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token variable&quot;&gt;$scope&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;post           &lt;span class=&quot;token comment&quot;&gt;# this is the ng-model hash we bound the input boxes to.&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;success&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; status&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token variable&quot;&gt;$state&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;go&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;posts.show&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;post_id&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;error&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; status&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;message&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
        flash&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;error &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&#39;message&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt;
        flash&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;error &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Could not create Post. &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;token content&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# `flash`  is from https://github.com/wmluke/angular-flash.&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# $state.go is ui-router. https://github.com/angular-ui/ui-router. More on that later.&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;# we use JSRoutes to access Rails routes from JS. Quite useful. https://github.com/railsware/js-routes/&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;p&gt;&lt;/p&gt;

&lt;p&gt;The above code isn&#39;t ideal. You will be better off putting the &lt;span class=&quot;code&quot;&gt;$http.post&lt;/span&gt; inside an Angular service.
  This looks like a good post describing that:
  &lt;a href=&quot;http://sravi-kiran.blogspot.in/2013/03/MovingAjaxCallsToACustomServiceInAngularJS.html&quot;&gt;http://sravi-kiran.blogspot.in/2013/03/MovingAjaxCallsToACustomServiceInAngularJS.html&lt;/a&gt;.
&lt;/p&gt;

&lt;h3&gt;Rails+Angular&lt;/h3&gt;

&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;Go all the way in. Don’t try to keep a mix of Angular and non-Angular pages. Except for Devise, all our pages are
    rendered client-side. We don&#39;t have to worry about SEO since this is an internal app.
  &lt;/li&gt;
  &lt;li&gt;Use &lt;a href=&quot;https://github.com/angular-ui/ui-router&quot;&gt;ui-router&lt;/a&gt;, not the one that comes with Angular. The
    ui-router README could be confusing, but like most of Angular documentaiton, it becomes obvious in hindsight if you
    persevere.
  &lt;/li&gt;
  &lt;li&gt;We keep everything together in the same Rails project. Here is a rough structure:
  &lt;/li&gt;
&lt;/ul&gt;



&lt;div class=&quot;post-angular-rails-code-structure&quot;&gt;
  &lt;p class=&quot;code-caption&quot;&gt;routes.rb:&lt;/p&gt;
  &lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;root ‘base&lt;span class=&quot;token comment&quot;&gt;#angular’&lt;/span&gt;
resources &lt;span class=&quot;token symbol&quot;&gt;:posts&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token symbol&quot;&gt;only&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:index&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p class=&quot;code-caption&quot;&gt;app/views/base/angular.html.erb:&lt;/p&gt;
  &lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-app&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;myApp&lt;span class=&quot;token punctuation&quot;&gt;&#39;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ui-view&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p class=&quot;code-caption&quot;&gt;posts_controller.rb:&lt;/p&gt;
  &lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;PostsController&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; ApplicationController
  respond_to &lt;span class=&quot;token symbol&quot;&gt;:json&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;token method-definition&quot;&gt;&lt;span class=&quot;token function&quot;&gt;index&lt;/span&gt;&lt;/span&gt;
    render json&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; Post&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;all&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token symbol&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p class=&quot;code-caption&quot;&gt;app/assets/javascripts/routes.coffee.erb:&lt;/p&gt;
  &lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-coffeescript&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-coffeescript&quot;&gt;angular&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;myApp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;run&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;$rootScope&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; $state&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; $stateParams&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  $rootScope&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;$state &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; $state
  $rootScope&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;$stateParams &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; $stateParams

angular&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;myApp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;config&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;$stateProvider&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; $urlRouterProvider&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;# The default route&lt;/span&gt;
  $urlRouterProvider&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;when&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/posts/list&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  $stateProvider
    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;posts&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/posts&quot;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;controller&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;postsRootCtrl&quot;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;template&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&amp;lt;div ui-view&gt;&amp;lt;/div&gt;&#39;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;abstract&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;true&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;posts.index&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/list&quot;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;controller&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;postsIndexCtrl&quot;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;templateUrl&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&amp;lt;%= asset_path(&#39;posts/index.html&#39;) %&gt;&quot;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;postsPromise&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;$http&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
          $http&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Routes&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;posts_path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p class=&quot;code-caption&quot;&gt;app/assets/javascripts/posts.js.coffee:&lt;/p&gt;
  &lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-coffeescript&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-coffeescript&quot;&gt;angular&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;myApp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;controller &lt;span class=&quot;token string&quot;&gt;&#39;postsCtrl&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;postsPromise&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;$scope&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;$http&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;postsPromise&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; $scope&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; $http&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  $scope&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;posts &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; postsPromise&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;data&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;p&gt;&lt;/p&gt;

  &lt;p class=&quot;code-caption&quot;&gt;app/assets/templates/index.html&lt;/p&gt;
&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% raw %}
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ng-repeat&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;post in posts&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    {{post.title}}
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    {{post.body}}
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
{% endraw %}&lt;/code&gt;&lt;/pre&gt;

&lt;/pre&gt;
&lt;/div&gt;

&lt;h3&gt;Quirks and bugs&lt;/h3&gt;

&lt;p&gt;
&lt;/p&gt;&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;It is worth keeping in mind that in JS &lt;span class=&quot;code&quot;&gt;{} == {}&lt;/span&gt; is false, since comparisons are by object
    identity, not by object value. You can do explict comparison using &lt;span class=&quot;code&quot;&gt;Angular.equals&lt;/span&gt; when you need it. But
    in some cases Angular does an implicit comparison, for which it doesn&#39;t use Angular.equals. For example, if you try
    loading a page with a bunch of pre-selected radio-buttons, if their values are JS Objects (Hash), Angular won&#39;t
    pre-select them since the comparison will fail. This is not an issue if your values are strings/numbers.&lt;/li&gt;
  &lt;li&gt;JS treats the keys of all objects as strings. &lt;span class=&quot;code&quot;&gt;a={1: &quot;Hello&quot;}; _.each(a, (value, key) -&amp;gt;
    console.log(typeof key))&lt;/span&gt;. If your server sends Hashes whose keys are numeric ids, they&#39;ll end up in JS with
    string ids.&lt;/li&gt;
  &lt;li&gt;A quick and dirty way to inspect an Angular model is to drop this in your Angular view template:

&lt;pre&gt;
&lt;pre class=&quot;language-html&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% raw %}
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;pre&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  {{ post | json }}
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;pre&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
{% endraw %}&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
  &lt;/li&gt;
  &lt;li&gt;There is also Batarang, a Chrome plugin which lets you inspect your scope interactively. But I&#39;ve found it to
    cause my pages to misbehave in certain cases. I these days use &lt;a href=&quot;https://gist.github.com/mzgol/7893061&quot;&gt;angular-chrome-debug&lt;/a&gt;,
    which is quite light-weight. I load this script in my app in development env so that I don&#39;t have to go thru Chrome
    Snippets everytime.&lt;/li&gt;
  &lt;li&gt;Angular has &lt;span class=&quot;code&quot;&gt;Angular.copy&lt;/span&gt; for deep copy when you need it - &lt;a href=&quot;https://github.com/angular/angular.js/blob/master/src/Angular.js#L725&quot;&gt;https://github.com/angular/angular.js/blob/master/src/Angular.js#L725&lt;/a&gt;.
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;


&lt;p&gt;Well, that&#39;s mostly it. I am generally liking building rich UIs with Angular and wouldn&#39;t go back to building for the
  web without using data-binding.&lt;/p&gt;

&lt;p&gt;Please keep in mind that the structure I described is working well for our app, which is not meant for public
  consumption. You might want to look at keeping your Angular and Rails project separately and utilize JS build tools
  like Bower, Yeoman and Grunt if your app needs that.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>15 Things for a Ruby Beginner</title>
    <link href="https://jasimab.com/posts/meta_introduction_to_ruby/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/meta_introduction_to_ruby/</id>
    <published>2012-05-30T05:40:00Z</published>
    <updated>2012-05-30T05:40:00Z</updated>
    <summary>Learning Ruby is less about memorizing a checklist than developing its habits: use the ecosystem, think in objects, embrace blocks and immutability, and prefer readable code. The concepts settle through practice, pairing, and reading good code.</summary>
    <content type="html">&lt;p&gt;&lt;i&gt;The following is a post I had recently sent the &lt;a href=&quot;https://groups.google.com/group/bangalorerug&quot;&gt;Bangalore
  Ruby User Group&lt;/a&gt;. It has been slightly modified to address a larger audience.&lt;/i&gt;&lt;/p&gt;

&lt;p&gt;
  There were many Ruby beginners in last week&#39;s meetup, and the common question we heard was &#39;after the very basics,
  what next?&#39;&lt;/p&gt;

&lt;p&gt;The best way to learn Ruby best practices is to pair with an experienced dev; the way I learned was by inheriting a
  reasonably small, but well-written codebase from an amazing colleague. In the absence of either, here is a checklist
  of 15 things (since &#39;N things that you need to know about X&#39; is the in-thing these days!) that I&#39;d recommend a Ruby
  beginner to consider:
&lt;/p&gt;


&lt;h3&gt;1. The very basics &lt;/h3&gt;
&lt;p&gt;
  Our very own &lt;a target=&quot;_blank&quot; href=&quot;http://rubymonk.com&quot;&gt;rubymonk.com&lt;/a&gt; has a Ruby primer which was written for
  exactly this purpose; we open our inbox everyday to gushing feedback from people who&#39;ve found it to be a great way to
  learn Ruby. Try it and let us know how it goes!
&lt;/p&gt;

&lt;p&gt;
  &lt;a target=&quot;_blank&quot; href=&quot;http://tryruby.org&quot;&gt;tryruby.org&lt;/a&gt; also has a basic introduction to Ruby, and has been
  around longer. &lt;a target=&quot;_blank&quot; href=&quot;http://rubykoans.com/&quot;&gt;Edgecase&#39;s Ruby Koan&lt;/a&gt; is an interesting concept, and
  covers the language both in breadth and depth, and is a very strong recommendation. It should take you anywhere
  between 5-10 hours to finish all of the Koans. Do try it!
&lt;/p&gt;&lt;p&gt;

&lt;/p&gt;&lt;p&gt;
  I have heard good things about &lt;a target=&quot;_blank&quot; href=&quot;http://ruby.learncodethehardway.org/&quot;&gt;Learn Ruby the
  Hardway&lt;/a&gt;, but haven&#39;t tried it out myself. Okay, I just skimmed through portions of it and I&#39;m not really happy -
  LRTH seems to be mostly a line-to-line translation of Python code to Ruby. It uses&amp;nbsp; &#39;while&#39; loop in places where
  equivalent Ruby idioms (Enumerables) would have made more sense. Also there is no mention of blocks, metaprogramming
  and duck-typing, which pretty much is a deal-breaker for me. But to be fair, the target audience for LRTH seem to be
  non-programmers for whom the concept of loops and objects would be new, and for them it does the job very well.
&lt;/p&gt;

&lt;p&gt;
  Wait, have you read Why&#39;s Poignant Guide to Ruby? If this is the first time you&#39;re hearing about why the lucky stiff,
  read &lt;a target=&quot;_blank&quot; href=&quot;http://www.smashingmagazine.com/2010/05/15/why-a-tale-of-a-post-modern-genius/&quot;&gt;this
  amazing piece on _why by the Smashing Magazine&lt;/a&gt;. And definitely read The Poignant Guide:
  &lt;a target=&quot;_blank&quot; href=&quot;http://mislav.uniqpath.com/poignant-guide/&quot;&gt;http://mislav.uniqpath.com/
    &lt;wbr&gt;
    poignant-guide/&lt;/a&gt;. It is full of cats, foxes, chunky bacon, cartoons that doesn&#39;t always make much sense, space
  travel and what not. This was one of my first introductions to the Ruby community, and the guide lent the language and
  the community a fun, quirky and happy aura. You may or may not take away much Ruby knowledge from the guide - I
  couldn&#39;t when I read it for the first time. However you&#39;ll definitely understand some of the quirkiness and
  philosophies that influence the Ruby community. I am a huge fan of _why, and here is my favourite quote:&amp;nbsp;
&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p&gt;
    &lt;em&gt;when you don&#39;t create things, you become defined by your tastes
      rather than ability. your tastes only narrow &amp;amp; exclude people. so
      create.
    &lt;/em&gt;
  &lt;/p&gt;
&lt;/div&gt;


&lt;h3&gt;2. The ecosystem - RVM/rbenv, RubyGems, Bundler, Git and Github&lt;/h3&gt;

&lt;p&gt;
  I think all of these tools are mandatory for being a productive Ruby programmer. You&#39;ll encounter them soon enough:
&lt;/p&gt;

&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;
    RVM/rbenv: these are tools used to manage multiple Ruby versions on the same machine. I&#39;ve been using RVM without
    complaint for quite a while, though there are people who will go up in arms against RVM for various reasons. As a
    beginner, you should be comfortable with either.
  &lt;/li&gt;
  &lt;li&gt;
    RubyGems: a gem for anything, a gem for everything. If you are using RVM, it will install RubyGems by default for
    you. &lt;a target=&quot;_blank&quot; href=&quot;http://docs.rubygems.org/read/chapter/4&quot;&gt;http://docs.rubygems.org/read/chapter/4&lt;/a&gt;
  &lt;/li&gt;

  &lt;li&gt;
    Bundler: You&#39;ll learn it easy enough if you are using Rails. But even for non-Rails projects, Bundler is now the
    de-facto tool to handle gems and dependencies. It is one of those tools that when you see for the first time you
    would
    wonder how you ever lived without it.
  &lt;/li&gt;

  &lt;li&gt;
    Git: You are a git if you don&#39;t use git yet. If you are not even using any version control at all, good for you -
    there aren&#39;t bad practices that you need to unlearn. If you are on SVN, or God forbid CVS, jump now. &lt;a target=&quot;_blank&quot; href=&quot;http://git-scm.com/book/en/Getting-Started-About-Version-Control&quot;&gt;http://git-scm.com/book/en/
    &lt;wbr&gt;
    Getting-Started-About-Version-
    &lt;wbr&gt;
    Control&lt;/a&gt;
  &lt;/li&gt;

  &lt;li&gt;
    Github: You have a Github handle, right? &#39;nuff said.
  &lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;3. Editor&lt;/h3&gt;

&lt;p&gt;
  I don&#39;t care. Pick one, use it well. If you&#39;re on Vim and is on Insert mode all the time, then use Notepad instead. It
  would be more productive. Learn your editor.
&lt;/p&gt;

&lt;p&gt;Here is a list of editors/IDEs people generally use for Ruby development:&lt;/p&gt;

&lt;p&gt;
  - RubyMine&lt;br&gt;
  - Sublime Text&lt;br&gt;
  - Textmate&lt;br&gt;
  - Vim&lt;br&gt;
  - emacs&lt;br&gt;

&lt;/p&gt;&lt;p&gt;If you are using Sublime Text, install and use its corresponding Ruby package. Ditto for Textmate.&lt;/p&gt;

&lt;p&gt;
  If you are on Vim, using the right set of plugins is a requisite to be productive. There is the popular &lt;a target=&quot;_blank&quot; href=&quot;https://github.com/carlhuda/janus&quot;&gt;https://github.com/carlhuda/janus&lt;/a&gt; and Srushti&#39;s &lt;a target=&quot;_blank&quot; href=&quot;https://github.com/srushti/vim-get&quot;&gt;https://github.com/srushti/vim-get&lt;/a&gt; which I use when I
  work with Vim. Even if you don&#39;t go for these plugin distributions, spend enough time to find the right plugins for
  Ruby development.
&lt;/p&gt;

&lt;p&gt;I don&#39;t know about the best plugins for emacs, but there are people who use emacs to develop in Ruby. Even Matz uses
  emacs; search and you shall find.&lt;/p&gt;

&lt;h3&gt;4. Ditch &#39;while&#39;, &#39;for&#39; and array accumulation&lt;/h3&gt;

&lt;p&gt;
  Read this: &lt;a target=&quot;_blank&quot; href=&quot;http://martinfowler.com/bliki/CollectionClosureMethod.html&quot;&gt;http://martinfowler.com/bliki/
  &lt;wbr&gt;
  CollectionClosureMethod.html&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;An apparent sign of a programmer who does not know Ruby well enough is code that uses &#39;for&#39; and &#39;while&#39; loops for
  iteration and accumulation. I am hardpressed to remember occasions where I had to use them instead of the Enumerable
  methods #&lt;i&gt;each, #map, #select, #inject, #reject &lt;/i&gt;and #&lt;i&gt;detect.&lt;/i&gt; Learn these methods, chew on them, and use
  it everywhere!
&lt;/p&gt;

&lt;p&gt;(infinite loops are almost always written using the loop do..end construct though. but how often do you write
  infinite loops anyway?)&lt;/p&gt;

&lt;h3&gt;5. Hash&lt;/h3&gt;

&lt;p&gt;At the time when I started writing Ruby, the languages that I had written in for a reasonable period of time before
  were CA-Clipper, Borland Turbo C and some VB 6.
&lt;/p&gt;

&lt;p&gt;The first two did not have a hash, associative array or dictionary - whichever you prefer to call it.&lt;b&gt; &lt;/b&gt;As to
  VB6, the only thing I can remember is DataGrid and ADODB. Ah, the failed promises of drag and drop programming!&lt;/p&gt;

&lt;p&gt;
  So Hash was a revelation and I started using it anywhere and
  everywhere. Do you want to build a CRUD app to manage customer info?
  Forget databases, I&#39;ll build a Hash and serialize to and deserialize from a YAML file. There were even more crimes
  committed using Hash that I dare not mention here. You would have gone through enough exercises that uses Hash when
  working through RubyMonk or Ruby Koans. But if you haven&#39;t, make sure you understand Hashes well enough.
  Specifically:&lt;/p&gt;

&lt;p&gt;
&lt;/p&gt;&lt;ul class=&quot;keypoints&quot;&gt;
  &lt;li&gt;iterating over a hash&lt;/li&gt;
  &lt;li&gt;assigning default values for undefined keys in a hash&lt;/li&gt;
  &lt;li&gt;Hash#keys and Hash#values for extracting just the keys and values&lt;/li&gt;
  &lt;li&gt;In Ruby 1.8 Hashes are un-ordered: ie, you can&#39;t rely on the ordering of the hash to be same as the order in which
    you added elements. In Ruby 1.9, a Hash is sorted on the basis of order of insertion.
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;

&lt;h3&gt;6. JSON and YAML&lt;/h3&gt;

&lt;p&gt;These are not Ruby specific concepts, but find great use in the ecosystem. Know them well, they&#39;ll come in
  handy. &lt;/p&gt;

&lt;h3&gt;7. Understand Immutability and how Ruby passes object references around&lt;/h3&gt;

&lt;p&gt;
  This has slightly got to do with the above point - all the Enumerable methods are immutable, and it is a good
  introduction to how functional Ruby veer towards immutability.&amp;nbsp; Immutability is more of a good programming
  practice than a Ruby specific idea - it helps you write clean predictable code, leave aside concurrent programming and
  race conditions. A method that mutates its parameter is a vile creature, don&#39;t bring it forth into existence.
&lt;/p&gt;

&lt;p&gt;If you come from a C programming background, building new objects willy-nilly would be a little hard to digest. So
  much memory put to waste! I remember reading somewhere that programmers who use high level languages leave a higher
  carbon footprint because their code is inefficient. I leave you to ponder over it.&lt;/p&gt;

&lt;p&gt;For understanding some quirks around Ruby&#39;s immutability and interesting effects of how Ruby passes object references
  around, figure out where Array#clone is used. I remember wasting many a debugger breakpoint during my early days of
  Ruby because I didn&#39;t realize this. Don&#39;t let that happen to you! Understand the difference between a shallow clone
  and a deep clone. Even better, go write your own deep_clone routine! (limit yourselves to objects that can have
  strings, numbers, arrays and hashes)&lt;/p&gt;

&lt;p&gt;Also read: &lt;a target=&quot;_blank&quot; href=&quot;http://ruby-doc.org/docs/Newcomers/ruby.html#objects&quot;&gt;http://ruby-doc.org/docs/Newcomers/ruby.html#objects&lt;/a&gt;
&lt;/p&gt;

&lt;h3&gt;8. Ruby&#39;s object hierarchy&lt;/h3&gt;

&lt;p&gt;
&lt;/p&gt;&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# All objects are instances of the class Object.&lt;/span&gt;
&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;a string&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;is_a&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; BasicObject &lt;span class=&quot;token comment&quot;&gt;# true&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# All classes are instances of the class Class.&lt;/span&gt;
&lt;span class=&quot;token builtin&quot;&gt;String&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;is_a&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Class&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# true&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# Class is a subclass of BasicObject.&lt;/span&gt;
&lt;span class=&quot;token builtin&quot;&gt;Class&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;is_a&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; BasicObject &lt;span class=&quot;token comment&quot;&gt;# true&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# Class is not an instance of BasicObject&lt;/span&gt;
&lt;span class=&quot;token builtin&quot;&gt;Class&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;instance_of&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; BasicObject &lt;span class=&quot;token comment&quot;&gt;# false&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;# BasicObject is an instance and a sub-class of Class&lt;/span&gt;
BasicObject&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;is_a&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Class&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# true&lt;/span&gt;
BasicObject&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;instance_of&lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Class&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# true&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;p&gt;&lt;/p&gt;

&lt;p&gt;Okay, I lost it. It is pretty crazy: &lt;a target=&quot;_blank&quot; href=&quot;http://stackoverflow.com/questions/4967556/ruby-craziness-class-vs-object&quot;&gt;http://stackoverflow.com/questions/4967556/ruby-craziness-class-vs-object&lt;/a&gt;.
  As a beginner, you wouldn&#39;t need to understand the nitty-gritties. I&#39;ve been programming in Ruby for about three years
  now, and it still confuses the heck out of me.&lt;/p&gt;

&lt;p&gt;For now it is safe to understand that BasicObject is usually the root object of all objects in Ruby. And everything
  in Ruby is an object. This has a very useful side-effect (try this in IRB):

  &lt;/p&gt;&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;some random string&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;methods &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;methods&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;/p&gt;

&lt;p&gt;
  Also,
&lt;/p&gt;

&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token class-name&quot;&gt;Array&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;methods &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;methods&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;/p&gt;

&lt;p&gt;
  The above commands will show you methods that are specific to just strings and arrays, excluding all methods that are
  always present in any Ruby object (inherited from Object - like instance_of, is_a? etc.).
&lt;/p&gt;

&lt;p&gt;
  You might have noticed that the &#39;-&#39; operator gives you the difference between two arrays. Whenever you need a general
  purpose method and wonder whether Ruby comes with it, just try some plausible syntax in IRB. You might be surprised at
  what you find.
&lt;/p&gt;

&lt;p&gt;
  Even though Ruby lets you Object Oriented and procedural code, the language leans toward OO. Ruby treats even methods
  as objects:
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;some string&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;method&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:length&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# gives you an object of the Method class.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;
&lt;p&gt;
  The method object can be asked to run by invoking the &#39;call&#39; method on it.
&lt;/p&gt;

&lt;h3&gt;9. Creating your own Objects&lt;/h3&gt;

&lt;p&gt;
  Did you notice that the title wasn&#39;t &#39;Creating Classes&#39;. That was one of the most useful advices I&#39;ve ever received:
  Always think in terms of objects - not classes. Thinking in terms of Classes can subtly make you evolve your design
  upfront. Don&#39;t. Let your objects guide you in how your class definition should look. As a rough analogy, when building
  a home, the blueprint is valuable only as a reference for building the actual home. You imagine what your home should
  look like and draw a blueprint accordingly, not the other way round.
&lt;/p&gt;

&lt;p&gt;Start with sparse classes, add methods and attributes as your objects demand it. Srushti puts it better: Imagine
  you&#39;re an instance, and think about what you want to do and how you want to do it. You don&#39;t want to give up your
  secrets (encapsulation). You don&#39;t ask other people for information so you can do their work for them, you just tell
  them to do stuff for you (tell, don&#39;t ask)&lt;/p&gt;

&lt;p&gt;Ruby has a very simple syntax for defining classes and building objects. If you come from a Java/C# background, it&#39;d
  be the first thing you look for. But even if you are a die-hard procedural ninja, trust me, thinking in terms of
  objects will help you write better programs, tackle complexity and be a more capable programmer.&lt;/p&gt;

&lt;p&gt;So, what are the things that are specific to Ruby that you need to be aware of?

&lt;/p&gt;&lt;p&gt;

&lt;/p&gt;&lt;p&gt;
  - Message Passing. &quot;abcd&quot;.length is in fact &quot;abcd&quot;.send(:length). &lt;br&gt;
  - Module vs Classes (hint: they&#39;re very similar, but you can&#39;t instantiate a Module)&lt;br&gt;
  - Mixins (Ruby&#39;s answer to multiple inheritance and the greatest thing _before_ sliced bread)&lt;br&gt;
  - attr_reader, attr_writer, attr_accessor. &lt;br&gt;
  - instance methods and class methods&lt;br&gt;
  - instance variables and class variables.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;And we all know that you don&#39;t use class variables unless you have a very good reason. Class methods aren&#39;t that bad,
  but are usually a smell. Whenever you find yourselves writing a class method, take a step back and make sure it can&#39;t
  be rephrased as an instance method, perhaps in a child object?&lt;/p&gt;

&lt;p&gt;
  There is a lot more to OO, some less specific to Ruby. As you go deep into the rabbit hole, ponder over these blanket
  statements:
&lt;/p&gt;

&lt;p&gt;
  - Primitives (Hash, Array etc.) are evil! Build objects.&lt;br&gt;
  - Inheritance is evil! Use Composition.&lt;br&gt;
  - Conditions (if..else, switch..case) are evil! Use Polymorphism.&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;10. Ruby is interpreted. It is malleable. Use that to your advantage.&lt;/h3&gt;

&lt;p&gt;Interpreted programs are almost always slower than native code (which includes JIT). By choosing to use such a
  language, you are accepting a compromise in the speed/efficiency of your programs. But this gives you a great
  advantage: the flexibility to change your code at runtime. Though we can&#39;t claim &#39;code is data, data is code&#39; like
  those hipster LISPers do, there is tremendous power in the dynamism (no reference to type systems) of Ruby. Learn it,
  use it, change the world!&lt;/p&gt;

&lt;p&gt;I had briefly mentioned the &#39;send&#39; method that is available for every object in Ruby:&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;abcd&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;send&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:length&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;
  is same as
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;abcd&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;That means you can do things like this:&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;puts &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Hi, which method do you like to invoke on a string today?&quot;&lt;/span&gt;&lt;/span&gt;
method_name &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; gets&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;strip
puts &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;a random string&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;send&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;method_name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;
  Did you see that? Unlike fully compiled languages like C/C++, Ruby lets you call arbitrary methods during runtime!
  (you can pass arguments to the method as parameters to the &#39;send&#39; method)
&lt;/p&gt;

&lt;p&gt;
  Leave aside calling arbitrary methods, running arbitrary code during runtime is a breeze:
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;puts &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;What code do you want to run today, dear sir?&quot;&lt;/span&gt;&lt;/span&gt;
arbitrary_code &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;STDIN&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;read &lt;span class=&quot;token comment&quot;&gt;# press ctrl+d to stop input&lt;/span&gt;
eval&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;arbitrary_code&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;
  Try it, type in some short valid Ruby code and see it in action.
&lt;/p&gt;

&lt;p&gt;Now that you know &#39;eval&#39; exists, forget about it. It is too dangerous to be almost ever used. It is unsafe and
  unscoped, but there are better things to achieve similar and useful results. The point of this exercise though was to
  see Ruby&#39;s dynamic nature in action. Since Ruby is interpreted, there is no limitation on what can be done during
  runtime. This can be used to great good as we will see in Metaprogramming.&lt;/p&gt;

&lt;h3&gt;11. Metaprogramming&lt;/h3&gt;

&lt;p&gt;
  Metaprogramming in Ruby more or less gives you ways to create/remove/redefine methods at runtime. If you have used
  Rails, you would have seen that you would write something like
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;User&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; ActiveRecord&lt;span class=&quot;token double-colon punctuation&quot;&gt;::&lt;/span&gt;Base
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;


&lt;p&gt;and magically, the User class gives you methods like user.name, user.find_by_name, user.find_by_name_and_id.
  Depending on the fields in the database, Rails defines methods for you to use. This uses Metaprogramming where Rails
  defines the methods at runtime after consulting the table schema.&lt;/p&gt;

&lt;p&gt;(talking about &#39;magic&#39;, usually when someone complain about &#39;magic&#39; in Ruby code, she is most probably referring to
  some sort of metaprogramming in the code)&lt;/p&gt;

&lt;p&gt;Metaprogramming is one of Ruby&#39;s most powerful concepts (anything borrowed from FP is yummy!), but it is open to use
  and abuse. They say that someone who knows metaprogramming well enough, but not enough to know where not to use it, is
  a danger to himself and society. The internet is rife with discussions around it and you&#39;ll find no shortage of flame
  wars, opinions and thankfully, documentation.&lt;/p&gt;

&lt;p&gt;These are the methods you would want to look up to get a decent overview of metaprogramming in Ruby:&lt;/p&gt;

&lt;p&gt;
  - define_method&lt;br&gt;
  - method_missing&lt;br&gt;
  - instance_eval&lt;br&gt;
  - class_eval&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;
  I would also recommend Yehuda Katz&#39;s excellent explanation of Metaprogramming by relating it to the context of &#39;self&#39;:
  &lt;a target=&quot;_blank&quot; href=&quot;http://yehudakatz.com/2009/11/15/metaprogramming-in-ruby-its-all-about-the-self/&quot;&gt;http://yehudakatz.com/2009/11/
    &lt;wbr&gt;
    15/metaprogramming-in-ruby-its-all-about-the-self/&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
  Metaprogramming is a bit advanced, and if you don&#39;t understand all or any of it the first time, don&#39;t worry. Come back
  and take a look again later. Rinse and repeat. It is an acquired taste, give it time!
&lt;/p&gt;

&lt;h3&gt;12. Closures (Blocks, Lambdas et al.)&lt;/h3&gt;

&lt;p&gt;Blocks are my favourite. They move mountains. Rather, they let you write beautiful DSLs when coupled with the right
  dose of metaprogramming. Have you seen factory_girl&#39;s syntax? It is an unholy mix of method_missing and &#39;yield&#39;.
&lt;/p&gt;

&lt;pre&gt;
&lt;pre class=&quot;language-ruby&quot; data-tag=&quot;prism&quot;&gt;&lt;code class=&quot;language-ruby&quot;&gt;Factory &lt;span class=&quot;token symbol&quot;&gt;:user&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token symbol&quot;&gt;aliases&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token symbol&quot;&gt;:author&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token symbol&quot;&gt;:commenter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;do&lt;/span&gt;
  first_name &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;John&quot;&lt;/span&gt;&lt;/span&gt;
  last_name &lt;span class=&quot;token string-literal&quot;&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Doe&quot;&lt;/span&gt;&lt;/span&gt;
  date_of_birth &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;18.&lt;/span&gt;years&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;ago &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/pre&gt;

&lt;p&gt;
  It is not really hard to build a DSL that reads like this, and there is no better resource to learn all of this than
  &lt;a target=&quot;_blank&quot; href=&quot;http://rubysource.com/functional-programming-techniques-with-ruby-part-ii/&quot;&gt;http://rubysource.com/
    &lt;wbr&gt;
    functional-programming-
    &lt;wbr&gt;
    techniques-with-ruby-part-ii/&lt;/a&gt;. The first part of that series looks into the functional and immutable aspects of
  Ruby, and is also a recommended read: &lt;a target=&quot;_blank&quot; href=&quot;http://rubysource.com/functional-programming-techniques-with-ruby-part-i/&quot;&gt;http://rubysource.com/
  &lt;wbr&gt;
  functional-programming-
  &lt;wbr&gt;
  techniques-with-ruby-part-i/&lt;/a&gt;
&lt;/p&gt;

&lt;h3&gt;13. Styleguides&lt;/h3&gt;

&lt;p&gt;Whenever you are in doubt, or the self becomes too much with you, go read the Ruby style guides.&lt;/p&gt;

&lt;p&gt;Github&#39;s simpler style guide: &lt;a target=&quot;_blank&quot; href=&quot;https://github.com/styleguide/ruby&quot;&gt;https://github.com/styleguide/
  &lt;wbr&gt;
  ruby&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;
  The comprehensive one: &lt;a target=&quot;_blank&quot; href=&quot;https://github.com/bbatsov/ruby-style-guide&quot;&gt;https://github.com/bbatsov/
  &lt;wbr&gt;
  ruby-style-guide&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;14. Simplicity is virtue&lt;/h3&gt;

&lt;p&gt;
  Knowing what constructs to use where is a matter of knowledge and experience. Every approach has trade-offs in terms
  of readability, maintainability and efficiency. The battle between these have been the recurring theme in the battles
  programmers fight in their heads for years. Knowing the the trade-offs will help you make more informed decisions, but
  it might not always be enough. Some things need to be tried, tested and failed, and that is fine.
&lt;/p&gt;

&lt;p&gt;
  But be vary of &lt;a target=&quot;_blank&quot; href=&quot;http://c2.com/cgi/wiki?PrematureOptimization&quot;&gt;Premature Optimization&lt;/a&gt;. When
  you have a choice between clever, short and maybe faster code Vs longer but readable code, go for readability.&amp;nbsp;
  Ruby makes it easy to write really bad code that people would fear to touch with a long pole. It also lets you write&amp;nbsp;
  beautiful and concise code. When you contemplate between the two, remember the joke about the psychopath who&#39;ll
  inherit your codebase, knows where you live, and pings you from your local network! The choice is yours.
&lt;/p&gt;

&lt;h3&gt;15. None of this matters&lt;/h3&gt;

&lt;p&gt;
  If you are overwhelmed by this document or any links referenced from here, just ignore it. Remember the &lt;a target=&quot;_blank&quot; href=&quot;http://norvig.com/21-days.html&quot;&gt;10,000 hours rule&lt;/a&gt;. Happily go about writing code the way
  you know best! And write a bit more code. Try to pair with someone who knows things a bit more. Go read some
  well-written Ruby code from Github. Then come back and see what you&#39;ve learned.
&lt;/p&gt;

&lt;p&gt;None of this is rocket science, but it takes time and practice for concepts to sink in, and that is just fine.&lt;/p&gt;

&lt;hr&gt;

&lt;p&gt;Have further questions? There are tons of resource on the internet to answer your questions!&lt;/p&gt;

&lt;p&gt;
  Join one of your local Ruby Usergroups. The Ruby community is extremely helpful and accomodating towards newbies.
  Check this page to locate a usergroup near you: &lt;a href=&quot;http://www.rubyinside.com/how-to-find-ruby-user-groups-3067.html&quot;&gt;How To Find Ruby User Groups&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
  Participate in the usergroups, ask your questions. Also hop on to Ruby&#39;s IRC channel &lt;a href=&quot;http://irc.lc/freenode/ruby-lang&quot;&gt;#ruby-lang on Freenode&lt;/a&gt;. Irrespective of the forum, just make sure that
  you give enough context about your question to help others understand your problem. If you haven&#39;t read ESR&#39;s &quot;&lt;a target=&quot;_blank&quot; href=&quot;http://www.catb.org/%7Eesr/faqs/smart-questions.html&quot;&gt;Ask questions the smart way&lt;/a&gt;&quot; yet,
  *this* is the time. Go read it now and get enlightened on the ways of the interwebs!&amp;nbsp; &lt;/p&gt;

&lt;p&gt;And remember to have fun! In Matz&#39;s own words:
&lt;/p&gt;&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;p&gt;
    &lt;em&gt;For me the purpose of life is partly to have joy. Programmers often feel joy when they can concentrate on the
      creative side of programming, so Ruby is designed to make programmers happy.
    &lt;/em&gt;
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  Happy hacking!
&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>B-Trees, large volumes of data and branching factor</title>
    <link href="https://jasimab.com/posts/btrees/" rel="alternate" type="text/html"/>
    <id>https://jasimab.com/posts/btrees/</id>
    <published>2010-10-26T12:15:00Z</published>
    <updated>2010-10-26T12:15:00Z</updated>
    <summary>A B-tree stays fast only while its branching factor and upper levels fit the machine&#39;s memory hierarchy; once more lookups spill to disk, performance falls sharply. Sharding and cache-oblivious structures address that limit in different ways.</summary>
    <content type="html">
&lt;h3&gt;B-trees can be slow&lt;/h3&gt;

&lt;p&gt;I&#39;ve noticed that after a few million keys,
  almost all b-tree based databases starts to get slower. This applies to both
  Relational/ACID-compliant as well as the NoSQL DBs. I tried &lt;a href=&quot;http://harbour-project.org/&quot;&gt;Harbour&lt;/a&gt;&#39;s BTree implementation, &lt;a href=&quot;http://fallabs.com/tokyocabinet/&quot;&gt;TokyoCabinet&lt;/a&gt;, &lt;a href=&quot;http://www.sqlite.org/&quot;&gt;SQLite&lt;/a&gt; and &lt;a href=&quot;http://www.mysql.com&quot;&gt;MySQL&lt;/a&gt;. All of them started to slow down at
  various stages and the maximum I could go without an unacceptable decrease in
  performance was close to 40 million keys with TokyoCabinet in my 2GB RAM laptop.&lt;/p&gt;

&lt;h3&gt;Large branching factor = better performance&lt;/h3&gt;

&lt;p&gt;
  A binary tree is a tree which has two children per node, and has a time complexity of &lt;b&gt;&lt;i&gt;O&lt;/i&gt; (log&lt;sub&gt;2&lt;/sub&gt; N)&lt;/b&gt;
  for any search operation.

  B-tree is a variation of binary tree in which there are M number of children per node. It thus achieves a time
  complexity of &lt;b&gt;&lt;i&gt;O&lt;/i&gt; (log&lt;sub&gt;M&lt;/sub&gt; N)&lt;/b&gt; for each search operation. &lt;b&gt;M&lt;/b&gt; is called &lt;a href=&quot;http://books.google.co.in/books?id=UXh4qTpmO8QC&amp;lpg=PA490&amp;ots=2QEccXe5V4&amp;dq=log2%20btree&amp;pg=PA489#v=onepage&amp;q&amp;f=false&quot;&gt;fanout&lt;/a&gt;
  or Branching factor. A large branching factor is the reason why the b-tree is a fast data structure.
&lt;/p&gt;

&lt;p&gt;
  When the number of keys (N) crosses a certain bound, the height of the tree will increase and every search/insert
  might need to traverse one more level. If this level is not in memory, the operation will need a disk access. Since
  disk access is expensive, this leads to bad performance. Thus,
&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  Efficiency of a B-tree &lt;span style=&quot;font-size: 1.8em; font-weight: bold&quot;&gt;&amp;prop;&lt;/span&gt; Available memory / F(N).
&lt;/div&gt;

&lt;p&gt;
  F(N) is a function on the number of keys and gives the height of the b-tree.
&lt;/p&gt;

&lt;p&gt;
  This leads us to the branching factor - given enough memory, increasing the branching factor will make each level of
  the tree hold more nodes and thus reduce the b-tree&#39;s height. Fewer levels means fewer disk access (if any) and better
  performance.
&lt;/p&gt;

&lt;h3&gt;Disproportionally large branching factor = decreased
  performance&lt;/h3&gt;

&lt;p&gt;
  In an ideal world, to cope with larger values of N,
  we could simply increase the branching factor and individual node capacity to
  maintain the performance of the B-tree.
&lt;/p&gt;

&lt;p&gt;
  But the b-tree structure becomes a burden if the branching factor is so big that the first few levels cannot be
  completely held in memory. At this stage, accessing each level can trigger a page-fault causing disk swapping and very
  poor performance.
&lt;/p&gt;

&lt;p&gt;Two major concerns here are :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Limited Memory:&lt;/strong&gt;

  The b-tree parameters are limited by the available memory. Since all search starts from
  the top, we need the first level of nodes to be completely in memory. More the
  number of nodes thats fits in main memory, the lesser the need for disk seeks. But scaling physical memory is an
  expensive proposition and infeasible beyond a point.
&lt;/p&gt;

&lt;div class=&quot;quoted-text&quot;&gt;
  &lt;h4&gt;Solution: Sharding&lt;/h4&gt;

  &lt;p&gt;Beyond splitting db load, there is a huge advantage with sharding - sharding a b-tree storage enables us to
    limit
    the number of keys that a single b-tree need to hold. Thus each b-tree will produce optimal performance.

  &lt;/p&gt;&lt;p&gt;Sharding the database along with its b-tree indices into different physical machine is one of the most
    effective scaling solutions for growing data volumes.&lt;/p&gt;

  &lt;p&gt;&lt;a href=&quot;http://mongodb.org&quot;&gt;MongoDB&lt;/a&gt; uses this &lt;a href=&quot;http://docs.mongodb.org/manual/core/sharding-introduction/&quot;&gt;approach&lt;/a&gt;, and seems to be scaling
    very well judging from a few &lt;a href=&quot;http://blog.wordnik.com/12-months-with-mongodb&quot;&gt;instances&lt;/a&gt; of MongoDB
    in &lt;a href=&quot;http://www.slideshare.net/mongosf/implementing-mongodb-at-shutterfly-kenny-gorman&quot;&gt;production&lt;/a&gt;
    use.
  &lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  &lt;strong&gt;2. Databases need constant tuning:&lt;/strong&gt; Changing the database system parameters (branching factor, shards,
  indexes)
  etc. usually require downtime. Having scaling related down-times is a major pain and we are still yet to see a db
  that tunes itself to increasing data volumes.
&lt;/p&gt;
&lt;div class=&quot;quoted-text&quot;&gt;

  &lt;h4&gt;Solution: Cache-oblivious structures and algorithms&lt;/h4&gt;

  &lt;p&gt;The implementation of most algorithms that deal with large volumes of data makes advantage of the caching
    characteristics of the target machine. For example in B-trees, the branching factor should be such that a
    complete level of node should completely fit in the main memory.
    Cache-oblivious algorithms remove the dependency on the cache characteristics of the platform and implement data
    structures like b-tree to perform well in diverse memory architectures.&lt;/p&gt;

  &lt;p&gt;Prof. Charles E. Leiserson of MIT heads the Supercomputing technologies group which is doing pioneering
    research into cache-oblivious algorithms. There are quite a few papers on this topic at the &lt;a href=&quot;http://supertech.csail.mit.edu/cacheObliviousBTree.html&quot;&gt;MIT SuperTech website&lt;/a&gt;.&lt;/p&gt;

  &lt;p&gt;
    The primary authors of the cache-oblivious B-tree papers at CSAIL, &lt;a href=&quot;http://www.cs.sunysb.edu/~bender/&quot;&gt;Michael
    A. Bender&lt;/a&gt;, &lt;a href=&quot;http://www.cs.rutgers.edu/~farach/&quot;&gt;Martin Farach-Colton&lt;/a&gt; and &lt;a href=&quot;http://people.csail.mit.edu/bradley/&quot;&gt;Bradley Kuszmaul&lt;/a&gt; have founded Tokutek, which built a product
    based on cache-oblivious b-trees - &lt;a href=&quot;http://www.tokutek.com&quot;&gt;TokuDB&lt;/a&gt; an add-on database engine to MySQL
    that implements &lt;i&gt;&lt;a href=&quot;http://tokutek.com/downloads/mysqluc-2010-fractal-trees.pdf&quot;&gt;fractal tree&lt;/a&gt;&lt;/i&gt;
    which is claimed to perform orders better than either InnoDB/MyISAM at high data volumes. Though shipped with
    MySQL, the implementation is not open-source.
  &lt;/p&gt;

&lt;/div&gt;

&lt;h3&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;B-trees are one of the most used data-structures in computing. However they are not a silver-bullet for every kind of
  data storage and retrieval problem.
  Developers still need to go down a few levels of abstraction and tune the database to gain the most from the DB.
  Sharding is a viable solution but it requires the application to be tailored to shard the dataset according to
  properly identified key fields.
  Cache-oblivious b-trees are yet to become widely available in mainstream databases.

&lt;/p&gt;&lt;p&gt;It has been about 30 years since the first commercial RDBMS (&lt;a href=&quot;http://en.wikipedia.org/Ingres_database&quot;&gt;Ingres&lt;/a&gt;) by &lt;a href=&quot;http://en.wikipedia.org/Michael_Stonebraker&quot;&gt;Michael
  Stonebraker&lt;/a&gt; became popular, and the relational model of database with b-tree as its preferred storage structure
  chugged along. However in recent years, the demands of realtime web-scale applications have paved way for more
  research and changes in the database landscape. &lt;/p&gt;
</content>
  </entry>
</feed>
