init
This commit is contained in:
commit
c033384c4e
5 changed files with 330 additions and 0 deletions
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
*.aux
|
||||||
|
*.log
|
||||||
|
*.nav
|
||||||
|
*.out
|
||||||
|
*.snm
|
||||||
|
*.synctex.gz
|
||||||
|
*.toc
|
||||||
|
*.sty
|
||||||
BIN
Webdev in Haskell.pdf
Normal file
BIN
Webdev in Haskell.pdf
Normal file
Binary file not shown.
257
Webdev in Haskell.tex
Normal file
257
Webdev in Haskell.tex
Normal 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
BIN
logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
65
writeup.md
Normal file
65
writeup.md
Normal 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
|
||||||
Loading…
Reference in a new issue