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
ECE 3822: Lecture 32, Slide 0
Principles of Web Design
• Availability
• Performance
• Reliability
• Scalability
• Manageability
• Cost
ECE 3822: Lecture 32, Slide 1
Core Components of Web Applications
• UI (Front End (DOM, Framework))
• Request Layer (Web API)
• Back End (Database, Logic)
Server Client
API Front End
Browser
JSON
Internet
Database Logic
Media
Cache
ECE 3822: Lecture 32, Slide 2
FRONTEND DEVELOPMENT
ECE 3822: Lecture 32, Slide 3
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.
ECE 3822: Lecture 32, Slide 4
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
ECE 3822: Lecture 32, Slide 5
DOM (Document Object Model)
JavaScript
HTML
CSS
DOM
ECE 3822: Lecture 32, Slide 6
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
ECE 3822: Lecture 32, Slide 7
Framework
Framework
JavaScript
HTML
CSS
DOM
ECE 3822: Lecture 32, Slide 8
Javascript Frameworks http://hotframeworks.com
• AngularJS/Angular 2
• ASP.net
• React
• Polymer 1.0
• Ember.js
• Vue.js
ECE 3822: Lecture 32, Slide 9
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
ECE 3822: Lecture 32, Slide 10
MVC Model
Controller
Model View
ECE 3822: Lecture 32, Slide 11
BACKEND DEVELOPMENT
ECE 3822: Lecture 32, Slide 12
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)
ECE 3822: Lecture 32, Slide 13
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?
ECE 3822: Lecture 32, Slide 14
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
ECE 3822: Lecture 32, Slide 15
WebAPI Terms
• GET – “read”
• POST – “insert” (collection)
• PUT – “replace”
• DELETE – “remove”
• PATCH – “update”
• Custom (proceed with caution)
ECE 3822: Lecture 32, Slide 16
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
ECE 3822: Lecture 32, Slide 17
Popular Tools
Development Tools:
• Chrome/Firefox Developer Tools
• Postman (API)
• Dreamweaver
• Git / SourceTree
Analytics Tools:
• Google/Adobe Analytics
ECE 3822: Lecture 32, Slide 18
Chrome Development Tools Demo
• Demo Time!
ECE 3822: Lecture 32, Slide 19
Tools for Testing WebAPI
• Postman Chrome extension
http://bit.ly/postmanext
• Fiddler by Telerik
http://www.Telerik.com/fiddler
ECE 3822: Lecture 32, Slide 20
WebAPI Demo
Demo Time!
ECE 3822: Lecture 32, Slide 21
APPENDIX
ECE 3822: Lecture 32, Slide 22
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
ECE 3822: Lecture 32, Slide 23
What is Angular
• MVC Structure
• Framework
• Single Page Application (SPA)
• Client Side Template
• Testing
ECE 3822: Lecture 32, Slide 24
Why Angular?
New Developers
• Popularity
• Demand
• Support and Resources
• Front End
Seasoned Developers
• Structured and Opinionated
Framework
• Productivity
• Consistency
Team Leads
• Efficiency
• Longevity
ECE 3822: Lecture 32, Slide 25
Angular vs. Angular 2
• Angular 1 • Angular 2
– Structured MVC Framework – Component Based UI
– Separation of HTML and Logic – More Modular Design
– Client Side Templating – TypeScript
– Backwards Compatible
– Faster
ECE 3822: Lecture 32, Slide 26
Angular vs. Angular2
angular.module('myModule') import { Component } from '@angular/core'
.controller('myController',function(){
}) @Component({
selector: 'my-app',
<body> template: ``
<div ng-controller="myController"> })
</div> export class MyAppComponent {
</body> }
<my-app></my-app>
ECE 3822: Lecture 32, Slide 27
Typescript
JavaScript TypeScript
var num = 5; var num: number = 5;
var name = "Speros"; var name: string = "Speros"
var something = 123; var something: any = 123;
var list = [1,2,3]; var list: Array<number> = [1,2,3];
function square(num) { function square(num: number):
return num * num; number {
} return num * num;
}
ECE 3822: Lecture 32, Slide 28
Typescript
JavaScript TypeScript
var Person = (function () { class Person {
function Person(name) { constructor(public name: string){
this.name = name;
} }
return Person; }
}());
var aPerson = new Person("Ada"); var aPerson = new Person("Ada
Lovelace");
ECE 3822: Lecture 32, Slide 29
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
ECE 3822: Lecture 32, Slide 30
Component Directives
"…reusable building blocks for an
application"
Components have:
– HTML
– CSS
– JavaScript
ECE 3822: Lecture 32, Slide 31
Learn Angular/Angular2
http://www.learn-angular.org/
http://learnangular2.com/
ECE 3822: Lecture 32, Slide 32
How does React fit MVC?
Controller
Model View
ECE 3822: Lecture 32, Slide 33
Flux Model
Action Dispatcher Store View
Data Flow
Action
Action Dispatcher Store View
Action Flow
ECE 3822: Lecture 32, Slide 34
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
);
ECE 3822: Lecture 32, Slide 35
React Components
// Create a component name MessageComponent
var MessageComponent = React.createClass({
render: function() {
return (
<div>{this.props.message}</div>
);
}
}); What is JSX?
// Render an instance of MessageCoponent into document body
ReactDOM.render(
<MessageComponent message=“Hello!” />
document.body
);
ECE 3822: Lecture 32, Slide 36
React Components
// Create a component name MessageComponent
var MessageComponent = React.createClass({
render: function() {
return (
<div>{this.props.message}</div>
);
}
}); What is JSX?
// Render an instance of MessageCoponent into document body
ReactDOM.render(
<MessageComponent message=“Hello!” />
document.body
);
ECE 3822: Lecture 32, Slide 37
React
ECE 3822: Lecture 32, Slide 38
Learn React
https://www.codecademy.com/lrn/react-101
https://css-tricks.com/learning-react-redux/
ECE 3822: Lecture 32, Slide 39
Intro to Knockout
• An MVVM library
• 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
ECE 3822: Lecture 32, Slide 40
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
ECE 3822: Lecture 32, Slide 41
Learn Knockout
http://learn.knockoutjs.com/#/?tutorial=intro
ECE 3822: Lecture 32, Slide 42
