class: center, middle # Course Introduction __CS291A__ Dr. Bryce Boe September 26, 2019 --- # Welcome to CS291A This slide can be found at: https://cs291.com/slides/2019/01_course_introduction/#2 Please complete this form via your phone or computer: https://forms.gle/eFxNuZ2y3VXnKoWb8 If that does not work, please write on a piece of paper: * Name and email address * Your education level and year (e.g., 2nd year MS) * What is your prior experience with Internet technology? * What do you hope to gain from this course? --- # About Me * UCSB CS Alum (BS: 2008, Ph.D.: 2014) * As a graduate student: * Taught 3 undergraduate CS courses * TA-ed for numerous other courses * Took this course in Winter 2009 (CS290N at the time) * 5th time teaching this course (was CS290B in Fall 2015) * Staff Software Engineer, Tech Lead at AppFolio * Many years of web development and operations experience * First web page using HTML in 1996 * Learned PHP and MySQL around 2002 * Member of [Order of the Overflow](https://www.oooverflow.io/) (current DEF CON CTF organizing team) --- # My Teammates "Pear" Programming  --- # Today's Agenda * Course Overview * Course Motivation * Course Structure * TO-DO * Project 0 * The Life Cycle of a Web Request --- # Pull requests, pull requests, pull requests! .center[] If you notice an issue with or wish to make an improvement to any of the course content (e.g., slides, web pages) please edit them and make a pull request. Website source: https://github.com/scalableinternetservices/ucsb_website/ Slide source: https://github.com/scalableinternetservices/ucsb_website/tree/master/slides/2019/ --- # Questions and Feedback At any point during this course: Stop me to: * ask a question * ask for clarification * provide an additional example Communicate to me: * how I can help you succeed in this course * ideas for making the course more engaging * any other feedback you may have --- class: center inverse middle # Course Motivation --- class: center middle # How do you find a place to rent? --- # How do you find a place to rent? * [Rent.com](http://www.rent.com/) * [Apartment Guide](http://www.apartmentguide.com/) * [Rental Houses](http://www.rentalhouses.com/search/Goleta-CA) * [Zillow](http://www.zillow.com/homes/for_rent/) * [Realtor](http://www.realtor.com/apartments/Goleta_CA) * [Trulia](http://www.trulia.com/for_rent/Goleta,CA) * [PadMapper](http://www.padmapper.com/) * [Craigslist](https://santabarbara.craigslist.org/) --- class: center middle # How do you find your way in a new city? --- # How do you find your way in a new city? * [Google Maps](https://www.google.com/maps) * [mapquest](http://www.mapquest.com/maps?city=Goleta&state=CA) * [tripadvisor](http://www.tripadvisor.com/LocalMaps-g32438-Goleta-Area.html) * [Yelp](http://www.yelp.com/c/goleta-ca-us/restaurants) * [Lyft](https://www.lyft.com) * [Uber](https://www.uber.com) * [UCSB Interactive Map](http://mapdev.geog.ucsb.edu/) --- class: center middle # How do you find someone to date? --- # How do you find someone to date? * [Tinder](https://www.tinder.com/) * [OkCupid](https://www.okcupid.com/) * [Coffee Meets Bagel](https://site.coffeemeetsbagel.com/) * [EliteSingles](https://www.elitesingles.com/) * [Match](http://www.match.com/) * [Bumble](https://bumble.com/) * [eHarmony](http://www.eharmony.com/) * [Zoosk](https://www.zoosk.com/) * [HER](https://weareher.com/) * [Grindr](https://www.grindr.com/) * [Jdate](https://www.jdate.com/en-us) * [Christian Mingle](http://www.christianmingle.com/) * [Facebook](https://newsroom.fb.com/news/2019/09/facebook-dating/) * and many more! --- # Internet (or Web) Services! Each of the previous problems can be solved by a variety of Internet services. Every day billions of people use various Internet services to solve such problems. > What other every day problems are solved by Internet services? --- class: center inverse middle # As an Internet service grows in popularity, supporting the increased amount of Internet traffic results in increased complexity of the Internet service --- class: center middle   --- class: center inverse middle # Complex Services Can Also Fail --- class: center middle  Reference: https://twitter.com/facebook/status/1106229690069442560 --- class: center middle  Reference: https://twitter.com/cloudflare/status/1146086417971499010 --- # Internet Services, what's that? .center[] --- # Internet Services, what's that? There are many application-level protocols that are used to build out Internet Services. For this class, Internet services will refer to HTTP-based services. The interface to your web service may be the web browser (e.g., Chrome, Firefox), an API client (via REST, GraphQL, etc), or both. --- # What about mobile? Many native mobile apps are backed by Internet services via an API.  High Performance Browser networking details issues with mobile users and offers some optimizations designed for them ([HPBN chapters 5 through 8](https://hpbn.co/#toc)). However, these topics won't be covered in this class. --- # Scalable, what does that mean? .center[] --- # Scalable, what does that mean? An Internet service is scalable if increasing demands can be effectively met with increasing capacity. Demands could be: * Web traffic quantity (typical association) * Dataset size --- # Effectively meet demands: Explanation * Internet service remains available * Response time does not excessively degrade ## Think about it You have a web service designed to run on a single server. What do you do when you can no longer effectively meet demand. __Is your solution scalable?__ --- # What you will do: In this course you will learn and utilize some of the technologies behind building large-scale Internet services. You will test and support to the best of your abilities: * Exponential growth in the amount of traffic to your web service * Exponential growth in the dataset your web service relies upon --- # In Summary This course won't teach you how to build a web application that obtains worldwide attention and usage. However, this course will teach you how to build a web application __that can respond to__ worldwide attention and usage. --- # Other Topics In addition to scaling, we will learn about: * Performance * Security * Agile software development * Web clients (e.g., web browsers) --- class: center inverse middle # Course Structure --- # Syllabus https://cs291.com [Go over lectures, labs, projects, reading materials, and grading] --- # Course Skills __This course is fairly demanding, but is one of the most industry-applicable courses you can take.__ You will develop the following skills: * Programming in __Ruby__ * Building web services using the __Rails__ framework * Experience with Amazon Web Services (__AWS__): __EC2__, __Elastic Beanstalk__, __Lambda__, __S3__ * Load testing Internet services via __Tsung__, and __ab__ * __Agile__/__Scrum__ software development * Development using __Git__ with a _feature-branch_ flow via __github__ _pull requests_ --- # This course is _not_ a deep-dive into: * Cloud Computing * Distributed Systems * Networking * Relational Databases * Security But we will touch on all of the above. --- # Industry Focused The skills you should develop through this course are the same that I use everyday at work. The projects will all be open source so if you're proud of your team's work (you should be) then put a link to the project on your résumé. Industry related tools you will use: * Git via Github (project source version control) * Ruby on Rails (development stack) * Circle CI (automated testing) * NewRelic (performance metrics) --- # Why Ruby on Rails? Ruby is an interpreted language, thus it is not terribly __fast__, nor is very __memory efficient__. However, it is very easily scalable, and for most Internet services, developer time ($$$) is going to be much more significant than the efficiency of the service. Building Rails Internet services quickly with zero prior experience makes this class possible. Consistency in frameworks across teams allows us to better support each other. --- # Course Info * https://cs291.com * https://github.com/scalableinternetservices/ * * All out-of-class announcements will be made here * Set up and verify email notifications * It is strongly encouraged for you to respond to questions, and improve upon the "student answer" by making edits. * For clarifications on existing questions, please make a comment on an existing post * For related but separate questions, please create a "new post" --- # First Five Weeks * The basics (HTTP and HTML) * HTTP Application Server architectures * High availability via load balancing: a share-nothing web stack * Client-side and server-side caching * _Industrial_ software engineering: _Agile_, _TDD_, _Continuous Integration_ (CI), Pair Programming * Relational databases with web applications: concurrency control and query analysis * Scaling via: * Sharding * Service-Oriented-Architecture (SOA) * Read-followers --- # Later Course Topics * Web security: _firewalls_, _https_, _XSS_, _CSRF_ * HTTP 2.0 * Content-delivery networks * Non-relational data stores (NoSQL) --- # Guest Lectures * To be arranged --- # TO-DO ## Before the end of the day * Complete this form via your phone or computer: https://forms.gle/eFxNuZ2y3VXnKoWb8 ## Before 11AM Tuesday * Join the class on [Piazza]() * Enroll in [AWS Educate](https://www.awseducate.com/Registration?apptype=student&courseview=true#INFO-Student) for this class * Complete [Project 0](/project0/) * Read chapters [1](https://hpbn.co/primer-on-latency-and-bandwidth/), [2](https://hpbn.co/building-blocks-of-tcp/), and [9](https://hpbn.co/brief-history-of-http/) in High Performance Browser Networking --- # Project 0 Create, publish, and load test a static web page. [Project Description](/project0/) --- # Questions / Brief Break .center[] --- class: center inverse middle # The Life Cycle of a Web Request --- # The Two Endpoint Basics A web browser is a process (at least one) that runs on an operating system. It: * responds to user input * renders the display * utilizes the network -- A web server is a process (at least one) that runs on an operating system. It: * responds to network requests * loads resources that may come from file system, database, other servers --- # Web Request Life Cycle Group Exercise Prompt: What _things_ (e.g., events, protocols, actions) (might) occur when someone types [https://www.reddit.com](https://www.reddit.com) in their web browser and presses return. ## Part 1: ~10 minutes Discuss in groups of four, and write down in-order the components you come up with. Start generic, and leave space to provide additional detail for sub-sequences. ## Part 2 (remaining time) Collectively, we build a more definitive list using the whiteboard. --- # Core Components of a Web request * Web server: Opens a TCP socket to listen for requests * Browser: Makes a DNS query to obtain an IP address for www.reddit.com * Browser: Initiates a TCP connection to the IP address * Web server: Accepts the TCP connection * Web server: Adds TLS context to the TCP connection * Browser: Wraps the TCP connection in a TLS session * Browser: Sends an HTTP request over the TLS session * Web server: Parses the request, fetches and sends the requested resources --- # Questions .center[]