So, recently I had my first Web Development Experience. After some research and many iterations on different approaches I came out with these solutions: MVC – Model View Controller Architecture AWS – Amazon Web Services Front End – AngularJS and RDW (Responsive Web Design) Server and Back End – Django and REST API Application Version of the Web App – Unity and StrangeIoC Framework.

1. MODERN WEB TECHNOLOGIES
BESJAN XHIKA
1

2. Index
Motivation......................................................................................... 3
Solutions.......................................................................................... 4
MVC – Model View Controller Architecture...................................... 5
AWS – Amazon Web Services......................................................... 6
Front End......................................................................................... 8
Server and Back End..................................................................... 15
Application Version of the Web App............................................... 18
Future Considerations and Development....................................... 19
2

3. Motivation
My goal as a Technical Director at Mediarea Trust – the company I work
for, is to make our developer's life easier by creating tools that facilitate their
work and defining the Workflows for different departments: The Digital Content
Creation Department – that consists in the creation of Digital Media and 3D
Models and Animations; The Video Games Department; The App Development
Department; The Web Development Department.
So, recently I needed to get involved with the Web Development
Department, since the technologies chosen in the beginning were outdated and
we were having problems like lack of development speed, cross-platform
support, screen-agnostic support, lack of flexibility in rapid changes that the
clients asked about, multilingual support, etc..
3

4. Solutions
After some research and many iterations on different approaches I came
out with these solutions:
MVC – Model View Controller Architecture
AWS – Amazon Web Services
Front End – AngularJS and RDW (Responsive Web Design)
Server and Back End – Django and REST API
Application Version of the Web App – Unity and StrangeIoC Framework
4

5. MVC – Model View Controller Architecture
We needed an Architecture that would be consistent and clean in all our
development environments: AngularJS, Django, Unity3D.
Although they might differ a little in different environments the fundamental
Architecture is the MVC Pattern.
The MVC Pattern divides the application into three interconnected parts.
Model – consists of application data, business rules, logic and functions.
View –consists of any output representation of information.
Controller – accepts input and converts it to commands for the model or view.
Definition of interactions between different parts.
A model notifies its associated view/views and controllers when there has been
a change in its state. This notification allows views to update their presentation,
and the controllers to change the available set of commands.
A view is told by the controller all the information it needs for generating an
output representation to the user. It can also provide generic mechanisms to
inform the controller of user input.
A controller can send commands to the model to update the model's state. It can
also send commands to its associated view to change the view's presentation of
the model.
5

6. AWS – Amazon Web Services
AWS
AWS is a collection of remote computing services / web services that together
make up a cloud computing platform, offered over the Internet by Amazon.
SaaS
Traditionally, businesses have had to build and maintain infrastructure to run on-
premises applications. With the Software-as-a-Service (SaaS) model,
businesses can consume applications that are hosted online, enabling them to
lower their costs by paying only for what they use, enjoy seamless and painless
upgrades in functionality, and integrate easily with their existing data and
systems.
EC2
EC2 – Elastic Compute Cloud allows users to rent virtual computers on which to
run their own computer applications. EC2 allows scalable deployment of
applications by providing a Web service through which a user can boot an
Amazon Machine Image to create a virtual machine - "instance", containing any
software desired. A user can create, launch, and terminate server instances as
needed, paying by the hour for active servers, hence the term "elastic". EC2
provides users with control over the geographical location of instances that
allows for latency optimization and high levels of redundancy.
6

7. We will use EC2 to install and run Django, our Server and Back End solution.
S3
S3 – Simple Storage Service provides storage through web services interfaces
(REST, SOAP, and BitTorrent), for a variety of content, ranging from web
applications to media files.
We will use it to upload our web app created with AngularJS, also for storing
multimedia contents for all our future projects.
Route 53
Route 53 provides scalable and highly available Domain Name System (DNS).
The name (Route 53) is a reference to TCP or UDP port 53, where DNS server
requests are addressed. In addition to being able to route users to various AWS
services, including EC2 instances, Route 53 also enables AWS customers to
route users to non-AWS infrastructure. Route 53's servers are distributed
throughout the world.
We will use Rout 53 service to route our web app to our domain name provider
but also to our EC2 service where our server and back end app is running.
7

8. Front End
AngularJS
AngularJS is an open-source JavaScript framework, maintained by Google, that
assists with running single-page applications. Its goal is to augment web-based
applications with Model–View–Controller (MVC) capability, in an effort to make
both development and testing easier.
Philosophy
AngularJS is built around the belief that declarative programming should be
used for building user interfaces and wiring software components, while
imperative programming is excellent for expressing business logic. The
framework adapts and extends traditional HTML to better serve dynamic content
through two-way data-binding that allows for the automatic synchronization of
models and views. As a result, AngularJS de-emphasizes DOM manipulation
and improves testability.
Design Goals
• Decouple DOM manipulation from application logic. This improves the
testability of the code.
• Regard application testing as equal in importance to application writing.
Testing difficulty is dramatically affected by the way the code is structured.
• Decouple the client side of an application from the server side. This allows
8

9. development work to progress in parallel, and allows for reuse of both
sides.
• Guide developers through the entire journey of building an application:
from designing the UI, through writing the business logic, to testing.
Angular follows the MVC pattern and encourages loose coupling between
presentation, data, and logic components. Using dependency injection, Angular
brings traditional server-side services, such as view-dependent controllers, to
client-side web applications. Consequently, much of the burden on the back end
is reduced, leading to much lighter web applications.
View / Templates
In Angular, templates are written with HTML that contains Angular-specific
elements and attributes. Angular combines the template with information from
the model and controller to render the dynamic view that a user sees in the
browser.
These are the types of Angular elements and attributes that can be used:
• Directive – An attribute or element that augments an existing DOM
element or represents a reusable DOM component.
• Markup – The double curly brace notation {{ }} to bind expressions to
elements is built-in Angular markup.
• Filter – Formats data for display.
• Form controls – Validates user input.
9

10. Data Binding
Data-binding in Angular apps is the automatic synchronization of data between
the model and view components. The way that Angular implements data-binding
lets you treat the model as the single-source-of-truth in your application. The
view is a projection of the model at all times. When the model changes, the view
reflects the change, and vice-versa.
Scope
Scope is an object that refers to the application model. It is an execution context
for expressions. Scopes are arranged in hierarchical structure which mimic the
DOM structure of the application. Scopes can watch expressions and propagate
events.
10

11. Controllers
In Angular, a Controller is a JavaScript constructor function that is used to
augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive, Angular
will instantiate a new Controller object, using the specified Controller's
constructor function. A new child scope will be available as an injectable
parameter to the Controller's constructor function as $scope.
Controllers are used to:
• Set up the initial state of the $scope object.
• Add behavior to the $scope object.
Dependency Injection
Dependency Injection (DI) is a software design pattern that deals with how
components get hold of their dependencies.
The Angular injector subsystem is in charge of creating components, resolving
their dependencies, and providing them to other components as requested.
Services
Angular services are substitutable objects that are wired together using
dependency injection (DI). Services can be used to organize and share code
across the app. We will use Angular services to communicate with our REST
API.
Angular services are:
11

12. • Lazily instantiated – Angular only instantiates a service when an
application component depends on it.
• Singletons – Each component dependent on a service gets a reference to
the single instance generated by the service factory.
RWD – Responsive Web Design
RWD is a Web design approach aimed at crafting sites to provide an optimal
viewing experience – easy reading and navigation with a minimum of resizing,
panning, and scrolling – across a wide range of devices (from mobile phones to
desktop computer monitors).
A site designed with RWD adapts the layout to the viewing environment by using
fluid, proportion-based grids, flexible images, and CSS3 media queries, an
extension of the @media rule.
Bootstrap
Bootstrap is a free collection of tools for creating websites and web applications.
It contains HTML and CSS-based design templates for typography, forms,
buttons, navigation and other interface components, as well as optional
JavaScript extensions.
UI Bootstrap
UI Bootstrap contains a set of native AngularJS directives based on Bootstrap's
markup and CSS.
We want to free ourselves from external dependencies that are not implemented
12

13. in pure AngularJS, such as jQuery or Bootstrap's JavaScript.
Angular Translate
Angular-translate is an AngularJS module that makes the support of i18n and
l10n much easier, including lazy loading and pluralization.
It provides components like filters and directives, asynchronous loading of i18n
data, full pluralization support.
SPA – Single Page Application
SPA is a web application or web site that fits on a single web page with the goal
of providing a more fluid user experience akin to a desktop application.
So I decided to experiment with this new concept and see if it would really work.
Client – Side Tools
Yeoman – is an open source client-side development stack, consisting of tools
and frameworks intended to help developers quickly build high quality web
applications.
Sublime Text – is a cross-platform text and source code editor, with a Python
application programming interface (API).
AngularJS Modules
I wanted to implement everything around AngularJS, so no external
13

14. dependencies that aren't implemented in pure AngluarJS.
Modules used:
• angular-bootstrap: a set of native AngularJS UI directives.
• angular-cookies: provides a convenient wrapper for reading and writing
browser cookies.
• angular-mocks: provides support to inject and mock Angular services into
unit tests.
• angular-resource: provides interaction support with RESTful services via
the $resource service.
• angular-scroll: scrollspy, animated scrollTo and scroll events.
• angular-translate: i18n and l10n support.
14

15. Server and Back End
Django
Django is a free and open source web application framework, written in Python,
which follows the Model–View–Controller architectural pattern.
Loose Coupling
A fundamental goal of Django's stack is loose coupling and tight cohesion. The
various layers of the framework shouldn't know about each other unless
absolutely necessary.
For example, the template system knows nothing about Web requests, the
database layer knows nothing about data display and the view system doesn’t
care which template system a programmer uses.
Although Django comes with a full stack for convenience, the pieces of the stack
are independent of another wherever possible.
The core Django MVC framework consists of an object-relational mapper which
mediates between data models (defined as Python classes) and a relational
database ("Model"); a system for processing requests with a web templating
system ("View") and a regular-expression-based URL dispatcher ("Controller").
Less Code
Django apps should use as little code as possible. Django should take full
advantage of Python's dynamic capabilities, such as introspection.
15

16. Quick Development
The point of a Web framework in the 21st century is to make the tedious aspects
of Web development fast. Django should allow for incredibly quick Web
development.
DRY – Don't Repeat Yourself
Every distinct concept and/or piece of data should live in one, and only one,
place. Redundancy is bad. Normalization is good.
The framework, within reason, should deduce as much as possible from as little
as possible.
Web API
A server-side web API is a programmatic interface to a defined request-
response message system, typically expressed in JSON or XML, which is
exposed via the web – most commonly by means of an HTTP-based web
server.
These RESTful web APIs are accessible via standard HTTP methods by a
variety of HTTP clients including browsers and mobile devices.
Django REST Framework
Django REST framework is a powerful and flexible toolkit that makes it easy to
build Web APIs.
16

17. Advantages:
• The Web browseable API is a huge usability win for developers.
• Authentication policies including OAuth1a and OAuth2 out of the box.
• Serialization that supports both ORM and non-ORM data sources.
• Customizable all the way down – just use regular function-based views if
we don't need the more powerful features.
17

18. Application Version of the Web App
Unity
Unity is a game development ecosystem: a powerful rendering engine fully
integrated with a complete set of intuitive tools and rapid workflows to create
interactive 3D and 2D content; easy multiplatform publishing; thousands of
quality, ready-made assets in the Asset Store and a knowledge-sharing
community.
We use Unity to create games and apps. Since our main products consist in
Augmented Reality app, we can use our web app, or a part of it in our final app
that also uses Augmented Reality.
StrangeIoC
StrangeIoC is a super-lightweight and highly extensible Inversion-of-Control
framework, written specifically for C# and Unity.
MVCSContext is Strange's way of wrapping up the whole micro-architecture into
a convenient, easy-to-use package. As the name suggests, it's designed to work
as an MVCS application (The ‘S’ is for Service, which refers to anything outside
the application, such as a web service).
18

19. Future Considerations and Development
Linux Virtual Machine
We will be using Linux Virtual Machine in the future because advantages over
Windows Virtual Machine:
• More Secure.
• Faster.
• Cheaper.
• More Flexible.
Atomizing Unity Development
In the future I plan to build system where from withing Unity Environment, will
read the AngularJS Web App and will generate the Unity version of it.
ANTLR – Another Tool for Language Recognition is a powerful parser generator
for reading, processing, executing, or translating structured text or binary files.
By using ANTLR the system will be able to parse HTML, CSS and JavaScript.
Since both AngularJS and Unity's StrangeIoC Framework use the same
Architecture – MVC, this process will be evenmore automatic.
19