+\begin{frame}[shrink]
+ \note{%
+ \begin{itemize}
+ \item What is TOP\@? CLICK
+ \item Task is the basic concept.
+ \item Tasks are combined with combinators to form workflows.
+ \item Workflows are suitable to describe the program flow.
+ \item These are not instructions, they are a description: CLICK
+ \item Declarative programming, focus on what and not how.
+ \item The underlying system/compiler/scaffolding generates the actual program.
+ \item Solved for web stacks (top two layers).
+ \item Complex for such tiny computers. CLICK
+ \item This is where DSLs come into play.
+ \item DSL contains domain knowledge and that allows for more efficient code. CLICK
+ \item mTask is a TOP language, a DSL, for microcontrollers/tiny computers. CLICK
+ \item It takes care of the perception layer. CLICK
+ \item mTask is real TOP, high level.
+ \item Generate efficient code, automatic dynamic scheduling.
+ \item It is integrated in iTask, a TOP DSL for the web (the top two layers). CLICK
+ \item It takes care of the entire system. CLICK
+ \item This style is called tierless programming and it makes your life better.
+ \item Code for all layers is generated.
+ \item Communication is generated.
+ \item Less error prone.
+ \item More maintainable.
+ \item Less semantic friction.
+ \end{itemize}
+ }
+ \only<10->{%
+ \definecolor{light}{gray}{0.8}
+ \setbeamercolor{normal text}{fg=light}
+ \usebeamercolor*{normal text}
+ \setbeamercolor{structure}{fg=light}
+ \setbeamercolor{block title}{fg=light}
+ }
+ \begin{columns}[t]
+ \begin{column}{.4\textwidth}
+ \begin{block}{Task-oriented programming}
+ \begin{itemize}
+ \item<2-> Task
+
+ \begin{itemize}
+ \item Abstraction over work
+ \item Combinators
+ \end{itemize}
+ \item<3-> Declarative programming
+
+ \begin{itemize}
+ \item \emph{What} and not \emph{How}
+ \end{itemize}
+ \item<4-> iTask: TOP DSL for the web
+ \item<6-> Domain-specific languages
+ \item<7-> mTask: TOP DSL for tiny computers
+ \item<9-> Tierless programming
+ \begin{itemize}
+ \item Single source
+ \item Single type system
+ \item Single compiler
+ \item Generated interoperation
+ \end{itemize}
+ \end{itemize}
+ \end{block}
+ \end{column}
+ \begin{column}{.6\textwidth}
+ \begin{figure}
+ \begin{tikzpicture}[node distance=3em,nodes={rectangle,draw,minimum width=10em, minimum height=3em}]
+ \node (1) [] {presentation \includegraphics[height=1em]{phone}};
+ \node (2) [below=of 1] {application \includegraphics[height=1em]{laptop}};
+ \node (3) [below=of 2] {perception \includegraphics<-9>[height=1em]{lamp}\includegraphics<-9>[height=1em]{magn}};
+
+ \draw [<->] (1) -- (2);
+ \draw [<->] (2) -- (3);
+
+ \draw [fill=white]
+ ([xshift=1em,yshift=-2em]1.south west)
+ -- ([xshift=1em,yshift=-1em]1.south west)
+ -- ([yshift=-1em,xshift=1em]1.south east)
+ -- ([xshift=1em]1.north east)
+ -- ([xshift=4em]1.north east)
+ -- node (net) [draw=none,midway,sloped,below,yshift=-2pt] {\large network \includegraphics[height=1em,origin=c,angle=90]{mail}} ([xshift=4em]3.south east)
+ -- ([xshift=1em]3.south east)
+ -- ([yshift=1em,xshift=1em]3.north east)
+ -- ([xshift=1em,yshift=1em]3.north west)
+ -- ([xshift=1em,yshift=2em]3.north west)
+ -- ([yshift=2em,xshift=1em]3.north east)
+ -- ([yshift=-2em,xshift=1em]1.south east)
+ -- cycle;
+
+ \draw [densely dotted] (1.south) -- (2.north);
+ \draw<-7> [densely dotted] (2.south) -- (3.north);