\documentclass[aspectratio=169,hyperref={pdfpagelabels=false}]{beamer}

\usepackage[utf8]{inputenc}
\usepackage[T1,T2A]{fontenc}
\usepackage[british]{babel}
\usepackage{tikz}
\usetikzlibrary{positioning,fit}

\graphicspath{{./img}}

\setbeameroption{hide notes}
%\setbeameroption{show only notes}
\beamertemplatenavigationsymbolsempty%
\urlstyle{same}
\usefonttheme{serif}

\title{Orchestrating the Internet of Things\texorpdfstring{\\}{\ }with Task-Oriented Programming}
\subtitle{a purely functional rhapsody}
\titlegraphic{\includegraphics{ru}}
\author{Mart Lubbers}
\date{October 4th, 2023}

\begin{document}

\begin{frame}[plain]
	\note{%
		\begin{itemize}
			\item Welcome!
			\item Mention title
		\end{itemize}
	}
	\begin{columns}
		\begin{column}{.6\textwidth}
			\maketitle
		\end{column}
		\begin{column}{.4\textwidth}
			\begin{figure}
				\centering
				\includegraphics[width=\textwidth,height=\textheight,keepaspectratio]{kaft/front.pdf.png}
			\end{figure}
		\end{column}
	\end{columns}
\end{frame}

\begin{frame}[plain]
	\note{%
		\begin{itemize}
			\item The Internet of Things is all around us.
			\item It is the term/buzzword for systems of which appliances, things, are connected.
			\item Systems in which computers sense, act or otherwise interact with the real world.
			\item Smart farm, heating, animals, sensors
		\end{itemize}
	}
	\begin{figure}
		\centering
		\includegraphics[height=.95\textheight]{iot}\\
%		{\tiny \url{https://freesvg.org/internet-world} (CC 0)}
	\end{figure}
\end{frame}

\begin{frame}[plain]
	\note{%
		\begin{itemize}
			\item These systems are ofter designed as layered architectures.
			\item The number of layers varies a lot.
			\item For the intents and purposes of this presentation, a three/four layered architecture is used. CLICK
			\item The top layer is the presentation layer, it provides the interface between the users and the IoT system.
			\item It is powered by webbrowsers and apps that usually run on phones or tablets.
			\item The middle layer is the application layer.
			\item This layer is the powerhouse, the brain of the system.
			\item It runs on powerful hardware at home, in your fuse box cupboard.
			\item Or in the cloud, CLICK, but that is just someone elses (powerful) computer. CLICK
			\item At the edge of the system is the perception layer, also called the edge layer.
			\item This layer is powered by tiny computers with little processing power.
			\item Connected to these computers, microcontrollers or single-board computers, are sensors and actuators.
			\item Green computing, small computers, little power, less waste. CLICK
			\item Each layer is connected using the network layer.
			\item This layer is powered by technologies that we know, CLICK
			\item But there are also specialised network technologies for the IoT available.
			\item The variety of computers in all these layers is enormous but they have one thing in common CLICK
			\item Driven by software, because of this mix and match, programming such systems is complex CLICK
			\item The difference in characteristics results in semantic friction.
			\item We would like to be able to orchestrate such system better CLICK, like in an orchestra.
			\item To achieve this, we employ Task-Oriented Programming CLICK
		\end{itemize}
	}
	\begin{figure}
		\centering
		\begin{tikzpicture}[node distance=3em,nodes={rectangle,draw,minimum width=12em, minimum height=3em}]
			\begin{uncoverenv}<2->
				\node (1) [] {presentation \begin{uncoverenv}<4->\includegraphics[height=2em]{phone}\end{uncoverenv}};
				\node (2) [below=of 1] {application \begin{uncoverenv}<6->\includegraphics[height=2em]{laptop}\end{uncoverenv}};
				\node (3) [below=of 2] {perception \begin{uncoverenv}<7->\includegraphics[height=2em]{lamp}\includegraphics<7->[height=2em]{magn}\end{uncoverenv}};

				\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=5em]1.north east)
					-- node [draw=none,midway,sloped,below,yshift=-2pt] {\large network \begin{uncoverenv}<9->\includegraphics[height=2em,origin=c,angle=90]{mail}\end{uncoverenv}} ([xshift=5em]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 [densely dotted] (2.south) -- (3.north);
			\end{uncoverenv}

			\node<1-2> (text) [draw=none,fit=(1) (2) (3),xshift=20em] {};
			\node<1-2> [draw=none] at (text.center) {\includegraphics[width=11em]{iot}};
			\node<3-8> (text) [fit=(1) (2) (3),xshift=20em] {};
			\node<3> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=3em]{ff}%
				\includegraphics[width=3em]{chrome}%
				\includegraphics[width=3em]{phone}\\
				\includegraphics[width=9em]{tablet}
			};
			\node<4-5> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=5.5em]{laptop}%
				\includegraphics[width=5.5em]{cloud}\\
				\begin{uncoverenv}<5>
					\includegraphics[width=11em]{server}
				\end{uncoverenv}
			};
			\node<6> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=5.5em]{mcu}
				\includegraphics[width=5.5em]{pi}\\
				\includegraphics[width=5.5em]{pir}
				\includegraphics[width=5.5em]{stepper}
			};
			\node<7-8> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=4em]{wifi}\\
				\includegraphics[width=11em]{gsm}\\
				\begin{uncoverenv}<8>
					\includegraphics[width=5.5em]{lora}%
					\includegraphics[width=5.5em]{blte}
				\end{uncoverenv}
			};
			\uncover<9->{%
				\node [draw=none] at (text.center) {%
					\includegraphics<10>[height=15em,width=11em,keepaspectratio]{spaghetti}%
					\includegraphics<11->[height=15em,width=11em,keepaspectratio]{orchestra}
				};
			}

			\draw<3> [line width=1.5pt,densely dotted](1.north east) -- (text.north west);
			\draw<3> [line width=1.5pt,densely dotted](1.south east) -- (text.south west);
			\draw<4-5> [line width=1.5pt,densely dotted](2.north east) -- (text.north west);
			\draw<4-5> [line width=1.5pt,densely dotted](2.south east) -- (text.south west);
			\draw<6> [line width=1.5pt,densely dotted](3.north east) -- (text.north west);
			\draw<6> [line width=1.5pt,densely dotted](3.south east) -- (text.south west);
			\draw<7-8> [line width=1.5pt,densely dotted]([xshift=3em]1.north east) -- (text.north west);
			\draw<7-8> [line width=1.5pt,densely dotted]([xshift=3em]3.south east) -- (text.south west);
		\end{tikzpicture}
	\end{figure}
	\uncover<9->{%
		\begin{center}
			\Huge \strut\only<-10>{Driven by software}\only<12>{Task-Oriented Programming}
		\end{center}
	}
\end{frame}

\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);

					\begin{uncoverenv}<8->
						\node (mtask) [dotted,line width=3pt,fit={(3)},label={[fill=white]\large\bf mTask}] {};
					\end{uncoverenv}
					\begin{uncoverenv}<5->
						\node (itask) [densely dotted,line width=2pt,inner sep=1em,fit={(1) (2) (3) ([xshift=5em]1.north east)},label=above:{\large\bf iTask}] {};
					\end{uncoverenv}
				\end{tikzpicture}
			\end{figure}
		\end{column}
	\end{columns}
	\begin{onlyenv}<10->
		\begin{tikzpicture}[remember picture,overlay]
			\node[at=(current page.center)] (finale) {\includegraphics[keepaspectratio,width=\paperwidth,height=\paperheight]{finale}};
		\end{tikzpicture}
	\end{onlyenv}
\end{frame}

\end{document}
