talk.tex

   1 \documentclass[aspectratio=169,hyperref={pdfpagelabels=false}]{beamer}
   2
   3 \usepackage[utf8]{inputenc}
   4 \usepackage[T1,T2A]{fontenc}
   5 \usepackage[british]{babel}
   6 \usepackage{relsize}
   7 \usepackage{tikz}
   8 \usetikzlibrary{pie,positioning,shapes,automata,fit,shadows,matrix,backgrounds,shapes.geometric}
   9
  10 \graphicspath{{./img}}
  11
  12 \setbeameroption{hide notes}
  13 %\setbeameroption{show only notes}
  14 \beamertemplatenavigationsymbolsempty%
  15 \urlstyle{same}
  16 \usefonttheme{serif}
  17 \newcommand{\IOT}{\texorpdfstring{Io\kern-1ptT}{IoT}}
  18
  19 % Add slide numbers
  20 %\setbeamertemplate{footline}{%
  21 %       \quad%
  22 %       \usebeamercolor[fg]{page number in head/foot}%
  23 %       \usebeamerfont{page number in head/foot}%
  24 %       \insertframenumber%
  25 %       \vspace{2mm}
  26 %}
  27
  28 \title{Orchestrating the Internet of Things\texorpdfstring{\\}{\ }with Task-Oriented Programming}
  29 \subtitle{a purely functional rhapsody}
  30 \titlegraphic{\includegraphics{ru}}
  31 \author{Mart Lubbers}
  32 \date{October 4th, 2023}
  33
  34 \begin{document}
  35
  36 \begin{frame}[plain]
  37         \note{%
  38                 \begin{itemize}
  39                         \item Welcome!
  40                         \item Mention title
  41                 \end{itemize}
  42         }
  43         \begin{columns}
  44                 \begin{column}{.6\textwidth}
  45                         \maketitle
  46                 \end{column}
  47                 \begin{column}{.4\textwidth}
  48                         \begin{figure}
  49                                 \centering
  50                                 \includegraphics[width=\textwidth,height=\textheight,keepaspectratio]{kaft/front.pdf.png}
  51                         \end{figure}
  52                 \end{column}
  53         \end{columns}
  54 \end{frame}
  55
  56 \begin{frame}[plain]
  57         \note{%
  58                 \begin{itemize}
  59                         \item The Internet of Things is all around us.
  60                         \item It is the term/buzzword for systems of which appliances, things, are connected.
  61                         \item Systems in which computers sense, act or otherwise interact with the real world.
  62                 \end{itemize}
  63         }
  64         \begin{figure}
  65                 \centering
  66                 \includegraphics[height=.95\textheight]{iot}\\
  67 %               {\tiny \url{https://freesvg.org/internet-world} (CC 0)}
  68         \end{figure}
  69 \end{frame}
  70
  71 \begin{frame}[plain]
  72         \note{%
  73                 \begin{itemize}
  74                         \item These systems are ofter designed as layered architectures.
  75                         \item The number of layers varies a lot.
  76                         \item For the intents and purposes of this presentation, a three/four layered architecture is used. CLICK
  77                         \item The top layer is the presentation layer, it provides the interface between the users and the \IOT{} system.
  78                         \item It is powered by webbrowsers and apps that usually run on phones or tablets.
  79                         \item The middle layer is the application layer.
  80                         \item This layer is the powerhouse, the brain of the system.
  81                         \item It runs on powerful hardware at home, in your fuse box cupboard.
  82                         \item Or in the cloud, CLICK, but that is just someone elses (powerful) computer. CLICK
  83                         \item At the edge of the system is the perception layer, also called the edge layer.
  84                         \item This layer is powered by tiny computers with little processing power.
  85                         \item Connected to these computers, microcontrollers or single-board computers, are sensors and actuators. CLICK
  86                         \item Each layer is connected using the network layer.
  87                         \item This layer is powered by technologies that we know, CLICK
  88                         \item But there are also specialised network technologies for the \IOT{} available.
  89                         \item The variety of computers in all these layers is enormous but they have one thing in common CLICK
  90                         \item Driven by software, because of this mix and match, programming such systems is complex CLICK
  91                         \item The difference in characteristics results in semantic friction.
  92                         \item We would like to be able to orchestrate such system better CLICK, like in an orchestra.
  93                         \item To achieve this, we employ Task-Oriented Programming CLICK
  94                 \end{itemize}
  95         }
  96         \begin{figure}
  97                 \centering
  98                 \begin{tikzpicture}[node distance=3em,nodes={rectangle,draw,minimum width=12em, minimum height=3em}]
  99                         \begin{uncoverenv}<2->
 100                                 \node (1) [] {presentation \begin{uncoverenv}<4->\includegraphics[height=2em]{phone}\end{uncoverenv}};
 101                                 \node (2) [below=of 1] {application \begin{uncoverenv}<6->\includegraphics[height=2em]{laptop}\end{uncoverenv}};
 102                                 \node (3) [below=of 2] {perception \begin{uncoverenv}<7->\includegraphics[height=2em]{lamp}\includegraphics<7->[height=2em]{magn}\end{uncoverenv}};
 103
 104                                 \draw [<->] (1) -- (2);
 105                                 \draw [<->] (2) -- (3);
 106
 107                                 \draw [fill=white]
 108                                            ([xshift=1em,yshift=-2em]1.south west)
 109                                         -- ([xshift=1em,yshift=-1em]1.south west)
 110                                         -- ([yshift=-1em,xshift=1em]1.south east)
 111                                         -- ([xshift=1em]1.north east)
 112                                         -- ([xshift=5em]1.north east)
 113                                         -- 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)
 114                                         -- ([xshift=1em]3.south east)
 115                                         -- ([yshift=1em,xshift=1em]3.north east)
 116                                         -- ([xshift=1em,yshift=1em]3.north west)
 117                                         -- ([xshift=1em,yshift=2em]3.north west)
 118                                         -- ([yshift=2em,xshift=1em]3.north east)
 119                                         -- ([yshift=-2em,xshift=1em]1.south east)
 120                                         -- cycle;
 121
 122                                 \draw [densely dotted] (1.south) -- (2.north);
 123                                 \draw [densely dotted] (2.south) -- (3.north);
 124                         \end{uncoverenv}
 125
 126                         \node<1-2> (text) [draw=none,fit=(1) (2) (3),xshift=20em] {};
 127                         \node<1-2> [draw=none] at (text.center) {\includegraphics[width=11em]{iot}};
 128                         \node<3-8> (text) [fit=(1) (2) (3),xshift=20em] {};
 129                         \node<3> [draw=none,align=left] at (text.center) {%
 130                                 \includegraphics[width=3em]{ff}%
 131                                 \includegraphics[width=3em]{chrome}%
 132                                 \includegraphics[width=3em]{phone}\\
 133                                 \includegraphics[width=9em]{tablet}
 134                         };
 135                         \node<4-5> [draw=none,align=left] at (text.center) {%
 136                                 \includegraphics[width=5.5em]{laptop}%
 137                                 \includegraphics[width=5.5em]{cloud}\\
 138                                 \begin{uncoverenv}<5>
 139                                         \includegraphics[width=11em]{server}
 140                                 \end{uncoverenv}
 141                         };
 142                         \node<6> [draw=none,align=left] at (text.center) {%
 143                                 \includegraphics[width=5.5em]{mcu}
 144                                 \includegraphics[width=5.5em]{pi}\\
 145                                 \includegraphics[width=5.5em]{pir}
 146                                 \includegraphics[width=5.5em]{stepper}
 147                         };
 148                         \node<7-8> [draw=none,align=left] at (text.center) {%
 149                                 \includegraphics[width=4em]{wifi}\\
 150                                 \includegraphics[width=11em]{gsm}\\
 151                                 \begin{uncoverenv}<8>
 152                                         \includegraphics[width=5.5em]{lora}%
 153                                         \includegraphics[width=5.5em]{blte}
 154                                 \end{uncoverenv}
 155                         };
 156                         \uncover<9->{%
 157                                 \node [draw=none] at (text.center) {%
 158                                         \includegraphics<10>[height=15em,width=11em,keepaspectratio]{spaghetti}%
 159                                         \includegraphics<11->[height=15em,width=11em,keepaspectratio]{orchestra}
 160                                 };
 161                         }
 162
 163                         \draw<3> [line width=1.5pt,densely dotted](1.north east) -- (text.north west);
 164                         \draw<3> [line width=1.5pt,densely dotted](1.south east) -- (text.south west);
 165                         \draw<4-5> [line width=1.5pt,densely dotted](2.north east) -- (text.north west);
 166                         \draw<4-5> [line width=1.5pt,densely dotted](2.south east) -- (text.south west);
 167                         \draw<6> [line width=1.5pt,densely dotted](3.north east) -- (text.north west);
 168                         \draw<6> [line width=1.5pt,densely dotted](3.south east) -- (text.south west);
 169                         \draw<7-8> [line width=1.5pt,densely dotted]([xshift=3em]1.north east) -- (text.north west);
 170                         \draw<7-8> [line width=1.5pt,densely dotted]([xshift=3em]3.south east) -- (text.south west);
 171                 \end{tikzpicture}
 172         \end{figure}
 173         \uncover<9->{%
 174                 \begin{center}
 175                         \Huge \strut\only<-10>{Driven by software}\only<12>{Task-Oriented Programming}
 176                 \end{center}
 177         }
 178 \end{frame}
 179
 180 \begin{frame}[shrink]
 181         \note{%
 182                 \begin{itemize}
 183                         \item What is TOP\@? CLICK
 184                         \item Task is the basic concept.
 185                         \item Tasks are combined with combinators to form workflows.
 186                         \item Workflows are suitable to describe the program flow.
 187                         \item These are not instructions, they are a description: CLICK
 188                         \item Declarative programming, focus on what and not how.
 189                         \item The underlying system/compiler/scaffolding generates the actual program.
 190                         \item Solved for web stacks (top two layers).
 191                         \item Complex for such tiny computers. CLICK
 192                         \item This is where DSLs come into play.
 193                         \item DSL contains domain knowledge and that allows for more efficient code. CLICK
 194                         \item mTask is a TOP language, a DSL, for microcontrollers/tiny computers. CLICK
 195                         \item It takes care of the perception layer. CLICK
 196                         \item mTask is real TOP, high level.
 197                         \item Generate efficient code, automatic dynamic scheduling.
 198                         \item It is integrated in iTask, a TOP DSL for the web (the top two layers). CLICK
 199                         \item It takes care of the entire system. CLICK
 200                         \item This style is called tierless programming and it makes your life better.
 201                         \item Code for all layers is generated.
 202                         \item Communication is generated.
 203                         \item Less error prone.
 204                         \item More maintainable.
 205                         \item Less semantic friction.
 206                 \end{itemize}
 207         }
 208         \begin{columns}[t]
 209                 \begin{column}{.4\textwidth}
 210                         \begin{block}{Task-oriented programming}
 211                                 \begin{itemize}
 212                                         \item<2-> Task
 213
 214                                                 \begin{itemize}
 215                                                         \item Abstraction over work
 216                                                         \item Combinators
 217                                                 \end{itemize}
 218                                         \item<3-> Declarative programming
 219
 220                                                 \begin{itemize}
 221                                                         \item \emph{What} and not \emph{How}.
 222                                                 \end{itemize}
 223                                         \item<4-> Domain-specific languages
 224                                         \item<5-> mTask: TOP DSL for tiny computers
 225                                         \item<7-> iTask: TOP DSL for the web
 226                                         \item<9-> Tierless programming
 227                                 \end{itemize}
 228                         \end{block}
 229                 \end{column}
 230                 \begin{column}{.6\textwidth}
 231                         \begin{figure}
 232                                 \begin{tikzpicture}[node distance=3em,nodes={rectangle,draw,minimum width=10em, minimum height=3em}]
 233                                         \node (1) [] {presentation \includegraphics[height=1em]{phone}};
 234                                         \node (2) [below=of 1] {application \includegraphics[height=1em]{laptop}};
 235                                         \node (3) [below=of 2] {perception \includegraphics[height=1em]{lamp}\includegraphics[height=1em]{magn}};
 236
 237                                         \draw [<->] (1) -- (2);
 238                                         \draw [<->] (2) -- (3);
 239
 240                                         \draw [fill=white]
 241                                                    ([xshift=1em,yshift=-2em]1.south west)
 242                                                 -- ([xshift=1em,yshift=-1em]1.south west)
 243                                                 -- ([yshift=-1em,xshift=1em]1.south east)
 244                                                 -- ([xshift=1em]1.north east)
 245                                                 -- ([xshift=4em]1.north east)
 246                                                 -- node (net) [draw=none,midway,sloped,below,yshift=-2pt] {\large network \includegraphics[height=1em,origin=c,angle=90]{mail}} ([xshift=4em]3.south east)
 247                                                 -- ([xshift=1em]3.south east)
 248                                                 -- ([yshift=1em,xshift=1em]3.north east)
 249                                                 -- ([xshift=1em,yshift=1em]3.north west)
 250                                                 -- ([xshift=1em,yshift=2em]3.north west)
 251                                                 -- ([yshift=2em,xshift=1em]3.north east)
 252                                                 -- ([yshift=-2em,xshift=1em]1.south east)
 253                                                 -- cycle;
 254
 255                                         \draw [densely dotted] (1.south) -- (2.north);
 256                                         \draw<-2> [densely dotted] (2.south) -- (3.north);
 257
 258                                         \begin{uncoverenv}<6->
 259                                                 \node (mtask) [dotted,line width=3pt,fit={(3)},label={[fill=white]\large\bf mTask}] {};
 260                                         \end{uncoverenv}
 261                                         \begin{uncoverenv}<8->
 262                                                 \node (itask) [densely dotted,line width=2pt,inner sep=1em,fit={(1) (2) (3) ([xshift=5em]1.north east)},label=above:{\large\bf iTask}] {};
 263                                         \end{uncoverenv}
 264                                 \end{tikzpicture}
 265                         \end{figure}
 266                 \end{column}
 267         \end{columns}
 268 \end{frame}
 269
 270 \end{document}