blah.tex

% report.tex
% --
% Mud Dog Creative (Software Hut, Group #1)
% See revision history for authors
%

% We want this to be an article
\documentclass[pdftex,a4paper,10pt]{article}

% Outline the packages to be used
\usepackage[utf8]{inputenc}
\usepackage[round,authoryear,sort]{natbib}
\usepackage{amsmath}
\usepackage{fancyhdr}
\usepackage{geometry}
\usepackage[hidelinks]{hyperref}
\usepackage[anythingbreaks]{breakurl}
\usepackage{vhistory}

% This somehow fixes very long url breaking. I dont even know what it does!
\expandafter\def\expandafter\UrlBreaks\expandafter{\UrlBreaks%  save the current one
  \do\a\do\b\do\c\do\d\do\e\do\f\do\g\do\h\do\i\do\j%
  \do\k\do\l\do\m\do\n\do\o\do\p\do\q\do\r\do\s\do\t%
  \do\u\do\v\do\w\do\x\do\y\do\z\do\A\do\B\do\C\do\D%
  \do\E\do\F\do\G\do\H\do\I\do\J\do\K\do\L\do\M\do\N%
  \do\O\do\P\do\Q\do\R\do\S\do\T\do\U\do\V\do\W\do\X%
  \do\Y\do\Z}




% Begin the document
\begin{document}

% Define title and make it (this will include the date by default
\title{\textbf{ICP-2302 / Software Hut} \\
Systems Architecture Report \\ 
Mud Dog Creative (\texttt{Group \#1})}


\newgeometry{margin=2in}
\maketitle

% Begin the abstract, defining what this article is about.
\begin{abstract}
\noindent{This project deliverable comprehensibly describes the overall architecture of the system which we intend to implement, along with the different architectural decisions that have been took with regards to our system. It also outlines the communication and interaction between each component within the system which we intend to design, and how each part will be integrated into the system during this project's lifecycle. In addition, this document will also discuss and contrast competitive technologies which will be used throughout this project, and help provide an insight into the rationale of choosing these technologies.}
\end{abstract}

% Render stuff which isn't top matter on a separate page
\pagebreak



% Set up page style for fancy headers, along with the header information (and page width!)
\newgeometry{margin=1in}
\pagestyle{fancy}
\fancyhf{}
\lhead{Mud Dog Creative \texttt{(Group \#1)}}
\rhead{ICP-2302}
\cfoot{\thepage}

% Revision History

% Start Revision History Table

\begin{versionhistory}
	\vhEntry{1.0}{January 29, 2015}{BW}{Created Draft}
	\vhEntry{1.1}{February 5, 2015}{BW}{Expanded Section 2 and 3}
\end{versionhistory}

% Generate a table of contents on the page
\tableofcontents
\pagebreak

\setlength{\parindent}{0cm}

% Actual content of the document
\section{Overview of the system}
The purpose of our project is to provide a system designed for students and lecturers to interactively provide feedback in real-time during a lecture. The system has to be able to allow students to interact with lecturers throughout the course of a lecture, and also provide statistical data to the lecturer on-the-fly. Using this overview of the system which is to be developed, we can start to make architectural decisions as to how this system is decomposed into it's constituent components.\\

The entire system will use a two-tier client/server architecture, where the client's front-end application and the lecturer's front-end will communicate via the server. More details on the system as a whole are outlined in the \textbf{Systems Requirement Specification} for this project.\\

\section{Client/Student system}
The client system will be used by the student in the interactive process, and will majorly consist of a web application which the student can run on their mobile device. The reason we have chosen a web application instead of a hardware-specific application is purely because of portability between a vast array of mobile devices and desktop systems. This means we can develop a single piece of software, and have the ability to deploy it over a number of different platforms with only minor (if any) alterations.\\

\subsection{Communication Technologies}
The client subsystem will need to be able to communicate with the server through a two-way channel - it must be able to send and receive data concurrently to/from the server in order to provide an interactive experience to the student. As our software will be a web application using web technologies, we will have to use some type of technology to communicate with the server via JavaScript.\\
\addtolength{\footskip}{-30pt}
We will use AJAX to achieve this, as AJAX is a popular and well-supported method\footnote{Based on the fact that the W3C has developed a working draft standard for AJAX: \url{http://www.w3.org/TR/XMLHttpRequest/}} for communication between a client and server when using web technologies. There is a lot of support for this technique of communication, and we all have experience with AJAX, so it's only natural that we should use this for this purpose when developing the client front-end.\\

An alternative to client-server communication is the eliminate the client from the actual communication process with the server, and to do all the communication server-side using native sockets, and then to send the result back to the client. Such an approach might involve technologies such as PHP or ASP, where the page is dynamically created from code which is interpreted and ran server-side and sent to the client. During the page generation phase, a number of different sockets can be created and used for communication between the server and an external host, and the results of such communication can be sent back to the client.\\

The problem with this approach is that the communication is done on a page-by-page basis, and the communication isn't done on the fly - i.e. the communication process is not asynchronous, and it requires an initial request from the client to the server for communication to an external host. With AJAX, the communication is asynchronous (Asynchronous JavaScript And XML) and the client doesn't have to communicate with an external host via the server. With AJAX, we can eliminate the middle-man, and rely on the client to do the communication instead of the server. It also allows the communication to be ran in the background, and the layout of the web application to not be affected, which would definitely be a desirable quality for our project if we aim to provide a simple and interactive interface which is easy to use.\\

To help with the usage of AJAX (and to provide a level of code reusability) we will use an external JavaScript library to do most of the heavy-lifting involved with AJAX for us, so we can focus solely on the communication between the client and the server and not have to worry about the low-level details concerned with AJAX. We can also trust a popular and leading library for AJAX to do the low-level work for us, and we can be assured that the code has been tested thoroughly, which saves us a lot of initial work.\\

One such library we will use for AJAX communication is AngularJS. AngularJS is \\

\subsection{Presentational Technologies}
Another aspect of the client software we need to consider is presentational technologies. We need something which would allow us to provide a minimalistic and natural interface to the client, but with a minimal amount of work. Ultimately, we will be using HTML, CSS and JavaScript to achieve this, as this would be a web-based application.\\

We could develop all the HTML, CSS and JavaScript from the ground up, but this would put strain on us in order to meet our time constraints and deadlines of the project. Also, we accept that we do not have a large development team and the resources required to thoroughly test a framework if we created one, so it's a better idea to rely on existing libraries and frameworks which have been tested and developed over a long period by large teams of developers. Additionally, by using external libraries and frameworks, we can ensure that our project is developed on a stable and reliable base.\\

\subsubsection{JavaScript}
In terms of interaction, we need something which would run client-side and change the content of the page depending on the data sent back from the server. The solution to this problem is to use JavaScript to change the content of elements within the page dynamically, and to change the presentation of these elements through CSS (more on CSS later).\\

JavaScript is a powerful language, and has developed a range of different functionalities as the web has increased in terms of popularity. As a result, there are many different ways to complete tasks with JavaScript, and we need a library to complete these common tasks for us. We need to use a library which aids us in the manipulation of DOM elements, so we don't have to write boilerplate code to do the same tasks, and helps keep our code clean and legible.\\

One such library is AngularJS, which is...\\

We will also be using jQuery, a popular JavaScript library which provides a simple-to-use interface for DOM manipulation, animation and interaction. In addition, jQuery also provides a simple interface for AJAX. Our team has a lot of experience with using jQuery, and we think it would be a beneficial library to include within our project. The reason for this is that there would be a high level of interaction throughout the client front-end, and jQuery is perfect for modelling animation and interaction with only a few lines of code.\\

jQuery is also one of the most leading JavaScript libraries, and a result, it is well-documented and frequently used by development teams. This means that there is a high level of support for jQuery, as well as a detailed repository of documentation for each aspect of the library. jQuery is also extensible through the use of plugins, and therefore we may be able to use some custom plugins for the development of the client front-end - or even develop some of our own.\\

\subsubsection{CSS}
The CSS for the client front-end is quite an important aspect to consider when developing this piece of software - because it is imperative that the interactivity associated with the front-end is as natural and intrinsic as possible. To achieve this, we need a layout and design which is simple, yet clear and straight to the point.\\

To achieve this, we need to think carefully about how the software for the client will be designed, rather than how it will be implemented. We will have to use CSS for formatting the page, and designing an interface like the one we aim for is a lot of work if we try and design it from the ground up. We need to think about different CSS techologies which will help us not only in the design of the page, but will also help with the responsiveness of the design within the page - how it will rescale to different resolutions, etc.\\

Although strictly not CSS, there are JavaScript libraries which `pass' over the document once it is rendered, and change the design (and ultimately, the CSS) of the page to a design controlled by the library itself. This aids with the development of our project, as we can rely on a library to provide formatting for us which is not only responsive, but easy to use and also deals with various cross-platform CSS fixes and organizes the responsiveness of the page via media queries. This prevents us from developing boilerplate code to deal with these small fixes, and promotes the reuse of code.\\

Two such libraries which we have considered is Bootstrap (Bootstrap.js), and Semantic UI. Bootstrap is a popular JavaScript library which deals with these issues - it provides a base CSS template to work from, which deals with all the nitty-gritty details and cross-platform compatibility patches for the developer, so the developer does not have to dedicate time throughout the project to make the page cross-compatible with other browsers.\\

By using Bootstrap, the developer can simply include Bootstrap into the project, develop their software, and make minor altercations to the CSS if needed. This is a desirable library for us to use, as it will help save us time and effort when developing our project, and we can ensure that it is developed from a steady base.\\

Semantic UI is very similar to Bootstrap, but contains a few important differences - it aims to provide the same functionality as Bootstrap, but in a way which preserves the semantic qualities of the HTML and CSS. We have chosen Semantic UI, because it performs all the functionality of Bootstrap, and is also a well-documented and popular library, yet it preserves the semantic properties of the web pages used throughout our project.\\

\section{Lecturer system}
The lecturer's system will be able to view statistical information concerning the feedback of the students from the client application used by the students. This feedback will be in real-time, and the server will act as a middleman to communicate and organize the student's feedback into a manageable payload to send to the lecturer's system. The lecturer will receive data from the server, which will receive data from the client, and the lecturer will send requests to the server, which will send requests to the client.\\

In this sense then, the lecturer software is very similar to the student/client software, just with certain administrative privileges (such as the management of users). The lecturer system will also require the need to view statistical data, but most of the aspects of the lecturer system are shared with the student/client system.\\

For example, the lecturer system will also need a simple and easy-to-use interface, and it will also need some form of technology to communicate with the server in an asynchronous manner.\\

Although the lecturer software doesn't necessarily have to be cross-platform (e.g. we don't need to consider mobile devices), it would still be a better product if we could develop towards this eventuality. If we develop the lecturer system very close to the student software, we can ensure that both are cross-platform software systems, and can be ran on most devices.\\



% End the document
\end{document}