-

# Web + Mobile System Design
#### DIGF 6039 - Digital Futures, OCAD University

Session 5, starting at **3:10PM**

---

## Today's agenda

- Server-side, database, and client-side
- Flash, HTML5 and JavaScript
- State of JS frameworks
- jQuery

---

## Classification

**Server-side**: What information is being requested, and how is it served?

**Database**: What information is being saved and accessed?

**Client-side**: What is the user seeing? How is the user interacting?

---

## Technologies

**Server-side**: C#, Java, PHP, Ruby, etc.

**Database**: MySQL, MSSQL, PostgreSQL, Oracle, etc.

**Client-side**: HTML, CSS, and **JavaScript**

---

## JavaScript, Then

- Originally avoided by developers
- Open source in nature
- **“Amateur language”**
- Turbulent history
- Bankruptcy of Netscape (origin of JavaScript)
- Resistance from Microsoft and Yahoo

---

### JavaScript as Netscape-Exclusive

---

---

## Brendan Eich

---

## Mozilla

---

## Adobe Flash

---

## Brave

---

## JavaScript, Now

- Now the **dominant language** on the Web
- Embraced by Google
- Expanding into other domains

#### No longer confined in client-side development
- Can handle server commands and databases
- Languages and solutions inspired by JavaScript
- Apple Swift and Node.JS

---

## HTML5

- The most current version of the HTML standard
- Introduces **CSS3 and JavaScript**
- Sparked the rivalry between **Apple and Adobe**

---

## "Thought on Flash"

- Apple’s mobile products never supported Adobe Flash
- 80% market share in 2014
- Open criticism against **Adobe Flash**
- Claiming Flash is buggy, lacks security, and slow – substandard
- Open support for **HTML5-CSS-JS** as a replacement

---

---

## "We Love Apple"

---

## Experimental Phase

#### The Wilderness Downtown

- Interactive music video by Chris Milk
- Created as a Chrome Experiment
- Collaboration with Arcade Fire

#### Ro.me - 3 Dreams of Black

- Follow-up project by Chris Milk
- 3D graphics on the browser
- Collaboration with Danger Mouse and Norah Jones

---

---

### Chrome Speed Test

---

## JavaScript

#### A common programming language for the web

- HTML is a markup language
- CSS is a style language
- PHP is a programming language for the server
- SQL is a database language

#### Designed to make the website more interactive / animated

#### All current web browsers can interpret this language

- Many similarities to CSS

---

## State of industry

Hint: it's a heavily abstracted mess

---

## Market Cannibalization

---

## Reality of JS Frameworks

- **Heavy abstraction** leads to confusion for beginners
- Short lifecycle

#### “There appear to be two major phases … there appears to be a quick ascent, as the framework gains popularity and then a slightly less quick but steady decline as developers adopt newer technologies. These lifecycles only last a couple of years.”

- Skills gained from one framework **not transferable** to another
- In short: embrace getting close to the **core technologies**

---

## JavaScript Frameworks

#### **Powerful language**, but discrepancies between web browsers

- Lack of cross-browser support and complicated syntax
- To make Javascript development easier, many frameworks were released

#### Each framework does plenty of **“heavy-lifting”** for developers
- Often provides too much handholding and forces the user to adopt a rigid principle
- Too opinionated
- Less freedom

---

---

## jQuery

#### “Write less, do more”

- 95%+ market share (70%+ of all websites)
- One jQuery command **works for all** modern web browsers
- Popularized JavaScript for the Web
- Solved legibility / learning curve problems

---

---

---

---

## Today's Exercise

- Bootstrap and jQuery
- Modularization review
- jQuery events and effects
- jQuery plugins