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