\documentclass{beamer}
\usepackage[dutch]{babel}
\usepackage[utf8]{inputenc}
\usepackage{beamerthemesplit}
\usepackage{graphics,booktabs,hyperref,float}

\definecolor{kugreen}{RGB}{110,131,163}
\setbeamercovered{transparent}

% Custom footer columns widths (modified "infolines" template)
\defbeamertemplate*{footline}{compactlines theme} {
  \leavevmode%
  \hbox{%
    \begin{beamercolorbox}[wd=.450000\paperwidth,ht=2.25ex,dp=1ex,center]{author in head/foot}%
      \usebeamerfont{author in head/foot}\insertshortauthor~~(\insertshortinstitute)
    \end{beamercolorbox}%
    \begin{beamercolorbox}[wd=.350000\paperwidth,ht=2.25ex,dp=1ex,center]{title in head/foot}%
      \usebeamerfont{title in head/foot}\insertshorttitle
    \end{beamercolorbox}%
    \begin{beamercolorbox}[wd=.200000\paperwidth,ht=2.25ex,dp=1ex,center]{date in head/foot}%
      \usebeamerfont{date in head/foot}\insertshortdate{}\hspace*{2ex}
      \insertframenumber{} / \inserttotalframenumber
    \end{beamercolorbox}}%
  \vskip0pt%
}

\mode<presentation> {
  \usetheme{Boadilla}
  % \usetheme{Copenhagen}
  \usecolortheme[named=kugreen]{structure}
  \useinnertheme{circles}
  \usefonttheme[onlymath]{serif}
  \useoutertheme{infolines}
  \setbeamertemplate{navigation symbols}{}
  \setbeamercovered{transparent}
  \setbeamertemplate{footline}[compactlines theme]
  \setbeamertemplate{blocks}[rounded][shadow=false]
}

% \logo{\includegraphics[width=1cm]{images/vo20-logo.png}}

% Load code highlighter color scheme
\input{colors}

% Create a box around the code examples
\floatstyle{boxed}
\newfloat{program}{thp}{lop}
\floatname{program}{Program}

\title{Incremental trace trees and JavaScript}
\subtitle{Executing typeless, dynamic languages faster}
\author{Sander Mathijs van Veen}
\institute{Universiteit van Amsterdam}
\date{9 mei 2011}

\begin{document}

\frame {
  \titlepage
}

\frame { \frametitle{Overzicht}
  \tableofcontents[pausesection]
}

\section{Inleiding}

\subsection{Waarom deze paper?}

\frame { \frametitle{Waarom deze paper?}

  \textbf{Incremental Dynamic Code generation with Trace Trees},

  door \textbf{Andreas Gal} (Mozilla) en \textbf{Michael Franz} (University of
  California).

  \vskip1em

  Deze paper heb ik gekozen omdat:

  \begin{itemize}
  \item Vrijwel iedereen er dagelijks gebruik van maakt.
  \item Zelf veel met JavaScript gedaan.
  \item Dynamic languages worden gebruikt voor prototyping.
  \item Browser wars -- \url{http://arewefastyet.com}
  \item Dynamic compiled sneller of langzamer dan static compiled zijn.
  \item Just-in-Time compilers nog complexer zijn dan static compilers.
  \end{itemize}

}

\section{Introductie tot JavaScript}

\subsection{Wat is JavaScript?}

\frame { \frametitle{JavaScript overzicht}

  De taal JavaScript is:

  \begin{itemize}
  \item Typeless: objecten of primitieven.
  \item Dynamic: alles kan \emph{at runtime} veranderen.
  \end{itemize}

  JavaScript voorbeeld:

  \input{basic-example}

}

\frame { \frametitle{JavaScript variabel representatie}

  Firefox gebruikt 64 bits voor alle types:

  \begin{center}
    \begin{tabular}{l|ll} \toprule
      JavaScript waarde & eerste 32 bits & laatste 32 bits \\ \midrule
      42                & INTEGER\_TAG   & 42              \\
      "hi"              & STRING\_TAG    & 0x20506638      \\
      \{key: "value"\}  & OBJECT\_TAG    & 0x86753090      \\
      3.1415            & 0x400921CA     & 0xC083126F      \\ \bottomrule
    \end{tabular}
  \end{center}

  ``NaN unboxing'' is de techniek voor onderscheid in variabel typen:

  \begin{itemize}
  \item Double: sign 1 bit, exponent 11 bits en mantissa 52 bits.
  \item IEEE 754: alle exponent bits op 1 $\rightarrow$ float is \texttt{NaN}
    of $\pm \infty$.
  \item Dus: bij \texttt{NaN} bepalen de 14 bits na de exponent de TAG.
  \end{itemize}

}

\subsection{Browser onderdelen}

\frame { \frametitle{Wat doet elk onderdeel?}

  In de Mozilla Firefox browser:

  \begin{itemize}
    \item User Interface
    \item Networking
    \item Render engine (Gecko)
    \item JavaScript engine (SpiderMonkey)
    \begin{itemize}
      \pause \item Interpreter
      \pause \item Method Just-In-Time compiler (JägerMonkey)
      \pause \item \alert{Trace compiler (TraceMonkey)}
    \end{itemize}
  \end{itemize}

}

\section{Compiler basics}

\subsection{Control flow graph}

\frame { \frametitle{Control flow graph}

  \begin{columns}[t]

    \column{.6\textwidth}
    \textbf{Code voorbeeld}

    \input{code/cfg-example.tex}

    \column{.4\textwidth}
    \textbf{Control flow graph van A}
    \includegraphics[width=6cm]{images/control-flow-graph.pdf}

  \end{columns}

}

\subsection{Trace vs Just-In-Time compiler}

\frame { \frametitle{Trace vs Just-In-Time compiler}

  \begin{columns}[t]
    \column{.5\textwidth}
    \textbf{Trace compiler}

    \begin{itemize}

    \item Eenheid is een ``loop''.
    \item \emph{Lazy compilation}; niet 3 en 7.
      \includegraphics[width=6cm]{images/trace-tree.pdf}
    \end{itemize}

    \column{.5\textwidth}
    \textbf{Just-In-Time compiler}

    \begin{itemize}
    \item Eenheid is een ``method''.
    \item Benodigd: Control flow graph.
      \includegraphics[width=6cm]{images/control-flow-graph.pdf}
    \end{itemize}

  \end{columns}

}

\section{Trace trees}

\subsection{Hoe worden trace trees opgenomen?}

\frame { \frametitle{Traces opnemen en trace opnemen mislukt}

  \textbf{Trace opnemen}

  \begin{enumerate}
  \item Detecteer start van een loop.
  \item Houd \emph{loop count} bij.
  \item Loop count $>$ \emph{threshold}: record trace!
  \item Stop de trace na een cycle.
  \end{enumerate}

  \pause \textbf{Of een trace faalt}

  \begin{enumerate}
  \item Er treedt een \emph{exception} op.
  \item Een trace wordt te lang (voor geheugen).
  \end{enumerate}

}

\subsection{Een trace uitbreiden}

\frame { \frametitle{Eerdere trace uitbreiden met nieuw pad}

  \begin{columns}[t]

    \column{.6\textwidth}

    \begin{itemize}
    \item Afwijking trace $\rightarrow$ start interpreter.
    \item Indien pad in loop, compile nieuw pad.
      \vskip-1em
      \includegraphics[width=6cm]{images/trace-expansion.pdf}
    \end{itemize}

    \column{.4\textwidth}

  \end{columns}

}

\frame { \frametitle{Eerdere trace uitbreiden met nieuw pad}

    \begin{columns}[t]

        \column{.6\textwidth}

        \begin{itemize}
        \item Afwijking trace $\rightarrow$ start interpreter.
        \item Indien pad in loop, compile nieuw pad.
        \vskip-1em
        \includegraphics[width=6cm]{images/trace-expansion.pdf}

        \vskip-6em

        \pause
        Assembler zet trace om in machinecode.

        \end{itemize}

        \column{.4\textwidth}

        \vskip.5em

        \textbf{Incremental recompilation}

        \vskip3.5pt

        Wat er echt gebeurt:

        \vskip-2.6em

        \begin{figure}
        \includegraphics[width=6cm]{images/two-traces-in-tree.pdf}
        \end{figure}

    \end{columns}

}

\subsection{Toekomst van trace trees}

\frame[containsverbatim] { \frametitle{Toekomst: Static single assignment en traces}

  \emph{Een voorbeeld van SSA.}

  \begin{verbatim}
 y := 1                   y_1 := 1
 y := 2         =>        y_2 := 2
 x := y                   x_1 := y
  \end{verbatim}

  \begin{itemize}
  \item Reaching definition analysis.
  \item Enabling optimalisatie:
    \begin{itemize}
    \item Constant propagation.
    \item Dead code elimination.
    \item Register allocation.
    \end{itemize}
  \item Static single assignment subproject (IonMonkey).
  \end{itemize}

}

\section{Conclusie}

\frame[containsverbatim] { \frametitle{Conclusie en benchmarks}

  \textbf{Benchmarks}

  \begin{verbatim}
$ ./js sunspider/3d-morph.js
243
$ ./js -m sunspider/3d-morph.js
57
$ ./js -j sunspider/3d-morph.js
38
$ ./js -jm sunspider/3d-morph.js
37
$ ./shell sunspider/3d-morph.js  # v8
64
  \end{verbatim}

  \textbf{Conclusie}

  \begin{itemize}
  \item Trace compilation zorgt voor betere runtime performance.
  \item Incremental recompilation zorgt snellere compilation.
  \item Runtime is namelijk afhankelijk van execution- en compilation time.
  \end{itemize}

}

\end{document}
% vim: foldmethod=marker
