Google announces Grab and Go program for Chromebooks, powered by Angular

Last week at Google Cloud Next, the Grab and Go team showed off their newly announced Grab and Go program: a self service program for enterprises to automate managing Chromebook assets. An Angular application powers this program which automatically manages Chromebook assignments based on user logins. All of Google’s internal loaner Chromebook fleet is managed with this program, serving 30,000 unique users and over 100,000 loans last year.

The application is made up of three main pieces:

• Angular Chrome App 
  A Chrome App is installed on all the Chromebooks. The app synchronizes with the backend and provides a place for users to manage the Chromebooks they have loaned.
• Angular Web Application
  A web app lets Grab and Go administrators monitor and manage the fleet of Chromebooks.
• Google App Engine application
  A backend application manages the data and provides a standard API.

Why we chose Angular

When beginning work on Grab and Go, Angular was chosen for both the management web application as well as the Chrome App in efforts to leverage many of the advantages that Angular provides. Angular’s separation of concerns, reusable components, and first class Typescript support allow developers of any skill level to be involved in meaningful ways right out of the gate.

Angular’s separation of concerns allowed our developers to collaborate effectively, with each developer focusing on a single piece of the application. We were able to onboard new developers (including junior developers!) without them needing to understand the workings of the entire application.

Our developer productivity was amplified for us by leveraging reusable components. The team was able to rely on the Material Design components from Angular Material so developers could focus on the business logic instead of having to take time to perfect CSS and UX-related behavior. In cases where a component that met our needs was not available, we were able to easily create components that were shared and reused across our project’s two Angular applications.

By using TypeScript throughout our applications, our developers were able to take advantage of intelligent code completion, which until recently was impossible for most front-end development. These same typings allowed for problems to be caught at build time rather than at runtime; this is especially important in Chrome App development, where the application must be rebuilt and then manually reloaded into Chrome.

Highlighted code samples

Sequence Management

After initially expecting to use the MatStepper provided by Angular Material, we found that it did not quite suit our specific use case, so we created our own reusable component. We needed to have a simple sequence manager that allowed us to provide completely custom markup within each item in the sequence. Our component allowed us to eagerly load each view in the sequence and walk the user through a series of steps.

Navigation in Chrome Apps

Angular was a really great fit for Chrome Apps. One of the challenges of building a Chrome App is the lack of a normal browser window, so the traditional browser navigation and history are not available. We were able to leverage Angular’s router to be able to continue to provide a normal navigation experience for users by using a custom PlatformLocation.

Interested in finding out more?

Learn more about the Grab and Go program

Check out the code on github, read Google’s white paper on how we deployed a Grab and Go program, or request more information about how you can establish your own Grab and Go program at your organization.