CS 294-101 Special topics: Cutting-edge Web Technologies

Spring 2015

Instructor:

TA and co-instructor:

Lectures:

Wednesday 1-2 PM, 102 Moffitt Library

Addresses:

Announcements:

We are using Piazza for announcements.

Syllabus:

Date New technologies Speaker Related technologies Media
1/28/2015 Introduction. slides
2/4/2015 Reactive rendering. Pete Hunt: React vs The World

React threw out many conventional ideas about how user interfaces should be built. In this lecture I'll briefly dive into the business case for thinking about these problems in a new way, but spend most of my time going over the algorithms and trade-offs and why they are the correct trade-offs.

Bio: Pete is CEO and cofounder of Authbox, an anti-spam, abuse and fraud API. Before Authbox he was an engineering manager at Instagram and one of the original members of the React team at Facebook. Pete has an M.Eng in Computer Science from Cornell University, focused on distributed systems.

React.js, Blaze, Angular JS, Virtual DOM, Knockout JS, Ractive.js slides recording YouTube
2/11/2015 Reactive frameworks. Matt Debergalis: The design and implementation of the Meteor platform

Meteor is an open source JavaScript platform for building modern web and mobile apps. We designed it around two key principles: isomorphic APIs that work the same everywhere – in the cloud, on the device, and inside the browser; and full-stack reactivity, including realtime database drivers, live-updating HTML templates, and an elegant scheme for hiding network latency. Put together, these ideas dramatically improve developer productivity. I'll show you how it all works, and just as importantly, how we got to this design.

Bio: Matt DeBergalis is a cofounder of the Meteor Development Group and one of the original authors of the Meteor open source project. He is also the founder and chairman of ActBlue, the nation's largest political fundraising platform which has raised over $700 million from donors across the country. Before all of that, Matt was a kernel hacker: some of his technical credits include contributions to the NeXT port of NetBSD and work on the NFSv4 and DAFS specifications while at Network Appliance. He holds S.B. and M.Eng. degrees in computer science from MIT in Cambridge, Massachusetts.

Meteor, Derby, Opa, Sails.js, Ember.js, Elm recording YouTube
2/18/2015 DOM. Taylor Savage: Web Components and Polymer

HTML is great for document markup, but not so great for building complex apps. Current front-end frameworks need to hack around the platform, using Javascript as a harness around DOM and overloading elements to turn them into complex UI's. What if instead we could re-build HTML itself for the modern, mobile-centric web?

Web Components provides a set of new primitives that makes this possible, and the Polymer library ties these primitives together to make it easy to build your own elements and use them in webpages and webapps. At Google, we started building Polymer as a science experiment to see if this whole Web Components thing could work, and are now graduating it into a full-fledged production-ready, Google-scale library - in this talk we'll go over what exactly Web Components and Polymer enables, the design process that we've gone through to get it to its current state, and what we're looking forward to in the future.

Bio: Taylor is a Product Manager at Google by trade but a web developer at heart. He is the PM on the Polymer project, a next generation library for building webapps out of components. Prior to Polymer, Taylor worked on launching new features on Google search.

Reading material: Extensible Web Manifesto

Polymer, Web components, Shadow DOM, iframe, CSS scoped attribute, jQuery UI slides
2/25/2015 Real-time communications. James Halliday: Streams and the cult of unix in the modern age

Everything old is new again! The wisdom of the unix ancients is alive and well in node.js with first-class streams and bite-size programs and packages that do exactly one thing well. This talk will cover how to apply surprisingly enduring design principles from the 1960s and 1970s to solve much more contemporary problems like how to structure a web application, wire up real time feeds with websockets, and foster an extensive and inclusive open source ecosystem.

Bio: These days I write a lot of javascript and collaborate with folks all around the planet on open projects. I've published many hundreds of modules, some of which have become popular. I think software is a useful vehicle for exploring what is possible but I am skeptical of the tech industry to deliver the technology we really need. http://github.com/substack http://substack.net/

Reading material: 1, 2, 3, 4, 5, 6, 7

node.js, WebRTC, socket.io, Firebase, DDP, Pubnub notes
3/4/2015 JavaScript. Dave Herman: The Road Ahead for JavaScript: ES6, asm.js, and Beyond

The Web has changed considerably since I first got involved in JavaScript standardization in early 2006. In this talk I will talk about language design in an industrial and standards-based setting. I'll discuss some of the important aspects of ES6, the latest edition of JavaScript, and how they came to be standardized. I'll also discuss asm.js, a highly optimizable subset of JavaScript we designed at Mozilla Research, which has seen quite a bit of success in pushing the boundaries of high-performance Web applications.

Bio: Dave Herman is a Principal Researcher and Director of Strategy of Mozilla Research. He completed his PhD in 2010 at Northeastern University on semantic foundations for hygienic macros. Dave and his group work on next generation Web platform technology, including programming language and API design and implementation, compiler technology, systems architecture, and graphics and video technology. He also serves on Ecma TC39, the organization that is standardizing ES6, the latest edition of JavaScript.

Reading material: ES6 features, asm.js intro

CoffeeScript, ECMAScript 6, ASM.js, Emscripten slides
3/11/2015 CSS. Tab Atkins: The Future of CSS - Current Experiments and Near-Future Reality

Modern CSS is amazing, but even more wonderful stuff is in the pipeline and currently being experimented with in browsers. Tab Atkins will explain the soon-to-be-new hotness in simple terms and show how it will drastically change the way you write web pages for the better.

Bio: I'm Tab Atkins Jr, and I wear many hats. I work for Google on the Chrome browser as a Web Standards Hacker. I'm also a member of the CSS Working Group, and am either a member or contributor to several other working groups in the W3C. You can contact mehere.

CSS3, flexbox, web animations, Velocity.js, GSAP slides
3/18/2015 Systems languages. Rob Pike: Go at Google: Language Design in the Service of Software Engineering

The Go programming language was conceived in late 2007 as an answer to some of the problems we were seeing developing software infrastructure at Google. The computing landscape today is almost unrelated to the environment in which the languages being used, mostly C++, Java, and Python, had been created. The problems introduced by multicore processors, networked systems, massive computation clusters, and the web programming model were being worked around rather than addressed head-on. Moreover, the scale has changed: today's server programs comprise tens of millions of lines of code, are worked on by hundreds or even thousands of programmers, and are updated literally every day. To make matters worse, build times, even on large compilation clusters, have stretched to many minutes, even hours.

Go was designed and developed to make working in this environment more productive. Besides its better-known aspects such as built-in concurrency and garbage collection, Go's design considerations include rigorous dependency management, the adaptability of software architecture as systems grow, and robustness across the boundaries between components.

This lecture will explain how these issues were addressed while building an efficient, compiled programming language that feels lightweight and pleasant. Examples and explanations will be taken from the real-world problems faced at Google.

Bio: Rob Pike is a Distinguished Engineer at Google, Inc. He works on distributed systems, data mining, programming languages, and software development tools. Most recently he has been a co-designer and developer of the Go programming language. Before Google, Rob was a member of the Computing Sciences Research Center at Bell Labs, the lab that developed Unix. While there, he worked on computer graphics, user interfaces, languages, concurrent programming, and distributed systems. He was an architect of the Plan 9 and Inferno operating systems and is the co-author with Brian Kernighan of The Unix Programming Environment and The Practice of Programming. Other details of his life appear on line but vary in veracity.

Reading material: Tour, FAQ

Rust slides
3/25/2015 Spring break.
4/1/2015 PaaS. Noah Zoschke: The Modern Web Application Stack

Modern web applications depend on many systems, services, tools and technologies that developers need to understand, integrate, and master to build and operate a world class production application.

Every app could and should leverage other base services like an Infrastructure-as-a-Service like AWS or a Platform-as-a-Service like Heroku.

Furthermore, every app developer can and should subscribe to other software services to accelerate how he or she builds, monitors and maintains these application. For example, you should use Pingdom for monitoring, Rollbar for exception reporting, Splunk for log analysis, Librato for dashboards and alerts, and TravisCI for integration testing. You should also use Docker and Linux tools as integration and introspection technologies.

Here we cover strategies for building a modern application that takes advantage of numerous other systems. We also share lessons learned from poorly understanding how to compose these sub-systems together and the dependencies this creates.

Bio: Noah is a Platform Architect at Heroku, an application Platform-as-a-Service. He has spent the last 5 years building and operating distributed container runtime, build and scheduling systems, as well as the engineering teams that create, operate and improve these systems. He has expertise using a broad range of cloud services such as AWS, Splunk and Pagerduty to build infrastructure systems and customer apps alike.

Reading material: The Twelve-Factor App, HTTP API Design Guide, The OAuth 2.0 Authorization Framework, Microservice Architecture

Amazon Web Services, Heroku, Pliny, Django REST framework, PagerDuty, Pingdom, Rollbar, Splunk Cloud, Librato, TravisCI, Docker, Linux
4/8/2015 Deployment technologies. Brendan Burns: Enabling distributed system development with Kubernetes

As containers have taken over the packaging and deployment of software, there has naturally been a rise in cluster management systems to handle cluster level application deployment and maintenance. I will give an overview of the Google Kubernetes open source cluster management system and how it moves beyond simply scheduling work onto nodes and attempts to become an infrastructure and library for making the development of distributed systems reliable, scalable distributed systems easier.

Bio: Brendan Burns is a Staff Software Engineer at Google, Inc and a founder of the Kubernetes project. He works in the Google Cloud Platform, leading engineering efforts to make the Google Cloud Platform the best place to run containers. He also has managed several other cloud teams including the Managed VMs team, and Cloud DNS. Prior to working at Google, he was a professor at Union College in Schenectady, NY. He received a PhD in Computer Science from the University of Massachusetts Amherst, and a BA in Computer Science and Studio Art from Williams College.

Reading material: Overview design doc, Pods, Labels, Networking, Replication Controllers, Services

Docker, Shipyard, Panamax, Ansible, CoreOS, Rocket
4/15/2015 Transport. Brad Fitzpatrick: HTTP/2: history, details, and an implementation

Brad Fitzpatrick talks about the history of HTTP (0.9, 1.0, 1.1) and the recently-finalized HTTP/2 spec and how it came to be, the benefits it provides, and shows an implementation of it.

Bio: Brad Fitzpatrick works on the Go programming language at Google and is responsible for much of its standard library, including Go's HTTP and HTTP/2 implementations. Prior to Google, Brad is known for creating LiveJournal and open source software which came out of it, such as memcached (distributed caching), gearman (a low-latency task queue), Perlbal (an HTTP load balancer), MogileFS (a distributed blob storage system), and djabberd (an XMPP server). He's an advocate for decentralized protocols, having created OpenID and co-created PubSubHubbub (real-time pub/sub for Atom and RSS), and contributed to efforts such as WebFinger. In addition to Go, Brad works on Camlistore, an open source personal data vault for storage, indexing, search, and sharing, designed to outlive the death or future evilness of any company.

HTTP, SPDY
4/22/2015 Concurrency, scaling. Marius Eriksen: Safe, efficient, and scalable service architectures with Finagle

Modern Internet services face a fundamental conundrum. In order to provide reliable and scalable service, they must be distributed. Distributed systems provide redundancy (for failure tolerance), extra capacity (for serving scalability), and partitioning and replication (for data scalability and durability). While distribution solves many problems, it also introduces many new ones: deeper memory hierarchies, myriad new failure domains (partial failures), and new efficiency concerns. What’s more, distributed systems are inherently concurrent, significantly complicating the runtime model.

Finagle is a system for managing remote procedure calls (RPCs)—the ability for the constituent pieces of a distributed system to communicate with each other, and to do so safely, efficiently, and reliably. In a modern, dynamic environment—where commodity hardware is used, machines are provisioned dynamically, and where failures are commonplace—this is an increasingly difficult but also an increasingly important problem.

I’ll talk about the design of Finagle, its concurrent programming model, and the constellation of systems services that support Finagle-based applications. (Among which are naming systems metrics collectors, and profiling tools.) I’ll focus especially on the aspects of Finagle that are unique to the sort of large-scale systems it is designed to support: Naming, load balancing, failure detection, as well as our session protocol, Mux.

Bio: Marius is a Principal Engineer in Twitter's systems infrastructure group. Among his interests are: large-scale distributed systems, storage systems, indexing systems, data management, distributed coordination, language runtimes, profiling tools, networks, network protocols, and functional programming.

Reading material: Your Server as a Function, A Note on Distributed Computing, Fallacies of Distributed Computing Explained, Dapper, a Large-Scale Distributed Systems Tracing Infrastructure, Thrift: Scalable Cross-Language Services Implementation, Section 4 of Interpreting the Data: Parallel Analysis with Sawzall which describes Google’s Protocol Buffers, The Twitter Stack

Akka, Thrift, ONCRPC, Libevent, Netty, Go's Goroutines
4/29/2015 Big data. Eric Baldeschwieler: Hadoop in Context

Apache Hadoop has become the ubiquitous solution to "big data problems". In this talk I will discuss problems that motivated the development of the Hadoop stack and how it is used today. This talk will focus on the use of Hadoop in web applications and the division of labor between Hadoop and other web application tools. Hadoop is an open source project. I’ll close with some lessons learned during its development that are applicable to contributors to Hadoop and/or new open source projects.

Bio: Eric Baldeschwieler is a Technical Advisor and Software/Internet Executive. He was founding CEO and CTO of Hortonworks and also founded & lead the Yahoo! team that took Hadoop from a prototype to what it is today. Previously he worked on the Inktomi search engine, video games, video special effects systems, and 3D rendering products.

Hadoop, Spark, Kafka, Elastic, Splunk, Amazon Redshift
5/6/2015 Projects screencasts & demos.

Deadlines:

2/15/2015 midnight
Project proposal due
3/15/2015 midnight
Project milestone 1 report
4/19/2015 midnight
Project milestone 2 report
5/6/2015 class time
Project demo
5/10/2015 midnight
Project screencast & report due

Blog posts submission deadline is Sunday midnight.

Course Description:

Want to learn what makes future web technologies tick? Join us for the class where we will dive into the internals of many of the newest web technologies, analyze and dissect them. We will conduct survey lectures to provide the background and overview of the area as well as invite guest lecturers from various leading projects to present their technologies. You will gain unique insight in the design and development processes behind these technologies. How does one start designing a new web technology? What are the technical challenges these technologies face and how are they addressed? What models and mechanisms do they use for security? How does it become a part of the wider ecosystem? And how does one build a community of users, supporters, industry partners, and developers? What new types of applications will these technologies enable?

A tentative sample list of technologies to be covered in the class: reactive web (Meteor, React.js, Angular JS), runtimes and languages (node.js, ASM.js, Go, Rust, ES6), deployment platforms (Heroku, Docker, Parse), HTML capabilities (Web components, Shadow DOM, Polymer), design (Flexbox), and many of the back-end technologies.

Besides graduate students interested in this topic, we welcome undergraduate students who have sufficient experience with existing web technologies.

CCN is 26880.

Class Format and Project:

This is a lecture and project oriented class. Students are expected to actively participate in lectures and in-class discussions. Students need to conduct readings and surveys of related topics, do a class project, and write blog posts.

Students will form project groups. Each group does one class project using cutting-edge web technologies or developing a new one. Preferred group size is 3, but groups of 2 or 4 are also allowed, based on the scope of the project. Projects have to be open source and should be developed with best practices, including project's site, documentation, tests, integration with continuous testing platform, a blog post with a screencast and demo, etc. Extra points if your project gets used by unaffiliated groups and/or gets covered by mainstream media.

Upgrading or extending existing projects is allowed. Combining the project with the project from another class is allowed. In both cases this should be disclosed and it should be clear what is a contribution for this class.

Additionally, each project group will have to do one weekly-blog post per week. The blog post needs to describe three key points they have learned about the technologies of the week and how do relevant technologies compare to each other.

  • What problem/s they try to address?
  • What is their strength?
  • What are the weaknesses?

Technologies of the week are technologies covered in the class and any related and/or similar technologies, including the ones you find yourself. The provided list of related technologies in the syllabus is only a suggestion, not meant to be exhaustive. Each blog needs to cover at least two example technologies on the topic covered in that week.

Each 1-unit group will have to write two summary blog posts in the semester. Summary blog post summarizes the technologies of a given week and that week's blog posts and is due one week after the due date of the relevant weekly blog posts.

Project proposals and reports should be in the form of a blog post as well.

Class is offered as 1-3 units and can be taken for a letter grade.

Grading:

For 1 unit groups:

  • 20% class participation
  • 40% weekly blog posts
  • 40% summary blog posts

For 2 and 3 unit groups:

  • 20% class participation
  • 35% weekly blog posts
  • 45% project

Requirements:

Students should have web development experience.

All information is tentative and subject to change.