This commit is contained in:
nek0 2022-09-07 08:24:54 +02:00
commit c033384c4e
5 changed files with 330 additions and 0 deletions

8
.gitignore vendored Normal file
View file

@ -0,0 +1,8 @@
*.aux
*.log
*.nav
*.out
*.snm
*.synctex.gz
*.toc
*.sty

BIN
Webdev in Haskell.pdf Normal file

Binary file not shown.

257
Webdev in Haskell.tex Normal file
View file

@ -0,0 +1,257 @@
\documentclass[aspectratio=169,10pt]{beamer}
\usepackage{fontspec}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{listings}
\usepackage{tcolorbox}
\usepackage{hyperref}
\usepackage{qrcode}
\newtcbox{\mybox}{
on line,
%colframe=mycolor,
colback=gray,
%boxrule=0.5pt,
arc=4pt,
boxsep=0pt,
left=6pt,
right=6pt,
top=6pt,
bottom=6pt
}
\lstdefinelanguage{Haskelln}{
language = Haskell,
otherkeywords = {=>,->,::,++,!!,|,<-},
}
\lstset{
frame=none,
xleftmargin=2pt,
stepnumber=1,
numbers=none,
numbersep=5pt,
numberstyle=\ttfamily\tiny\color{lightgray},
belowcaptionskip=\bigskipamount,
captionpos=b,
escapeinside={*'}{'*},
language=Haskelln,
tabsize=2,
emphstyle={\bf},
commentstyle=\it,
stringstyle=\mdseries\ttfamily\color{green},
showspaces=false,
keywordstyle=[1]\color{cyan}\bfseries\ttfamily,
keywordstyle=[2]\color{orange}\bfseries\ttfamily,
keywordstyle=[3]\color{yellow}\bfseries\ttfamily,
keywordstyle=[4]\color{red}\bfseries\ttfamily,
keywordstyle=[5]\color{purple}\bfseries\ttfamily,
keywordstyle=[6]\color{blue}\bfseries\ttfamily,
%keywordstyle=\color{cyan}\ttfamily
columns=flexible,
basicstyle=\color{white}\small\ttfamily,
showstringspaces=false,
morecomment=[l]\%,
emptylines=1,
}
% You can set fonts for Latin script here
\setmainfont{FreeSerif}
\setsansfont{FreeSans}
\setmonofont{Fira Mono}
\usetheme{DarkConsole}
\begin{document}
% The metadata of the presentation
\title{Modernes WEbdevolpment in Haskell}
\subtitle{Am Beispiel des Projektes \texttt{mateamt}}
\author[]{Amedeo Molnár - \href{mailto:nek0@nek0.eu}{nek0@nek0.eu}}
%\institute{SRH Berufsbildungswerk Dresden gGmbH}
\date{\today} % Replace with date of the presentation
\begin{frame}[plain]
\maketitle
\end{frame}
\begin{frame}{Gliederung}
\tableofcontents
\end{frame}
\section{Moderne Webentwicklung}
\begin{frame}{\secname}
\onslide<2->{
\mybox{
\begin{minipage}{0.45\linewidth}
\onslide<2->{
\begin{center}
\textbf{Backend}
\end{center}
}
\onslide<3->{
Typische Sprachen:
\begin{itemize}
\item<4-> PHP
\item<5-> Java
\item<6-> Ruby
\item<7-> Python
\end{itemize}
}
\end{minipage}
}
\mybox{
\begin{minipage}{0.45\linewidth}
\onslide<2->{
\begin{center}
\textbf{Frontend}
\end{center}
}
\onslide<8->
Verwendete Sprachen:
\begin{itemize}
\item<8-> HTML
\item<9-> CSS
\item<10-> JavaScript
\end{itemize}
\onslide<11->{
Häufig verwendete Frameworks:
\begin{itemize}
\item<12-> React
\item<13-> Bootstrap
\item<14-> jQuery
\end{itemize}
}
\end{minipage}
}
}
\end{frame}
\section{Haskell}
\begin{frame}{\secname}
\begin{center}
\includegraphics[width=.2\linewidth]{logo.png}
\end{center}
\begin{minipage}{.45\linewidth}
\begin{itemize}
\item<2-> Rein funktional
\item<3-> Nicht-strikt evaluiert
\item<4-> Stark statisch typisiert
\item<5-> Volle Typinferenz
\end{itemize}
\end{minipage}
\begin{minipage}{.45\linewidth}
\begin{itemize}
\item<6-> Big Data
\item<7-> Banken- und FInanzsektor
\item<8-> Wissenschaft
\end{itemize}
\end{minipage}
\end{frame}
\subsection{Hauptunterschiede zu imperativer Programmierung}
\begin{frame}{\subsecname}
\begin{itemize}
\item<2-> Strikte Trennung zwischen reinen Berechnungen und Seiteneffekten
\item<3-> Unveränderliche Variablen
\item<4-> Keine Schleifen
\item<5-> Kein State
\end{itemize}
\end{frame}
\section{Vorteile von Haskell in der Webentwicklung}
\begin{frame}{\secname}
\begin{itemize}
\item<2-> Serialisierung und Deserialisierung von Daten unkompliziert
\item<3-> Datenverarbeitung kann leichter auf Korrektheit geprüft werden
\item<4-> Webanwendungen sind in der Regel zustandslos
\item<5-> Konkurrente Anfragen/Berechungen relativ leicht hmöglich
\end{itemize}
\end{frame}
\section{Konventionen beim \texttt{mateamt} im Gegensatz zum \texttt{yammat}}
\begin{frame}{secname}
\mybox{
\begin{minipage}{.45\linewidth}
\texttt{mateamt}\\
\begin{itemize}
\item<2-> Programmiersprache: Haskell
\item<4-> Stellt nur ein Backend dar
\item<6-> Microservice-Architektur
\end{itemize}
\end{minipage}
}
\mybox{
\begin{minipage}{.45\linewidth}
\texttt{yammat}\\
\begin{itemize}
\item<3-> Programmiersprache: Haskell
\item<5-> Front- und Backend
\item<7-> Monolithische Architektur
\end{itemize}
\end{minipage}
}
\end{frame}
\section{Das Frontend des \texttt{mateamt}es}
\begin{frame}{\secname}
\begin{itemize}
\item<2-> Zukünftige Benutzer des \texttt{mateamt}es sind ausdrücklich eingeladen eigene Frontends/Clients zu schreiben
\item<3-> Zur Unterstützung bei der Entwicklung wird folgendes angeboten:
\begin{itemize}
\item<4-> Beschreibung der API nach OpenAPI 3.0
\item<5-> Swagger UI
\end{itemize}
\item<6-> Ein Referenzclient (der \texttt{matebeamte}) ist bereits in Arbeit
\end{itemize}
\end{frame}
\section{Der Quelltext}
\begin{frame}{Codetour}
\begin{center}
Bitte schnallen Sie sich an…
\end{center}
\end{frame}
\begin{frame}{Code-Repositories}
\begin{minipage}{.45\linewidth}
\begin{center}
\qrcode{https://gitea.nek0.eu/nek0/mateamt}\\
\href{https://gitea.nek0.eu/nek0/mateamt}{gitea.nek0.eu/nek0/mateamt}
\end{center}
\end{minipage}
\begin{minipage}{.45\linewidth}
\begin{center}
\qrcode{https://gitea.nek0.eu/nek0/matebeamter}\\
\href{https://gitea.nek0.eu/nek0/matebeamter}{gitea.nek0.eu/nek0/matebeamter}
\end{center}
\end{minipage}
\end{frame}
\section*{Abschluss}
\begin{frame}[plain, noframenumbering]
\begin{center}
\Huge Fragen? Fragen!
\end{center}
\end{frame}
\begin{frame}[plain, noframenumbering]
\begin{center}
{\Huge Vielen Dank für die Aufmerksamkeit!}\\
\vspace{1cm}
Diese Presentation steht zum Download bereit unter:\\
\url{https://gitea.nek0.eu/nek0/???}
\end{center}
\end{frame}
\end{document}

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

65
writeup.md Normal file
View file

@ -0,0 +1,65 @@
#Modernes Web-Development in Haskell am Beispiel des Projektes `mateamt`
##Webentwicklung
* Typischerweise unterteilt in Frontend und Backend
* Typische Sprachen Backend:
* PHP
* Java
* Ruby
* Python
* Frontendentwicklung geschieht in:
* HTML
* CSS
* JavaScript
* Häufige Bibliotheken im Frontend:
* React
* Bootstrap
* jQuery
##Haskell
* Rein funktionale Programmiersprache
* Nicht-strikt evaluiert
* Stark statisch typisiert
* Volle Typinferenz
* Typische Einsatzgebiete:
* Big Data
* Banken- und Finanzsektor
* Wissenschaft (Simulationen, Hochparallele Berechnungen)
* Theoretisch: Überall, da Turing-Vollständig
###Hauptunterschiede zur imperativen Programmierung
* Vermeidung bzw. klare Trennung von Seiteneffekten (Disk IO, DB, Netzwerk, etc.)
* Unveränderliche Variablen
* Keine Schleifen
* Kein State
##Vorteile von Haskell in der Webentwicklung
* Serialisierung und Deserialisierung von Daten meist unkompliziert, da stark typisiert
* Datenverarbeitung kann einfach auf Korrektheit geprüft werden
* Webanwendungen sind i.d.R. stateless, Haskell auch
* Haskell kann sehr gut mit konkurrenten Berechnungen umgehen, welche bei Webanwendungen häufig
auftreten
##Konventionen beim `mateamt` und Unterschiede vom `yammat`
* Programmiert ist es (wieder) in Haskell
* Grundsätzlich ist das `mateamt` 'nur' ein Backend
* Microservice-Architektur (Im Gegensatz zum monolithischen `yammat`) ermöglicht klarere Trennung
zwischen Daten- und Kundenseite (Separation of Concerns)
* Es wird ein modifiziertes MVC-Architekturmodell verwendet:
* 'View' ist ausgelassen, da keine Anzeige erfolgt
* Vorteil ist auch hier eine Domänentrennung zwischen Datenbank und Controller.
* Kommunikation mit Frontend(s) läuft über eine definierte JSON-REST-API
##Das Frontend des `mateamt`es
* Zukünftige Benutzer das `mateamt`es sind ausdrücklich eingeladen eigene Clients/Frontends für die
API des `mateamt`es in einer Sprache ihrer Wahl zu implementieren.
* Zur Unterstützung der Entwicklung eigener Clients/Frontends werden angeboten:
* OpenAPI 3.0 beschreibung der API
* Swagger UI
* Ein Referenzclient (der `matebeamte`) ist bereits in Arbeit