-\documentclass[aspectratio=169]{beamer}
+\documentclass[aspectratio=169,hyperref={pdfpagelabels=false}]{beamer}
\usepackage[utf8]{inputenc}
-\usepackage{relsize}
+\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}
-% Add slide numbers
-\setbeamertemplate{footline}{
- \quad%
- \usebeamercolor[fg]{page number in head/foot}%
- \usebeamerfont{page number in head/foot}%
- \insertframenumber%
- \kern1em\vskip2pt%
-}
-
-\title{\texorpdfstring{\larger[2]}{}Orchestrating the Internet of Things with\texorpdfstring{\\}{ }Task-Oriented Programming}
+\title{Orchestrating the Internet of Things\texorpdfstring{\\}{\ }with Task-Oriented Programming}
+\subtitle{a purely functional rhapsody}
\titlegraphic{\includegraphics{ru}}
\author{Mart Lubbers}
-\date{\today}
+\date{October 4th, 2023}
\begin{document}
-\begin{frame}
- \maketitle
-\end{frame}
-\begin{frame}{Internet of Things (IoT)}{A layered heterogeneous distributed system}
+\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}{Tierless programming}
+\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}{Task-oriented programming (TOP)}
+\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}
repositories / phd-thesis.git / blobdiff