AsyncDisplayKit/_site/docs/philosophy.html

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
    <meta charset='utf-8'>
    <title>AsyncDisplayKit | Philosophy</title>
    <link rel='stylesheet' href='/static/main.css' type='text/css'/>
    <link rel="stylesheet" href='/static/pygments.css' type='text/css'/>
    <link rel='shortcut icon' href='/static/favicon.png'>
    <meta name='viewport' content='width=480'>
    <meta property="og:title" content="Philosophy" />
    <meta property="og:site_name" content="AsyncDisplayKit">
    <meta property='og:description' content='AsyncDisplayKit: A Library for Functional UI on iOS.'>
    <meta property='og:image' content='http://asyncdisplaykit.org/static/asyncdisplaykit-og-image.png'>
    <meta property='og:url' content="http://asyncdisplaykit.org/docs/philosophy.html">
    <meta property='og:type' content='website'>
    <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
    <script type="text/javascript">{'try{Typekit.load();}catch(e){}'}</script>
</head>
<body>

<header class='topbar site-header'><nav class='width'>
<a class="site-title" href="/">AsyncDisplayKit</a>
    <ul>
      <li><a href="/docs/getting-started.html"  class="active" >
          docs
      </a></li>
      <li><a href="/appledocs.html" >api</a></li>
      <li><a href="/resources.html" >resources</a></li>
      <li><a href="http://github.com/facebook/AsyncDisplayKit">github</a>
    </ul>
</nav></header>


<section class='content'><div class='width'>

<nav class='toc'>

    <section>
      <h3>Quick Start</h3>
      <ul>


            <li>
              <a href=/docs/getting-started.html>
                Getting Started
              </a>
            </li>


            <li>
              <a href=/docs/philosophy.html class="active">
                Philosophy
              </a>
            </li>


            <li>
              <a href=/docs/installation.html>
                Installation
              </a>
            </li>


            <li>
              <a href=/docs/references.html>
                References
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Core Concepts</h3>
      <ul>


            <li>
              <a href=/docs/intelligent-preloading.html>
                Intelligent Preloading
              </a>
            </li>


            <li>
              <a href=/docs/subclassing.html>
                Subclassing
              </a>
            </li>


            <li>
              <a href=/docs/layout-engine.html>
                Layout Engine
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Node Containers</h3>
      <ul>


            <li>
              <a href=/docs/asviewcontroller.html>
                ASViewController
              </a>
            </li>


            <li>
              <a href=/docs/aspagernode.html>
                ASPagerNode
              </a>
            </li>


            <li>
              <a href=/docs/ascollectionnode.html>
                ASCollectionNode
              </a>
            </li>


            <li>
              <a href=/docs/astablenode.html>
                ASTableNode
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Nodes</h3>
      <ul>


            <li>
              <a href=/docs/display-node.html>
                ASDisplayNode
              </a>
            </li>


            <li>
              <a href=/docs/cell-node.html>
                ASCellNode
              </a>
            </li>


            <li>
              <a href=/docs/text-cell-node.html>
                ASTextCellNode
              </a>
            </li>


            <li>
              <a href=/docs/control-node.html>
                ASControlNode
              </a>
            </li>


            <li>
              <a href=/docs/button-node.html>
                ASButtonNode
              </a>
            </li>


            <li>
              <a href=/docs/text-node.html>
                ASTextNode
              </a>
            </li>


            <li>
              <a href=/docs/editable-text-node.html>
                ASEditableTextNode
              </a>
            </li>


            <li>
              <a href=/docs/image-node.html>
                ASImageNode
              </a>
            </li>


            <li>
              <a href=/docs/network-image-node.html>
                ASNetworkImageNode
              </a>
            </li>


            <li>
              <a href=/docs/map-node.html>
                ASMapNode
              </a>
            </li>


            <li>
              <a href=/docs/video-node.html>
                ASVideoNode
              </a>
            </li>


            <li>
              <a href=/docs/scroll-node.html>
                ASScrollNode
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Layout Engine</h3>
      <ul>


            <li>
              <a href=/docs/automatic-layout-basics.html>
                Layout Basics
              </a>
            </li>


            <li>
              <a href=/docs/automatic-layout-containers.html>
                Layout Containers
              </a>
            </li>


            <li>
              <a href=/docs/automatic-layout-examples.html>
                Layout Examples
              </a>
            </li>


            <li>
              <a href=/docs/automatic-layout-debugging.html>
                Layout Debugging
              </a>
            </li>


            <li>
              <a href=/docs/layout-options.html>
                Layout Options
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Optimizations</h3>
      <ul>


            <li>
              <a href=/docs/layer-backing.html>
                Layer Backing
              </a>
            </li>


            <li>
              <a href=/docs/synchronous-concurrency.html>
                Synchronous Concurrency
              </a>
            </li>


            <li>
              <a href=/docs/subtree-rasterization.html>
                Subtree Rasterization
              </a>
            </li>


            <li>
              <a href=/docs/drawing-priority.html>
                Drawing Priority
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Conveniences</h3>
      <ul>


            <li>
              <a href=/docs/hit-test-slop.html>
                Hit Test Slop
              </a>
            </li>


            <li>
              <a href=/docs/image-modification-block.html>
                Image Modification Blocks
              </a>
            </li>


            <li>
              <a href=/docs/placeholder-fade-duration.html>
                Placeholder Fade Duration
              </a>
            </li>


      </ul>
    </section>

    <section>
      <h3>Debug Tools</h3>
      <ul>


            <li>
              <a href=/docs/debug-tool-pixel-scaling.html>
                Image Scaling
              </a>
            </li>


            <li>
              <a href=/docs/debug-tool-hit-test-slop.html>
                Hit Test Visualization
              </a>
            </li>


            <li>
              <a href=/docs/debug-tool-ASRangeController.html>
                Range Visualization
              </a>
            </li>


      </ul>
    </section>

</nav>


<article class='withtoc'>
    <h1>
      Philosophy
      <a class="edit-page-link" href="https://github.com/facebook/asyncdisplaykit/tree/gh-pages/_docs/philosophy.md" target="_blank">Edit on GitHub</a>
    </h1>
    <p></p>

    <h1>Asynchronous Performance Gains</h1>

<p>AsyncDisplayKit is a UI framework that was originally born from Facebook’s Paper app. It came as an answer to one of the core questions the Paper team faced. <strong>How can you keep the main thread as clear as possible?</strong></p>

<p>Nowadays, many apps have a user experience that relies heavily upon continuous gestures and physics based animations. At the very least, your UI is probably dependent on some form of scroll view. These types of user interfaces depend entirely on the main thread and are extremely sensitive to main thread stalls. <strong>A clogged main thread means dropped frames and an unpleasant user experience.</strong></p>

<p>AsyncDisplayKit Nodes are a thread-safe abstraction layer over UIViews and CALayers:</p>

<p><img src="/static/node-view-layer.png" alt="logo"></p>

<p>You can access most view and layer properties when using nodes, the difference is that nodes are rendered concurrently by default, and measured and laid out asynchronously when used <a href = "/docs/automatic-layout.html">correctly</a>!</p>

<p>Too see asynchronous performance gains in action, check out the <a href = "/docs/automatic-layout.html"><code>examples/ASDKgram</code></a> app which compares a UIKit-implemented social media feed with an ASDK-implemented social media feed! </p>

<p>On an iPhone 6+, the performance may not be radically different, but on a 4S, the difference is dramatic! Which leads us to ASDK&#39;s next priority...</p>

<h1>A Great App Experience for All Users</h1>

<p>ASDK&#39;s performance gains allow you to easily design a great experience for every app user - across all devices, on all network connections. </p>

<h2>A Great Developer Experience</h2>

<p>ASDK also strives to make the developer experience great
- platform compatability: iOS &amp; tvOS
- language compatability: Objective-C &amp; Swift
- requires fewer lines of code to build advanced apps (see <a href = "/docs/automatic-layout.html"><code>examples/ASDKgram</code></a> for a direct comparison of a UIKit implemention of an app vs. an equivalent ASDK implementation)
- cleaner architecture patterns
- robust code (some really brilliant minds have worked on this for 3+ years).</p>

<h1>Advanced Developer Tools</h1>

<p>As ASDK has grown, some of the brightest iOS engineers have contributed advanced technologies that will save you, as a developer using ASDK, development time. </p>

<h3>Advanced Technology</h3>

<ul>
<li>ASRunLoopQueue</li>
<li>ASRangeController with Intelligent Preloading</li>
</ul>

<h3>Network Code Savings</h3>

<ul>
<li>automatic batch fetching (e.g. JSON payloads)</li>
</ul>


    <div class="docs-prevnext">


        <a class="right" href="/docs/installation.html">Next &rarr;</a>

    </div>

    <a id="_"></a>
</article>

</div></section>
<footer class="copyright"-><div class='width'>
a Facebook &amp; Instagram collaboration &#x2665;
</div></footer>

<script src="/static/linkify.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-44373548-4', 'auto');
  ga('send', 'pageview');

  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</body>
</html>