Introduction

Kay Ashaolu

Teacher and TA Introductions

Course Goals

• Facebook.com -> "magic" -> web page
• Demystify "magic"
• Learn how to build "magic" with existing tools
• Focus on what you see in the browser
• Know the challenges of building "magic"
• What is the front end? Why should I care?

Course Layout

• Friday's 2 pm - 5 pm
• Two 50 minute lecture and a 50 minute lab
• 10 minute break after every section
• All lectures, assignments, readings, and labs will be posted on our course GitHub repository
• Labs, assignments, and projects are completed in the GitHub repository you will create via GitHub classroom

Course Work

• 4 individual homework assignments building an web application
• 1 group project building an web application
• 11 in class short labs to go over aspects of building a web application

More on labs

• There will be a short assignment for the last 50 minute section of most classes
• It’s designed to be completed within the 50 minutes
• Labs are due by the end of lecture - we are here to help you through it

More on assignments

• Assignments must be done individually, but you can ask others for help
• Assignments are due at 11:59 pm on the day they are assigned to be due
• Every day it is late after that we will deduct 5 points from the final score
• If you have any problems, please let me know. If I don't know I can't provide extensions

More on the project

• The group project is an opportunity to build something cool with other students
• Must be in groups of 3-5. There are no exceptions to this rule
• You will first form teams and draft up a proposal of what you would like to build, and we will give you feedback
• There will be presentations at the end of the class, and a report
• All of this is due at 11:59 pm on the due date assigned

Technologies you will use

But don't worry

• This is not primarily a programming class
• Grades are based on the demonstration of understanding the base concepts
• Grades are not based on extra bells and whistles, but are reserved for extra credit
• We are here to help

This is a Graduate class

• Perform well without supervision
• Understand readings from a variety of different areas on the web
• Ask for help proactively
• Get frameworks working on your vagrant box

Responsibilities

Office hours, communications, and wait list

• I will send a request to enroll everyone on the waitlist every Thursday evening
• Please use our distribution list i253@ischool.berkeley.edu if you have any questions
• Typically I can enroll everyone that wants to stay in the class with few exceptions.

Grades

• Labs: 15%
  • Graded on a complete/incomplete basis
• Assignments: 45%
  • Graded on a numeric basis
• Project: 40%
  • Graded on a numeric basis
• There is no midterm nor final

Questions?

Why are you in this class?

The Web is important

• Democratizes information
• Decentralized
• Low barrier of entry

The Web is built on composable parts

• Internet
  • How data gets from one network to another
• Network Stack
  • How data gets from one computer to another
• Browsers
  • One (of many) destinations data goes to
• HTML/CSS/JavaScript/Images
  • One (of many) representations of data transmitted over the web

Highway vs Railway

Highway: Simple and Composable

• Any machine with wheels can use it
• Cars can drive on any highway, but also off-road
• Motorcycles and trucks can use roads as well as highways
• Uncoordinated

Railway: Complicated but Efficient

• Must have the right track gauge
• Must coordinate with other traffic
• If you upgrade one part of the system, everything else must be upgraded
• Need specially made vehicles for railway

The Internet is like a highway

• More like an interconnected large set of highways
• It’s the longest running computer system in the world
• Protocols (UPS) are agnostic of their content (packages)
• Pieces can be upgraded incrementally

Protocols

• A protocol is a system of rules of transmitting data
  • UPS has a system of trucks and vans that get packages from one place to another
• Data is delivered to a destination (browsers)
  • Just like packages deliver to a destination (address)
• Data can be interpreted, and used as information
  • Like packages can be appreciated in a number of different ways

Browsers interpret data into information

Questions?