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