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
[Link]
Javascript Frameworks
AngularJS/Angular 2
[Link]
React
Polymer 1.0
[Link]
[Link]
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
[Link]
Fiddler by Telerik
[Link]
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
[Link]('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) {
[Link] = 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
[Link]
[Link]
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 = [Link]({
render: function() {
return (
<div>{[Link]}</div>
);
}
});
// Render an instance of MessageCoponent into document body
[Link](
<MessageComponent message=“Hello!” />
[Link]
);
React Components
// Create a component name MessageComponent
var MessageComponent = [Link]({
render: function() {
What is JSX?
return (
<div>{[Link]}</div>
);
}
});
// Render an instance of MessageCoponent into document body
[Link](
<MessageComponent message=“Hello!” />
[Link]
);
React Components
// Create a component name MessageComponent
var MessageComponent = [Link]({
render: function() {
What is JSX?
return (
<div>{[Link]}</div>
);
}
});
// Render an instance of MessageCoponent into document body
[Link](
<MessageComponent message=“Hello!” />
[Link]
);
React
Learn React
[Link]
[Link]
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
[Link]