Introduction

INFO 253 - Front End Web Architecture

Kay Ashaolu

Teacher and TA Introductions

Course Goals

• Facebook.com -> "magic" -> web page
• Demystify "magic"
• Learn how to build "magic" with existing tools
• With a 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

• Wednesdays 12:30 pm - 3:30 pm
• First half of semester: Two 50 minute lectures and a 50 minute office hour/demo session
• Second half of semester: One 90 minute lecture and 90 minutes of group project work / weekly standups
• All lectures, assignments, and class prep will be posted on our course GitHub repository
• Course website:
• All course communications will be conducted on CampusWire

Course Work

• 5 individual homework assignments building an web application
• 1 group project building an web application

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 us know

More on the project

• The group project is an opportunity to build something cool with other students
• Must be in groups of 4-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

More on the project

• This will be assigned around the second half of the semester
• There will be presentations and a report
• All of this is due at 11:59 pm on the due date assigned
• We will be publicizing the final project presentations this year, and your projects will be on the ischool website

More on the project

• There is even more of a focus on the final project for this class
• There will be no assignments assigned while you are working on your final projects
• Last half of class for the second half of the semester will be devoted to working on your projects and doing your weekly standup

What is a standup?

• Feedback that I have heard is that you like the practicality of this class
• This year we will take a step further
• During the second half of each class in the second half of the semester, each team will have a 10 min weekly "standup"

What is a standup?

• Standup is a meeting that is from the Scrum/Agile methodology you see in many software engineering companies
• It is a way to ensure that no one is blocked and stuck on any issue, as well as give an opportunity for team members to help each other

What is a standup?

• TAs and I will take turns conducting a weekly standup for each team lasting 10 minutes
• We will ask you the following three questions to each member of the team:
  • What were you able to complete last week?
  • What are you currently working on
  • Most Important: What are you currently blocked on?
• THIS IS NOT GRADED BUT IT IS MANDATORY

What is a standup?

• We will be using the Project feature in Github to create what is called a Kanban Board
• Live example: Kanban Example
• This is a tool to document all of the tasks that you need to complete and where you are with that task
• This is done in industry

Grades

• Assignments: 50%
  • Graded on a numeric basis
• Group Project: 50%
  • Graded on a numeric basis
• There is no midterm nor final

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 own

Responsibilities

Wait List

• So I have emailed some of you earlier about how I resolve the wait list
• However, I didn't expect to have 70 students to sign up, and there is only 49 openings for the class
• As of now only School of Information students are automatically enrolled in the class
• The iSchool will automatically release the hold for INFO students on Friday, so people on the wait list will be enrolled then

Wait List

• Unfortunately I can no longer make any determinations concerning your being accepted in the class
• If you are on the wait list, please check on Friday if you have been enrolled
• Please be on the lookout for emails concerning getting set up on Friday for the class
• Also this course website will be publicly available if you are not able to get into the class

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?