dom-horror-with-emberjs.html.md

layout	date	title
post	2013-08-25	DOM Horror with EmberJS

I started using the Javascript framework, EmberJS, after using AngularJS for a few months. So far, there's a level of friendliness in Ember that I don't see in Angular. There's a nomenclature within Angular that is a little foreign to me and has made the learning curve a little more steep for me.

After spending a few weeks getting familiar with Ember, going through the documentation and tutorials, I really started getting into it. I feel very productive with it.

Then...

There's something about Ember that you should be aware of that I hadn't noticed at first. I opened the DOM inspector in Chrome to see the generated HTML, and I found something that looked similar to this nightmarish chunk of HTML:

	
    Welcome to Ember.js

    <script id="metamorph-1-start" type="text/x-placeholder"></script>
<script id="metamorph-0-start" type="text/x-placeholder"></script>
<ul>
    <script id="metamorph-5-start" type="text/x-placeholder"></script>
    <script id="metamorph-2-start" type="text/x-placeholder"></script>
    <li>
        <script id="metamorph-6-start" type="text/x-placeholder"></script>
        red
        <script id="metamorph-6-end" type="text/x-placeholder"></script>
    </li>
    <script id="metamorph-2-end" type="text/x-placeholder"></script>
    <script id="metamorph-3-start" type="text/x-placeholder"></script>
    <li>
        <script id="metamorph-7-start" type="text/x-placeholder"></script>
        yellow
        <script id="metamorph-7-end" type="text/x-placeholder"></script>
    </li>
    <script id="metamorph-3-end" type="text/x-placeholder"></script>
    <script id="metamorph-4-start" type="text/x-placeholder"></script>
    <li>
        <script id="metamorph-8-start" type="text/x-placeholder"></script>
        blue
        <script id="metamorph-8-end" type="text/x-placeholder"></script>
    </li>
    <script id="metamorph-4-end" type="text/x-placeholder"></script>
    <script id="metamorph-5-end" type="text/x-placeholder"></script>
</ul>
<script id="metamorph-0-end" type="text/x-placeholder"></script>
<script id="metamorph-1-end" type="text/x-placeholder"></script>

My jaw dropped. I was completely horrified! All that code just to render this:

<div>
	<h2>Welcome to Ember.js</h2>
	<ul>
		<li>red</li>
		<li>yellow</li>
		<li>blue</li>
	</ul>
</div>

And this is the code that's generated right from their starter template!

Yeah, the ember docs explain it so I get why it has to be that way. Nevertheless, it's something that has been hard for me to accept. I don't see anything like that being generated by Angular. This seems like an awful lot of bloat that could potentially make it harder for you to style your pages.

I'll continue to use Ember but I think this needs to be fixed.