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

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

    <title>Building Realtime Apps with Firebase</title>

    <meta name="description" content="Intro to Firebase">
    <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">

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

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

    <!-- If the query includes 'print-pdf', include the PDF print sheet -->
    <script>
      if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
      }
    </script>

    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script>
    </script>
  </head>

  <body>

    <div class="reveal">

      <small id="era">

      </small>

      <div class="slides">

        <!--
          Intro
        -->
        <section title="">
          <br><br>
          <h2>Intro to Firebase</h2>
          <img src="images/firebase-logo.png" class="no-style">
          <br> <br>
          <p>
            <h6><span id="presenter-name">Firebase</span> /
              <a id="presenter-twitter-url" href="http://twitter.com/firebase">
                @<span id="presenter-twitter">firebase</span>
              </a>
            </h6>

          </p>
        </section>

        <section>
          <p class="text-cream text-medium">The <span class="text-discs">Realtime Backend</span></p>
          <p class="text-cream text-medium">for your App</p>
        </section>

        <!--
          Google Docs
        -->

        <section>
          <p class="text-small">This is what the users sees</p>
          <img src="images/gdocs4.gif" alt="gdocs" class="no-style" />
        </section>

        <section>
          <p class="text-small">This is what a dev sees</p>
          <img src="images/backend-reqs.gif" alt="" class="white-bg no-style" />
        </section>

        <section>
          <h4>Backend</h4>
          <!-- data-box -->
          <img src="images/data-box.png" class="no-style framework-logo">
          <img src="images/security-box.png" class="no-style framework-logo">
          <img src="images/login-box.png" class="no-style framework-logo">
          <img src="images/hosting-box.png" class="no-style framework-logo">
        </section>

        <section>
          <h4>The user expects</h4>
          <p class="text-small era-point">Speed</p>
          <p class="text-small era-point">Offline</p>
          <p class="text-small era-point">Multi-platform</p>
          <p class="text-small era-point">Simple Authentication</p>
        </section>

        <!--
          Firebase
        -->
        <section>
          <h3>Firebase</h3>
          <img src="images/firebase-logo.png" class="no-style era-point">
          <br>
          <p class="text-cream">The <span class="text-discs">Realtime Backend</span></p>
          <p class="text-cream">for your App</p>
        </section>

        <section>
          <h2>Cloud database</h2>
          <p class="era-point">NoSQL data-store</p>
          <p class="era-point">Returns JSON from a RESTful API</p>
        </section>

        <section>
          <img src="/images/simple-api.png" alt="" class="no-style">
        </section>

        <section>
          <h2>Realtime Data</h2>
          <p class="era-point text-cream">
            Whenever <span class="text-discs">data is  updated in Firebase</span>,
            it sends the update down to every <span class="text-tarheel">listening client</span>
          </p>
        </section>

        <section>
          <img src="/images/realtime-api.png" alt="" class="no-style" style="max-width: 85%;">
        </section>

        <section>
          <p class="text-medium">SDKs</p>
          <img src="/images/platforms.png" alt="" class="no-style">
        </section>

        <section>
          <h2>Store Data</h2>
          <pre>
            <code data-trim class="javascript">
var ref = new Firebase('https://webapi.firebaseio.com/realtime');
ref.set('All the things');
            </code>
          </pre>
        </section>

        <section>
          <h2>Sync Data</h2>
          <pre>
            <code data-trim class="javascript">
var label = document.getElementById('labelRealtime');
var ref = new Firebase('https://webapi.firebaseio.com/realtime');
ref.on('value', function(snap) {
  label.innerText = snap.val();
});
            </code>
          </pre>
        </section>

        <section>
          <h2>Authentication</h2>
          <pre>
            <code data-trim class="javascript">
var ref = new Firebase('https://webapi.firebaseio.com/');

// Login with Google
ref.authWithOAuthPopup('google', function(error, authData) {
  console.log(authData);
});

// Listen for authentcated users
ref.onAuth(function(authData) {
  if(authData) {
    console.log('User is logged in!');
  }
});
            </code>
          </pre>

        </section>

        <section>
          <h3>Bindings</h3>
          <!-- TODO(koss): Use flexbox to add text titles. -->
          <img src="/images/backbonejs.png" class="framework-logo no-style" />
          <img src="/images/emberjs.png" class="framework-logo no-style" />
          <img src="/images/react.png" class="framework-logo no-style" />
          <img src="/images/angularjs.png" class="framework-logo no-style" />
        </section>

        <section>
          <h1>Let's Build an App!</h1>
          <h1>(Live Coding)</h1>
        </section>

        <section>
          <p class="era-point text-tarheel">
            Demo: <a class="text-tarheel" href="https://gdg-seattle.firebaseapp.com/demo">gdg-seattle.firebaseapp.com/demo</a>
          </p>
          <p class="era-point">
            Source: github.com/mckoss/firebase-intro
          </p>
        </section>

        <section>
          <p class="text-medium">Documentation is Important</p>
          <br><br><commit_msg>Comment out Firebase code.<commit_after><!doctype html>
<html lang="en">

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

    <title>Building Realtime Apps with Firebase</title>

    <meta name="description" content="Intro to Firebase">
    <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">

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

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

    <!-- If the query includes 'print-pdf', include the PDF print sheet -->
    <script>
      if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
      }
    </script>

    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script>
    </script>
  </head>

  <body>

    <div class="reveal">

      <small id="era">

      </small>

      <div class="slides">

        <!--
          Intro
        -->
        <section title="">
          <br><br>
          <h2>Intro to Firebase</h2>
          <img src="images/firebase-logo.png" class="no-style">
          <br> <br>
          <p>
            <h6><span id="presenter-name">Firebase</span> /
              <a id="presenter-twitter-url" href="http://twitter.com/firebase">
                @<span id="presenter-twitter">firebase</span>
              </a>
            </h6>

          </p>
        </section>

        <section>
          <p class="text-cream text-medium">The <span class="text-discs">Realtime Backend</span></p>
          <p class="text-cream text-medium">for your App</p>
        </section>

        <!--
          Google Docs
        -->

        <section>
          <p class="text-small">This is what the users sees</p>
          <img src="images/gdocs4.gif" alt="gdocs" class="no-style" />
        </section>

        <section>
          <p class="text-small">This is what a dev sees</p>
          <img src="images/backend-reqs.gif" alt="" class="white-bg no-style" />
        </section>

        <section>
          <h4>Backend</h4>
          <!-- data-box -->
          <img src="images/data-box.png" class="no-style framework-logo">
          <img src="images/security-box.png" class="no-style framework-logo">
          <img src="images/login-box.png" class="no-style framework-logo">
          <img src="images/hosting-box.png" class="no-style framework-logo">
        </section>

        <section>
          <h4>The user expects</h4>
          <p class="text-small era-point">Speed</p>
          <p class="text-small era-point">Offline</p>
          <p class="text-small era-point">Multi-platform</p>
          <p class="text-small era-point">Simple Authentication</p>
        </section>

        <!--
          Firebase
        -->
        <section>
          <h3>Firebase</h3>
          <img src="images/firebase-logo.png" class="no-style era-point">
          <br>
          <p class="text-cream">The <span class="text-discs">Realtime Backend</span></p>
          <p class="text-cream">for your App</p>
        </section>

        <section>
          <h2>Cloud database</h2>
          <p class="era-point">NoSQL data-store</p>
          <p class="era-point">Returns JSON from a RESTful API</p>
        </section>

        <section>
          <img src="/images/simple-api.png" alt="" class="no-style">
        </section>

        <section>
          <h2>Realtime Data</h2>
          <p class="era-point text-cream">
            Whenever <span class="text-discs">data is  updated in Firebase</span>,
            it sends the update down to every <span class="text-tarheel">listening client</span>
          </p>
        </section>

        <section>
          <img src="/images/realtime-api.png" alt="" class="no-style" style="max-width: 85%;">
        </section>

        <section>
          <p class="text-medium">SDKs</p>
          <img src="/images/platforms.png" alt="" class="no-style">
        </section>

        <section>
          <h2>Store Data</h2>
          <pre>
            <code data-trim class="javascript">
var ref = new Firebase('https://webapi.firebaseio.com/realtime');
ref.set('All the things');
            </code>
          </pre>
        </section>

        <section>
          <h2>Sync Data</h2>
          <pre>
            <code data-trim class="javascript">
var label = document.getElementById('labelRealtime');
var ref = new Firebase('https://webapi.firebaseio.com/realtime');
ref.on('value', function(snap) {
  label.innerText = snap.val();
});
            </code>
          </pre>
        </section>

        <section>
          <h2>Authentication</h2>
          <pre>
            <code data-trim class="javascript">
var ref = new Firebase('https://webapi.firebaseio.com/');

// Login with Google
ref.authWithOAuthPopup('google', function(error, authData) {
  console.log(authData);
});

// Listen for authentcated users
ref.onAuth(function(authData) {
  if(authData) {
    console.log('User is logged in!');
  }
});
            </code>
          </pre>

        </section>

        <section>
          <h3>Bindings</h3>
          <!-- TODO(koss): Use flexbox to add text titles. -->
          <img src="/images/backbonejs.png" class="framework-logo no-style" />
          <img src="/images/emberjs.png" class="framework-logo no-style" />
          <img src="/images/react.png" class="framework-logo no-style" />
          <img src="/images/angularjs.png" class="framework-logo no-style" />
        </section>

        <section>
          <h1>Let's Build an App!</h1>
          <h1>(<a href="/demo" target="_blank">Live Coding</a>)</h1>
        </section>

        <section>
          <p class="era-point text-tarheel">
            Demo: <a class="text-tarheel" href="https://gdg-seattle.firebaseapp.com/demo">gdg-seattle.firebaseapp.com/demo</a>
          </p>
          <p class="era-point">
            Source: github.com/mckoss/firebase-intro
          </p>
        </section>

        <section>
          <p class="text-medium">Documentation is Important</p>
          <br><br>
{'fraction_non_alphanumeric': 0.1714131357567338, 'fraction_numerical': 0.0058655552982943586, 'mean_word_length': 2.033949894638258, 'pattern_counts': {'":': 0, '<': 371, '<?xml version=': 0, '>': 371, 'https://': 10, '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': '3037387', 'n_tokens_mistral': 4167, 'n_tokens_neox': 4060, 'n_words': 790}