presentation.tex

\documentclass[16pt]{beamer}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{graphicx}
\usepackage[polish]{babel}
\usepackage{url}
\input{pygments}

\usetheme{Pittsburgh}
\usenavigationsymbolstemplate{} % turn off navigation icons
\setbeamercovered{transparent}

\author{Silesian Ruby Users Group\\
  \footnotesize{Jakub Kuźma}}
\title{RIA development using YUI 3 and Rails 3}

\begin{document}

\frame{\titlepage}

\begin{frame}
  \frametitle{Introduction}
  \begin{center}
    Rich Internet Application?
  \end{center}
\end{frame}

\begin{frame}
  \frametitle{Contract bridge - auction}
  \begin{figure}
    \includegraphics[width=\linewidth]{bbo-auction.png}
  \end{figure}
\end{frame}

\begin{frame}
  \frametitle{Contract bridge - play}
  \begin{figure}
    \includegraphics[width=\linewidth]{bbo-play.png}
  \end{figure}
\end{frame}

\begin{frame}
  \frametitle{Requirements}
  \begin{itemize}
  \item client-server communication without refreshing page
  \item client side validation
  \item interface composed of small, independent elements
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{jQuery}
  \begin{center}
    ridiculously easy AJAX, event handling, DOM manipulation
  \end{center}
\end{frame}

\begin{frame}
  \frametitle{jQuery UI}
  \begin{center}
    jQuery UI for RIA is like jQuery for AJAX development
  \end{center}
\end{frame}

\begin{frame}
  \frametitle{YUI}
  \begin{figure}
    \includegraphics[width=0.8\linewidth]{yui.jpg}
  \end{figure}
\end{frame}

\begin{frame}
  \frametitle{YUI 3}
  \begin{itemize}
  \item Developer Tools
  \item Core
  \item Utilities
  \item Component Infrastructure
  \item Widgets
  \item Plugins
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Component Infrastructure}
  \begin{itemize}
  \item Attribute
  \item Base
  \item Widget
  \item Plugin
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Attribute}
  \begin{itemize}
  \item getters, setters, validation
  \item attributeChange event
  \item object cloning
  \item nested objects support (i.e. strings.messages.hello)
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Attribute - example}
  \input{attribute}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Attribute - usage}
  \input{attribute-usage}
\end{frame}

\begin{frame}
  \frametitle{Base}
  \begin{itemize}
  \item constructor and destructor
  \item attributes
  \item event target
  \item extension and plugin support
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Base - example}
  \input{base}
\end{frame}

\begin{frame}
  \frametitle{Widget}
  \begin{itemize}
  \item HTML Parser
  \item renderUI
  \item bindUI
  \item syncUI
  \item boundingBox, contentBox
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Widget - example}
  \begin{footnotesize}
    \input{widget}
  \end{footnotesize}
\end{frame}

\begin{frame}
  \frametitle{Plugin}
  \begin{itemize}
  \item unobtrusively enhance objects (aka hosts)
  \item afterHostEvent, beforeHostMethod, etc.
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Plugin - example}
  \begin{footnotesize}
    \input{plugin}
  \end{footnotesize}
\end{frame}

\begin{frame}
  \frametitle{Custom Events}
  \begin{itemize}
  \item DOM independent
  \item same API and behavior (bubbling - stopPropagation, defaultFn - preventDefault)
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Other stuff}
  \begin{itemize}
  \item more array utilities: every, find, reduce, etc.
  \item language helpers: isArray, isValue, isString, etc.
  \item OOP (augment, extend, bind, rbind)
  \item YUI 3 Gallery
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Rails 3}
  \begin{itemize}
  \item ordinary web application (authentication, statistics, etc.)
  \item API (responders rock)
  \item validating user actions
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{node.js}
  \begin{itemize}
  \item YUI3 is CommonJS
  \item replace Get module (require instead of <script>)
  \item DOM support by jsdom
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Resources}
  \begin{itemize}
  \item YUI 3\\\url{http://developer.yahoo.com/yui/3/}
  \item Bridge App\\\url{http://bridge.heroku.com/}
  \item Bridge App - source\\\url{http://github.com/morgoth/bridge/}
  \item underscore.js\\\url{http://documentcloud.github.com/underscore/}
  \item mustache.js\\\url{http://github.com/janl/mustache.js/}
  \end{itemize}
\end{frame}

\begin{frame}
  \begin{figure}
    \includegraphics[width=\linewidth]{drogus.png}
  \end{figure}
\end{frame}

\begin{frame}
  \begin{center}
    \Huge{Questions?}
  \end{center}
\end{frame}

\end{document}