asdf

.gitignore

@@ -0,0 +1,2 @@
+dot/*.png
+main.pdf

codegen.tex

@@ -0,0 +1,3 @@
+\begin{frame}
+  \frametitle{Code Generation}
+\end{frame}

deps.tex

@@ -0,0 +1,79 @@
+\begin{frame}[fragile]
+  \frametitle{Deep Dive into Dependency Calculation}
+
+  \begin{columns}
+    \begin{column}{0.55\textwidth}
+      \begin{verbatim}
+component HelloWorld {
+    model {
+        name: String = "hello",
+    }
+
+    view {
+        <input bind:value="name" />
+        "Hello, " {name} "!"
+    }
+}
+      \end{verbatim}
+    \end{column}
+    \begin{column}{0.3\textwidth}
+      Points of interest:
+
+      \begin{itemize}
+        \item \texttt{bind:value} statement
+        \item Code segment \texttt{\{name\}}
+      \end{itemize}
+    \end{column}
+  \end{columns}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Generated Dependency Chart}
+
+  \begin{center}
+    \includegraphics[width=0.6\textwidth]{{helloworld.dot}.png}
+  \end{center}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Generated Dependency Chart}
+
+  \begin{columns}
+    \begin{column}{0.4\textwidth}
+      \includegraphics[width=\textwidth]{{helloworld.dot}.png}
+    \end{column}
+    \begin{column}{0.5\textwidth}
+      \begin{itemize}
+        \item All possible dependent actors are uniquely identified.
+        \item Symbolizes all interactions within the application.
+        \item Simple DFS will tell us all updates that need to occur.
+      \end{itemize}
+    \end{column}
+  \end{columns}
+\end{frame}
+
+\begin{frame}[fragile]
+  \frametitle{Case Study 2: Dependencies of TodoMVC}
+
+  \includegraphics[width=\textwidth]{{todomvc.dot}.png}
+  \begin{center}
+    \begin{Verbatim}[fontsize=\tiny]
+component TodoMVC {
+  model {
+    value: String = "",
+    todos: List<String> = List::new(),
+  }
+
+  view {
+    <input bind:value="value" on:submit={|o@todos, o@value| { set!(todos = todos.with(value));
+                                                              set!(value = ""); }} />
+    <ul>
+      [for (key, line) in {todos} : List<String>]
+        <li>{line}</li>
+      [/for]
+    </ul>
+  }
+}
+    \end{Verbatim}
+  \end{center}
+\end{frame}

dot/helloworld.dot

@@ -0,0 +1,7 @@
+digraph {
+    0 [label="RsxAttr(\"sym_0\", \"value\")"]
+    1 [label="ModelValue(\"name\")"]
+    2 [label="RsxSpan(\"sym_2\")"]
+    0 -> 1
+    1 -> 2
+}

dot/todomvc.dot

@@ -0,0 +1,18 @@
+digraph {
+    rankdir = "LR";
+
+    0 [label="RsxAttr(\"sym_0\", \"value\")"]
+    1 [label="ModelValue(Leaf(\"value\"))"]
+    2 [label="CodeSeg(\"sym_3\")"]
+    3 [label="ModelValue(Leaf(\"todos\"))"]
+    4 [label="RsxEvent(\"sym_0\", \"submit\")"]
+    5 [label="CodeSeg(\"sym_9\")"]
+    6 [label="Iterator(\"sym_8\")"]
+    0 -> 1
+    1 -> 0
+    2 -> 3
+    2 -> 1
+    4 -> 2
+    5 -> 6
+    3 -> 5
+}

main.tex

@@ -0,0 +1,95 @@
+\documentclass{beamer}
+% \usetheme{Boadilla}
+\usetheme{Madrid}
+
+\usepackage{bookmark}
+\usepackage{graphicx}
+\usepackage{fancyvrb}
+
+\graphicspath{ {./dot/} }
+
+\setbeamercovered{transparent}
+
+\title{enterprise}
+\subtitle{UI Framework Project}
+\author{Michael Zhang}
+\date[\today]{SIFT Interview, \today}
+
+\begin{document}
+
+\begin{frame}
+  \titlepage
+  \note{Briefly discuss what is enterprise, a bit about the origin of its name.}
+\end{frame}
+
+\begin{frame}
+  \frametitle{High-Level Goals}
+
+  \begin{itemize}[<+>]
+    \item Declarative-style programming.
+    \note{In UI design, we really don't care about how the logic is implemented. We don't care how the browser draws the styles, or what order on-hover handlers are added to dropdowns.}
+
+    \item No framework bloat.
+    \note{enterprise is more like a compiler than a framework in the sense that the code it generates doesn't need to contain the actual compilation process.}
+
+    \item Ahead-of-time guarantees.
+    \note{Another benefit of it being a compiler is that it is difficult to get run-time errors. If it compiles, it works.}
+
+    \item Separation of business logic and implementation.
+    \note{Talk about Epic?}
+  \end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]
+  \frametitle{What do I have today?}
+
+  \begin{itemize}
+    \item Foundations for event analysis.
+    \item WASM code generation.
+  \end{itemize}
+
+  Example:
+
+  \begin{verbatim}
+    component HelloWorld {
+        model {
+            name: String = "hello",
+        }
+
+        view {
+            <input bind:value="name" />
+            "Hello, " {name} "!"
+        }
+    }
+  \end{verbatim}
+\end{frame}
+
+\begin{frame}
+  \frametitle{How does it work?}
+
+  \begin{enumerate}
+    \item Parsing DSL syntax.
+    \item Assemble dependency graph.
+    \item Generate code.
+  \end{enumerate}
+\end{frame}
+
+\include{parsing}
+
+\include{deps}
+
+\include{codegen}
+
+\begin{frame}
+  \frametitle{Future Work}
+
+  \begin{itemize}
+    \item Full DSL, independent from Rust.
+    \item Cassowary-based constraint solving for layout.
+    \item Asynchronous event handlers.
+    \item Eliminating unnecessary model stores.
+    \item Connecting to other frameworks (GTK, Iced, etc.)
+  \end{itemize}
+\end{frame}
+
+\end{document}

parsing.tex

@@ -0,0 +1,53 @@
+\begin{frame}[fragile]
+  \frametitle{Deep Dive into Parsing DSL Syntax}
+
+  \begin{columns}
+    \begin{column}{0.3\textwidth}
+      \begin{itemize}
+        \item Hand-rolled recursive-descent parser.
+        \item Why not use LR parser generator?
+      \end{itemize}
+    \end{column}
+    \begin{column}{0.55\textwidth}
+      \begin{verbatim}
+component HelloWorld {
+    model {
+        name: String = "hello",
+    }
+
+    view {
+        <input bind:value="name" />
+        "Hello, " {name} "!"
+    }
+}
+      \end{verbatim}
+    \end{column}
+  \end{columns}
+\end{frame}
+
+\begin{frame}[fragile]
+  \frametitle{Taking advantage of Rust syntax}
+
+  \begin{columns}
+    \begin{column}{0.4\textwidth}
+      \begin{verbatim}
+// proc-macro library
+pub enum TokenTree {
+    Group(Group),
+    Ident(Ident),
+    Punct(Punct),
+    Literal(Literal),
+}
+      \end{verbatim}
+    \end{column}
+    \begin{column}{0.4\textwidth}
+      \begin{itemize}
+        \item Get \texttt{\{\}}-bracketed groups for free.
+        \item Easily tell identifiers from strings.
+        \item Punctuation has flexible representation.
+        \item Get literal parsing for free.
+      \end{itemize}
+    \end{column}
+  \end{columns}
+\end{frame}
+

watch.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+# https://unix.stackexchange.com/a/107405
+
+trap killgroup SIGINT
+
+killgroup() {
+  echo Stopping...
+  kill 0
+}
+
+watchexec -w dot -e dot "dot -Tpng -O dot/*.dot" &
+watchexec -e tex "tectonic main.tex" &
+wait