Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
MODERN WEB TECHNOLOGIES
BESJAN XHIKA
1
Index
Motivation......................................................................................... 3
Solutions........
Motivation
My goal as a Technical Director at Mediarea Trust – the company I work
for, is to make our developer's life eas...
Solutions
After some research and many iterations on different approaches I came
out with these solutions:
MVC – Model Vie...
MVC – Model View Controller Architecture
We needed an Architecture that would be consistent and clean in all our
developme...
AWS – Amazon Web Services
AWS
AWS is a collection of remote computing services / web services that together
make up a clou...
We will use EC2 to install and run Django, our Server and Back End solution.
S3
S3 – Simple Storage Service provides stora...
Front End
AngularJS
AngularJS is an open-source JavaScript framework, maintained by Google, that
assists with running sing...
development work to progress in parallel, and allows for reuse of both
sides.
• Guide developers through the entire journe...
Data Binding
Data-binding in Angular apps is the automatic synchronization of data between
the model and view components. ...
Controllers
In Angular, a Controller is a JavaScript constructor function that is used to
augment the Angular Scope.
When ...
• Lazily instantiated – Angular only instantiates a service when an
application component depends on it.
• Singletons – Ea...
in pure AngularJS, such as jQuery or Bootstrap's JavaScript.
Angular Translate
Angular-translate is an AngularJS module th...
dependencies that aren't implemented in pure AngluarJS.
Modules used:
• angular-bootstrap: a set of native AngularJS UI di...
Server and Back End
Django
Django is a free and open source web application framework, written in Python,
which follows th...
Quick Development
The point of a Web framework in the 21st century is to make the tedious aspects
of Web development fast....
Advantages:
• The Web browseable API is a huge usability win for developers.
• Authentication policies including OAuth1a a...
Application Version of the Web App
Unity
Unity is a game development ecosystem: a powerful rendering engine fully
integrat...
Future Considerations and Development
Linux Virtual Machine
We will be using Linux Virtual Machine in the future because a...
Próximo SlideShare
Cargando en…5
×

de

Modern webtechnologies Slide 1 Modern webtechnologies Slide 2 Modern webtechnologies Slide 3 Modern webtechnologies Slide 4 Modern webtechnologies Slide 5 Modern webtechnologies Slide 6 Modern webtechnologies Slide 7 Modern webtechnologies Slide 8 Modern webtechnologies Slide 9 Modern webtechnologies Slide 10 Modern webtechnologies Slide 11 Modern webtechnologies Slide 12 Modern webtechnologies Slide 13 Modern webtechnologies Slide 14 Modern webtechnologies Slide 15 Modern webtechnologies Slide 16 Modern webtechnologies Slide 17 Modern webtechnologies Slide 18 Modern webtechnologies Slide 19
Próximo SlideShare
Victor Thulari full resume..compressed (1)
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

0 recomendaciones

Compartir

Descargar para leer sin conexión

Modern webtechnologies

Descargar para leer sin conexión

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.

  • Sé el primero en recomendar esto

Modern webtechnologies

  1. 1. MODERN WEB TECHNOLOGIES BESJAN XHIKA 1
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

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.

Vistas

Total de vistas

150

En Slideshare

0

De embebidos

0

Número de embebidos

6

Acciones

Descargas

2

Compartidos

0

Comentarios

0

Me gusta

0

×