LECTURE 32: INTRO TO WEB DEVELOPMENT

• Objectives:
Basic Web Application Model
Web Development Frameworks/Languages

• Resources:
Web Frameworks
Popular Frameworks
10 Things to Know
Angular
React
Knockout

• Videos:
Rest
Postman
Chrome Developer Tools
Principles of Web Design

 Availability
 Performance
 Reliability
 Scalability
 Manageability
 Cost
 Core Components
UI (Front End (DOM, Framework))
of Web

 Request Layer (Web API)
 Applications
Back End (Database, Logic)

Server Client

API Front End

Browser
JSON
Internet
Database Logic

Media
Cache
Frontend development
Front End Languages

 HTML/CSS
 Javascript
 Java (applets)

What is the most popular?

Answer: Javascript/HTML/CSS is the only real option for front-end
native languages and is basically the standard. But there are many
variations on JavaScript that are used.
DOM (Document Object Model)

 Document Object Model makes every addressable item in a web

application an Object that can be manipulated for color,
transparency, position, sound and behaviors.
 Every HTML Tag is a DOM object
DOM (Document Object Model)

JavaScript
HTML

CSS

DOM
What is a Framework?

 Software Framework designed to reduce overhead in web development

 Types of Framework Architectures
 Model-View-Controller (MVC)
 Push vs Pull Based
 Most MVC Frameworks user push-based architecture “action based” (Django, Ruby on Rails, Symfony,
Stripes)
 Pull-based or “component based” (Lift, Angular2, React)

 Three Tier Organization

 Client (Usually the browser running HTML/Javascipt/CSS)
 Application (Running the Business Logic)
 Database (Data Storage)

 Types of Frameworks
 Server Side: Django, Ruby on Rails
 Client Side: Angular, React, Vue
Framework
Framework

JavaScript
HTML

CSS

DOM
 http://hotframeworks.com

Javascript Frameworks

 AngularJS/Angular 2
 ASP.net
 React
 Polymer 1.0
 Ember.js
 Vue.js
MVC (Model View Controller)

 A Web Application Development Framework

 Model (M):
 Where the data for the DOM is stored and handled)
 This is where the backend connects
 View (V):
 Think of this like a Page which is a single DOM
 Where changes to the page are rendered and displayed
 Control (C):
 This handles user input and interactions
 Buttons
 Forms
 General Interface
MVC Model

Controller

Us
e
at

er
Up
pd

A
y
U

da
if

ct
ot

io
te
N

n
Model View
BACKEND development
What is a Backend?

 All of the awesome that runs your application.

 Web API
 Connection layer between the frontend and backend
 Connected through API calls (POST, GET, PUT, etc. )
 Transmit Content from the Backend to the Frontend commonly in
JSON Blobs
 Service Architecture that drives everything (Where all the logic
is)
What is a WebAPI?

 The intermediate layer between front end and back-end systems

 A “must have” if your APIs will be consumed by third-party
services
 Attention to details:
 How consumable is the API (signature, content negotiation)?
 Does it comply with standards (response codes, etc.)?
 Is it secure?
 How do you handle multiple versions?
 Is it truly RESTful?
Representational State Transfer
(REST)
 Client-server
 Stateless
 Resource-based (vs. remote procedure call)
 HTTP methods (GET, POST, PUT, DELETE)
 Side Effects
 It’s a style, not a standard
 Don’t hate on HATEOAS
WebAPI Terms

 GET – “read”
 POST – “insert” (collection)
 PUT – “replace”
 DELETE – “remove”
 PATCH – “update”
 Custom (proceed with caution)
Web Status Codes

 200 – OK – things are great (return the item)

 201 Created – after POST (HATEOAS – return location)
 204 No Content (i.e. successful DELETE)
 400 – Bad Request (validation error, missing parms, etc.)
 401 – Unauthorized – Who are you?
 403 – Forbidden – No soup for you
 404 – Not Found
Popular Tools

Development Tools:
 Chrome/Firefox Developer Tools
 Postman (API)
 Dreamweaver
 Git / SourceTree
Analytics Tools:
 Google/Adobe Analytics
Chrome Development Tools Demo

 Demo Time!
Tools for Testing WebAPI

 Postman Chrome extension

http://bit.ly/postmanext
 Fiddler by Telerik
http://www.Telerik.com/fiddler
WebAPI Demo

Demo Time!
Appendix
Hypermedia as the Engine of Application State (HATEOAS)

 Hypermedia is the key

 It all starts at a URL
 Resources are returned
 Media types and locations are included
 References based on state
What is Angular

 MVC Structure

 Framework

 Single Page Application (SPA)

 Client Side Template

 Testing
New Developers
 Popularity
Why Angular?
 Demand
 Support and Resources
 Front End
Seasoned Developers
 Structured and Opinionated Framework
 Productivity
 Consistency
Team Leads
 Efficiency
 Longevity
• Angular 1Angular vs. Angular
 Angular2
– Structured MVC Framework
2
 Component Based UI
– Separation of HTML and Logic  More Modular Design
– Client Side Templating
 TypeScript
 Backwards Compatible
 Faster
 Angular vs. Angular2

angular.module('myModule') import { Component } from '@angular/core'

.controller('myController',function(){
}) @Component({
selector: 'my-app',
template: ``
<body>
})
<div ng-controller="myController"> export class MyAppComponent {
</div> }
</body> <my-app></my-app>
JavaScript
Typescript TypeScript
var num: number = 5;
var num = 5;
var name: string = "Speros"
var name = "Speros";
var something: any = 123;
var something = 123; var list: Array<number> = [1,2,3];
var list = [1,2,3];
function square(num: number): number
{
function square(num) { return num * num;
return num * num; }
}
JavaScript TypeScript
Typescript
var Person = (function () { class Person {
constructor(public name: string){
function Person(name) {
this.name = name; }
} }
return Person;
}());
var aPerson = new Person("Ada
Lovelace");
var aPerson = new Person("Ada");
Building Blocks

 Directives
 Component – Templates (HTML), Styles (CSS), & Logic (JavaScript)
 Attribute – Styling HTML
 Structural – Manipulating HTML
 Data Flow
 Interpolation – Variable Printing in Templates
 Event Binding – Trigger Events
 2-Way Binding – Variables updated in real time
 Providers
 Services
 Reusable Logic
 Data Storing and Manipulation

 Libraries
 Component Directives
"…reusable building blocks for an
application"

Components have: Component

Template (HTML)
 HTML
Styles (CSS)

 CSS Class (JavaScript)

 JavaScript
Learn Angular/Angular2

http://www.learn-angular.org/
http://learnangular2.com/
How does React fit MVC?

Controller

Us
e
at

er
Up
pd

A
y
U

da
if

ct
ot

io
te
N

n
Model View
 Flux Model
Action Dispatcher Store View

Data Flow

Action

Action Dispatcher Store View

Action Flow
React Components

// Create a component name MessageComponent

var MessageComponent = React.createClass({
render: function() {
return (
<div>{this.props.message}</div>
);
}
});

// Render an instance of MessageCoponent into document body

ReactDOM.render(
<MessageComponent message=“Hello!” />
document.body
);
React Components

// Create a component name MessageComponent

var MessageComponent = React.createClass({
render: function() {
What is JSX?
return (
<div>{this.props.message}</div>
);
}
});

// Render an instance of MessageCoponent into document body

ReactDOM.render(
<MessageComponent message=“Hello!” />
document.body
);
React Components

// Create a component name MessageComponent

var MessageComponent = React.createClass({
render: function() {
What is JSX?
return (
<div>{this.props.message}</div>
);
}
});

// Render an instance of MessageCoponent into document body

ReactDOM.render(
<MessageComponent message=“Hello!” />
document.body
);
React
Learn React

https://www.codecademy.com/lrn/react-101
https://css-tricks.com/learning-react-redux/


Intro
An MVVM library
to Knockout
Automatic UI refresh and updates
 Reusable templates
 Can be used with nearly any framework
 Focused on data binding
 Small library size

Angular
Ember

Knockout

jQuery
MVVM (Model, View, View-
Model)
View
 Defines structure and layout of UI
Model
 Domain Model
 Data Model
 Business logic
View Model
 Intermediary between M/V
 Handles View Logic
 Deals with State Change
Learn Knockout

http://learn.knockoutjs.com/#/?tutorial=intro