X-Git-Url: https://git.martlubbers.net/?a=blobdiff_plain;f=talk.tex;h=f0b1ac12f64081424ff9fee0fbb0499125313ff3;hb=f523436504952436ae434f300421f72f2b2e829f;hp=9be7da00b991790ff560c21b113e4fb044217624;hpb=356f527bc2ac65c24c9d021b0ae8d7bb997642e9;p=phd-thesis.git diff --git a/talk.tex b/talk.tex index 9be7da0..f0b1ac1 100644 --- a/talk.tex +++ b/talk.tex @@ -1,43 +1,279 @@ -\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\vspace{2pt}% -} - -\title{\texorpdfstring{\larger[2]}{}Orchestrating the Internet of Things\texorpdfstring{\\}{\ }with Task-Oriented Programming} -\subtitle{\texorpdfstring{\larger[2]}{}a purely functional rhapsody} +\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] - \maketitle + \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}{Internet of Things (IoT)}{A layered heterogeneous distributed system} - +\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}