Web Access Architecture

Web Access ArchitectureRitwik & AdharHigh levelDTL ServiceTFS

MVC APISHTMLCSSICONSSCRIPTSREST APISDATAWeb Browser ClientMVC OverviewModelViewController or MVC as it is popularly called, is a software design pattern for developing web applications.

Modelviewcontroller(MVC) is asoftware architecturepattern which separates the representation of information from the user's interaction with it .

The MVC model defines webapplications with 3 logic layers:The business layer (Model logic)

The display layer (View logic)

The input control (Controller logic)

Model The model is responsible for managing the data of the application. It responds to the request from the view and it also responds to instructions from the controller to update itselfIt is the lowest level of the pattern which is responsible for maintaining data. The Model represents the application core (for instance a list of database records). View The View displays the data (the database records). Aviewrequests information from the model, that it needs to generate an output representation. It presents data in a particular format like HTML, JSP, ASP, PHP.MVC is often seen in web applications, where the view is the HTML page.

Controller The Controlleris the part of the application that handles user interaction.Typically controllers read data from a view, control user input, and send input data to the model. It handles the input, typically user actions and may invoke changes on the model and view.Workflow in MVCThough MVC comes in dierent avours, the control ow generally works as follows:1. The user interacts with the user interface in some way (e.g., user presses a machines hub tab)2. A controller handles the input event from the user interface, often via a registered handler or callback.3. The controller accesses the model, possibly updating it in a way appropriate to the user.

4. A view uses the model to generate an appropriate user interface ( View get list of machines from model to show it in machine hub) The view gets its own data from the model. The model has no direct knowledge of the view. 5. The user interface waits for further user interactions, which begins the cycle anew.

JavaScriptProgramming language of HTML and the WebThe first web scripting language, developed by Netscape in 1995

Scripting languageA scripting language is a simple, interpreted programming languageExecuted directly without compiling to machine languagescripts are embedded as plain text, interpreted by browsers JavaScript enginesimpler execution model: don't need compiler or development environmentsaves bandwidth: source code is downloaded, not compiled executableplatform-independence: code interpreted by any script-enabled browserbut: slower than compiled code, not as powerful/full-featured

Common Scripting Tasksadding dynamic features to Web pagesvalidation of form data (probably the most commonly used application)image rolloverstime-sensitive or random page elementshandling cookiesAjax adds ability to update page elements without (re)loading a webpage

defining programs with Web interfacesutilize buttons, text boxes, clickable images, prompts, etclimitations of client-side scriptingsince script code is embedded in the page, it is viewable to the worldfor security reasons, scripts are limited in what they can doe.g., can't access the client's hard drivesince they are designed to run on any machine platform, scripts do not contain platform specific commandsscript languages are not full-featurede.g., JavaScript objects are very crude, not good for large project developmentTypeScriptSyntactical Sugar!Strong typingCompiled into JavaScript filesCannot be interpreted by browsers

Allows programmers to write object oriented codeJQueryQuery DOMModify DOM

JavaScript > JQuery Libraries -> Modify DOMAsynchronous JavaScript and XMLAJAXAJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.Source Code & Debugging JavaScriptUpcoming trainingMVVM Design PatternKnockoutChutzpah test frameworkRevisiting concepts from previous sessionJavaScript scripting language for browsersClients (web browsers) talk to services using Ajax (async http client)JQuery is a JavaScript library which can query and modify DOM elements using selectors$(div) returns all divs in the dom$(.myClass div) returns all divs with class = myClass$(.myClass div).css(background-color,red) makes background red!!

DTL ServiceTFS

MVC APISHTMLCSSICONSSCRIPTSREST APISDATAWeb Browser ClientThe MVVM design patternWrite sophisticated UI apps in a simple mannerEasy to understand less code!Easy to make changes in code control over regressionsTestable

ModelBusiness logicOn Web Access model is the layer that talks to TFS/DTL serviceFetches data to be displayed on a control/formPushes updated form data to the serviceAjax callsObject ModelHas no knowledge of UI or how the data will be represented in the application

ViewModelUI logic!!Contains data/operations that can be performed on the UIOnly code no html/cssHas no concept of controls/buttons/html/cssDoes not persist unsaved data user is working withUnderstand the model layerDefines how the UI should behave however has no coupling with UIDifferent UI can use the same view model Hence gives us the ability to apply good design patterns in the applicationUI Layer - ViewDeclarative in nature very dumb!!Consists of only UI elements (html) + style (css)Declarative in natureNo code!!RoleShow information from view modelSend commands to view modelUpdate state whenever view model changes4 Key concepts of MVVMDeclarative UI and UI bindingsAutomatic UI RefreshDependency TrackingTemplatingKnockout Demo!! + some debugginghttp://jsfiddle.net/fo067mag/CSS INTRODUCTIONHTML was never intended to contain tags for formatting a document.

To solve this problem World Wide Web Consortium (W3C) created CSS.

CSS define how HTML element would be displayedCSS SyntaxA CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.Each declaration consists of a property and a value.The property is the style attribute you want to change. Each property has a value.CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:p {color:red;text-align:center;}

CSS SelectorsIn CSS, selectors are patterns used to select the element(s) you want to style.There are wide range of selectors available.( You can find all the selectors at : http://www.w3schools.com/cssref/css_selectors.asp)Important Selectors :

.class.introSelects all elements with class="intro"#id#firstnameSelects the element with id="firstname"**Selects all elementselementpSelects all elementsThank you!