<commit_before>---
title: Learn
responsive: true
---

<% content_for :outside_wrapper do %>
<div class="legal-wrapper">
  <img class="learning-tomster" src="/images/tomsters/teaching-reverse.png" alt="Teaching Tomster" class="learning-tomster">
  <article>
    <h1>Learning Ember.js</h1>

    <p>Are you getting started on your Ember.js adventure? Check out our official reading material: </p>

    <ul>
      <li><strong>Quick start</strong> <a href="https://guides.emberjs.com/current/getting-started/quick-start/"><i class="icon-link-ext"></i></a>: An easy breezy introduction to the framework.</li>
      <li><strong>Tutorial</strong> <a href="https://guides.emberjs.com/current/tutorial/ember-cli/"><i class="icon-link-ext"></i></a>: Follow our tutorial to build, and deploy, your first Ember.js application!</li>
      <li><strong>Guides</strong> <a href="https://guides.emberjs.com/"><i class="icon-link-ext"></i></a>: Whether you're just getting started and want to get familiar with Ember, or you're looking to refresh your knowledge on a certain feature, the Guides are the place for you.</li>
    </ul>

    <h1>API Reference</h1>

    <p>
      Explore the available API of the various Ember ecosystem libraries. This is where you want to go to read in details about the various features, including example code.
    </p>

    <ul class="api-reference-list">
      <li><a href="http://emberjs.com/api/">
        <img src="/images/learn/ember.png" class="project-logo" alt="Ember">
      </a></li>
      <li><a href="http://emberjs.com/api/ember-data/">
        <img src="/images/learn/ember-data.png" class="project-logo" alt="Ember Data">
      </a></li>
      <li><a href="http://ember-cli.com/api/">
        <img src="/images/learn/ember-cli.png" class="project-logo" alt="Ember CLI">
      </a></li>
    </ul>

    <h1 id="deprecations" class="anchorable-toc">Deprecation Guides <a href="http://emberjs.com/deprecations/"><i class="icon-link-ext"></i></a></h1>

    <p>
      Over the course of the years cruft inevitably sneaks into all software projects. In order to clean up outdated functionality and guide users, Ember has a deprecation process. You can read our <a href="http://emberjs.com/deprecations/">deprecation guides</a> for more information. You can find below more direct links to Ember and Ember Data versions.
    </p>

    <div class="flex-container learn-deprecations">
      <div class="flex-same-width">
        <h2 id="deprecations-ember" class="anchorable-toc" >Ember</h2>

        <ul>
          <li><a href="/deprecations/v1.x">1.x</a></li>
          <li><a href="/deprecations/v2.x">2.x</a></li>
        </ul>
      </div>
      <div class="flex-same-width">
        <h2 id="deprecations-ember-data" class="anchorable-toc">Ember Data</h2>
        <ul>
          <li><a href="/deprecations/ember-data/v2.x">2.x</a></li>
        </ul>
      </div>
    </div>

    <h1>Ecosystem</h1>

    <p>
      One of the main strengths of Ember is how shared conventions enable developers to build on top of each other's work and improve the ecosystem for everyone. What follows are some of the projects more closely maintained by the several Ember teams.
    </p>

    <p>
      <strong>Ember CLI</strong>: The official command line toolkit to develop Ember applications. Check out the <a href="https://ember-cli.com/user-guide/">User Guide</a>, and the documentation on how to <a href="https://ember-cli.com/extending/">extend Ember CLI</a> as an addon developer.
    </p>

    <p><strong>Ember Inspector</strong>: A browser plugin/bookmarklet that helps you inspect and debug applications. Learn how best to use it in the <a href="https://guides.emberjs.com/current/ember-inspector/installation/">Ember Inspector Guides</a>.</p>

    <p><strong>Liquid Fire</strong>: A toolkit to add animations and transitions to your application. Check out their <a href="http://ember-animation.github.io/liquid-fire/">interactive documentation</a>.</p>

    <p><strong>Ember Twiddle</strong>: Online code editor so you can share working snippets of code or reproductions of bugs. Try it out <a href="http://ember-twiddle.com/">today</a>!</p>

    <p><strong>FastBoot</strong>: Server-side rendering library for Ember applications. Check out the <a href="http://www.ember-fastboot.com/quickstart">Quickstart</a> to get up and running, and the <a href="http://www.ember-fastboot.com/docs/user-guide">User Guide</a> for more detailed information.
    </p>

    <h1 id="showcase" class="anchorable-toc">Showcase</h1>

    <p>In this section you will find applications that are maintained by the Ember.js teams with the help of contributors. While software is always a work in progress, the goal is to showcase patterns and solutions applied in real-world applications.</p>
    <p>Whether you're simply interested in checking out how some feature is implemented, or you're looking to contribute, one of these projects might pique your interest!</p>

    <div class="showcase">
      <% data.showcase.each do |showcase| %>
        <div class="showcase--item">
          <div class="showcase--screenshot">
            <img class="showcase--image" src="/images/learn/<%= showcase.image.src %>" alt="<%= showcase.image.alt %>">
          </div>
          <div class="showcase--description">
            <h2><%= showcase.name %> <a href="<%= replace_current_version showcase.demo %>"><i class="icon-link-ext"></i></a></h2>

            <p>Repository: <a href="<%= showcase.repository %>"><%= showcase.repository %></a></p>

            <p>
              <%= replace_current_version showcase.description %>

              <% showcase.features.each do |feature| %>
                <li><%= feature %></li>
              <% end %>
            </p>
          </div>
        </div>
      <% end %>
    </div>

    <h1 id="faq">Frequently Asked Questions</h1>

    <h3 id="faq-future-proof">How do I future-proof my Ember.js application?</h3>

    <p>
      Ember.js has a strong emphasis on <a href="https://speakerdeck.com/wycats/stability-without-stagnation-lessons-learned-from-shipping-ember-dot-js">Stability without Stagnation</a>, which means that framework developers take great care when designing new functionality to make sure it fits with the existing functionalities, and provides a path forward for users to upgrade without being subjected to churn.
    </p>

    <p>
      Ember.js also follow a community-driven process for its development that incorporates <a href="https://github.com/emberjs/rfcs">RFCs for features and deprecations</a> and a <a href="/builds">six-week "train release schedule"</a>.
      Every six weeks, candidate features are reviewed and either deemed ready to be included in the stable release, or carry on in beta for another cycle until the next release happens.
    </p>

    <p>
      In short, the best way to make sure you have a healthy application is to keep an eye on RFCs &mdash; remembering they document intent but not necessarily the final implementation, &mdash; keep your application clean of deprecations, and when possible test your application against beta and canary.
    </p>
    
    <h3 id="faq-component-data">Should components load data?</h3>
    
    <p>
      You can find more information at the <a href="https://youtu.be/y7aHMj6VVJY?t=1129">Boston meetup Core Team panel</a>
    </p>
  </article>
</div>
<% end %><commit_msg>Updated learn html structure<commit_after>---
title: Learn
responsive: true
---

<% content_for :outside_wrapper do %>
<div class="legal-wrapper">
  <img class="learning-tomster" src="/images/tomsters/teaching-reverse.png" alt="Teaching Tomster" class="learning-tomster">
  <article>
    <h1>Learning Ember.js</h1>

    <p>Are you getting started on your Ember.js adventure? Check out our official reading material: </p>

    <ul>
      <li><strong>Quick start</strong> <a href="https://guides.emberjs.com/current/getting-started/quick-start/"><i class="icon-link-ext"></i></a>: An easy breezy introduction to the framework.</li>
      <li><strong>Tutorial</strong> <a href="https://guides.emberjs.com/current/tutorial/ember-cli/"><i class="icon-link-ext"></i></a>: Follow our tutorial to build, and deploy, your first Ember.js application!</li>
      <li><strong>Guides</strong> <a href="https://guides.emberjs.com/"><i class="icon-link-ext"></i></a>: Whether you're just getting started and want to get familiar with Ember, or you're looking to refresh your knowledge on a certain feature, the Guides are the place for you.</li>
    </ul>
<section>
    <h2>API Reference</h2>

    <p>
      Explore the available API of the various Ember ecosystem libraries. This is where you want to go to read in details about the various features, including example code.
    </p>

    <ul class="api-reference-list">
      <li><a href="http://emberjs.com/api/">
        <img src="/images/learn/ember.png" class="project-logo" alt="Ember">
      </a></li>
      <li><a href="http://emberjs.com/api/ember-data/">
        <img src="/images/learn/ember-data.png" class="project-logo" alt="Ember Data">
      </a></li>
      <li><a href="http://ember-cli.com/api/">
        <img src="/images/learn/ember-cli.png" class="project-logo" alt="Ember CLI">
      </a></li>
    </ul>
    </section>
    <section>
    <h2 id="deprecations" class="anchorable-toc">Deprecation Guides <a href="http://emberjs.com/deprecations/"><i class="icon-link-ext"></i></a></h2>

    <p>
      Over the course of the years cruft inevitably sneaks into all software projects. In order to clean up outdated functionality and guide users, Ember has a deprecation process. You can read our <a href="http://emberjs.com/deprecations/">deprecation guides</a> for more information. You can find below more direct links to Ember and Ember Data versions.
    </p>

    <div class="flex-container learn-deprecations">
      <div class="flex-same-width">
        <h3 id="deprecations-ember" class="anchorable-toc" >Ember</h3>

        <ul>
          <li><a href="/deprecations/v1.x">1.x</a></li>
          <li><a href="/deprecations/v2.x">2.x</a></li>
        </ul>
      </div>
      <div class="flex-same-width">
        <h3 id="deprecations-ember-data" class="anchorable-toc">Ember Data</h3>
        <ul>
          <li><a href="/deprecations/ember-data/v2.x">2.x</a></li>
        </ul>
      </div>
    </div>
    </section>
    <section>
    <h2>Ecosystem</h2>

    <p>
      One of the main strengths of Ember is how shared conventions enable developers to build on top of each other's work and improve the ecosystem for everyone. What follows are some of the projects more closely maintained by the several Ember teams.
    </p>

    <p>
      <strong>Ember CLI</strong>: The official command line toolkit to develop Ember applications. Check out the <a href="https://ember-cli.com/user-guide/">User Guide</a>, and the documentation on how to <a href="https://ember-cli.com/extending/">extend Ember CLI</a> as an addon developer.
    </p>

    <p><strong>Ember Inspector</strong>: A browser plugin/bookmarklet that helps you inspect and debug applications. Learn how best to use it in the <a href="https://guides.emberjs.com/current/ember-inspector/installation/">Ember Inspector Guides</a>.</p>

    <p><strong>Liquid Fire</strong>: A toolkit to add animations and transitions to your application. Check out their <a href="http://ember-animation.github.io/liquid-fire/">interactive documentation</a>.</p>

    <p><strong>Ember Twiddle</strong>: Online code editor so you can share working snippets of code or reproductions of bugs. Try it out <a href="http://ember-twiddle.com/">today</a>!</p>

    <p><strong>FastBoot</strong>: Server-side rendering library for Ember applications. Check out the <a href="http://www.ember-fastboot.com/quickstart">Quickstart</a> to get up and running, and the <a href="http://www.ember-fastboot.com/docs/user-guide">User Guide</a> for more detailed information.
    </p>
    </section>
    <section>
    <h2 id="showcase" class="anchorable-toc">Showcase</h2>

    <p>In this section you will find applications that are maintained by the Ember.js teams with the help of contributors. While software is always a work in progress, the goal is to showcase patterns and solutions applied in real-world applications.</p>
    <p>Whether you're simply interested in checking out how some feature is implemented, or you're looking to contribute, one of these projects might pique your interest!</p>

    <div class="showcase">
      <% data.showcase.each do |showcase| %>
        <div class="showcase--item">
          <div class="showcase--screenshot">
            <img class="showcase--image" src="/images/learn/<%= showcase.image.src %>" alt="<%= showcase.image.alt %>">
          </div>
          <div class="showcase--description">
            <h2><%= showcase.name %> <a href="<%= replace_current_version showcase.demo %>"><i class="icon-link-ext"></i></a></h2>

            <p>Repository: <a href="<%= showcase.repository %>"><%= showcase.repository %></a></p>

            <p>
              <%= replace_current_version showcase.description %>

              <% showcase.features.each do |feature| %>
                <li><%= feature %></li>
              <% end %>
            </p>
          </div>
        </div>
      <% end %>
    </div>
    </section>
    <section>
    <h2 id="faq">Frequently Asked Questions</h2>

    <h3 id="faq-future-proof">How do I future-proof my Ember.js application?</h3>

    <p>
      Ember.js has a strong emphasis on <a href="https://speakerdeck.com/wycats/stability-without-stagnation-lessons-learned-from-shipping-ember-dot-js">Stability without Stagnation</a>, which means that framework developers take great care when designing new functionality to make sure it fits with the existing functionalities, and provides a path forward for users to upgrade without being subjected to churn.
    </p>

    <p>
      Ember.js also follow a community-driven process for its development that incorporates <a href="https://github.com/emberjs/rfcs">RFCs for features and deprecations</a> and a <a href="/builds">six-week "train release schedule"</a>.
      Every six weeks, candidate features are reviewed and either deemed ready to be included in the stable release, or carry on in beta for another cycle until the next release happens.
    </p>

    <p>
      In short, the best way to make sure you have a healthy application is to keep an eye on RFCs &mdash; remembering they document intent but not necessarily the final implementation, &mdash; keep your application clean of deprecations, and when possible test your application against beta and canary.
    </p>
    
    <h3 id="faq-component-data">Should components load data?</h3>
    
    <p>
      You can find more information at the <a href="https://youtu.be/y7aHMj6VVJY?t=1129">Boston meetup Core Team panel</a>
    </p>
    </section>
  </article>
</div>
<% end %>
{'fraction_non_alphanumeric': 0.14157574134814915, 'fraction_numerical': 0.00455184416627619, 'mean_word_length': 3.315424610051993, 'pattern_counts': {'":': 0, '<': 403, '<?xml version=': 0, '>': 403, 'https://': 18, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3268174', 'n_tokens_mistral': 4623, 'n_tokens_neox': 4386, 'n_words': 1443}