Modern Web Application Development

A Crash Course

Joe Rowley
ACM, Winter 2014, UCSC

Disclaimer

  • I'm not an expert
  • I will over simplyify at times.

Overview

  1. Web Applications
  2. Internet
  3. HTTP Requests
  4. AJAX
  5. SPA & MVC

Applications

Software/Programs on your computer that allow you to do something useful.

  • Native Applications
    • e.g. Microsoft Word, Adobe Photoshop, Google Chrome
  • Web Applications
    • e.g. Facebook, Gmail, Google Docs, this presentation

Advantages of Web Apps

  • Accessible
  • Instant Updates

Common Misconceptions

  • Slower than Native
  • Worse User Experience
  • Less Powerful

Web Applications

  • HTML
    • Markup Language for the Web.
  • CSS
    • Styles HTML
  • Javascript
    • Makes HTML fun and dynamic

HTML

HTML + CSS

HTML + Linked CSS (Bootstrap)

HTML5 Features

  • Offline Web Applications
  • Drag-and-drop
  • Browser history management
  • Web Storage, Indexed Database API
  • Geolocation
  • HTML5 File API, File Writer
  • Web Workers

The Internet

“A series of tubes” - United States Senator Ted Stevens (R-Alaska), June 28, 2006.

Internet & HTTP Requests

HTTP Requests

AJAX

  • Asynchronous JavaScript and XML
  • 2005
  • XHR - XmlHTTPRequest

AJAX

function getStuff(){
	var xhrObject = new XMLHttpRequest();
	xhrObject.onreadystatechange = function() {
	  if (xhrObject.readyState === 4) {
	    if (xhrObject.status === 200 || xhrObject.status === 304) {
	      
	      // Success! Do stuff with data.
	      console.log(xhrObject.responseText); 
	      
	    }
	  }
	};

	xhrObject.open(
	  "GET", 
	  "http://codepen.io/chriscoyier/pen/difoC.html", 
	  true
	);
	xhrObject.send();
}

SPA - Single Page Application

  • Take advantage of AJAX
  • Only Load What you need
  • Smooth User Experience

MV* & MVC

  • Model View Controller/Whatever
  • Makes code more modular and organized

MV* & MVC

  • Model
    • Data Store
  • View
    • Data Display
  • Controller
    • Binds Model & View

MV* & MVC

Angular.JS


	<html ng-app>
	  <head>
	    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
	  </head>
	  <body>
	    <div>
	      <label>Name:</label>
	      <input type="text" ng-model="yourName" placeholder="Enter a name here">
	      <hr>
	      <h1>Hello {{yourName}}!</h1>
	    </div>
	  </body>
	</html>
						

Hello {{yourName}}!

Take Away

  • The internet is awesome.
  • Be careful with your requests.

Thanks!

BY Joe Rowley

Feel free to ask me about:

Client Side MVCs (Angular JS), SPA, HTML5 functionality, Delta Encoding, Web Sockets, Yeoman, WebRTC

Credits

  • Reveal.js for the framework for this presentation
  • Wikipedia for Internet
  • Corbis Images for Pipes Picture
  • Mo Money Mo Problems (edited by me)