commit c033384c4e1287eda7e3ce82350ef96848d12770 Author: nek0 Date: Wed Sep 7 08:24:54 2022 +0200 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cdc30fc --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +*.aux +*.log +*.nav +*.out +*.snm +*.synctex.gz +*.toc +*.sty diff --git a/Webdev in Haskell.pdf b/Webdev in Haskell.pdf new file mode 100644 index 0000000..3b8aa69 Binary files /dev/null and b/Webdev in Haskell.pdf differ diff --git a/Webdev in Haskell.tex b/Webdev in Haskell.tex new file mode 100644 index 0000000..41a698c --- /dev/null +++ b/Webdev in Haskell.tex @@ -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} \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..bc22230 Binary files /dev/null and b/logo.png differ diff --git a/writeup.md b/writeup.md new file mode 100644 index 0000000..e6962d4 --- /dev/null +++ b/writeup.md @@ -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