Skip to content

Commit ca9d52f

Browse files
swissmanuswissmanu
committed
Intro
1 parent 79d7cf1 commit ca9d52f

File tree

6 files changed

+143
-79
lines changed

6 files changed

+143
-79
lines changed

‎figures/add-breakpoint.png‎

148 KB
Loading

‎figures/consolelog.png‎

71.2 KB
Loading

‎figures/person-shrugging_1f937.png‎

24.7 KB
Loading

‎figures/tweet-interview.png‎

197 KB
Loading

‎movie.mov‎

5.25 MB
Binary file not shown.

‎slides.tex‎

Lines changed: 143 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,168 +2,232 @@
22
\usepackage[utf8]{inputenc}
33
\usepackage[T1]{fontenc}
44
\usepackage{tikz}
5+
\usepackage{hyperref}
56

67
\usepackage{pgfpages}
78
\setbeameroption{show notes on second screen}
89
% \pgfpagesuselayout{2 on 1}[a4paper,border shrink=10mm]
910

1011
\usetheme[darkmode, nofooterlogo]{pureminimalistic}
1112
% \renewcommand{\pageword}{}
12-
% \renewcommand{\logoheader}{\vspace{1.5em}}
13+
\renewcommand{\logotitle}{}
14+
\renewcommand{\logoheader}{}
15+
\renewcommand{\logofooter}{}
1316
\usepackage[backend=biber, doi=false, maxbibnames=2, maxcitenames=2, style=numeric, sorting=none, url=false, eprint=false]{biblatex}
1417
\addbibresource{bibliography.bib}
15-
% this makes it possible to add backup slides, without counting them
1618
\usepackage{appendixnumberbeamer}
1719
\renewcommand{\appendixname}{\texorpdfstring{\translate{appendix}}{appendix}}
1820

19-
\title[Debugging RxJS-based Applications]{Getting rid of the \texttt{console.log}:\\Debugging RxJS-based Applications}
20-
\author{Manuel Alabor}
21-
\institute{Eastern Switzerland University of Applied Sciences}
21+
\title[Debugging of RxJS-based Applications]{Getting rid of the \texttt{console.log}:\\Debugging of RxJS-based Applications}
22+
\author{Manuel Alabor, Markus Stolze}
23+
\institute{OST in Rapperswil, Switzerland}
2224
\date{\today}
2325

24-
2526
\begin{document}
2627

2728
\maketitle
2829

29-
\note[itemize]{
30-
\item Welcome
31-
\item Debugging of RxJS-based Applications
30+
\note[itemize] {
31+
\item Welcome everyone
32+
\item I am Manuel
33+
\item Frontend Software Engineer
34+
\item Currently TypeScript, React, RxJS
35+
\item Master Student
36+
\item Research Topic: Debugging for Reactive Programming -> RxJS
37+
\item -> Going to tell why this topic
3238
}
3339

40+
\section{Introduction}
3441

35-
\section*{Introduction}
36-
37-
\begin{frame}{Who Am I?}
38-
\begin{vfilleditems}
39-
\item Foobar\bigskip
40-
\item Foobar\bigskip
41-
\item Foobar\bigskip
42-
\item Foobar\bigskip
43-
\end{vfilleditems}
42+
\begin{frame}[fragile]{Reactive Programming for the Web}
43+
\centering
44+
\begin{figure}
45+
\centering
46+
\includegraphics[height=\textheight/2]{figures/rxjs-logo.png}
47+
\caption{RxJS \cite{rxjs}}
48+
\label{fig:rxjs}
49+
\end{figure}
4450
\end{frame}
4551

46-
% \begin{frame}[focus]
47-
% \includegraphics[width=\textwidth/3]{figures/rxjs-logo.png}
48-
% \\
49-
% \vspace{0.5cm}
50-
% \Huge{RxJS}
51-
% \end{frame}
52-
5352
\note[itemize] {
54-
\item
53+
\item What is RxJS?
54+
\item One of the larger representatives
55+
\item RP with JavaScript
56+
\item You might heard of Angular \cite{angualrrxjs} backed by Google
57+
\item Angular is based on RxJS
58+
\item All the things we love about RP: Check
59+
\item All the things we... dont love about RP: Check
5560
}
5661

57-
\section*{Introduction}
62+
\begin{frame}[fragile]{Debugging: First Intuition}
63+
\begin{figure}[H]
64+
\centering
65+
\includegraphics[height=\textheight/2]{figures/add-breakpoint.png}
66+
\caption{Add a Breakpoint}
67+
\end{figure}
68+
\end{frame}
5869

59-
\begin{frame}{}
70+
\note[itemize] {
71+
\item How to debug a problem? Well...
72+
\item Add a breakpoint
73+
\item Imperative programming debugging
74+
\item Helps sometimes (lambda functions, ...)
75+
\item Often useless (stack traces, program step controls...)
76+
\item What else?
77+
}
6078

79+
\begin{frame}[fragile]{Debugging: The Reality}
80+
\begin{figure}[H]
81+
\centering
82+
\includegraphics[height=\textheight/2]{figures/consolelog.png}
83+
\caption{Add Trace Logs}
84+
\end{figure}
6185
\end{frame}
6286

6387
\note[itemize] {
64-
\item
88+
\item After some time with RxJS
89+
\item Stuff gets more complex
90+
\item Debugging === Trace Logs
91+
\item Sprinkle log statements throughout the program
92+
\item Hope to get the right hint
93+
\item Remove (hopefully) everything again
6594
}
6695

96+
\begin{frame}[fragile]{Debugging: Can this be it?}
97+
\begin{figure}[H]
98+
\centering
99+
\includegraphics[height=\textheight/2]{figures/person-shrugging_1f937.png}
100+
\caption{\tiny{Source: \url{https://emojipedia.org/person-shrugging/}}}
101+
\end{figure}
102+
\end{frame}
67103

68-
\begin{frame}{}
104+
\note[itemize] {
105+
\item Frustration -> Reason Research topic
106+
\item There are concepts and solutions for RP debugging
107+
\item Reactive Debugger, Scala \cite{10.1145/2884781.2884815}
108+
\item Improved logging tools rxjs-spy
109+
\item Visualizers rxviz, rxjs visualizer
110+
\item But why does nobody seem to use them?
111+
\item Why are they not popular?
112+
\item -> Research Questions
113+
}
69114

115+
\begin{frame}[fragile]{Research Questions}
116+
\begin{enumerate}
117+
\vfill\item[RQ1] \textbf{What challenges} do software engineers face when debugging RxJS-based applications?
118+
\vfill\item[RQ2] How can the \textbf{experience} of software engineers during the debugging process of RxJS-based applications \textbf{be improved}?
119+
\vfill\item[\color{gray}{RQ3}] \color{gray}{What is the \textbf{impact of proposed solutions} on the debugging experience of software engineers?}
120+
\end{enumerate}
70121
\end{frame}
71122

72123
\note[itemize] {
73-
\item
124+
\item First: Collect and Validate information
125+
\item How do engineers debug RxJS?
126+
\item What do they like? Dislike?
127+
\item Validate this data in an observational study
128+
\item Second: Propose a solution to improve
129+
\item Third: Implement and validate solution
130+
\item Not part of this work
131+
\item Already started with in current iteration
74132
}
75133

134+
76135
\section{Interviews and War Stories}
77136

78-
\begin{frame}{Interviews}
79137

138+
139+
\begin{frame}[fragile]{Call for ``War Stories''}
140+
\begin{figure}[H]
141+
\centering
142+
\includegraphics[height=0.6\textheight]{figures/tweet-interview.png}
143+
\caption{\tiny{Source: \url{https://twitter.com/swissmanu/status/1242429409208029185}}}
144+
\end{figure}
80145
\end{frame}
81146

82147
\note[itemize] {
83-
\item
148+
\item First: Collect and Validate information
149+
\item How do engineers debug RxJS?
150+
\item What do they like? Dislike?
151+
\item Validate this data in an observational study
152+
\item Second: Propose a solution to improve
153+
\item Third: Implement and validate solution
154+
\item Not part of this work
155+
\item Already started with in current iteration
84156
}
85157

158+
\begin{frame}[fragile]{Getting Started with RQ1}
159+
\begin{vfilleditems}
160+
\item Talk to practitioners
161+
\item 1:1 Interviews
162+
\item Written ``War Story'' Reports
163+
\end{vfilleditems}
164+
\end{frame}
86165

87-
\begin{frame}{War Stories}
88166

167+
\begin{frame}{Interviews}
168+
\begin{vfilleditems}
169+
\item Informal interviews with five participants
170+
\end{vfilleditems}
89171
\end{frame}
90172

91-
\note[itemize] {
92-
\item
93-
}
94-
173+
\begin{frame}{War Stories}
174+
\begin{vfilleditems}
175+
\item Request via Twitter and direct emails
176+
\item Responses from five engineers, including one RxJS core team member
177+
\end{vfilleditems}
178+
\end{frame}
95179

96180
\begin{frame}{Results}
97181

98182
\end{frame}
99183

100-
\note[itemize] {
101-
\item
102-
}
103184

104185
\section{Observational Study}
105186
\begin{frame}{Hypothesis}
106-
187+
If software engineers must solve an RxJS-based problem, then they \textbf{will instrument the code manually} in order to understand its behavior.
107188
\end{frame}
108189

109-
\note[itemize] {
110-
\item
111-
}
112-
113-
114-
\begin{frame}{Design}
115-
190+
\begin{frame}{Study Design}
191+
\begin{vfilleditems}
192+
\item Observational Study
193+
\item Two Problems
194+
\item 25 Minutes per Problem
195+
\item
196+
\end{vfilleditems}
116197
\end{frame}
117198

118-
\note[itemize] {
119-
\item
120-
}
121-
122-
123199
\begin{frame}{Problem Example}
124200

125201
\end{frame}
126202

127-
\note[itemize] {
128-
\item
129-
}
130-
131-
132203
\begin{frame}{Results}
133204

134205
\end{frame}
135206

136-
\note[itemize] {
137-
\item
138-
}
139-
140207
\section{Conclusion}
141208
\begin{frame}{}
142209

143210
\end{frame}
144211

145-
\note[itemize] {
146-
\item
147-
}
148-
149-
150-
\begin{frame}{Future Work}
151-
212+
\section{Future Work}
213+
\begin{frame}[fragile]{Future Work}
214+
\begin{vfilleditems}
215+
\item Manuel Alabor \cite{10.1145/2501654.2501666}
216+
\item Manuel Alabor
217+
\item Manuel Alabor
218+
\end{vfilleditems}
152219
\end{frame}
153220

154-
\note[itemize] {
155-
\item
156-
}
157-
158-
159-
\begin{frame}
160-
Q \& A
221+
\begin{frame}[plain, noframenumbering]
222+
\centering
223+
\vfill
224+
{\fontsize{40}{50}\selectfont Q \& A}
225+
\vfill
161226
\end{frame}
162227

163228
\appendix
164229
\begin{frame}[allowframebreaks]{References}
165-
\bibliographystyle{plain}
166-
\bibliography{bibliography}
230+
\printbibliography
167231
\end{frame}
168232

169233
\end{document}

0 commit comments

Comments
 (0)