1. Lorenzo Gil Sánchez
  2. presentacion-jquery.Deferred

Commits

Lorenzo Gil Sánchez  committed 306e9a0

Added a bunch of slides

  • Participants
  • Parent commits ca781fa
  • Branches default

Comments (0)

Files changed (9)

File img/like-a-boss-10.jpg

Added
New image

File img/serial-parallel.png

Added
New image

File img/serial-parallel.svg

View file
Added
New image

File img/states.png

Added
New image

File img/states.svg

View file
Added
New image

File img/states2.png

Added
New image

File img/states2.svg

View file
Added
New image

File img/swimming-like-a-boss.jpg

Added
New image

File index.html

View file
 
 getData();
           </code></pre>
+<!-- TODO. Usar fadeIn para meter mas cascada y asincronia -->
 
           <aside class="notes">
             Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
 	  </section>
 	</section>
 
-        <!-- Example of nested vertical slides -->
-                                <section>
-                                        <section>
-                                                <h2>Vertical Slides</h2>
-                                                <p>
-                                                        Slides can be nested inside of other slides,
-                                                        try pressing <a href="#" class="navigate-down">down</a>.
-                                                </p>
-                                                <a href="#" class="image navigate-down">
-                                                        <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-                                                </a>
-                                        </section>
-                                        <section>
-                                                <h2>Basement Level 1</h2>
-                                                <p>Press down or up to navigate.</p>
-                                        </section>
-                                        <section>
-                                                <h2>Basement Level 2</h2>
-                                                <p>Cornify</p>
-                                                <a class="test" href="http://cornify.com">
-                                                        <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
-                                                </a>
-                                        </section>
-                                        <section>
-                                                <h2>Basement Level 3</h2>
-                                                <p>That's it, time to go back up.</p>
-                                                <a href="#/2" class="image">
-                                                        <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
-                                                </a>
-                                        </section>
-                                </section>
+        <section>
+	  <section>
+            <h2>Problemas Ajax tradicional</h2>
+	    <ul>
+	      <li class="fragment">Dificultad de sincronización entre llamadas</li>
+	      <li class="fragment">Dificultad de añadir funcionalidad posteriormente</li>
+	      <li class="fragment">Escasa legibilidad</li>
+	      <li class="fragment">Gestión de errores descentralizada</li>
+	      <li class="fragment">Resumiendo ...</li>
+	    </ul>
+	    <p class="fragment highlight-red roll-in">... la programación asíncrona es <strong>compleja</strong></p>
+	  </section>
+	  <section>
+	    <h2>Sincronización entre llamadas</h2>
+            <img width="471" height="296" src="img/serial-parallel.png" alt="Comparación entre llamadas en serie o paralelas">
+	  </section>
+	  <section>
+	    <h2>Funcionalidad posterior</h2>
+	    <p>¿Y si queremos que cuando se reciba la geolocalización, se almacene en Local Storage?</p>
+	    <p class="fragment highlight-red roll-in">Hay que modificar uno de los callbacks existentes. No se puede añadir un nuevo callback concreto para esto.</p>
+	    <p class="fragment highlight-red roll-in">Esto complica la capacidad de testear el código aisladamente (tests unitarios)</p>
+	  </section>
+        </section>
 
-                                <section>
-                                        <h2>Point of View</h2>
-                                        <p>
-                                                Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
-                                        </p>
-                                </section>
+	<section>
+	  <h2>jQuery.Deferred al rescate</h2>
+	  <ul>
+	    <li class="fragment">Nueva funcionalidad desde jQuery 1.5 (¡enero 2011!)</li>
+	    <li class="fragment">Permite conectar varios callbacks</li>
+	    <li class="fragment">Pone un poco de orden en la programación asíncrona utilizando un patrón conocido (promesas)</li>
+	    <li class="fragment">No es nada nuevo. Mochikit y Dojo ya lo tenían desde hace tiempo</li>
+	    <li class="fragment">Supone un cambio de mentalidad al ser una nueva abstracción</li>
+	  </ul>
+	  <p class="fragment highlight-green roll-in">¡Manos a la obra!</p>
+	</section>
 
-                                <section>
-                                        <h2>rvl.io</h2>
-                                        <p>
-                                                If you don't like writing slides in HTML you can use the online editor <a href="http://www.rvl.io" target="_blank">rvl.io</a>.
-                                        </p>
-                                </section>
+	<section>
+	  <h2>Estados de un objeto Deferred</h2>
+          <img width="541" height="426" src="img/states.png" alt="Estados posibles">
+	  <p class="fragment">Cuando el objeto llega a los estados Éxito o Fallo, ¡se queda ahí permanentemente!</p>
+	</section>
 
-                                <section>
-                                        <h2>Works in Mobile Safari</h2>
-                                        <p>
-                                                Try it out! You can swipe through the slides and pinch your way to the overview.
-                                        </p>
-                                </section>
+	<section>
+	  <h2>Eventos de un objeto Deferred</h2>
+	  <p>Se pueden conectar varios callbacks a cada evento</p>
+	  <ul>
+	    <li><strong>done</strong> cuando pasa al estado <em>Éxito</em></li>
+	    <li><strong>fail</strong> cuando pasa al estado <em>Fallo</em></li>
+	  </ul>
+	</section>
 
-                                <section>
-                                        <h2>Marvelous Unordered List</h2>
-                                        <ul>
-                                                <li>No order here</li>
-                                                <li>Or here</li>
-                                                <li>Or here</li>
-                                                <li>Or here</li>
-                                        </ul>
-                                </section>
+	<section>
+	  <h2>Métodos de un objeto Deferred</h2>
+	  <p>Hacen que el objeto cambie de estado</p>
+	  <ul>
+	    <li><strong>resolve</strong> hace que el deferred pase al estado <em>Éxito</em></li>
+	    <li><strong>reject</strong> hace que el deferred pase al estado <em>Fallo</em></li>
+	  </ul>
+	</section>
 
-                                <section>
-                                        <h2>Fantastic Ordered List</h2>
-                                        <ol>
-                                                <li>One is smaller than...</li>
-                                                <li>Two is smaller than...</li>
-                                                <li>Three!</li>
-                                        </ol>
-                                </section>
+	<section>
+	  <h2>Es decir ...</h2>
+          <img width="541" height="426" src="img/states2.png" alt="Estados posibles con sus transiciones">
+	</section>
 
-                                <section data-markdown>
-                                        <script type="text/template">
-                                                ## Markdown support
+	<section>
+	  <h2>Muy bonito, pero necesito un ejemplo</h2>
+          <pre><code contenteditable>
+// $.ajax devuelve un Referred (más o menos)
+var request = $.ajax('data.php', {data: {arg1: 'value1', arg2: 'value2'}});
 
-                                                For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
+// Conectamos un callback para el evento success
+request.done(function (data, textStatus, jqXHR) {
+    console.log("Ajax request successful");
+});
 
-                                                        <section data-markdown>
-                                                          ## Markdown support
+// Conectamos un callback para el evento error
+request.fail(function (jqXHR, textStatus, errorThrown) {
+    console.log("Ajax request successful");
+});
 
-                                                          For those of you who like that sort of thing.
-                                                          Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
-                                                        </section>
-                                        </script>
-                                </section>
+// Podemos conectar tantos callbacks como queramos
+request.done(function (data, textStatus, jqXHR) {
+    console.log("Did I say I was succesful?");
+});
 
-                                <section id="transitions">
-                                        <h2>Transition Styles</h2>
-                                        <p>
-                                                You can select from different transitions, like: <br>
-                                                <a href="?transition=cube#/transitions">Cube</a> -
-                                                <a href="?transition=page#/transitions">Page</a> -
-                                                <a href="?transition=concave#/transitions">Concave</a> -
-                                                <a href="?transition=zoom#/transitions">Zoom</a> -
-                                                <a href="?transition=linear#/transitions">Linear</a> -
-                                                <a href="?transition=none#/transitions">None</a> -
-                                                <a href="?#/transitions">Default</a>
-                                        </p>
-                                </section>
+// Mientras tanto la petición Ajax se está ejecutando
+          </code></pre>
 
-                                <section id="themes">
-                                        <h2>Themes</h2>
-                                        <p>
-                                                Reveal.js comes with a few themes built in: <br>
-                                                <a href="?theme=sky#/themes">Sky</a> -
-                                                <a href="?theme=beige#/themes">Beige</a> -
-                                                <a href="?theme=simple#/themes">Simple</a> -
-                                                <a href="?theme=serif#/themes">Serif</a> -
-                                                <a href="?theme=night#/night">Night</a> -
-                                                <a href="?#/themes">Default</a>
-                                        </p>
-                                        <p>
-                                                <small>
-                                                        * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
-                                                </small>
-                                        </p>
-                                </section>
+	</section>
 
-                                <section>
-                                        <section data-state="alert">
-                                                <h2>Global State</h2>
-                                                <p>
-                                                        Set <code>data-state="something"</code> on a slide and <code>"something"</code>
-                                                        will be added as a class to the document element when the slide is open. This lets you
-                                                        apply broader style changes, like switching the background.
-                                                </p>
-                                                <a href="#" class="image navigate-down">
-                                                        <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-                                                </a>
-                                        </section>
-                                        <section data-state="blackout">
-                                                <h2>"blackout"</h2>
-                                                <a href="#" class="image navigate-down">
-                                                        <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-                                                </a>
-                                        </section>
-                                        <section data-state="soothe">
-                                                <h2>"soothe"</h2>
-                                                <a href="#" class="image navigate-next">
-                                                        <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
-                                                </a>
-                                        </section>
-                                </section>
+        <section>
+	  <section>
+            <h2>Espera un momento</h2>
+	    <p>¿Qué pasa si el Referred se resuelve/rechaza antes de que le conecte mi callback?</p>
+	  </section>
+	  <section>
+            <h2>Me alegra que me hagas esa pregunta</h2>
+            <img width="596" height="397" src="img/like-a-boss-10.jpg" alt="Perrete interesante">
+	  </section>
+	  <section>
+            <h2>No problemo</h2>
+            <img width="500" height="356" src="img/swimming-like-a-boss.jpg" alt="Pato listo">
+	    <p>jQuery llamará a ese callback inmediatamente con el resultado del Referred inicial</p>
+	    <p><strong>¡Esto es muy bueno para estructurar nuestro código sin efecto escalera!</strong></p>
+	  </section>
+        </section>
 
-                                <section data-state="customevent">
-                                        <h2>Custom Events</h2>
-                                        <p>
-                                                Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
-                                        </p>
-                                        <pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
-        console.log( '"customevent" has fired' );
-} );
-                                        </code></pre>
-                                </section>
+        <section>
+          <h2>Alias para Ajax</h2>
+          <pre><code contenteditable>
+var request = $.ajax('data.php', {data: {arg1: 'value1', arg2: 'value2'}});
 
-                                <section>
-                                        <h2>Clever Quotes</h2>
-                                        <p>
-                                                These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-                                                The nice thing about standards is that there are so many to choose from</q> and block:
-                                        </p>
-                                        <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-                                                For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
-                                                reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
-                                        </blockquote>
-                                </section>
+// success es equivalente a done
+request.success(function (data, textStatus, jqXHR) {
+    console.log("Ajax request successful");
+});
 
-                                <section>
-                                        <h2>Pretty Code</h2>
-                                        <pre><code contenteditable>
-function linkify( selector ) {
-  if( supports3DTransforms ) {
 
-    var nodes = document.querySelectorAll( selector );
+// error es equivalente a fail
+request.error(function (jqXHR, textStatus, errorThrown) {
+    console.log("Ajax request successful");
+});
 
-    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
-      var node = nodes[i];
 
-      if( !node.className ) ) {
-        node.className += ' roll';
-      }
-    };
-  }
-}
-                                        </code></pre>
-                                        <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
-                                </section>
+request.success(function (data, textStatus, jqXHR) {
+    console.log("Did I say I was succesful?");
+});
+          </code></pre>
+        </section>
 
-                                <section>
-                                        <h2>Intergalactic Interconnections</h2>
-                                        <p>
-                                                You can link between slides internally,
-                                                <a href="#/2/3">like this</a>.
-                                        </p>
-                                </section>
+        <section>
+          <h2>Los Referred son encadenables</h2>
+          <pre><code contenteditable>
+$.ajax('data.php', {data: {arg1: 'value1', arg2: 'value2'}})
 
-                                <section>
-                                        <section>
-                                                <h2>Fragmented Views</h2>
-                                                <p>Hit the next arrow...</p>
-                                                <p class="fragment">... to step through ...</p>
-                                                <ol>
-                                                        <li class="fragment"><code>any type</code></li>
-                                                        <li class="fragment"><em>of view</em></li>
-                                                        <li class="fragment"><strong>fragments</strong></li>
-                                                </ol>
+    .success(function (data, textStatus, jqXHR) {
+        console.log("Ajax request successful");
+    })
 
-                                                <aside class="notes">
-                                                        This slide has fragments which are also stepped through in the notes window.
-                                                </aside>
-                                        </section>
-                                        <section>
-                                                <h2>Fragment Styles</h2>
-                                                <p>There's a few styles of fragments, like:</p>
-                                                <p class="fragment grow">grow</p>
-                                                <p class="fragment shrink">shrink</p>
-                                                <p class="fragment roll-in">roll-in</p>
-                                                <p class="fragment fade-out">fade-out</p>
-                                                <p class="fragment highlight-red">highlight-red</p>
-                                                <p class="fragment highlight-green">highlight-green</p>
-                                                <p class="fragment highlight-blue">highlight-blue</p>
-                                        </section>
-                                </section>
+    .error(function (jqXHR, textStatus, errorThrown) {
+        console.log("Ajax request successful");
+    })
 
-                                <section>
-                                        <h2>Spectacular image!</h2>
-                                        <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
-                                                <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
-                                        </a>
-                                </section>
+    .success(function (data, textStatus, jqXHR) {
+        console.log("Did I say I was succesful?");
+    });
+          </code></pre>
+        </section>
 
-                                <section>
-                                        <h2>Export to PDF</h2>
-                                        <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p>
-                                        <iframe id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" style="margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
-                                        <script>
-                                                document.getElementById('slideshare').attributeName = 'allowfullscreen';
-                                        </script>
-                                </section>
+        <section>
+          <h2>Objetos Promise</h2>
+	  <p>Versión de solo lectura de los Referred</p>
+        </section>
 
-                                <section>
-                                        <h2>Take a Moment</h2>
-                                        <p>
-                                                Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen
-                                                during a presentation.
-                                        </p>
-                                </section>
+        <section>
+          <h2>Sincronización avanzada con $.when y $.pipe</h2>
+	  <p></p>
+        </section>
 
-                                <section>
-                                        <h2>Stellar Links</h2>
-                                        <ul>
-                                                <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
-                                                <li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
-                                                <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
-                                        </ul>
-                                </section>
+        <section>
+          <h2>Creando nuestros propios Referred</h2>
+	  <p>Esto nos aisla de si el código interno es síncrono o asíncrono</p>
+        </section>
 
-                                <section>
-                                        <h2>It's free</h2>
-                                        <p>
-                                                reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
-                                                Donations will go towards hosting and domain costs.
-                                        </p>
-                                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
-                                                <input type="hidden" name="cmd" value="_donations">
-                                                <input type="hidden" name="business" value="hakim.elhattab@gmail.com">
-                                                <input type="hidden" name="lc" value="US">
-                                                <input type="hidden" name="item_name" value="reveal.js / rvl.io">
-                                                <input type="hidden" name="no_note" value="0">
-                                                <input type="hidden" name="currency_code" value="USD">
-                                                <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
-                                                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
-                                        </form>
-                                </section>
+        <section>
+          <h2>Eventos específicos o globales</h2>
+	  <p>Esto nos aisla de si el código interno es síncrono o asíncrono</p>
+        </section>
 
-                                <section>
-                                        <h1>THE END</h1>
-                                        <h3>BY Hakim El Hattab / hakim.se</h3>
-                                </section>
+        <section>
+	  <section>
+            <h2>Usos: acceso a datos</h2>
+	  </section>
+	  <section>
+            <h2>Usos: animaciones</h2>
+	  </section>
+	  <section>
+            <h2>Usos: renderizado de componentes de interfaz de usuario</h2>
+	  </section>
+	  <section>
+            <h2>Usos: APIs asicronas del navegador</h2>
+	  </section>
+	  <section>
+            <h2>Usos: caching</h2>
+	  </section>
+        </section>
 
-                        </div>
+        <section>
+          <h2>Async.js, una alternativa muy válida</h2>
+          <p><a href="https://github.com/caolan/async">https://github.com/caolan/async</a></p>
+          <p>Más alto nivel: más fácil pero menos potente</p>
+        </section>
 
-                </div>
+      </div>
 
-                <script src="lib/js/head.min.js"></script>
-                <script src="js/reveal.min.js"></script>
+    </div>
 
-                <script>
+    <script src="lib/js/head.min.js"></script>
+    <script src="js/reveal.min.js"></script>
+
+    <script>
 
                         // Full list of configuration options available here:
                         // https://github.com/hakimel/reveal.js#configuration
                                 ]
                         });
 
-                </script>
+    </script>
 
-        </body>
+  </body>
 </html>