<commit_before><!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Oboe.js, better JSON through streams</title>

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
    <meta name="author" content="<NAME>">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/night.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="reveal">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section data-markdown>
          # Oboe.js
          ### Better JSON through streams
          <NAME>
        </section>

        <section data-markdown>
          ## What are we going to learn?
        </section>

        <section>
          <h2>Who am I?</h2>
          <div>
            <div style="display:inline-block">
              <img style="width:400px" src="images/juan-caicedo.jpg"></img>
            </div>
            <div style="display:inline-block">
              <div>
                <img src="images/fluencia.png" style="width:300px"></img>
              </div>
              <div>
                <img src="images/spanishdict.png" style="width:300px"></img>
              </div>
              <div>
                <a href="https://github.com/JuanCaicedo">https://github.com/JuanCaicedo</a>
              </div>
              <div>
                <a href="http://engineering.fluencia.com/">Fluencia engineering blog</a>
              </div>
              <div>
                <a href="https://twitter.com/_juancaicedo">@_juancaicedo</a>
              </div>
            </div>
          </div>
        </section>

        <section>
          <h2>Big JSON is hard</h2>
          <p class="fragment fade-in">Slow page load?</p>
          <p class="fragment fade-in">One big AJAX?</p>
          <p class="fragment fade-in">Many small AJAX?</p>
        </section>

        <section>
          <section>
            <div id="oboe-title-div">
              <img id="oboe-logo" style="width:150px" src="images/oboejs.png"></img>
              <h1 id="oboe-title-header">Oboe.js</h1>
            </div>
          </section>
          <section>
            <h3>It's this simple</h3>
            <pre >
              <code class="javascript" data-trim contenteditable>
              </code>
            </pre>
          </section>
          <section>
            <h3>Interact on the fly!</h3>
          </section>
          <section>
            <h3>Object Oriented?</h3>
            <pre class="fragment fade-in">
              <code class="javascript" data-trim contenteditable>
oboe('/myapp/people')
  .node('people.*', function(person){
    return new Person(
      person.firstName,
      person.lastName
    );
  })
  .done(function(people){
    // OOP people!
  })
              </code>
            </pre>
          </section>
          <section>
            <h3>Filtering?</h3>
            <pre class="fragment fade-in">
              <code class="javascript" data-trim contenteditable>
var onlyPeople = [];

oboe('/myapp/people')
  .node('people.*', function(person){
    if(person.name !== '<NAME>'){
      onlyPeople.push(person);
    }
  })
  .done(function(){
    console.log(onlyPeople) // no R.R :(
  })
              </code>
            </pre>
          </section>
          <section>
            <h3>Memory?</h3>
            <pre class="fragment fade-in">
              <code class="javascript" data-trim contenteditable>
oboe('/myapp/people')
  .node('{ firstName lastName }', function(person){
    // write to the DOM
    return oboe.drop;
  })
  .done(function( finalJson){
    console.log(finalJson); // {"people": []}
  })
              </code>
            </pre>
          </section>
          <section>
            <h3>Let's you fail gracefully!</h3>
          </section>
          <section>
            <h3>On the server</h3>
            <pre class="fragment">
              <code class="javascript" data-trim contenteditable>
router.get('/data', function(req, res) {
  var readStream = fetchYourData();
  readStream.pipe(res)
});
              </code>
            </pre>
            <h3 class="fragment">Or don't</h3>
          </section>
          <section>
            <h3>In the shell</h3>
              <pre id="bash-command" class="fragment">
                <code class="bash" data-trim contenteditable>
$ aws datapipeline list-pipelines | node rerun-pipelines.js
              </code>
            </pre>
            <div class="fragment">
              <h3>In a node script</h3>
              <pre>
                <code class="javascript" data-trim contenteditable>
oboe(process.stdin)
  .node('pipelines.[]', function(pipelines){
    pipelines.forEach(rerun)
  })
                </code>
              </pre>
            </div>
          </section>
        </section>
        <section>
          <section>
            <h2>Demo!</h2>
          </section>
          <section><commit_msg>update code snippets<commit_after><!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Oboe.js, better JSON through streams</title>

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
    <meta name="author" content="<NAME>">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/night.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="reveal">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section data-markdown>
          # Oboe.js
          ### Better JSON through streams
          <NAME>
        </section>

        <section data-markdown>
          ## What are we going to learn?
        </section>

        <section>
          <h2>Who am I?</h2>
          <div>
            <div style="display:inline-block">
              <img style="width:400px" src="images/juan-caicedo.jpg"></img>
            </div>
            <div style="display:inline-block">
              <div>
                <img src="images/fluencia.png" style="width:300px"></img>
              </div>
              <div>
                <img src="images/spanishdict.png" style="width:300px"></img>
              </div>
              <div>
                <a href="https://github.com/JuanCaicedo">https://github.com/JuanCaicedo</a>
              </div>
              <div>
                <a href="http://engineering.fluencia.com/">Fluencia engineering blog</a>
              </div>
              <div>
                <a href="https://twitter.com/_juancaicedo">@_juancaicedo</a>
              </div>
            </div>
          </div>
        </section>

        <section>
          <h2>Big JSON is hard</h2>
          <p class="fragment fade-in">Slow page load?</p>
          <p class="fragment fade-in">One big AJAX?</p>
          <p class="fragment fade-in">Many small AJAX?</p>
        </section>

        <section>
          <section>
            <div id="oboe-title-div">
              <img id="oboe-logo" style="width:150px" src="images/oboejs.png"></img>
              <h1 id="oboe-title-header">Oboe.js</h1>
            </div>
          </section>
          <section>
            <h3>It's this simple</h3>
            <pre >
              <code class="javascript" data-trim contenteditable>
              </code>
            </pre>
          </section>
          <section>
            <h3>Interact on the fly!</h3>
          </section>
          <section>
            <h3>Object Oriented?</h3>
            <pre class="fragment fade-in">
              <code class="javascript" data-trim contenteditable>
// new Person(firstName, lastName)
oboe('/myapp/people')
  .node('people.*', function(person){
    return new Person(
      person.firstName,
      person.lastName
    );
  })
  .done(function(people){
    people[0].sayName();
  })
              </code>
            </pre>
          </section>
          <section>
            <h3>Filtering?</h3>
            <pre class="fragment fade-in">
              <code class="javascript" data-trim contenteditable>
var greenPeople = [];
var bluePeople  = [];

oboe('/myapp/people')
  .node('people.*', function(person){
    if(person.color === 'blue'){
      bluePeople.push(person);
    } else {
      greenPeople.push(person);
    }
  })
              </code>
            </pre>
          </section>
          <section>
            <h3>Memory?</h3>
            <pre class="fragment fade-in">
              <code class="javascript" data-trim contenteditable>
oboe('/myapp/people')
  .node('{ firstName lastName }', function(person){
    if(person.color === 'blue'){
      return this.drop;
    }
  })
  .done(function( finalJson){
    console.log(finalJson); // {"people": [ , , greenPerson, ]}
  })
              </code>
            </pre>
          </section>
          <section>
            <h3>Let's you fail gracefully!</h3>
          </section>
          <section>
            <h3>On the server</h3>
            <pre class="fragment">
              <code class="javascript" data-trim contenteditable>
router.get('/data', function(req, res) {
  var readStream = fetchYourData();
  readStream.pipe(res);
});
              </code>
            </pre>
            <h3 class="fragment">Or don't</h3>
          </section>
          <section>
            <h3>In the shell</h3>
              <pre id="bash-command" class="fragment">
                <code class="bash" data-trim contenteditable>
$ aws datapipeline list-pipelines | node rerun-pipelines.js
              </code>
            </pre>
            <div class="fragment">
              <h3>In a node script</h3>
              <pre>
                <code class="javascript" data-trim contenteditable>
oboe(process.stdin)
  .node('pipelines.[]', function(pipeline){
    rerun(pipeline);
  })
                </code>
              </pre>
            </div>
          </section>
        </section>
        <section>
          <section>
            <h2>Demo!</h2>
          </section>
          <section>
{'fraction_non_alphanumeric': 0.15921882995053727, 'fraction_numerical': 0.00827221558928876, 'mean_word_length': 1.7457269960196675, 'pattern_counts': {'":': 2, '<': 318, '<?xml version=': 0, '>': 318, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, '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': '6143116', 'n_tokens_mistral': 3644, 'n_tokens_neox': 3524, 'n_words': 714}