Introduction

INFO 153A/253A: Front End Web Architecture

Kay Ashaolu

Teacher and TA Introductions

Course Goals

• Demystify “the front end” (whatever that means)
• Understand how to build interactive user interfaces
• Respect and understand the challenges of building these user interfaces

Course Layout

• INFO 153A - Undergraduates
• INFO 253A - Graduates
• Both courses have the same lectuer and lab time as well as learn the same material
• Course work differs for each class 

Course Layout

• F (lecture) 9:00 am - 11:00 am PDT (in-person)
• M (lab) 9 am - 10 am PDT (in-person)
• All lecturers will be recorded for future viewing, but no remote join allowed
• Lectures: One hr lecture, followed by 1 hr in person project
• Lab: Time to start lab + answer questions 

Setup Checklist

• Fill out survey form before Friday's class

• Find our Bcourses website for syllabus, assignments, and schedule of class

• Join our Discord Server for communications for the class

• Send your github username through the form so we can add you to our github organization

• Set up your coding environment

Course Work

• Non graded in person assignment

• 2 major homework assignments building a web application

• 4 Labs (253A), 6 Labs (153A)

• Group project (253A), Take home exam (153A)

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
• You will be given a github classroom link to generate your own git repository where you will save your work
• You will submit your work submitting the link to your repo in BCourses

More on Labs

• Labs provide opportunity to try out what you learned
• Labs will be graded on a simplified basis out of 10:
  • Correct: 10/10
  • Not correct, but shows significant effort: 8.5/10
  • Not correct, low to no effort: 7/10
  • No submission: 0/10
• You will be given a github classroom link to generate your own git repository where you will save your work
• You will submit your work submitting the link to your repo in BCourses

More on the Group Project

• INFO 253A only
• The group project is an opportunity to build a project you come with other students
• Must be in groups of 4-5. There are no exceptions to this rule
• We will form teams and ask you to draft up a proposal of what you would like to build, and we will give you feedback. Then you will build your proposal
• There will be presentations the last day of instruction on the week before RRR week

More on the Take Home Exam

• INFO 153A only
• During the last week of instruction
• Will be similar to an assignment, but meant to be done in 2 hours or less
• Will have seven days to complete

Grade Breakdown

What counts as class participation?

• Each week a group of students will be "on-call"
• This means during that time period, when questions are asked those students would be expected to be able to answer
• May be asked to give a summary of a topic in class
• Be prepared for class

Readings?

• After some thought and research, we are moving away from textbook readings in the class
• In this day, it's a bit rare for software engineers to learn new technologies by reading a book from beginning to end
• We will use three courses from there for our class prep:

• Modern HTML and CSS from the Beginning (Including Sass) by Brad Traversy
• Modern JavaScript from the Beginning - Second Edition by Brad Traversy
• React Front to Back 2022 by Brad Traversy

Technologies you will use

Languages/Libraries

• HTML/CSS
• JavaScript
• React
• CSS Framework
• Ollama (LLM)

Tools

• Git
• Unix/Terminal
• Microsoft Visual Code
• Chrome with React Development Tools

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
• We are here to help

This is still a Graduate Class

• Perform well without supervision
• Understand classroom prep materials from a variety of different areas on the web
• Ask for help proactively
• Get frameworks working on your own

Responsibilities

Me

• Explain core concepts
• Understand design trade-offs
• Introduce new technologies
• Tie everything together

You

• Understand lectures and do class prep if assigned
• Explore new technologies
• Work independently and in groups

Wait List

• INFO 253A is set aside for Grad Students: School of Information students have priority until today. After today it is a first come first served basis

• INFO 153A is set aside for Undergrad students: This comes as a first come first served basis

• The waitlist order for both classes will be honored after today

Wait List

• Apologies, but there will be no auditing this class this year

• Course materials will be publicly available if you ultimately are not able to enroll into the class

Questions?

So what is this class really about?

• Good Question
• With the exception of mobile native applications, we now primarily interact with the internet using user interfaces powered by web technologies
• Even some mobile applications themselves are powered by web technologies

Focus on the browser

• We will be focusing on how to make your web browser an interactive internet powered canvas
• In the process, we will go through the philosophies of the internet, of web development, and the why things are the way they are
• By understanding not just the how, but the why, you'll be able to better be prepared for future trends, and better build and understand current systems

Focus on personal development

• Even though we will be focusing a lot on building software, this is not a bootcamp course
• You will all come away with different skills and takeaways from this material
• Let's go through some scenarios

Backend/Data Engineer

• This class will enable you to see how the services that you build are consumed for user delight
• You can appreciate some of the tradeoffs front end engineers have to make to use your services
• You'll see how your skills translate (or not) to user interface engineering

UI Designer

• This class will enable you to see how the designs that you build are translated into code that brings it to life
• You may also start to notice how designs are broken down into individual reusable components, and perhaps how you can use that understanding in your future designs

UX Designer

• This class will enable you to see how the user interactions you build your widgets on are actualized
• The technical tradeoffs that exist when building UI widgets can inform your future designs in what may (or may not) be possible from an engineering perspective

Computer Scientist

• This class will enable you to use your programming skills to build actual UI's that can be used by real users
• You will see how some of the the data structures and coding constructs (e.g. functional programming) that you learn from classes are inherent in building user interfaces

Product Manager / Business Leader

• This class will enable you to experience first hand what it takes to build a user interface from scratch
• This class also can give you a sense on how long new features take to build
• This class can provide understanding on what programmers on your team go through on a daily basis, giving insight on how to better direct the future of your product

Data Scientist

• This class will take you away from writing code to analyze data to writing code to build products based on the data that you have analyzed
• This course could also give insights on how to build better visualizations of the data that you may have not have considered before

ML Engineer

• This class will enable you to build front ends that connect the user to the models that you train and release to the world
• This class will help you be able to connect with full stack engineers and better understand their considerations and needs and can incorporate those concepts to your model/pipelines

Questions?