Thursday, July 24, 2014

Code Reuse and...EmberJS components

This is a combo post, a one-two punch. There are so many compelling reasons for writing reusable code - and some reasons for not. And...here is something I learned about reusable templates in EmberJS.
Starting with reasons to NOT write reusable code.
  1. lack of awareness
  2. doing a POC (Proof Of Concept) and will NEVER release the POC version
  3. something is on fire and you need to put it out NOW!
  4. someone is a doody-head and is making you say uncle
  5. you are establishing a practice of creating more work for later so that you remain gainfully employed

Here are reasons to do it.
  1. because you can reuse it later and don't have to build the foundation every time you build something
  2. it's more challenging, thus more compelling and you thrive on challenges because it makes life fun and interesting
  3. it can speed up development significantly
  4. it can be done in a way that protects against changing technologies
  5. save the best for last...when the business rules change (because business needs change) it's less risky, easier and more compelling to change the code to meet the needs

Those are just a few things off the top of my head, to get things rolling. Can you think of more?
The EmberJS Part
EmberJS is an open source client-side MVx framework that uses templates to markup layout for the web. The templates it uses are Handlebars, which is another open source code base.
here is an example template for EmberJS:

<script type="text/x-handlebars" id="somePig">
    {{#each piggy in pigs}}
        This little piggy went to {{piggy.placeName}}
        <br />
    {{/each}}
</script>
pigs is passed to the template by EmberJS via a controller, it's a JSON object.
And here is a component, which is a reusable template that takes in values that can be set when you use it:

<script type="text/x-handlebars" id="components/list-items">
    {{#each item in items}}
        item.displayText
        <br />
    {{/each}}
</script>

<script type="text/x-handlebars" id="pigs">
    {{list-items items=pigs}}
</script>

working sample

No comments:

Post a Comment