Some may notice that this application is what they call a ``single page application''. That means that the entire page is loaded once, and after that, only small pieces of the page are re-rendered. The Web page performs more like an application than traditional Web pages. 


A lot of work went into ensuring an extensible and modular frontend infrastructure was in place. Managing the hierarchy of view rendering with many complex components on a web page can get tricky. As the system grew, it's complexity did as well. It became very important to build a system to last, a system that enables the addition of new features and makes it easy to find bugs.


\begin{quotation}
Unfortunately, as programs get large and complicated, as they almost always do, the adequacy, consistency, and correctness of the specifications themselves become open to doubt, so that complete formal arguments of correctness seldom accompany large 
programs. Since large programs grow from small ones, it is crucial that we develop an arsenal of standard program structures of whose correctness we have become sure \cite[10]{sicp}
\end{quotation}

The ``arsenal'' of programming structures includes utilizing a multitude of programming patterns such as: module pattern, facade pattern, mediator pattern, observer pattern, and model-view-controller to name a few. It was crucial for the success of this platform, which was achieved with the help of aggregate technologies, and I would like to list off a few:


\begin{enumerate}
\item MathJax:
  used to render math


\item Aura:
  used for message passing infrastructure to decouple the application enabling modular development
    

\item Backbone:
  provided an MVC and some communication between server and client
  

\item RequireJS:
  provided a way to dynamically include and manage JavaScript libraries


\item Backbone Layout Manager:
  managed the rendering of nested views, particular provided great interface for ``beforeRender'' and ``afterRender''


\item Async.js:
  provided great interface for asynchronous control flow, facilitated development of application controller and data flow


\item CodeMirror:
  great, super simple code editor used to edit the \TeX 
    
    
\item D3:
  jQuery-like interface to manipulating SVG, didn't really use it for what it can really do, but was useful
    

\item bootstrap:
  provided CSS and JS for respsonsive design enabling display on multiple screen sizes
  

\item jQuery:
  required by Backbone, but also in general a good way to manipulate the DOM
    

\item underscore.js:
  a JavaScript utility belt that provides a lot of functionality while maintaining cross-browser gotchas


\item handlebars.js:
  a great library for rendering client side templates

\end{enumerate}

Frontend

This entire website was built with one language, JavaScript. The main duties of the backend was to provide an {\it Application Programming Interface} (API) to the frontend. The data was stored in a MySQL database, and the server was built on top of node.js. The list of technologies that comprise the backend are:


\begin{enumerate}
\item nginx:
  a super fast, light-weight web server


\item node.js:
  a server-side JavaScript platform to build scalable applications


\item express.js:
  a web application framework built on top of node.js


\item jugglingdb:
  great library for handling MySQL connections through a standard ORM interface



\end{enumerate}


10 JS Implementation