MODERN WEB TECHNOLOGIES

BESJAN XHIKA

1

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

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

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

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

AWS – Amazon Web Services

AWSAWS is a collection of remote computing services / web services that together

make up a cloud computing platform, offered over the Internet by Amazon.

SaaSTraditionally, 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.

EC2EC2 – 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

We will use EC2 to install and run Django, our Server and Back End solution.

S3S3 – 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 53Route 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

Front End

AngularJSAngularJS 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.

PhilosophyAngularJS 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

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 / TemplatesIn 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

Data BindingData-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.

ScopeScope 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

ControllersIn 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 InjectionDependency 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.

ServicesAngular 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

• 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 DesignRWD 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.

BootstrapBootstrap 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 BootstrapUI 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

in pure AngularJS, such as jQuery or Bootstrap's JavaScript.

Angular TranslateAngular-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 ApplicationSPA 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 ToolsYeoman – 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 ModulesI wanted to implement everything around AngularJS, so no external

13

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

Server and Back End

DjangoDjango is a free and open source web application framework, written in Python,

which follows the Model–View–Controller architectural pattern.

Loose CouplingA 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 CodeDjango apps should use as little code as possible. Django should take full

advantage of Python's dynamic capabilities, such as introspection.

15

Quick DevelopmentThe 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 APIA 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 FrameworkDjango REST framework is a powerful and flexible toolkit that makes it easy to

build Web APIs.

16

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

Application Version of the Web App

UnityUnity 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

Future Considerations and Development

Linux Virtual MachineWe will be using Linux Virtual Machine in the future because advantages over

Windows Virtual Machine:

• More Secure.

• Faster.

• Cheaper.

• More Flexible.

Atomizing Unity DevelopmentIn 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