index.html

---
layout: default
title: NoFlo | Flow-Based Programming for JavaScript
---
  <section class="row-fluid homepage-section">
    <div class="promo">
      <h1 class="promo__title">{{ site.title }}</h1>
      <p class="promo__text">{{ site.tagline }} &mdash; NoFlo 1.0 is here!</p>
      <div class="promo__toolbar">
        <a href="{{ site.baseurl }}/documentation/" class="btn btn-primary promo__button download-button">Get started now</a>
        <a href="http://bergie.iki.fi/blog/noflo-10-prep/" class="btn btn-primary promo__button download-button" target="_blank">Read what's new</a>
      </div>
    </div>
  </section>

  <section class="row-fluid homepage-section about-noflo">
    <div class="plain-title">
      <div class="container">
        <div class="span8 offset4">
          <h1>About {{ site.title }} {{ site.data.noflo.version }}</h1>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="main">
        <div class="sidebar span4">
          <img src="./img/diagrams/circles.png" alt="" title="" class="sidebar__image" />
        </div>
        <div class="content span8">
          <h3>Flow-Based Programming (FBP)</h3>
          <p>NoFlo is a JavaScript implementation of <a href="https://en.wikipedia.org/wiki/Flow-based_programming">Flow-Based Programming</a> (FBP). Separating the control flow of software from the actual software logic. Helping you organize large applications easier than traditional OOP paradigms, especially when importing and modifying large data sets.</p>

          <h3>NoFlo and Node.js</h3>
          <p>FBP itself is not a new idea: it comes from a term IBM used in the 70s to define the concepts of more manageable business workflows. NoFlo, however, refreshes these concepts and brings them to web and <a href="https://nodejs.org/">Node.js</a> applications.</p>

          <h3>NoFlo library</h3>
          <p>The MIT-licensed NoFlo library can either be used to run full flow-based applications or as a library for making complex workflows or asynchronous processes more manageable. It can also be used as an <a href="https://en.wikipedia.org/wiki/Extract,_transform,_load">Extract, Transform, Load (ETL)</a> tool in business applications.</p>

          <p>NoFlo components can be written in any language that transpiles into JavaScript including ES6.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="row-fluid homepage-section" id="videos">
    <div class="video">
      <h2>NoFlo Videos</h2>
      <p>Featured: <a href="https://youtu.be/YJHT2vARAOQ">The origins of NoFlo</a></p>
      <a href="https://youtu.be/YJHT2vARAOQ" class="video__play">Play Video</a>
      <ul class="video-thumbnails">
        <li><a href="https://vimeo.com/72065207"><img src="{{ site.basedir }}/img/bergie-cbase.jpg" alt="Introduction to Flow-Based Programming and NoFlo"></a></li>
        <li><a href="https://vimeo.com/72855695"><img src="{{ site.basedir }}/img/dan-lynch.jpg" alt="Flow-Based Programming is Why I am an Engineer"></a></li>
        <li><a href="https://vimeo.com/68601823"><img src="{{ site.basedir }}/img/leigh-interview.jpg" alt="Leigh Taylor chats about designing the NoFlo UI"></a></li>
      </ul>
    </div>
  </section>

  <section class="row-fluid homepage-section">
    <div class="understanding-noflo">
      <div class="container">
        <div class="main">
          <div class="sidebar span4">
            <h2>Understand and design software visually</h2>
            <p>With NoFlo, your application consists of independent components that are connected together 
              in a graph. This makes it possible to split your problem in logical areas that make sense, 
              and to see how they connect with each other.</p>

              <p>NoFlo applications can be designed using <a href="https://flowhub.io/ide/">Flowhub's</a> integrated
              web-based graph editor.</p>
          </div>
          <div class="understanding-noflo__image span10">
            <img src="./img/diagrams/screen-and-map.png" alt="" title="" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="row-fluid homepage-section">
    <div class="flowhub-promo">
      <a class="flowhub-promo-logo" href="https://app.flowhub.io/"><img src="{{ site.basedir }}/img/flowhub-logo.png" alt="Flowhub"></a>
      <h1 class="flowhub-promo-title">Live program NoFlo with Flowhub</h1>
      <p class="flowhub-promo-text">Funded by Kickstarter and developed by the community, Flowhub is a visual programming IDE for NoFlo and other Flow-Based Programming frameworks.</p>
      <a href="https://app.flowhub.io/" class="btn btn-primary flowhub-promo-button download-button">Get started</a>
    </div>
  </section>

  <section id="featured" class="row-fluid homepage-section">
    <div class="who-uses-noflo">
      <div class="container">
        <div class="span2">
          <h2>Component Libraries</h2>
          <p>There are hundreds of <a href="{{ site.baseurl }}/component/">ready-made NoFlo components</a> available, including:</p>
        </div>
        <div class="span9 offset1 who-uses-noflo__logos">
          <ul>
            {% for library in site.highlight_libraries %}
            <li>
              <a href="https://www.npmjs.com/package/{{ library }}">
                <img src="{{ site.baseurl }}/img/library/{{ library }}.jpg" alt="{{ library }}" title="{{ library }}" />
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="row-fluid homepage-section">
    <div class="part-of-noflo">
      <div class="container">
        <div class="span3">
          <h2>Be a part of NoFlo</h2>
          <p>Watch and Participate in the development of NoFlo</p>
          <ul class="development-sources">
            <li>
              <a href="{{ site.repository.web }}">
                <img src="./img/github-logo.png" alt="GitHub" title="GitHub" />
              </a>
            </li>
            <li>
              <a href="https://groups.google.com/group/flow-based-programming">
                <img src="./img/google-logo.png" alt="Google Groups" title="Google Groups" />
              </a>
            </li>
            <li class="last">
              <a href="https://npmjs.org/package/noflo">
                <img src="./img/npm-logo.png" alt="npm" title="npm" />
              </a>
            </li>
          </ul>
        </div>
        <div class="span9">
          <p>Participate in the development of NoFlo on <a href="{{ site.repository.web }}">GitHub</a>. Also see the NoFlo <a href="{{ site.repository.web }}/blob/master/CHANGES.md">change log</a>.</p>
          <hr />
        </div>
        <div class="span9 part-of-noflo__screen"></div>
      </div>
    </div>
  </section>