Google Developers Blog: web components

A Google Santa Tracker update from Santa's Elves

Tuesday, August 16, 2016

Sam Thorogood, Developer Programs Engineer

Today, we're announcing that the open source version of Google's Santa Tracker has been updated with the Android and web experiences that ran in December 2015. We extended, enhanced and upgraded our code, and you can see how we used our developer products - including Firebase and Polymer - to build a fun, educational and engaging experience.

To get started, you can check out the code on GitHub at google/santa-tracker-web and google/santa-tracker-android. Both repositories include instructions so you can build your own version. Santa Tracker isn’t just about watching Santa’s progress as he delivers presents on December 24. Visitors can also have fun with the winter-inspired experiences, games and educational content by exploring Santa's Village while Santa prepares for his big journey throughout the holidays. Below is a summary of what we’ve released as open source. Android app

The Santa Tracker Android app is a single APK, supporting all devices, such as phones, tablets and TVs, running Ice Cream Sandwich (4.0) and up. The source code for the app can be found here.

Santa Tracker leverages Firebase features, including Remote Config API, App Invites to invite your friends to play along, and Firebase Analytics to help our elves better understand users of the app.

Santa’s Village is a launcher for videos, games and the tracker that responds well to multiple devices such as phones and tablets. There's even an alternative launcher based on the Leanback user interface for Android TVs.

Games on Santa Tracker Android are built using many technologies such as JBox2D (gumball game), Android view hierarchy (memory match game) and OpenGL with special rendering engine (jetpack game). We've also included a holiday-themed variation of Pie Noon, a fun game that works on Android TV, your phone, and inside Google Cardboard's VR.

Android Wear

The custom watch faces on Android Wear provide a personalized touch. Having Santa or one of his friendly elves tell the time brings a smile to all. Building custom watch faces is a lot of fun but providing a performant, battery friendly watch face requires certain considerations. The watch face source code can be found here.

Santa Tracker uses notifications to let users know when Santa has started his journey. The notifications are further enhanced to provide a great experience on wearables using custom backgrounds and actions that deep link into the app.

On the web

Santa Tracker is mobile-first: this year's experience was built for the mobile web, including an amazing brand new, interactive - yet fully responsive, village: with three breakpoints, touch gesture support and support for the Web App Manifest.

To help us develop Santa at scale, we've upgraded to Polymer 1.0+. Santa Tracker's use of Polymer demonstrates how easy it is to package code into reusable components. Every house in Santa's Village is a custom element, only loaded when needed, minimizing the startup cost of Santa Tracker.

Many of the amazing new games (like Present Bounce) were built with the latest JavaScript standards (ES6) and are compiled to support older browsers via the Google Closure Compiler.

Santa Tracker's interactive and fun experience is enhanced using the Web Animations API, a standardized JavaScript API for unifying animated content.

We simplified the Chromecast support this year, focusing on a great screensaver that would countdown to the big event on December 24th - and occasionally autoplay some of the great video content from around Santa's Village.

We hope that this update inspires you to make your own magical experiences based on all the interesting and exciting components that came together to make Santa Tracker!

Introducing the Senior Web Developer Nanodegree Program with Udacity

Tuesday, November 17, 2015

Posted by Sarah Clark, Program Manager, Google Developer TrainingWhat do you need to stand out from the crowd of web developers, and ultimately, land that perfect job? We asked ourselves that same question and decided to help by introducing the Senior Web Developer Nanodegree. Built in collaboration with Udacity, this online program is designed to teach you the tools, frameworks, and techniques needed to write robust code for progressive web applications that are secure and easy to use. Spending about 10 hours a week, most students can earn this Nanodegree credential in 9-12 months at a cost of $200 per month with 50% returned upon completion. Along the way, you will also learn how to integrate new technologies, such as Service Worker and Web Components, and work extensively with Gulp and other tools. You’ll hear from Google experts, such as Ido Green, Jake Archibald (co-author of the Service Worker spec), Luke Wroblewski (author and strategist), Paul Bakaus (Studio 5 CTO, Zynga) and Alice Boxhall (author of the Chrome accessibility developer tools). How can you get started? There are two different ways to participate. One option is the paid Nanodegree program, which includes code-level project reviews and feedback, coaching, support from a cohort of peers, building a portfolio of work, and career support services. The second option is entirely free and includes the same instructional courses, quizzes and projects individually, which you can take at your own pace. For more details, and to be notified when enrollment opens, check out udacity.com/googlewebdev.

Ho Ho Ho! Google's Santa Tracker is now open source

Tuesday, April 7, 2015

Posted by Ankur Kotwal, Software EngineerThe holiday spirit is about giving and though we’re early into April, we’re still in that spirit. Today, we’re announcing that Google's Santa Tracker is now open source on GitHub at google/santa-tracker-web and google/santa-tracker-android. Now you can see how we’ve used many of our developer products to build a fun and engaging experience that runs across the web and Android.

Santa Tracker isn’t just about watching Santa’s progress as he delivers presents on December 24. Visitors can also have fun with the winter-inspired games and an interactive North Pole village while Santa prepares for his big journey throughout the holidays.Below is a summary of what we’ve released as open source.Android app

The Santa Tracker Android app is a single APK, supporting all devices running Ice Cream Sandwich (4.0) and up. The source code for the app can be found here.

Santa’s village is a canvas-based graphical launcher for videos, games and the tracker. In order to span 10,000 pixels in width, the village uses the Android resource hierarchy in a unique way to scale graphics without needing assets for multiple density buckets, thereby reducing the APK size.

Games on Santa Tracker Android are built using a combination of technologies such as JBox2D (gumball game), Android view hierarchy (memory match game) and OpenGL with a purpose-built rendering engine (jetpack game).

To help with user engagement, the app uses the App Indexing API to enable autocomplete support for Santa Tracker games from Google Search. This is done using deep linking.

Android Wear

On the web

Santa Tracker on the web was built using Polymer, a powerful new library from the Chrome team based on Web Components. Santa Tracker’s use of Polymer demonstrates how easy it is to package code into reusable components. Every scene in Santa's village (games, videos, and interactive pages) is a custom element, only loaded when needed, minimizing the startup cost of Santa Tracker.

Santa Tracker’s interactive and fun experience is built using the Web Animations API, a standardized JavaScript API for unifying animated content - this is a huge leap up from using CSS animations. Web Animations can be written imperatively, are supported in all modern browsers via polyfills and Polymer uses them internally to create its amazing material design effects. Examples of these animations can be found using this GitHub search.

Santa believes in mobile first; this year's experience was built to be optimized for the mobile web, including a fully responsive design, touch gesture support using Polymer, and new features like meta-theme color and the application manifest for add to homescreen.

To provide exceptional localization support, a new i18n-msg component was built, a first for Web Components. Modeled after the Chrome extension i18n system, it enables live page-refresh for development but has a build step for optimization.

Now that the source code is also available, developers can see many of the parts that come together to make Santa Tracker. We hope that developers are inspired to make their own magical experiences.