

% add the PATH to retrieve cls and sty beamer styles files
\makeatletter
\providecommand*{\input@path}{}
\edef\input@path{{../../support/beamer/}\input@path}% prepend
\makeatother

% \documentclass{pharoslides}
% \documentclass[aspectratio=169]{pharoslides} % format 16/9
\documentclass[withvideo]{pharoslides} % format 16/9 + incrustation video

\graphicspath{{./figures/}{../}{../../support/beamer/imgs/}}

%Information to be included in the title page:
\title{Seaside: An Innovative Web Application Framework}
\subtitle{}
\author{Damien Cassou, Stéphane Ducasse and Luc Fabresse}
\institute{http://stephane.ducasse.free.fr}
\date{}
\slidesid{W4S08}

\begin{document}

\frame[plain]{\titlepage}



\begin{frame}[fragile]

\frametitle{Seaside}

\begin{itemize}
\item A powerful, innovative and flexible framework
\item Dedicated to build complex Web applications
\item Live coding and debugging 
\item Support reusable Web components 
\item Secure by default
\item Web 2.0 support (Ajax, Reef, ...)
\item REST integration
\end{itemize}


\begin{center}
\includegraphics[width=0.8\textwidth]{figures/SeasideLogo.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Books and Tutorials}

\begin{itemize}
\item Seaside \url{http://www.seaside.st}
\item Seaside book \url{http://book.seaside.st}
\item Seaside tutorial \url{http://www.swa.hpi.uni-potsdam.de/seaside/}
\item Seaside tutorial \url{http://seaside.gemtalksystems.com/tutorial.html}
\item TinyBlog tutorial 
\end{itemize}

\begin{itemize}
\item Community: register to seaside mailing list and ask questions
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Seaside Little History}

\begin{itemize}
\item Developed by A. Bryant and J. Fitzell
\item Enhanced by L. Renggli and P. Marshall
\item In production since 2002
\item Actively maintained by J. Brichau, S. Eggermont (web site under full rewrite) 
\item Foundation of many Pharo success stories 
\item \url{http://www.pharo.org/success}
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Seaside in a Nutshell}

\begin{itemize}
\item Define reusable and stateful components
\item Use a DSL for rendering components
\item Compose components
\begin{itemize}
\item build coarser-grained components by encaspulation
\item schedule components with \code{call:} and \code{answer:} messages
\end{itemize}

\item A web application is just a root component  
\item Debug your application on the fly
\item Use metadata to generate forms
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Seaside in Production Since 2002}


\begin{center}
\includegraphics[width=0.9\textwidth]{figures/Seaside-Success.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Cable eXpertise}


\begin{center}
\includegraphics[width=1.1\textwidth]{figures/Seaside-CableXP.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Quuve - debrispublishing.com}


\begin{center}
\includegraphics[width=1.1\textwidth]{figures/Seaside-Quuve2.jpg}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Seaside Components}

\begin{itemize}
\item A component is:
\begin{itemize}
\item an instance of a subclass of \code{WAComponent}
\item a reusable and stateful part of a Web page
\item rendered in HTML (\textless{}div\textgreater{})
\end{itemize}

\end{itemize}

\begin{itemize}
\item A Web application has a root component
\end{itemize}

\begin{listing}{}
WAAdmin register: WACounter asApplicationAt: 'counter'.
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{The Counter Web Application}


\begin{center}
\includegraphics[width=0.7\textwidth]{figures/SeasideWACounter.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{WACounter}

\begin{listing}{}
WAComponent subclass: #WACounter
   instanceVariableNames: 'count'
   classVariableNames: ''
   package: 'Seaside-Examples-Misc'.

WACounter >> initialize
   super initialize.
   count := 0

WACounter >> increase
   count := count + 1

WACounter >> decrease
   count := count - 1
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{From Components to Valid HTML}

\begin{itemize}
\item All components respond to \code{renderContentOn:} 
\item This method converts a component to valid HTML
\item This message is automatically sent to components by Seaside 
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{HTML Rendering}

\begin{itemize}
\item \code{renderContentOn:} is dedicated to HTML generation 
\item parameter named \code{html} (\code{WAHtmlCanvas}) defines a DSL like API to generate valid HTML 
\end{itemize}

\begin{listing}{}
WACounter >> renderContentOn: html
   html heading: count.
   html anchor
      callback: [ self increase ];
      with: '++'.
   html space.
   html anchor
      callback: [ self decrease ];
      with: '--'
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Live Debugging}

\begin{listing}{}
WACounter>>decrease
   self haltIf: (count-1 < 0).
   count := count - 1
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Walking the Application Stack}


\begin{center}
\includegraphics[width=0.85\textwidth]{figures/SeasideDebuggingWACounter.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Back Button}

Pressing the \textbf{back button} of the browser desynchronizes server and client

Example: 

\begin{itemize}
\item Increment the counter 5 times (\code{count} = 5)
\item Press the \textbf{back button} =\textgreater{} the displayed value is 4
\item Increment the counter =\textgreater{} the displayed value is 6
\end{itemize}

How to make it work properly?
\end{frame}



\begin{frame}[fragile]

\frametitle{A Counter Dealing with Back Button}

Just declare the component state to be preserved 

\begin{listing}{}
WACounter >> states
        ^ Array with: self
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Plain Code in Callbacks}

\begin{listing}{}
WACounter >> renderContentOn: html
   html heading: count.
   html anchor
      callback: [ 
         count odd 
            ifTrue: [ self increase ]
            ifFalse: [ 
               self inform: 'Even number!'. 
               count := count + 2] 
      ];
      with: '++'.
   html space.
   html anchor
   	callback: [ self decrease ];
   	with: '--'
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Callback Execution}

Pressing ++

\begin{center}
\includegraphics[width=0.4\textwidth]{figures/SeasideWACounter.png}\end{center}


shows

\begin{center}
\includegraphics[width=0.4\textwidth]{figures/SeasideCounterInform.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{A Greeter Application}


\begin{center}
\includegraphics[width=0.5\textwidth]{figures/SeasideGreeter.png}\end{center}



\begin{center}
\includegraphics[width=0.5\textwidth]{figures/SeasideGreeterHi.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Callbacks with the User Value}

A \code{Greeter} component

\begin{listing}{}
Greeter >> renderContentOn: html
    html form: [
         html text: 'Username:'.
         html textInput
            callback: [ :value | username := value ].
         html submitButton
            callback: [ self inform: 'Hi ', username ];
            text: 'Say Hello'. ].
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Did you see?!}

\begin{itemize}
\item \textbf{No} manual request parsing
\item \textbf{No} XML configuration files
\item \textbf{No} file/page 
\begin{itemize}
\item don't think in terms of pages
\item use components
\end{itemize}

\item \textbf{No} hardcoding of next page
\item \textbf{Live Debugging} 
\begin{itemize}
\item use the debugger to modify objects and proceed to generate the HTML response
\end{itemize}

\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Conclusion}

\begin{itemize}
\item A Web application = a root component
\item A component renders itself in HTML (\code{renderContentOn:})
\item An extensible DSL helps to easily generate HTML 
\end{itemize}
\end{frame}




% \setlength{\textwidth}{\originaltextwidth}
\setbeamertemplate{background canvas}{\insertBorderForHandout}

\begin{frame}[plain]

\begin{minipage}{\originaltextwidth}
\centering
\large


\vspace{2em}

A course by

\vspace{1em}

\hspace{-20px}\includegraphics[height=32px]{inriaLogo}\hspace{3em}\raisebox{7px}{and}\hspace{3em}\raisebox{-6px}{\includegraphics[height=30px]{logoutop}}

\vspace{2em}

in collaboration with

\vspace{1em}

\includegraphics[height=40px]{unisciellogo}\hskip 1.5em%
\raisebox{5px}{\includegraphics[height=30px]{unitlogo}}\hskip 2em%
\raisebox{8px}{\includegraphics[height=24px]{univLilleLogo}}\hskip 2em%
\raisebox{3px}{\includegraphics[height=29px]{logo-IMT}}\hskip 2em%
\raisebox{1px}{\includegraphics[height=32px]{minesDouaiLogo}}

\vspace{2.5em}

\includegraphics[width=50px]{by-nc-nd} \tiny \hskip 0.5em \raisebox{5px}{Inria 2016}

\medskip

\tiny
Except where otherwise noted, this work is licensed under CC BY-NC-ND 3.0 France

\url{https://creativecommons.org/licenses/by-nc-nd/3.0/fr/} 

\end{minipage}
\end{frame}

\end{document}

%%% Local Variables:
%%% mode: latex
%%% TeX-master: t
%%% End:
