Introduction

INFO 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

  • M 12:00 pm - 2:00 pm PDT (in-person)
  • F 1 pm - 2 pm PDT (remote)
  • We will still respect Berkeley Time, so class will start 10 min later even for our remote classes)
  • All lecturers will be recorded
  • Lectures: two 50 min lectures with 10 min Q&A
  • Demo/Lab: Demo and/or self graded Lab
  • Course website: https://sites.ischool.berkeley.edu/i253af21/
  • Course communications: Piazza and Bcourses

Setup Checklist

  • Please go to the Bcourses site: https://bcourses.berkeley.edu/courses/1508039

  • Click on the Piazza link on the left hand side

  • Please continue to be added to our Piazza instance

  • Piazza will be the central place for communications.

  • NOTE: PLEASE SEND ALL COMMUNICATIONS VIA PIAZZA. If you need to send a note privately please send through Piazza and send it to the instructors of the class.

Course Work

  • 2 major homework assignments building a web application

  • (almost) Weekly self graded labs

  • Group project

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

More on Labs

  • (Almost) weekly labs that will give you an opportunity to try out what you learned
  • You will be able to verify that you did it right
  • Once you completed it, you can submit "Completed" to the assignment in BCourses
  • This is done via the honor system

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
  • Stay tuned on the date of presentations as due to the number of people in this course, we may need multiple days to go through all of the presentations

Grades

  • Assignments: 50%
  • Labs: 10%
  • Group Project: 40%
  • Note: There is no midterm nor final

Technologies you will use

Languages/Libraries

  • HTML/CSS
  • JavaScript
  • React
  • NextJS

 

Tools

  • Git
  • Unix/Terminal
  • Coding editor
  • Chrome with 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 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

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

  • At the time of this writing all undergraduates are still on the waitlist

  • This is not my intention, as I have given instructions to enroll everyone and there is more than enough space since the cap to this class is now 100 students (from 50)

  • iSchool administration is a bit backed up so I believe all should be resolved sometime next week, but I'll keep you posted

  • If you haven't been enrolled by Friday of next week, please let me know

 

Wait List

  • Please check Cal Central to see if you have been enrolled in the class

  • Also, if you would like to audit this class, you are more than welcome to do so, just let me know

  • 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

Questions?