-The concept of \gls{TOP} originated from the \gls{ITASK} framework, a declarative workflow language for defining multi-user distributed web applications implemented as an \gls{EDSL} in the lazy pure \gls{FP} language \gls{CLEAN} \citep{plasmeijer_itasks:_2007,plasmeijer_task-oriented_2012}.
-From the structural properties of the data types, the entire user interface is automatically generated.
-
-As an example, \cref{fig:enter_person} shows the \gls{ITASK} code and the corresponding \gls{UI} for a simple task for entering a person.
-From the data type definitions (\crefrange{lst:dt_fro}{lst:dt_to}), using generic programming (\cref{lst:dt_derive}), the \glspl{UI} for the data types are automatically generated.
-Using task combinators (see \cleaninline{>>!} at \cref{lst:task_comb}), the tasks can be combined in sequence.
-Only when the user entered a complete value in the web editor, then the continue button enables and the result can be viewed.
-Special combinators (e.g.\ \cleaninline{@>>} at \cref{lst:task_ui}) are available to tweak the \gls{UI} afterwards.
-
-\begin{figure}[ht]
- \begin{subfigure}[b]{.525\linewidth}
- \begin{lstClean}
-:: Person =[+\label{lst:dt_fro}+]
- { name :: String
- , gender :: Gender
- , dateOfBirth :: Date
- }
-
-:: Gender
- = Male
- | Female
- | Other String[+\label{lst:dt_to}+]
-
-derive class iTask Person, Gender[+\label{lst:dt_derive}+]
-
-enterPerson :: Task Person
-enterPerson
- = Hint "Enter a person:"
- @>> enterInformation [] [+\label{lst:task_ui}+]
- >>! \result -> Hint "You Entered:"[+\label{lst:task_comb}+]
- @>> viewInformation [] result
- \end{lstClean}
- \caption{\Gls{CLEAN} code}
+The concept of \gls{TOP} originated from the \gls{ITASK} framework, a declarative language and \gls{TOP} engine for defining interactive multi-user distributed web applications.
+\Gls{ITASK} is implemented as an \gls{EDSL} in the lazy pure \gls{FP} language \gls{CLEAN} \citep{plasmeijer_itasks:_2007,plasmeijer_task-oriented_2012}.
+From the structural properties of the data types and the current status of the work to be done, the entire \gls{UI} is automatically generated.
+Browsers are powering \gls{ITASK}'s presentation layer.
+The framework is built on top of standard web techniques such as JavaScript, HTML, and {CSS}.
+\Gls{ITASK} code running in the browser relies on an interpreter that operates on \gls{CLEAN}'s intermediate language \gls{ABC} \citep{staps_lazy_2019}.
+
+Tasks in \gls{ITASK} have either \emph{no value}, an \emph{unstable} or a \emph{stable} task value.
+For example, an editor for filling in a form initially has no value.
+Once the user entered a complete value, its value becomes an unstable value, it can still be changed or even reverted to no value by emptying the editor again.
+Only when for example a continue button is pressed, a task value becomes stable, fixing its value.
+The allowed task value transitions are shown in \cref{fig:taskvalue}.
+
+\begin{figure}
+ \centering
+ \includestandalone{taskvalue}
+ \caption{Transition diagram for task values in \gls{ITASK}.}%
+ \label{fig:taskvalue}
+\end{figure}
+
+As an example, \cref{lst:todo,fig:todo} show the code and \gls{UI} for an interactive to-do list application.
+The user can modify a shared to-do list through an editor directly or using some predefined actions.
+Furthermore, in parallel, the length of the list is shown to demonstrate \glspl{SDS}.
+Using \gls{ITASK}, complex collaborations of users and tasks can be described on a high level.
+
+From the data type definitions (\cref{lst:todo_dt}), using generic programming (\cref{lst:todo_derive}), the \glspl{UI} for the data types are automatically generated.
+Then, using the parallel task combinator (\cleaninline{-\|\|}) that uses the left-hand side's result the task for updating the to-dos (\cref{lst:todo_update}) and the task for viewing the length are combined (\cref{lst:todo_length}).
+Both tasks operate on the to-do \gls{SDS} (\cref{lst:todo_sds}).
+The task for updating the to-do list is just an editor (\cref{lst:todo_editor}) combined using a step combinator (\crefrange{lst:todo_contfro}{lst:todo_contto}).
+The actions either change the value, sorting or clearing it, or terminates the task by returning the current value of the \gls{SDS}.
+Special combinators (e.g.\ \cleaninline{@>>} at \cref{lst:todo_ui}) are used to tweak the \gls{UI} to display informative labels.
+
+\cleaninputlisting[float=,firstline=6,lastline=22,tabsize=3,numbers=left,caption={The code for the shared to-do list in \gls{ITASK}\footnotemark.},label={lst:todo}]{lst/sharedlist.icl}
+\footnotetext{\Cref{chp:clean_for_haskell_programmers} contains a guide for \gls{CLEAN} tailored to \gls{HASKELL} programmers.}
+\begin{figure}
+ \centering
+ \includegraphics[width=.75\linewidth]{todo0g}
+ \caption{The \gls{UI} for the shared to-do list in \gls{ITASK}.}%
+ \label{fig:todo}
+\end{figure}
+
+\subsection{\texorpdfstring{\Gls{MTASK}}{MTask}}
+The behaviour of \gls{IOT} edge devices can often be succinctly described by \gls{TOP} programs.
+Software on microcontrollers is usually composed of smaller basic tasks, are interactive, and share data with other components or the server.
+\Gls{ITASK} seems an obvious candidate at first glance for extending \gls{TOP} to \gls{IOT} edge device.
+An \gls{ITASK} application contains many features that are not needed on \emph{edge devices} such as first-order tasks, support for a distributed architecture, or a multi-user web server.
+Furthermore, \gls{IOT} edge devices are in general not powerful enough to run or interpret \gls{CLEAN}\slash\gls{ABC} code, they just lack the processor speed and the memory.
+To bridge this gap, \gls{MTASK} was developed, a domain-specific \gls{TOP} system for \gls{IOT} edge devices that is integrated in \gls{ITASK} \citep{koopman_task-based_2018}.
+\Gls{ITASK} abstracts away from details such as user interfaces, data storage, client-side platforms, and persistent workflows.
+On the other hand, \gls{MTASK} offers abstractions for edge layer-specific details such as the heterogeneity of architectures, platforms, and frameworks; peripheral access; (multi) task scheduling; and lowering energy consumption.
+
+\Gls{MTASK} is seamlessly integrated with \gls{ITASK}: \gls{MTASK} tasks are integrated in such a way that they function as \gls{ITASK} tasks, and \glspl{SDS} on the device can tether an \gls{ITASK} \gls{SDS}.
+Using \gls{MTASK}, the programmer can define all layers of an \gls{IOT} system as a single declarative specification.
+The \gls{MTASK} language is written in \gls{CLEAN} as a multi-view \gls{EDSL} and hence there are multiple interpretations possible.
+The byte code compiler is the most relevant for this thesis.
+From an \gls{MTASK} task constructed at run time, a compact binary representation of the work that needs to be done is compiled.
+This byte code is then sent to a device that running the \gls{MTASK} \gls{RTS}.
+This feather-light domain-specific \gls{OS} is written in portable \gls{C} with a minimal device specific interface and functions as a \gls{TOP} engine.
+
+\Cref{lst:intro_blink,fig:intro_blink} shows the \gls{ITASK} part of the code and a screenshot of an interactive \imtask{} application for blinking \pgls{LED} on the microcontroller every dynamically changeable interval.
+Using \cleaninline{enterInformation}, the connection specification of the \gls{TCP} device is queried (\cref{lst:intro_enterDevice}).
+\Cref{lst:intro_withshared} defines \pgls{SDS} to communicate the blinking interval between the server and the edge device.
+The \gls{MTASK} is connected using \cleaninline{withDevice} at \cref{lst:intro_withdevice}.
+Once connected, the \cleaninline{intBlink} task is sent to the device (\cref{lst:intro_liftmtask}) and, in parallel, a web editor is shown that updates the value of the interval \gls{SDS} (\cref{lst:intro_editor}).
+To allow ending the task, the \gls{ITASK} task ends with a sequential operation that returns a constant value when the button is pressed, making the task stable.
+
+\cleaninputlisting[firstline=10,lastline=18,numbers=left,caption={The \gls{ITASK} code for the interactive blinking application.},label={lst:intro_blink}]{lst/blink.icl}
+
+\begin{figure}
+ \centering
+ \begin{subfigure}{.5\textwidth}
+ \centering
+ \includegraphics[width=.9\linewidth]{blink1g}
+ \caption{Device selection.}