Modern Web Development:

(1)

Shawn Wildermuth

One of the Minds, Wilder Minds LLC Microsoft MVP

@shawnwildermuth http://wilderminds.com

Modern Web Development:

(2)

(3)

(4)

What it was like…

<html>

<head>

<script type="text/javascript">

function onInit() {

var obj = document.getElementById("foo");

foo.display = "block";

}

</script>

<head>

<body onload="onInit()">

<div id="foo" style="display: none" height="100px">

<font size="3" color="red">Hello World</font>

</div>

</body>

(5)

Whole New World?



Overwhelming Amount of Chatter

jQuery

Node.js

JSLint

JSFiddle

Knockout

Backbone

Mustache

Jasmine

LESS

SASS

Comet

SignalR

GIT

Mercurial

Et al.

(6)

Modernize Your Web Development



Client-side Development

– Do More in the Browser



Abandon Post-Back and ViewState

– Client-side Network Calls are here to stay



Separate Concerns

(7)

Structuring Projects



Two kinds of JavaScript in a project

– Framework code (e.g. jQuery)

– Your code (e.g. view specific code)



Separate these in your project

– Style Sheets

– Your JavaScript

– Their JavaScript

(8)

Structuring Projects



Typically…

– View is composed of:



Markup (i.e. View)



Design (i.e. CSS)

(9)

(10)

JavaScript



You don’t have to learn it

– E.g. Coffeescript, Script#, TypeScript



But you should

– Even these languages build JavaScript

– At the end of the day you’ll need to debug

– Not everyone agrees with me…

(11)

Types



Primitives

– JavaScript has basic types



"Value Types"

– boolean – string – number



"Reference Type"

– Object – Array



"Delegate Type"

– function



Special

– "undefined"

(12)

Language Basics



Type Coalescing

– JavaScript Wants to Coalesce Values

// JavaScript

"test " + "me" // test me "test " + 1 // test 1 "test " + true // test true "test " + (1 == 1) // test true 100 + "25" // 10025

(13)

Language Basics



Equality uses Coalescing

– Equality/NotEqual (==, !=)

// JavaScript

"hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true

(14)

Language Basics



JavaScript's Identically Equality Operators



Determines equality without coalescing

// JavaScript

"hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true 1 === "1"; // false 1 !== "1"; // true 1 === 1.000000000000001; // false 1 === 1.0000000000000001; // true

(15)

Dynamic Types



Object Literals

– Shortcut for creating data structures

// JavaScript var data = { name: "hello", "some value": 1 }; var more = {

"moniker": "more data", height: 6.0, subData: { option: true, flavor: "vanilla" } };

(16)

Dynamic Types



Array Literals

– Shortcut for creating collections

// JavaScript

var array = [ "hello", "goodbye" ]; var coll = [{

"moniker": "more data", height: 6.0, subData: { option: true, flavor: "vanilla" } }];

(17)

Dynamic Types



Malleability

– Can add members on the fly

// JavaScript var cust = {

name: "Shawn",

"company name": "Wilder Minds" };

cust.phone = "404-555-1212"; cust.call = function () {

var toCall = this.phone; };

(18)

(19)

"Classes" in JavaScript



No such thing as a "Class" in JavaScript

– But you can mimic them with some effort

// JavaScript

function Customer(name, company) { this.name = name;

this.company = company; }

var cust = new Customer("Shawn", "Wilder Minds"); var name = cust.name;

(20)

"Classes" in JavaScript



Member Functions Work Fine

// JavaScript

function Customer(name, company) { this.name = name;

this.company = company;

this.sendEmail = function (email) { ... }; }

var cust = new Customer("Shawn", "Wilder Minds"); cust.sendEmail("[email protected]");

(21)

"Classes" in JavaScript



Need Everything be Public?

– Nope…closures to the rescue!

// JavaScript

function Customer(name, company) { // public

this.name = name;

this.company = company;

// non-public (e.g. private)

var mailServer = "mail.google.com"; this.sendEmail = function (email) {

sendMailViaServer(mailServer); };

(22)

The Prototype Object



Centerpiece of the object story in

JavaScript

– Each 'type' has a prototype object

– Just an object (e.g. can add properties to it)

– All instances of an 'type' shares the members

(23)

Improving JavaScript "Classes"



Sharing a Function

– That way each instance doesn't have it's own

copy

// JavaScript

// Works but no access to private/member data Customer.send = function (email) { ... };

// JavaScript

// Gives access to each instance of Customer

Customer.prototype.send = function (email) { ... }; var cust = new Customer("Shawn");

(24)

(25)

// JavaScript

var gameSearcher = {

findGameByGenre: function (genreName) { ... } };

var results = gameSearcher.findGameByGenre("Shooter");

Structuring JavaScript



Most JavaScript code is either:

– Module: Just an Object

– Class: Factory for Objects

// JavaScript

(26)

Asynchronous Module Definition



Modularization

– Require.js



http://requirejs.org/

(27)

(28)

jQuery



jQuery is Key

– Ubiquitous DOM Manipulation (et al.)

– Plug-in Architecture

– Simplifies Cross Browser Coding

– Game Changer…

(29)

jQuery Selectors



$ is jQuery

– Based on CSS Selector Syntax



E.g. $(“div”)

– Returns results of query (get it?)

(30)

(31)

jQuery Plugins



jQuery Supports Rich Ecosystem

– Thousands…



…Which is Good



…And is Bad

(32)

(33)

jQuery Plugins



Plugins I use

– jQuery UI

– FancyBox

– Smart Slider

– Joyride

(34)

(35)

Why Data Binding?



Writing Code to push/pull data is tedious

– Data Binding Lets the UI React to Data

(36)

What is KnockoutJS?



An Open Source Data Binding Library

– Maintained by Steve Sanderson (MSFT)

– But not a MS product

(37)

(38)

A Better CSS



Declarative Nature Means Easy To Write

– “Editor Inheritance” becomes the norm

– Duplication leads to errors

(39)

Better CSS



LESS - Dynamic Style Sheet Language

– “Compiles” to CSS

– Introduces programming features to CSS

– Looks and Feels like CSS

(40)

(41)

Debugging



Browser Based Debuggers

– IE, Firefox, Chrome and Safari

– All Fine

– But I use FireBug mostly…



Clean Browser (I only use Firefox for dev)



Most Mature Tools

(42)

(43)

Mobile Development



The Problem

– Device Size

– Screen Resolution

– Text Size

– Horizontal Scrolling Sucks

– Touch versus Click

(44)

Mobile Development



Mobile Web Site

– Mobile Specific Site

– E.g. m.facebook.com



Mobile Views

– Render Pages for Mobile Based on Sniffing

– URLs are the same, but the result is different

(45)

Responsive Design



Media Queries

– Works because of cascading rules

– Later rules over-rule (pun!) earlier rules

– More specific rules overrule earlier rules

// your.css

#main { width: 989px; }

@media only screen and (min-width: 768px) and (max-width: 959px) { #main { width: 760px; }