<commit_before>---
title: "A framework for creating ambitious web applications."
---

<% content_for :foot do %>
  <script type="text/javascript">
    $(function() {
      $('#slider').bxSlider({
        displaySlideQty: 4,
        moveSlideQty: 4,
        auto: true,
        pager: true,
        speed: 700,
        pause: 5000
      });

      // Hack to force proper sizing
      $('.bx-wrapper, .bx-window').css('width', 940);
    });
  </script>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  <%= javascript_include_tag 'app/about/inline-examples', defer: true %>
<% end %>

<% content_for :outside_wrapper do %>
  <a href="http://jobs.emberjs.com" class="job-board-banner" >Post and find jobs on the Ember job board</a>
<% end %>

<h1 class="about-header-text">
  A framework for creating ambitious web applications.
</h1>

<div id="download">
  <div id="download-ember">
    <a class="orange button" href="https://github.com/emberjs/starter-kit/archive/v1.9.1.zip" download>
      Download the Starter Kit
    </a>
    <div class="info">
      1.9.1:
      <a class="debug" href="http://builds.emberjs.com/tags/v1.9.1/ember.prod.js" download>production</a>
      <a class="debug" href="http://builds.emberjs.com/tags/v1.9.1/ember.min.js" download>(min + gzip  97kb)</a> |
      <a class="debug" href="http://builds.emberjs.com/tags/v1.9.1/ember.js" download>debug</a> |
      <a href="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js" download>Handlebars</a> |
      <a class="debug" href="/guides/getting-ember">packages</a>
    </div>
  </div>

  <ul class="social">
    <li class="twitter">
      <a href="https://twitter.com/emberjs" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @emberjs</a>
    </li>

    <li class="gplus">
      <a href="https://plus.google.com/101668252557697758617" rel="publisher">
        Follow on
        <img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" width="20" height="20" />
      </a>
    </li>
  </ul>
</div>

<div class="features section">
  <h2>More Productive Out of the Box.</h2>
  <div class="feature">
    <div class="handlebars"></div>
    <p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.
  </div>
  <div class="feature">
    <div class="structure"></div>
    <p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
  </div>
  <div class="feature">
    <div class="productivity"></div>
    <p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done&mdash;fast.</p>
  </div>
</div>

<div class="getting-started section">
  <script type="text/x-handlebars" id="application">
      <div class="example-tabs">
        {{#each item in model itemController="tabItem"}}
          <a {{action "selectTab" item}} {{bind-attr class="item.isSelected:active"}} href="#">{{unbound item.name}}</a>
        {{/each}}
        <span class="tabs-footer"></span>
      </div>
      {{syntax-highlight selectedTab.contents}}
      <div class="example-arrow"></div>
  </script>

  <div class="example-app" data-name="binding" data-files="templates/application.hbs">
    <h2 class="sub">Auto-Updating Handlebars Templates</h2>
    <p class="prose">Ember makes Handlebars templates even better, by ensuring your HTML
    stays up-to-date when the underlying model changes. To get started, you
    don't even need to write any JavaScript.</p>
  </div>

  <div class="example-app" data-name="components" data-files="components/gravatar-image.js templates/application.hbs templates/components/gravatar-image.hbs">
    <h2 class="sub">Components</h2>
    <p class="prose">Experience the future of the web platform today with Ember's components.
    Components allow you to create your own application-specific HTML tags,
    using Handlebars to describe their markup and JavaScript to implement
    custom behavior.</p>
  </div>

  <div class="example-app example-loading" data-name="loading" data-files="app.js templates/application.hbs">
    <h2 class="sub">Loading Data from a Server</h2>
    <p class="prose">
      Ember.js eliminates the boilerplate of displaying JSON retrieved
      from your server. If you know how to use jQuery, you know how to
      fetch models in Ember.
    </p>
  </div>

  <div id="routing-example" class="example-app" data-name="routing" data-files="app.js templates/application.hbs templates/index.hbs templates/mail.hbs templates/mailbox.hbs templates/mailbox/index.hbs fixtures.js">
    <h2 class="sub">Routing</h2>
    <p class="prose">Build JavaScript apps that don't break the web!
    Ember.js makes it downright simple to create sophisticated,
    multi-page JavaScript applications with great URL support, in a
    fraction of the code you'd write in other frameworks.</p>
  </div>
</div>

<div class="users section">
  <h2>Who's Using Ember.js?</h2>

  <div class="surround">
    <ul id="slider">
    <% data.users.slice(0,12).each do |user| %>
      <li class="user">
        <a href="<%= user.url %>" rel="nofollow">
          <img src="/images/about/<%= user.image %>" width="210" height="103" />
        </a>
      </li>
    <% end %>
    </ul>
  </div>

  <div class="listed">
    <a class="orange button" href="/ember-users">
        Meet More Users
    </a>
  </div>
</div>

<div class="gears section">
	<h2>Buy Ember.js Gear and Support Development</h2>
	<div class="gear">
		<a href="http://devswag.com/products/ember-sticker">
			<img src="/images/about/ember-sticker.png" width="160" height="120">
		</a>
		<div class="gearplus">
			<img src="/images/about/plus-icon.png" width="20" height="21">
		</div>
		<a href="http://devswag.com/products/ember-js-tshirt">
			<img src="/images/about/ember-shirt.png" width="160" height="120">
		</a>
		<div class="gearplus">
			<img src="/images/about/plus-icon.png" width="20" height="21">
		</div>
		<a href="http://devswag.com/products/ember-mascot-stickers-4">
			<img src="/images/about/ember-hamster-sticker.png" width="160" height="120">
		</a>
    <div class="gearplus">
      <img src="/images/about/plus-icon.png" width="20" height="21">
    </div>
    <a href="http://devswag.com/products/ember-mascot-tomster">
      <img src="/images/about/ember-tomster-plush-2.png" width="160" height="120">
    </a>
	</div>
</div>

<div class="users section donate">
  <div class="listed">
    <a class="orange button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QRRZTQ5GM7PSY">
        Donate to the Project
    </a>
  </div>
</div>
<commit_msg>Update homepage for 1.10.0.<commit_after>---
title: "A framework for creating ambitious web applications."
---

<% content_for :foot do %>
  <script type="text/javascript">
    $(function() {
      $('#slider').bxSlider({
        displaySlideQty: 4,
        moveSlideQty: 4,
        auto: true,
        pager: true,
        speed: 700,
        pause: 5000
      });

      // Hack to force proper sizing
      $('.bx-wrapper, .bx-window').css('width', 940);
    });
  </script>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  <%= javascript_include_tag 'app/about/inline-examples', defer: true %>
<% end %>

<% content_for :outside_wrapper do %>
  <a href="http://jobs.emberjs.com" class="job-board-banner" >Post and find jobs on the Ember job board</a>
<% end %>

<h1 class="about-header-text">
  A framework for creating ambitious web applications.
</h1>

<div id="download">
  <div id="download-ember">
    <a class="orange button" href="https://github.com/emberjs/starter-kit/archive/v1.10.0.zip" download>
      Download the Starter Kit
    </a>
    <div class="info">
      1.10.0:
      <a class="debug" href="http://builds.emberjs.com/tags/v1.10.0/ember.prod.js" download>production</a>
      <a class="debug" href="http://builds.emberjs.com/tags/v1.10.0/ember.min.js" download>(min + gzip  102kb)</a> |
      <a class="debug" href="http://builds.emberjs.com/tags/v1.10.0/ember.debug.js" download>debug</a> |
      <a class="debug" href="/guides/getting-ember">packages</a>
    </div>
  </div>

  <ul class="social">
    <li class="twitter">
      <a href="https://twitter.com/emberjs" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @emberjs</a>
    </li>

    <li class="gplus">
      <a href="https://plus.google.com/101668252557697758617" rel="publisher">
        Follow on
        <img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" width="20" height="20" />
      </a>
    </li>
  </ul>
</div>

<div class="features section">
  <h2>More Productive Out of the Box.</h2>
  <div class="feature">
    <div class="handlebars"></div>
    <p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.
  </div>
  <div class="feature">
    <div class="structure"></div>
    <p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
  </div>
  <div class="feature">
    <div class="productivity"></div>
    <p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done&mdash;fast.</p>
  </div>
</div>

<div class="getting-started section">
  <script type="text/x-handlebars" id="application">
      <div class="example-tabs">
        {{#each item in model itemController="tabItem"}}
          <a {{action "selectTab" item}} {{bind-attr class="item.isSelected:active"}} href="#">{{unbound item.name}}</a>
        {{/each}}
        <span class="tabs-footer"></span>
      </div>
      {{syntax-highlight selectedTab.contents}}
      <div class="example-arrow"></div>
  </script>

  <div class="example-app" data-name="binding" data-files="templates/application.hbs">
    <h2 class="sub">Auto-Updating Handlebars Templates</h2>
    <p class="prose">Ember makes Handlebars templates even better, by ensuring your HTML
    stays up-to-date when the underlying model changes. To get started, you
    don't even need to write any JavaScript.</p>
  </div>

  <div class="example-app" data-name="components" data-files="components/gravatar-image.js templates/application.hbs templates/components/gravatar-image.hbs">
    <h2 class="sub">Components</h2>
    <p class="prose">Experience the future of the web platform today with Ember's components.
    Components allow you to create your own application-specific HTML tags,
    using Handlebars to describe their markup and JavaScript to implement
    custom behavior.</p>
  </div>

  <div class="example-app example-loading" data-name="loading" data-files="app.js templates/application.hbs">
    <h2 class="sub">Loading Data from a Server</h2>
    <p class="prose">
      Ember.js eliminates the boilerplate of displaying JSON retrieved
      from your server. If you know how to use jQuery, you know how to
      fetch models in Ember.
    </p>
  </div>

  <div id="routing-example" class="example-app" data-name="routing" data-files="app.js templates/application.hbs templates/index.hbs templates/mail.hbs templates/mailbox.hbs templates/mailbox/index.hbs fixtures.js">
    <h2 class="sub">Routing</h2>
    <p class="prose">Build JavaScript apps that don't break the web!
    Ember.js makes it downright simple to create sophisticated,
    multi-page JavaScript applications with great URL support, in a
    fraction of the code you'd write in other frameworks.</p>
  </div>
</div>

<div class="users section">
  <h2>Who's Using Ember.js?</h2>

  <div class="surround">
    <ul id="slider">
    <% data.users.slice(0,12).each do |user| %>
      <li class="user">
        <a href="<%= user.url %>" rel="nofollow">
          <img src="/images/about/<%= user.image %>" width="210" height="103" />
        </a>
      </li>
    <% end %>
    </ul>
  </div>

  <div class="listed">
    <a class="orange button" href="/ember-users">
        Meet More Users
    </a>
  </div>
</div>

<div class="gears section">
	<h2>Buy Ember.js Gear and Support Development</h2>
	<div class="gear">
		<a href="http://devswag.com/products/ember-sticker">
			<img src="/images/about/ember-sticker.png" width="160" height="120">
		</a>
		<div class="gearplus">
			<img src="/images/about/plus-icon.png" width="20" height="21">
		</div>
		<a href="http://devswag.com/products/ember-js-tshirt">
			<img src="/images/about/ember-shirt.png" width="160" height="120">
		</a>
		<div class="gearplus">
			<img src="/images/about/plus-icon.png" width="20" height="21">
		</div>
		<a href="http://devswag.com/products/ember-mascot-stickers-4">
			<img src="/images/about/ember-hamster-sticker.png" width="160" height="120">
		</a>
    <div class="gearplus">
      <img src="/images/about/plus-icon.png" width="20" height="21">
    </div>
    <a href="http://devswag.com/products/ember-mascot-tomster">
      <img src="/images/about/ember-tomster-plush-2.png" width="160" height="120">
    </a>
	</div>
</div>

<div class="users section donate">
  <div class="listed">
    <a class="orange button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QRRZTQ5GM7PSY">
        Donate to the Project
    </a>
  </div>
</div>

{'fraction_non_alphanumeric': 0.1731620582045141, 'fraction_numerical': 0.018724145438711082, 'mean_word_length': 3.5463543385021445, 'pattern_counts': {'":': 0, '<': 307, '<?xml version=': 0, '>': 307, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 17, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3671581', 'n_tokens_mistral': 4865, 'n_tokens_neox': 4584, 'n_words': 1090}