diff --git a/tensorboard/components/tf_backend/backend.ts b/tensorboard/components/tf_backend/backend.ts
index 6806d68e2d..ccb664762d 100644
--- a/tensorboard/components/tf_backend/backend.ts
+++ b/tensorboard/components/tf_backend/backend.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {compareTagNames} from '../vz-sorting/sorting.js';
-import {RequestManager} from './requestManager.js';
-import {getRouter} from './router.js';
+namespace tf_backend {
 
 export type RunToTag = {
   [run: string]: string[];
@@ -44,13 +41,13 @@ export type DebuggerNumericsAlertReportResponse = DebuggerNumericsAlertReport[];
 export const TYPES = [];
 
 /** Given a RunToTag, return sorted array of all runs */
-export function getRuns(r: RunToTag): string[] {
-  return _.keys(r).sort(compareTagNames);
+export function getRunsNamed(r: RunToTag): string[] {
+  return _.keys(r).sort(vz_sorting.compareTagNames);
 }
 
 /** Given a RunToTag, return array of all tags (sorted + dedup'd) */
 export function getTags(r: RunToTag): string[] {
-  return _.union.apply(null, _.values(r)).sort(compareTagNames);
+  return _.union.apply(null, _.values(r)).sort(vz_sorting.compareTagNames);
 }
 
 /**
@@ -61,7 +58,7 @@ export function getTags(r: RunToTag): string[] {
 export function filterTags(r: RunToTag, runs: string[]): string[] {
   let result = [];
   runs.forEach((x) => result = result.concat(r[x]));
-  return _.uniq(result).sort(compareTagNames);
+  return _.uniq(result).sort(vz_sorting.compareTagNames);
 }
 
 function timeToDate(x: number): Date {
@@ -91,9 +88,10 @@ function detupler<T, G>(xform: (x: T) => G): (t: TupleData<T>) => Datum & G {
   };
 };
 
-
 /**
  * The following interface (TupleData) describes how the data is sent
  * over from the backend.
  */
 type TupleData<T> = [number, number, T];  // wall_time, step
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/canceller.ts b/tensorboard/components/tf_backend/canceller.ts
index a196f82258..1ea3b1010c 100644
--- a/tensorboard/components/tf_backend/canceller.ts
+++ b/tensorboard/components/tf_backend/canceller.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_backend {
 
 /**
  * A class that allows marking promises as cancelled.
@@ -63,3 +64,5 @@ export class Canceller {
     this.cancellationCount++;
   }
 }
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/requestManager.ts b/tensorboard/components/tf_backend/requestManager.ts
index 0fa198416e..7824791a24 100644
--- a/tensorboard/components/tf_backend/requestManager.ts
+++ b/tensorboard/components/tf_backend/requestManager.ts
@@ -12,11 +12,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_backend {
 
 interface ResolveReject {
   resolve: Function;
   reject: Function;
 }
+
 /**
  * Manages many fetch requests. Launches up to nSimultaneousRequests
  * simultaneously, and maintains a LIFO queue of requests to process when
@@ -175,3 +177,5 @@ export class RequestManager {
     });
   }
 }
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/router.ts b/tensorboard/components/tf_backend/router.ts
index a913f10a02..2e94323e84 100644
--- a/tensorboard/components/tf_backend/router.ts
+++ b/tensorboard/components/tf_backend/router.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {addParams} from './urlPathHelpers.js';
+namespace tf_backend {
 
 export interface Router {
   logdir: () => string;
@@ -76,3 +75,5 @@ export function setRouter(router: Router): void {
   }
   _router = router;
 }
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/runsStore.ts b/tensorboard/components/tf_backend/runsStore.ts
index 22bbcfc169..a53a54e50c 100644
--- a/tensorboard/components/tf_backend/runsStore.ts
+++ b/tensorboard/components/tf_backend/runsStore.ts
@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {RequestManager} from './requestManager.js';
-import {getRouter} from './router.js';
+namespace tf_backend {
 
 let runs: string[] = [];
 
@@ -66,3 +64,5 @@ export function fetchRuns(): Promise<void> {
 export function getRuns(): string[] {
   return runs.slice();
 }
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/test/BUILD b/tensorboard/components/tf_backend/test/BUILD
index ae9df93ea7..989ae6da71 100644
--- a/tensorboard/components/tf_backend/test/BUILD
+++ b/tensorboard/components/tf_backend/test/BUILD
@@ -22,4 +22,3 @@ ts_web_library(
         "//tensorboard/components/tf_imports:webcomponentsjs",
     ],
 )
-
diff --git a/tensorboard/components/tf_backend/test/backendTests.ts b/tensorboard/components/tf_backend/test/backendTests.ts
index 19520e2228..d250709f59 100644
--- a/tensorboard/components/tf_backend/test/backendTests.ts
+++ b/tensorboard/components/tf_backend/test/backendTests.ts
@@ -12,11 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {filterTags, getRuns, getTags, RunToTag, TYPES} from '../backend.js';
-import {RequestManager} from '../requestManager.js';
-import {createRouter, setRouter} from '../router.js';
-import {addParams} from '../urlPathHelpers.js';
+namespace tf_backend {
 
 describe('urlPathHelpers', () => {
   it('addParams leaves input untouched when there are no parameters', () => {
@@ -67,17 +63,19 @@ describe('backend tests', () => {
     };
     const empty1: RunToTag = {};
     const empty2: RunToTag = {run1: [], run2: []};
-    chai.assert.deepEqual(getRuns(r2t), ['a', 'run1', 'run2']);
+    chai.assert.deepEqual(getRunsNamed(r2t), ['a', 'run1', 'run2']);
     chai.assert.deepEqual(getTags(r2t), ['bar', 'foo', 'zod', 'zoink']);
     chai.assert.deepEqual(filterTags(r2t, ['run1', 'run2']), getTags(r2t));
     chai.assert.deepEqual(filterTags(r2t, ['run1']), ['bar', 'foo', 'zod']);
     chai.assert.deepEqual(
         filterTags(r2t, ['run2', 'a']), ['foo', 'zod', 'zoink']);
 
-    chai.assert.deepEqual(getRuns(empty1), []);
+    chai.assert.deepEqual(getRunsNamed(empty1), []);
     chai.assert.deepEqual(getTags(empty1), []);
 
-    chai.assert.deepEqual(getRuns(empty2), ['run1', 'run2']);
+    chai.assert.deepEqual(getRunsNamed(empty2), ['run1', 'run2']);
     chai.assert.deepEqual(getTags(empty2), []);
   });
 });
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/test/requestManagerTests.ts b/tensorboard/components/tf_backend/test/requestManagerTests.ts
index 08407b5af3..acbc67e3aa 100644
--- a/tensorboard/components/tf_backend/test/requestManagerTests.ts
+++ b/tensorboard/components/tf_backend/test/requestManagerTests.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {RequestManager, RequestNetworkError} from '../requestManager.js';
+namespace tf_backend {
 
 interface MockRequest {
   resolve: Function;
@@ -292,3 +291,5 @@ describe('backend', () => {
     });
   });
 });
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/urlPathHelpers.ts b/tensorboard/components/tf_backend/urlPathHelpers.ts
index ae3be79150..fe2b79e175 100644
--- a/tensorboard/components/tf_backend/urlPathHelpers.ts
+++ b/tensorboard/components/tf_backend/urlPathHelpers.ts
@@ -12,6 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_backend {
+
 /**
  * A query parameter value can either be a string or a list of strings.
  * A string `"foo"` is encoded as `key=foo`; a list `["foo", "bar"]` is
@@ -51,3 +53,5 @@ function _encodeURIComponent(x: string): string {
   // Replace parentheses for consistency with Python's urllib.urlencode.
   return encodeURIComponent(x).replace(/\(/g, '%28').replace(/\)/g, '%29');
 }
+
+}  // namespace tf_backend
diff --git a/tensorboard/components/tf_card_heading/BUILD b/tensorboard/components/tf_card_heading/BUILD
index 3f5f8f9ea2..b860b1b1a3 100644
--- a/tensorboard/components/tf_card_heading/BUILD
+++ b/tensorboard/components/tf_card_heading/BUILD
@@ -10,7 +10,7 @@ ts_web_library(
         "tf-card-heading.html",
         "tf-card-heading-style.html",
         "util.html",
-        "util.js",
+        "util.ts",
     ],
     path = "/tf-card-heading",
     visibility = ["//visibility:public"],
diff --git a/tensorboard/components/tf_card_heading/tf-card-heading.html b/tensorboard/components/tf_card_heading/tf-card-heading.html
index a24db4378c..79c2bd2c18 100644
--- a/tensorboard/components/tf_card_heading/tf-card-heading.html
+++ b/tensorboard/components/tf_card_heading/tf-card-heading.html
@@ -113,8 +113,6 @@
     </style>
   </template>
   <script>
-    import {pickTextColor} from './util.js';
-
     Polymer({
       is: "tf-card-heading",
 
@@ -153,7 +151,7 @@
       },
 
       _computeRunColor(color) {
-        return pickTextColor(color);
+        return tf_card_heading.pickTextColor(color);
       },
 
       _computeNameLabel(displayName, tag) {
diff --git a/tensorboard/components/tf_card_heading/util.js b/tensorboard/components/tf_card_heading/util.ts
similarity index 97%
rename from tensorboard/components/tf_card_heading/util.js
rename to tensorboard/components/tf_card_heading/util.ts
index 0e2ae1c027..797bdd8de0 100644
--- a/tensorboard/components/tf_card_heading/util.js
+++ b/tensorboard/components/tf_card_heading/util.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_card_heading {
 
 /**
  * Formats timestamp for the card header.
@@ -26,7 +27,6 @@ export function formatDate(date) {
   return date.toString().replace(/GMT-\d+ \(([^)]+)\)/, '$1');
 }
 
-
 /**
  * Returns CSS color that will contrast against background.
  * @param {?string} background RGB hex color code, e.g. #eee, #eeeeee.
@@ -44,7 +44,6 @@ export function pickTextColor(background) {
   return brightness > 125 ? 'inherit' : '#eee';
 }
 
-
 /**
  * Turns a hex string into an RGB array.
  * @param {?string} color RGB hex color code, e.g. #eee, #eeeeee.
@@ -67,3 +66,5 @@ function convertHexToRgb(color) {
           parseInt(m[2], 16),
           parseInt(m[3], 16)];
 }
+
+}  // namespace tf_card_heading
diff --git a/tensorboard/components/tf_categorization_utils/categorizationUtils.ts b/tensorboard/components/tf_categorization_utils/categorizationUtils.ts
index 646c5049f1..37c035674b 100644
--- a/tensorboard/components/tf_categorization_utils/categorizationUtils.ts
+++ b/tensorboard/components/tf_categorization_utils/categorizationUtils.ts
@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {compareTagNames} from '../vz-sorting/sorting.js';
-import {getTags} from '../tf-backend/backend.js';
+namespace tf_categorization_utils {
 
 /**
  * Functions to extract categories of tags and/or run-tag combinations
@@ -110,7 +108,7 @@ export function categorizeTags(
     runToTag: RunToTag,
     selectedRuns: string[],
     query?: string): TagCategory[] {
-  const tags = getTags(runToTag);
+  const tags = tf_backend.getTags(runToTag);
   const categories = categorize(tags, query);
   const tagToRuns: {[tag: string]: string[]} = {};
   tags.forEach(tag => {
@@ -132,11 +130,11 @@ export function categorizeTags(
 }
 
 function compareTagRun(a, b: {tag: string, run: string}): number {
-  const c = compareTagNames(a.tag, b.tag);
+  const c = vz_sorting.compareTagNames(a.tag, b.tag);
   if (c != 0) {
     return c;
   }
-  return compareTagNames(a.run, b.run);
+  return vz_sorting.compareTagNames(a.run, b.run);
 }
 
 export function categorizeRunTagCombinations(
@@ -157,3 +155,5 @@ export function categorizeRunTagCombinations(
   }
   return tagCategories.map(explodeCategory);
 }
+
+}  // namespace tf_categorization_utils
diff --git a/tensorboard/components/tf_categorization_utils/test/categorizationUtilsTests.ts b/tensorboard/components/tf_categorization_utils/test/categorizationUtilsTests.ts
index 130575eedd..dfdba14327 100644
--- a/tensorboard/components/tf_categorization_utils/test/categorizationUtilsTests.ts
+++ b/tensorboard/components/tf_categorization_utils/test/categorizationUtilsTests.ts
@@ -12,16 +12,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import * as CategorizationUtils from '../categorizationUtils';
+namespace tf_categorization_utils {
 
 const assert = chai.assert;
 
 describe('categorizationUtils', () => {
-  const {CategoryType} = CategorizationUtils;
+  const {CategoryType} = tf_categorization_utils;
 
   describe('categorizeByPrefix', () => {
-    const {categorizeByPrefix} = CategorizationUtils;
+    const {categorizeByPrefix} = tf_categorization_utils;
     const metadata = {type: CategoryType.PREFIX_GROUP};
 
     it('returns empty array on empty tags', () => {
@@ -79,7 +78,7 @@ describe('categorizationUtils', () => {
   });
 
   describe('categorizeBySearchQuery', () => {
-    const {categorizeBySearchQuery} = CategorizationUtils;
+    const {categorizeBySearchQuery} = tf_categorization_utils;
     const baseMetadata = {
       type: CategoryType.SEARCH_RESULTS,
       validRegex: true,
@@ -152,7 +151,7 @@ describe('categorizationUtils', () => {
   });
 
   describe('categorize', () => {
-    const {categorize} = CategorizationUtils;
+    const {categorize} = tf_categorization_utils;
 
     it('merges the results of the query and the prefix groups', () => {
       const query = 'ba(?:na){2,}s';
@@ -197,3 +196,5 @@ describe('categorizationUtils', () => {
   });
 
 });
+
+} // namespace tf_categorization_utils
diff --git a/tensorboard/components/tf_categorization_utils/tf-category-pane.html b/tensorboard/components/tf_categorization_utils/tf-category-pane.html
index 52bf6fc1f2..f5e66a5475 100644
--- a/tensorboard/components/tf_categorization_utils/tf-category-pane.html
+++ b/tensorboard/components/tf_categorization_utils/tf-category-pane.html
@@ -114,7 +114,6 @@
     </style>
   </template>
   <script>
-    import {CategoryType} from "./categorizationUtils.js";
     Polymer({
       is: "tf-category-pane",
       properties: {
@@ -176,23 +175,23 @@
         // Show a category unless it's a search results category where
         // there wasn't actually a search query.
         return !(
-          category.metadata.type === CategoryType['SEARCH_RESULTS']
+          category.metadata.type === tf_categorization_utils.CategoryType['SEARCH_RESULTS']
           && category.name === "");
       },
 
       _computeIsSearchResults(type) {
-        return type === CategoryType['SEARCH_RESULTS'];
+        return type === tf_categorization_utils.CategoryType['SEARCH_RESULTS'];
       },
 
       _computeIsInvalidSearchResults(metadata) {
         return (
-          metadata.type === CategoryType['SEARCH_RESULTS']
+          metadata.type === tf_categorization_utils.CategoryType['SEARCH_RESULTS']
           && !metadata.validRegex);
       },
 
       _computeIsUniversalSearchQuery(metadata) {
         return (
-          metadata.type === CategoryType['SEARCH_RESULTS']
+          metadata.type === tf_categorization_utils.CategoryType['SEARCH_RESULTS']
           && metadata.universalRegex);
       },
     });
diff --git a/tensorboard/components/tf_color_scale/colorScale.ts b/tensorboard/components/tf_color_scale/colorScale.ts
index 3939c3ed63..1098d1703b 100644
--- a/tensorboard/components/tf_color_scale/colorScale.ts
+++ b/tensorboard/components/tf_color_scale/colorScale.ts
@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import * as RunsStore from '../tf-backend/runsStore.js';
-import {standard as standardPalette} from './palettes.js';
+namespace tf_color_scale {
 
 // Example usage:
 // runs = ["train", "test", "test1", "test2"]
@@ -32,7 +30,7 @@ export class ColorScale {
    *   Array of hex strings. Defaults to the standard palette.
    */
   constructor(
-      private readonly palette: string[] = standardPalette) {}
+      private readonly palette: string[] = standard) {}
 
   /**
    * Set the domain of strings.
@@ -70,7 +68,9 @@ export const runsColorScale: ((runName: string) => string) =
     _runsColorScale.scale.bind(_runsColorScale);
 
 function updateRunsColorScale(): void {
-  _runsColorScale.domain(RunsStore.getRuns());
+  _runsColorScale.domain(tf_backend.getRuns());
 }
-RunsStore.addListener(updateRunsColorScale);
+tf_backend.addListener(updateRunsColorScale);
 updateRunsColorScale();
+
+}  // tf_color_scale
diff --git a/tensorboard/components/tf_color_scale/palettes.ts b/tensorboard/components/tf_color_scale/palettes.ts
index f4fc5ea844..c28905ff4a 100644
--- a/tensorboard/components/tf_color_scale/palettes.ts
+++ b/tensorboard/components/tf_color_scale/palettes.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_color_scale {
 
 export const palettes = {
   googleStandard: [
@@ -98,3 +99,5 @@ export const palettes = {
 };
 
 export const standard = palettes.tensorboardColorBlindAssist;
+
+}  // namespace tf_color_scale
diff --git a/tensorboard/components/tf_color_scale/test/colorScaleTests.ts b/tensorboard/components/tf_color_scale/test/colorScaleTests.ts
index 6cfa22a732..eba1277553 100644
--- a/tensorboard/components/tf_color_scale/test/colorScaleTests.ts
+++ b/tensorboard/components/tf_color_scale/test/colorScaleTests.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {ColorScale} from '../colorScale.js';
+namespace tf_color_scale {
 
 let assert = chai.assert;
 
@@ -46,3 +45,5 @@ describe('ColorScale', function() {
     }, 'String was not in the domain.');
   });
 });
+
+}  // namespace tf_color_scale
diff --git a/tensorboard/components/tf_color_scale/tf-color-scale.html b/tensorboard/components/tf_color_scale/tf-color-scale.html
index a325f0a04c..16ff0d592f 100644
--- a/tensorboard/components/tf_color_scale/tf-color-scale.html
+++ b/tensorboard/components/tf_color_scale/tf-color-scale.html
@@ -16,6 +16,7 @@
 -->
 
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-imports/d3.html">
 
 <!--
diff --git a/tensorboard/components/tf_dashboard_common/tf-downloader.html b/tensorboard/components/tf_dashboard_common/tf-downloader.html
index b8b1452c93..e0174bd992 100644
--- a/tensorboard/components/tf_dashboard_common/tf-downloader.html
+++ b/tensorboard/components/tf_dashboard_common/tf-downloader.html
@@ -74,7 +74,6 @@
     </style>
   </template>
   <script>
-    import {addParams} from "../tf-backend/urlPathHelpers.js";
     Polymer({
       is: "tf-downloader",
       properties: {
@@ -84,7 +83,7 @@
         urlFn: Function,
       },
       _csvUrl(tag, run, urlFn) {
-        return addParams(urlFn(tag, run), {format: "csv"});
+        return tf_backend.addParams(urlFn(tag, run), {format: "csv"});
       },
       _jsonUrl(tag, run, urlFn) {
         return urlFn(tag, run);
diff --git a/tensorboard/components/tf_dashboard_common/tf-multi-checkbox.ts b/tensorboard/components/tf_dashboard_common/tf-multi-checkbox.ts
index 1cc85dee44..4bf0028439 100644
--- a/tensorboard/components/tf_dashboard_common/tf-multi-checkbox.ts
+++ b/tensorboard/components/tf_dashboard_common/tf-multi-checkbox.ts
@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {runsColorScale} from '../tf-color-scale/colorScale.js';
-import * as storage from '../tf-storage/storage.js';
+namespace tf_dashboard_common {
 
 Polymer({
   is: 'tf-multi-checkbox',
@@ -27,7 +25,7 @@ Polymer({
     },  // All the runs in consideration
     regexInput: {
       type: String,
-      value: storage.getStringInitializer('regexInput', {defaultValue: ''}),
+      value: tf_storage.getStringInitializer('regexInput', {defaultValue: ''}),
       observer: '_regexInputObserver',
     },  // Regex for filtering the runs
     regex: {type: Object, computed: '_makeRegex(regexInput)'},
@@ -39,7 +37,7 @@ Polymer({
       // if a run is explicitly enabled, True, if explicitly disabled, False.
       // if undefined, default value (enable for first k runs, disable after).
       type: Object,
-      value: storage.getObjectInitializer(
+      value: tf_storage.getObjectInitializer(
           'runSelectionState', {defaultValue: {}}),
       observer: '_storeRunToIsCheckedMapping',
     },
@@ -88,7 +86,7 @@ Polymer({
     '_setIsolatorIcon(runSelectionState, names)',
   ],
   _storeRunToIsCheckedMapping:
-      storage.getObjectObserver('runSelectionState', {defaultValue: {}}),
+      tf_storage.getObjectObserver('runSelectionState', {defaultValue: {}}),
   _makeRegex: function(regex) {
     try {
       return new RegExp(regex)
@@ -129,7 +127,7 @@ Polymer({
 
     const checkboxes = this.querySelectorAll('paper-checkbox');
     checkboxes.forEach(p => {
-      const color = runsColorScale(p.name);
+      const color = tf_color_scale.runsColorScale(p.name);
       p.customStyle['--paper-checkbox-checked-color'] = color;
       p.customStyle['--paper-checkbox-checked-ink-color'] = color;
       p.customStyle['--paper-checkbox-unchecked-color'] = color;
@@ -137,7 +135,7 @@ Polymer({
     });
     const buttons = this.querySelectorAll('.isolator');
     buttons.forEach(p => {
-      const color = runsColorScale(p.name);
+      const color = tf_color_scale.runsColorScale(p.name);
       p.style['color'] = color;
     });
     // The updateStyles call fails silently if the browser doesn't have focus,
@@ -167,7 +165,7 @@ Polymer({
   _isChecked: function(item, outSelectedChange) {
     return this.outSelected.indexOf(item) != -1;
   },
-  _regexInputObserver: storage.getStringObserver('regexInput', {defaultValue: ''}),
+  _regexInputObserver: tf_storage.getStringObserver('regexInput', {defaultValue: ''}),
   toggleAll: function() {
     var _this = this;
     var anyToggledOn = this.namesMatchingRegex.some(function(n) {
@@ -195,3 +193,5 @@ Polymer({
     this.runSelectionState = newRunsDisabled;
   },
 });
+
+}  // namespace tf_dashboard_common
diff --git a/tensorboard/components/tf_dashboard_common/tf-regex-group.ts b/tensorboard/components/tf_dashboard_common/tf-regex-group.ts
index 38e05d72cc..d01e8921ee 100644
--- a/tensorboard/components/tf_dashboard_common/tf-regex-group.ts
+++ b/tensorboard/components/tf_dashboard_common/tf-regex-group.ts
@@ -12,15 +12,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import * as storage from '../tf-storage/storage.js';
+namespace tf_dashboard_common {
 
 Polymer({
   is: 'tf-regex-group',
   properties: {
     rawRegexes: {
       type: Array,
-      value: storage.getObjectInitializer(
+      value: tf_storage.getObjectInitializer(
           'rawRegexes',
           {defaultValue: [{regex: '', valid: true}]}),
     },
@@ -32,7 +31,7 @@ Polymer({
     'checkValidity(rawRegexes.*)',
     '_uriStoreRegexes(rawRegexes.*)',
   ],
-  _uriStoreRegexes: storage.getObjectObserver(
+  _uriStoreRegexes: tf_storage.getObjectObserver(
       'rawRegexes',
       {defaultValue: [{regex: '', valid: true}]}),
   checkValidity: function(x) {
@@ -86,3 +85,5 @@ Polymer({
     }
   }
 });
+
+}  // namespace tf_dashboard_common
diff --git a/tensorboard/components/tf_globals/globals.ts b/tensorboard/components/tf_globals/globals.ts
index 6d7678e463..f847609b20 100644
--- a/tensorboard/components/tf_globals/globals.ts
+++ b/tensorboard/components/tf_globals/globals.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_globals {
 
 // If true, TensorBoard stores its hash in the URI state.
 // If false, tab switching in TensorBoard will not update location hash,
@@ -35,3 +36,5 @@ export function setFakeHash(h: string) {
 export function getFakeHash() {
   return _fakeHash;
 }
+
+}  // namespace tf_globals
diff --git a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
index 9fc3500d40..d794ba386e 100644
--- a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
+++ b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
@@ -87,8 +87,7 @@
     </style>
   </template>
   <script>
-    import {Canceller} from '../tf-backend/canceller.js';
-    import {runsColorScale} from '../tf-color-scale/colorScale.js';
+    (function() {
 
     // The chart can sometimes get in a bad state, when it redraws while
     // it is display: none due to the user having switched to a different
@@ -171,7 +170,7 @@
          */
         colorScale: {
           type: Object,
-          value: () => ({scale: runsColorScale}),
+          value: () => ({scale: tf_color_scale.runsColorScale}),
         },
 
         _loading: {
@@ -186,7 +185,7 @@
 
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
 
         /*
@@ -346,5 +345,6 @@
         }
       },
     });
+    })();
   </script>
 </dom-module>
diff --git a/tensorboard/components/tf_paginated_view/paginatedViewStore.ts b/tensorboard/components/tf_paginated_view/paginatedViewStore.ts
index 900ccbe037..81035afeb1 100644
--- a/tensorboard/components/tf_paginated_view/paginatedViewStore.ts
+++ b/tensorboard/components/tf_paginated_view/paginatedViewStore.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {getNumber, setNumber} from '../tf-storage/storage.js';
+namespace tf_paginated_view {
 
 const LIMIT_LOCAL_STORAGE_KEY = 'TF.TensorBoard.PaginatedView.limit';
 const DEFAULT_LIMIT = 12;  // reasonably small and has lots of factors
@@ -41,7 +40,7 @@ export function removeLimitListener(listener: Listener): void {
 
 export function getLimit() {
   if (_limit == null) {
-    _limit = getNumber(LIMIT_LOCAL_STORAGE_KEY, /*useLocalStorage=*/true);
+    _limit = tf_storage.getNumber(LIMIT_LOCAL_STORAGE_KEY, /*useLocalStorage=*/true);
     if (_limit == null || !isFinite(_limit) || _limit <= 0) {
       _limit = DEFAULT_LIMIT;
     }
@@ -60,8 +59,10 @@ export function setLimit(limit: number) {
     return;
   }
   _limit = limit;
-  setNumber(LIMIT_LOCAL_STORAGE_KEY, _limit, /*useLocalStorage=*/true);
+  tf_storage.setNumber(LIMIT_LOCAL_STORAGE_KEY, _limit, /*useLocalStorage=*/true);
   listeners.forEach(listener => {
     listener();
   });
 }
+
+}  // namespace tf_paginated_view
diff --git a/tensorboard/components/tf_paginated_view/test/paginatedViewTests.ts b/tensorboard/components/tf_paginated_view/test/paginatedViewTests.ts
index 51d4dae140..f74bc6f07f 100644
--- a/tensorboard/components/tf_paginated_view/test/paginatedViewTests.ts
+++ b/tensorboard/components/tf_paginated_view/test/paginatedViewTests.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_paginated_view {
 
 declare function fixture(id: string): void;
 
@@ -67,3 +68,5 @@ describe('tf-paginated-view tests', () => {
     });
   });
 });
+
+}  // namespace tf_paginated_view
diff --git a/tensorboard/components/tf_paginated_view/tf-paginated-view.html b/tensorboard/components/tf_paginated_view/tf-paginated-view.html
index 1360208d0f..be01a69820 100644
--- a/tensorboard/components/tf_paginated_view/tf-paginated-view.html
+++ b/tensorboard/components/tf_paginated_view/tf-paginated-view.html
@@ -133,8 +133,6 @@
     </style>
   </template>
   <script>
-  import * as store from './paginatedViewStore.js';
-
   Polymer({
     is: "tf-paginated-view",
     properties: {
@@ -239,14 +237,14 @@
 
     attached() {
       this._limitListener = () => {
-        this.set('_limit', store.getLimit());
+        this.set('_limit', tf_paginated_view.getLimit());
       };
-      store.addLimitListener(this._limitListener);
+      tf_paginated_view.addLimitListener(this._limitListener);
       this._limitListener();
     },
 
     detached() {
-      store.removeLimitListener(this._limitListener);
+      tf_paginated_view.removeLimitListener(this._limitListener);
     },
 
     _computePages(items, limit, activeIndex, pageCount) {
diff --git a/tensorboard/components/tf_runs_selector/tf-runs-selector.html b/tensorboard/components/tf_runs_selector/tf-runs-selector.html
index 4ddbfc809f..27d73e1466 100644
--- a/tensorboard/components/tf_runs_selector/tf-runs-selector.html
+++ b/tensorboard/components/tf_runs_selector/tf-runs-selector.html
@@ -117,11 +117,6 @@ <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
     </style>
   </template>
   <script>
-  import {RequestManager} from "../tf-backend/requestManager.js";
-  import {getRouter} from "../tf-backend/router.js";
-  import * as RunsStore from "../tf-backend/runsStore.js";
-
-  var requestManager = new RequestManager();
   Polymer({
     is: "tf-runs-selector",
     properties: {
@@ -145,12 +140,13 @@ <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
     },
     ready: function() {
       var updateRuns = function() {
-        this.set("runs", RunsStore.getRuns());
+        this.set("runs", tf_backend.getRuns());
       }.bind(this);
-      RunsStore.addListener(updateRuns);
+      tf_backend.addListener(updateRuns);
       updateRuns();
 
-      requestManager.request(getRouter().logdir()).then(logdirObject => {
+      var requestManager = new tf_backend.RequestManager();
+      requestManager.request(tf_backend.getRouter().logdir()).then(logdirObject => {
         this.set('logdir', logdirObject.logdir);
       }).catch(e => {
         // Fetching the logdir failed. Prevent the exception from logging to
diff --git a/tensorboard/components/tf_storage/storage.ts b/tensorboard/components/tf_storage/storage.ts
index 550e93192e..c1ee7fbcd6 100644
--- a/tensorboard/components/tf_storage/storage.ts
+++ b/tensorboard/components/tf_storage/storage.ts
@@ -12,11 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_storage {
 
-import {getFakeHash, setFakeHash, useHash} from '../tf-globals/globals.js';
-
-
-/* tslint:disable:no-namespace variable-name */
 /**
  * The Storage Module provides storage for URL parameters, and an API for
  * getting and setting TensorBoard's stateful URI.
@@ -220,17 +217,17 @@ function getURIStorageName(
  * Read component from URI (e.g. returns "events&runPrefix=train*").
  */
 function readComponent(): string {
-  return useHash() ? window.location.hash.slice(1) : getFakeHash();
+  return tf_globals.useHash() ? window.location.hash.slice(1) : tf_globals.getFakeHash();
 }
 
 /**
  * Write component to URI.
  */
 function writeComponent(component: string) {
-  if (useHash()) {
+  if (tf_globals.useHash()) {
     window.location.hash = component;
   } else {
-    setFakeHash(component);
+    tf_globals.setFakeHash(component);
   }
 }
 
@@ -293,3 +290,5 @@ function unsetFromURI(key) {
   delete items[key];
   writeComponent(dictToComponent(items));
 }
+
+}  // namespace tf_storage
diff --git a/tensorboard/components/tf_storage/test/storageTests.ts b/tensorboard/components/tf_storage/test/storageTests.ts
index 4d8426ea90..7dc8220c5a 100644
--- a/tensorboard/components/tf_storage/test/storageTests.ts
+++ b/tensorboard/components/tf_storage/test/storageTests.ts
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {TAB, getString, getNumber, getObject, setString, setNumber, setObject} from '../storage.js';
+namespace tf_storage {
 
 /* tslint:disable:no-namespace */
 describe('URIStorage', () => {
@@ -61,3 +61,4 @@ describe('URIStorage', () => {
   });
 });
 
+}  // namespace tf_storage
diff --git a/tensorboard/components/tf_tensorboard/BUILD b/tensorboard/components/tf_tensorboard/BUILD
index 6a9eb9d075..99617d3303 100644
--- a/tensorboard/components/tf_tensorboard/BUILD
+++ b/tensorboard/components/tf_tensorboard/BUILD
@@ -75,11 +75,3 @@ ts_web_library(
         "//tensorboard/demo:demo_data",
     ],
 )
-
-tensorboard_html_binary(
-    name = "devserver",
-    testonly = 1,
-    input_path = "/tf-tensorboard/demo.html",
-    output_path = "/index.html",
-    deps = [":demo"],
-)
diff --git a/tensorboard/components/tf_tensorboard/autoReloadBehavior.ts b/tensorboard/components/tf_tensorboard/autoReloadBehavior.ts
index 54df16f5b5..5921988389 100644
--- a/tensorboard/components/tf_tensorboard/autoReloadBehavior.ts
+++ b/tensorboard/components/tf_tensorboard/autoReloadBehavior.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_tensorboard {
 
 export var AUTORELOAD_LOCALSTORAGE_KEY = 'TF.TensorBoard.autoReloadEnabled';
 
@@ -60,3 +61,5 @@ export var AutoReloadBehavior = {
         this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
   }
 };
+
+}  // namespace tf_tensorboard
diff --git a/tensorboard/components/tf_tensorboard/demo.html b/tensorboard/components/tf_tensorboard/demo.html
index 519919daf2..1d9eb80042 100644
--- a/tensorboard/components/tf_tensorboard/demo.html
+++ b/tensorboard/components/tf_tensorboard/demo.html
@@ -18,6 +18,7 @@
 
 <meta charset="utf-8">
 <title>TensorBoard Demo</title>
+<script>window['ga'] = function() {};</script>
 <link rel="import" href="style.html">
 <link rel="import" href="default-plugins.html">
 <link rel="import" href="tf-tensorboard.html">
diff --git a/tensorboard/components/tf_tensorboard/registry.ts b/tensorboard/components/tf_tensorboard/registry.ts
index c051a0d9bd..1c0f3b0516 100644
--- a/tensorboard/components/tf_tensorboard/registry.ts
+++ b/tensorboard/components/tf_tensorboard/registry.ts
@@ -12,6 +12,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_tensorboard {
+
+export enum ActiveDashboardsLoadState {
+  NOT_LOADED = 'NOT_LOADED',
+  LOADED = 'LOADED',
+  FAILED = 'FAILED',
+}
 
 /** Registration for a plugin dashboard UI. */
 export interface Dashboard {
@@ -82,3 +89,5 @@ export function registerDashboard(dashboard: Dashboard) {
   }
   dashboardRegistry[dashboard.plugin] = dashboard;
 }
+
+}  // namespace tf_tensorboard
diff --git a/tensorboard/components/tf_tensorboard/test/autoReloadTests.ts b/tensorboard/components/tf_tensorboard/test/autoReloadTests.ts
index 19f2862961..04084e6cfe 100644
--- a/tensorboard/components/tf_tensorboard/test/autoReloadTests.ts
+++ b/tensorboard/components/tf_tensorboard/test/autoReloadTests.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {AUTORELOAD_LOCALSTORAGE_KEY, AutoReloadBehavior} from '../autoReloadBehavior.js';
+namespace tf_tensorboard {
 
 declare function fixture(id: string): void;
 
@@ -87,3 +86,5 @@ window.HTMLImports.whenReady(() => {
     });
   });
 });
+
+}  // namespace tf_tensorboard
diff --git a/tensorboard/components/tf_tensorboard/test/tensorboardTests.ts b/tensorboard/components/tf_tensorboard/test/tensorboardTests.ts
index cb0775621c..16222f7ace 100644
--- a/tensorboard/components/tf_tensorboard/test/tensorboardTests.ts
+++ b/tensorboard/components/tf_tensorboard/test/tensorboardTests.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_tensorboard {
 
 describe('tf-tensorboard tests', () => {
   window.HTMLImports.whenReady(() => {
@@ -86,3 +87,5 @@ describe('tf-tensorboard tests', () => {
     });
   });
 });
+
+}  // namespace tf_tensorboard
diff --git a/tensorboard/components/tf_tensorboard/tf-tensorboard.html b/tensorboard/components/tf_tensorboard/tf-tensorboard.html
index de963aed7e..e22977e6dd 100644
--- a/tensorboard/components/tf_tensorboard/tf-tensorboard.html
+++ b/tensorboard/components/tf_tensorboard/tf-tensorboard.html
@@ -314,29 +314,13 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
   </template>
   <script src="autoReloadBehavior.js"></script>
   <script>
-    import {AutoReloadBehavior} from "./autoReloadBehavior.js";
-    import {dashboardRegistry} from "./registry.js";
-    import {setUseHash} from "../tf-globals/globals.js";
-    import {getString, setString, TAB} from "../tf-storage/storage.js";
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {RequestManager} from "../tf-backend/requestManager.js";
-    import {getRouter, setRouter, createRouter} from "../tf-backend/router.js";
-    import {fetchRuns} from "../tf-backend/runsStore.js";
-    import * as paginatedViewStore from "../tf-paginated-view/paginatedViewStore.js";
-
-    if (_.isEmpty(dashboardRegistry)) {
+    if (_.isEmpty(tf_tensorboard.dashboardRegistry)) {
       throw new Error('HTML import plugin dashboards *before* tf-tensorboard');
     }
 
-    /** @enum {string} */ const ActiveDashboardsLoadState = {
-      NOT_LOADED: 'NOT_LOADED',
-      LOADED: 'LOADED',
-      FAILED: 'FAILED',
-    };
-
     Polymer({
       is: "tf-tensorboard",
-      behaviors: [AutoReloadBehavior],
+      behaviors: [tf_tensorboard.AutoReloadBehavior],
       properties: {
 
         /**
@@ -361,7 +345,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
         /**
          * We accept a router property only for backward compatibility:
          * setting it triggers an observer that simply calls
-         * `setRouter`.
+         * `tf_backend.setRouter`.
          */
         router: {
           type: Object,
@@ -403,7 +387,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
         _dashboardData: {
           type: Array,
           readOnly: true,
-          value: Object.values(dashboardRegistry),
+          value: Object.values(tf_tensorboard.dashboardRegistry),
         },
 
         /**
@@ -419,10 +403,10 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
           value: null,
         },
 
-        /** @type {ActiveDashboardsLoadState} */
+        /** @type {tf_tensorboard.ActiveDashboardsLoadState} */
         _activeDashboardsLoadState: {
           type: String,
-          value: ActiveDashboardsLoadState.NOT_LOADED,
+          value: tf_tensorboard.ActiveDashboardsLoadState.NOT_LOADED,
         },
         _activeDashboardsNotLoaded: {
           type: Boolean,
@@ -457,7 +441,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
          */
         _selectedDashboard: {
           type: String,
-          value: getString(TAB, /*useLocalStorage=*/false) || null,
+          value: tf_storage.getString(tf_storage.TAB, /*useLocalStorage=*/false) || null,
           observer: '_selectedDashboardChanged'
         },
 
@@ -488,11 +472,11 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
       },
       observers: [
@@ -582,7 +566,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
        */
       _selectedDashboardChanged(selectedDashboard) {
         const pluginString = selectedDashboard || '';
-        setString(TAB, pluginString, /*useLocalStorage=*/false);
+        tf_storage.setString(tf_storage.TAB, pluginString, /*useLocalStorage=*/false);
         // Record this dashboard selection as a page view.
         ga('set', 'page', '/' + pluginString);
         ga('send', 'pageview');
@@ -604,7 +588,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
       },
 
       _updateSelectedDashboardFromHash() {
-        const dashboardName = getString(TAB, /*useLocalStorage=*/false);
+        const dashboardName = tf_storage.getString(tf_storage.TAB, /*useLocalStorage=*/false);
         this.set('_selectedDashboard', dashboardName || null);
       },
 
@@ -637,7 +621,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
           // This dashboard doesn't exist. Nothing to do here.
           return;
         }
-        const dashboard = dashboardRegistry[selectedDashboard];
+        const dashboard = tf_tensorboard.dashboardRegistry[selectedDashboard];
         if (container.childNodes.length === 0) {
           const component = document.createElement(dashboard.elementName);
           component.id = 'dashboard';  // used in `_selectedDashboardComponent`
@@ -668,7 +652,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
       },
 
       ready() {
-        setUseHash(this.useHash);
+        tf_globals.setUseHash(this.useHash);
         this._updateSelectedDashboardFromHash();
         window.addEventListener('hashchange', () => {
           this._updateSelectedDashboardFromHash();
@@ -684,14 +668,14 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
         dashboardsTemplate.addEventListener(
           'dom-change', onDomChange, /*useCapture=*/false);
 
-        fetchRuns();
+        tf_backend.fetchRuns();
         this._fetchLogdir();
         this._fetchActiveDashboards();
         this._lastReloadTime = new Date().toString();
       },
 
       _fetchLogdir() {
-        const url = getRouter().logdir();
+        const url = tf_backend.getRouter().logdir();
         return this._requestManager.request(url).then(result => {
           this._logdir = result.logdir;
         });
@@ -706,30 +690,30 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
           const activePlugins = result.value;
           this._activeDashboards = this._dashboardData.map(
               d => d.plugin).filter(p => activePlugins[p]);
-          this._activeDashboardsLoadState = ActiveDashboardsLoadState.LOADED;
+          this._activeDashboardsLoadState = tf_tensorboard.ActiveDashboardsLoadState.LOADED;
         });
         const onFailure = () => {
           if (this._activeDashboardsLoadState
               === ActiveDashboardsLoadState.NOT_LOADED) {
-            this._activeDashboardsLoadState = ActiveDashboardsLoadState.FAILED;
+            this._activeDashboardsLoadState = tf_tensorboard.ActiveDashboardsLoadState.FAILED;
           } else {
             console.warn(
               "Failed to reload the set of active plugins; using old value.");
           }
         };
         return this._requestManager
-          .request(getRouter().pluginsListing())
+          .request(tf_backend.getRouter().pluginsListing())
           .then(updateActiveDashboards, onFailure);
       },
 
       _computeActiveDashboardsNotLoaded(state) {
-        return state === ActiveDashboardsLoadState.NOT_LOADED;
+        return state === tf_tensorboard.ActiveDashboardsLoadState.NOT_LOADED;
       },
       _computeActiveDashboardsLoaded(state) {
-        return state === ActiveDashboardsLoadState.LOADED;
+        return state === tf_tensorboard.ActiveDashboardsLoadState.LOADED;
       },
       _computeActiveDashboardsFailedToLoad(state) {
-        return state === ActiveDashboardsLoadState.FAILED;
+        return state === tf_tensorboard.ActiveDashboardsLoadState.FAILED;
       },
       _computeShowNoDashboardsMessage(loaded, activeDashboards, selectedDashboard) {
         return (loaded
@@ -742,7 +726,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
       },
 
       _updateRouter(router) {
-        setRouter(router);
+        tf_backend.setRouter(router);
       },
 
       _updateTitle(title) {
@@ -756,7 +740,7 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
           return;
         }
         this._fetchLogdir();
-        Promise.all([this._fetchActiveDashboards(), fetchRuns()]).then(() => {
+        Promise.all([this._fetchActiveDashboards(), tf_backend.fetchRuns()]).then(() => {
           const dashboard = this._selectedDashboardComponent();
           if (dashboard) {
             dashboard.reload();
@@ -767,14 +751,14 @@ <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”
 
       openSettings() {
         this.$.settings.open();
-        this.$.paginationLimitInput.value = paginatedViewStore.getLimit();
+        this.$.paginationLimitInput.value = tf_paginated_view.getLimit();
       },
       _paginationLimitChanged(e) {
         const value = e.target.valueAsNumber;
         // We set type="number" and min="1" on the input, but Polymer
         // doesn't actually enforce those, so we have to check manually.
         if (value === +value && value > 0) {
-          paginatedViewStore.setLimit(e.target.valueAsNumber);
+          tf_paginated_view.setLimit(e.target.valueAsNumber);
         }
       },
     });
diff --git a/tensorboard/components/tf_utils/utils.ts b/tensorboard/components/tf_utils/utils.ts
index 605cbc56e5..baab8544d7 100644
--- a/tensorboard/components/tf_utils/utils.ts
+++ b/tensorboard/components/tf_utils/utils.ts
@@ -12,11 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_utils {
 
 /*
  * Miscellaneous utilities that may be useful to plugin frontends.
  */
-
 export interface TagInfo {
     displayName: string;
     description: string;
@@ -99,3 +99,5 @@ function ngettext(k: number, enSingular: string, enPlural: string): string {
   // ever implement it.
   return k === 1 ? enSingular : enPlural;
 }
+
+}  // namespace tf_utils
diff --git a/tensorboard/components/vz_line_chart/dragZoomInteraction.ts b/tensorboard/components/vz_line_chart/dragZoomInteraction.ts
index f7e89c865a..325a22b0cf 100644
--- a/tensorboard/components/vz_line_chart/dragZoomInteraction.ts
+++ b/tensorboard/components/vz_line_chart/dragZoomInteraction.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_line_chart {
 
 export class DragZoomLayer extends Plottable.Components.SelectionBoxLayer {
   private _dragInteraction: Plottable.Interactions.Drag;
@@ -192,3 +193,5 @@ export class DragZoomLayer extends Plottable.Components.SelectionBoxLayer {
     draw();
   }
 }
+
+}  // namespace vz_line_chart
diff --git a/tensorboard/components/vz_line_chart/vz-chart-helpers.ts b/tensorboard/components/vz_line_chart/vz-chart-helpers.ts
index 5546f0c67f..628bbb64fd 100644
--- a/tensorboard/components/vz_line_chart/vz-chart-helpers.ts
+++ b/tensorboard/components/vz_line_chart/vz-chart-helpers.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_line_chart {
 
 export interface Datum {
   wall_time: Date;
@@ -61,6 +62,22 @@ export const SYMBOLS_LIST: LineChartSymbol[] = [
   },
 ];
 
+/** X axis choices for TensorBoard charts. */
+export enum XType {
+
+  /** Linear scale using the "step" property of the datum. */
+  STEP = 'step',
+
+  /** Temporal scale using the "wall_time" property of the datum. */
+  RELATIVE = 'relative',
+
+  /**
+   * Temporal scale using the "relative" property of the datum if it is present
+   * or calculating from "wall_time" if it isn't.
+   */
+  WALL_TIME = 'wall_time',
+}
+
 export type SymbolFn = (series: string) => Plottable.SymbolFactory;
 
 export let Y_TOOLTIP_FORMATTER_PRECISION = 4;
@@ -254,13 +271,15 @@ export let isNaN = (x) => +x !== x;
 
 export function getXComponents(xType: string): XComponents {
   switch (xType) {
-    case 'step':
+    case XType.STEP:
       return stepX();
-    case 'wall_time':
+    case XType.WALL_TIME:
       return wallX();
-    case 'relative':
+    case XType.RELATIVE:
       return relativeX();
     default:
       throw new Error('invalid xType: ' + xType);
   }
 }
+
+}  // namespace vz_line_chart
diff --git a/tensorboard/components/vz_line_chart/vz-line-chart.ts b/tensorboard/components/vz_line_chart/vz-line-chart.ts
index a8685e0689..dd5feb391d 100644
--- a/tensorboard/components/vz_line_chart/vz-line-chart.ts
+++ b/tensorboard/components/vz_line_chart/vz-line-chart.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-/* tslint:disable:no-namespace variable-name */
-
-import {DragZoomLayer} from './dragZoomInteraction.js';
-import * as ChartHelpers from './vz-chart-helpers.js';
+namespace vz_line_chart {
 
 /**
  * An interface that describes a fill area to visualize. The fill area is
@@ -55,7 +52,7 @@ Polymer({
     /**
      * A function that takes a data series string and returns a
      * Plottable.SymbolFactory to use for rendering that series. This property
-     * implements the ChartHelpers.SymbolFn interface.
+     * implements the SymbolFn interface.
      */
     symbolFunction: Object,
 
@@ -106,9 +103,9 @@ Polymer({
      * outer function to compute the value. We actually want the value of this
      * property to be the inner function.
      *
-     * @type {function(): ChartHelpers.XComponents}
+     * @type {function(): XComponents}
      */
-    xComponentsCreationMethod: {type: Object, value: () => ChartHelpers.stepX},
+    xComponentsCreationMethod: {type: Object, value: () => stepX},
 
     /**
      * A method that implements the Plottable.IAccessor<number> interface. Used
@@ -132,8 +129,8 @@ Polymer({
     tooltipColumns: {
       type: Array,
       value: function() {
-        const valueFormatter = ChartHelpers.multiscaleFormatter(
-            ChartHelpers.Y_TOOLTIP_FORMATTER_PRECISION);
+        const valueFormatter = multiscaleFormatter(
+            Y_TOOLTIP_FORMATTER_PRECISION);
         const formatValueOrNaN = (x) => isNaN(x) ? 'NaN' : valueFormatter(x);
 
         return [
@@ -153,16 +150,16 @@ Polymer({
           },
           {
             title: 'Step',
-            evaluate: (d) => ChartHelpers.stepFormatter(d.datum.step),
+            evaluate: (d) => stepFormatter(d.datum.step),
           },
           {
             title: 'Time',
-            evaluate: (d) => ChartHelpers.timeFormatter(d.datum.wall_time),
+            evaluate: (d) => timeFormatter(d.datum.wall_time),
           },
           {
             title: 'Relative',
-            evaluate: (d) => ChartHelpers.relativeFormatter(
-                ChartHelpers.relativeAccessor(d.datum, -1, d.dataset)),
+            evaluate: (d) => relativeFormatter(
+                relativeAccessor(d.datum, -1, d.dataset)),
           },
         ];
       }
@@ -280,7 +277,7 @@ Polymer({
    * its name must be in the setVisibleSeries() array.
    *
    * @param {string} name Name of the series.
-   * @param {Array<ChartHelpers.ScalarDatum>} data Data of the series. This is
+   * @param {Array<ScalarDatum>} data Data of the series. This is
    * an array of objects with at least the following properties:
    * - step: (Number) - index of the datum.
    * - wall_time: (Date) - Date object with the datum's time.
@@ -426,7 +423,7 @@ class LineChart {
   private yAxis: Plottable.Axes.Numeric;
   private outer: Plottable.Components.Table;
   private colorScale: Plottable.Scales.Color;
-  private symbolFunction: ChartHelpers.SymbolFn;
+  private symbolFunction: SymbolFn;
   private tooltip: d3.Selection<any, any, any, any>;
   private dzl: DragZoomLayer;
 
@@ -458,16 +455,16 @@ class LineChart {
   private targetSVG: d3.Selection<any, any, any, any>;
 
   constructor(
-      xComponentsCreationMethod: () => ChartHelpers.XComponents,
+      xComponentsCreationMethod: () => XComponents,
       yValueAccessor: Plottable.IAccessor<number>,
       yScaleType: string,
       colorScale: Plottable.Scales.Color,
       tooltip: d3.Selection<any, any, any, any>,
-      tooltipColumns: ChartHelpers.TooltipColumn[],
+      tooltipColumns: TooltipColumn[],
       fillArea: FillArea,
       defaultXRange?: number[],
       defaultYRange?: number[],
-      symbolFunction?: ChartHelpers.SymbolFn) {
+      symbolFunction?: SymbolFn) {
     this.seriesNames = [];
     this.name2datasets = {};
     this.colorScale = colorScale;
@@ -500,10 +497,10 @@ class LineChart {
   }
 
   private buildChart(
-      xComponentsCreationMethod: () => ChartHelpers.XComponents,
+      xComponentsCreationMethod: () => XComponents,
       yValueAccessor: Plottable.IAccessor<number>,
       yScaleType: string,
-      tooltipColumns: ChartHelpers.TooltipColumn[],
+      tooltipColumns: TooltipColumn[],
       fillArea: FillArea) {
     if (this.outer) {
       this.outer.destroy();
@@ -515,8 +512,8 @@ class LineChart {
     this.xAxis.margin(0).tickLabelPadding(3);
     this.yScale = LineChart.getYScaleFromType(yScaleType);
     this.yAxis = new Plottable.Axes.Numeric(this.yScale, 'left');
-    let yFormatter = ChartHelpers.multiscaleFormatter(
-        ChartHelpers.Y_AXIS_FORMATTER_PRECISION);
+    let yFormatter = multiscaleFormatter(
+        Y_AXIS_FORMATTER_PRECISION);
     this.yAxis.margin(0).tickLabelPadding(5).formatter(yFormatter);
     this.yAxis.usesTextWidthApproximation(true);
     this.fillArea = fillArea;
@@ -553,19 +550,19 @@ class LineChart {
       this.marginAreaPlot.y0(fillArea.lowerAccessor);
       this.marginAreaPlot.attr(
           'fill',
-          (d: ChartHelpers.Datum, i: number, dataset: Plottable.Dataset) =>
+          (d: Datum, i: number, dataset: Plottable.Dataset) =>
               this.colorScale.scale(dataset.metadata().name));
       this.marginAreaPlot.attr('fill-opacity', 0.3);
       this.marginAreaPlot.attr('stroke-width', 0);
     }
 
-    this.smoothedAccessor = (d: ChartHelpers.ScalarDatum) => d.smoothed;
+    this.smoothedAccessor = (d: ScalarDatum) => d.smoothed;
     let linePlot = new Plottable.Plots.Line<number|Date>();
     linePlot.x(this.xAccessor, xScale);
     linePlot.y(this.yValueAccessor, yScale);
     linePlot.attr(
         'stroke',
-        (d: ChartHelpers.Datum, i: number, dataset: Plottable.Dataset) =>
+        (d: Datum, i: number, dataset: Plottable.Dataset) =>
             this.colorScale.scale(dataset.metadata().name));
     this.linePlot = linePlot;
     const group = this.setupTooltips(linePlot, tooltipColumns);
@@ -575,7 +572,7 @@ class LineChart {
     smoothLinePlot.y(this.smoothedAccessor, yScale);
     smoothLinePlot.attr(
         'stroke',
-        (d: ChartHelpers.Datum, i: number, dataset: Plottable.Dataset) =>
+        (d: Datum, i: number, dataset: Plottable.Dataset) =>
             this.colorScale.scale(dataset.metadata().name));
     this.smoothLinePlot = smoothLinePlot;
 
@@ -585,12 +582,12 @@ class LineChart {
       markersScatterPlot.y(this.yValueAccessor, yScale);
       markersScatterPlot.attr(
           'fill',
-          (d: ChartHelpers.Datum, i: number, dataset: Plottable.Dataset) =>
+          (d: Datum, i: number, dataset: Plottable.Dataset) =>
               this.colorScale.scale(dataset.metadata().name));
       markersScatterPlot.attr('opacity', 1);
-      markersScatterPlot.size(ChartHelpers.TOOLTIP_CIRCLE_SIZE * 2);
+      markersScatterPlot.size(TOOLTIP_CIRCLE_SIZE * 2);
       markersScatterPlot.symbol(
-          (d: ChartHelpers.Datum, i: number, dataset: Plottable.Dataset) => {
+          (d: Datum, i: number, dataset: Plottable.Dataset) => {
             return this.symbolFunction(dataset.metadata().name);
           });
       // Use a special dataset because this scatter plot should use the accesor
@@ -606,7 +603,7 @@ class LineChart {
     scatterPlot.y(this.yValueAccessor, yScale);
     scatterPlot.attr('fill', (d: any) => this.colorScale.scale(d.name));
     scatterPlot.attr('opacity', 1);
-    scatterPlot.size(ChartHelpers.TOOLTIP_CIRCLE_SIZE * 2);
+    scatterPlot.size(TOOLTIP_CIRCLE_SIZE * 2);
     scatterPlot.datasets([this.lastPointsDataset]);
     this.scatterPlot = scatterPlot;
 
@@ -615,7 +612,7 @@ class LineChart {
     nanDisplay.y((x) => x.displayY, yScale);
     nanDisplay.attr('fill', (d: any) => this.colorScale.scale(d.name));
     nanDisplay.attr('opacity', 1);
-    nanDisplay.size(ChartHelpers.NAN_SYMBOL_SIZE * 2);
+    nanDisplay.size(NAN_SYMBOL_SIZE * 2);
     nanDisplay.datasets([this.nanDataset]);
     nanDisplay.symbol(Plottable.SymbolFactories.triangle);
     this.nanDisplay = nanDisplay;
@@ -667,7 +664,7 @@ class LineChart {
                 let idx = nonNanData.length - 1;
                 datum = nonNanData[idx];
                 datum.name = d.metadata().name;
-                datum.relative = ChartHelpers.relativeAccessor(datum, -1, d);
+                datum.relative = relativeAccessor(datum, -1, d);
               }
               return datum;
             })
@@ -702,7 +699,7 @@ class LineChart {
         } else {
           data[i].name = d.metadata().name;
           data[i].displayY = displayY;
-          data[i].relative = ChartHelpers.relativeAccessor(data[i], -1, d);
+          data[i].relative = relativeAccessor(data[i], -1, d);
           nanData.push(data[i]);
         }
       }
@@ -745,7 +742,7 @@ class LineChart {
       };
       const vals = _.flattenDeep<number>(this.datasets.map(datasetToValues))
           .filter(isFinite);
-      yDomain = ChartHelpers.computeDomain(vals, this._ignoreYOutliers);
+      yDomain = computeDomain(vals, this._ignoreYOutliers);
     }
     this.yScale.domain(yDomain);
   }
@@ -767,7 +764,7 @@ class LineChart {
 
   private setupTooltips(
       plot: Plottable.XYPlot<number|Date, number>,
-      tooltipColumns: ChartHelpers.TooltipColumn[]):
+      tooltipColumns: TooltipColumn[]):
       Plottable.Components.Group {
     let pi = new Plottable.Interactions.Pointer();
     pi.attachTo(plot);
@@ -798,7 +795,7 @@ class LineChart {
       if (!enabled) {
         return;
       }
-      let target: ChartHelpers.Point = {
+      let target: Point = {
         x: p.x,
         y: p.y,
         datum: null,
@@ -824,10 +821,10 @@ class LineChart {
       let ptsSelection: any =
           pointsComponent.content().selectAll('.point').data(
               ptsToCircle,
-              (p: ChartHelpers.Point) => p.dataset.metadata().name);
+              (p: Point) => p.dataset.metadata().name);
       if (pts.length !== 0) {
         ptsSelection.enter().append('circle').classed('point', true);
-        ptsSelection.attr('r', ChartHelpers.TOOLTIP_CIRCLE_SIZE)
+        ptsSelection.attr('r', TOOLTIP_CIRCLE_SIZE)
             .attr('cx', (p) => p.x)
             .attr('cy', (p) => p.y)
             .style('stroke', 'none')
@@ -847,15 +844,15 @@ class LineChart {
   }
 
   private drawTooltips(
-      points: ChartHelpers.Point[],
-      target: ChartHelpers.Point,
-      tooltipColumns: ChartHelpers.TooltipColumn[]) {
+      points: Point[],
+      target: Point,
+      tooltipColumns: TooltipColumn[]) {
     // Formatters for value, step, and wall_time
     this.scatterPlot.attr('opacity', 0);
-    let valueFormatter = ChartHelpers.multiscaleFormatter(
-        ChartHelpers.Y_TOOLTIP_FORMATTER_PRECISION);
+    let valueFormatter = multiscaleFormatter(
+        Y_TOOLTIP_FORMATTER_PRECISION);
 
-    let dist = (p: ChartHelpers.Point) =>
+    let dist = (p: Point) =>
         Math.pow(p.x - target.x, 2) + Math.pow(p.y - target.y, 2);
     let closestDist = _.min(points.map(dist));
 
@@ -931,7 +928,7 @@ class LineChart {
       left = Math.min(parentRect.width, left);
     } else {  // 'bottom'
       left = Math.min(0, left);
-      top = parentRect.height + ChartHelpers.TOOLTIP_Y_PIXEL_OFFSET;
+      top = parentRect.height + TOOLTIP_Y_PIXEL_OFFSET;
     }
 
     this.tooltip.style('transform', 'translate(' + left + 'px,' + top + 'px)');
@@ -939,9 +936,9 @@ class LineChart {
   }
 
   private findClosestPoint(
-      target: ChartHelpers.Point,
-      dataset: Plottable.Dataset): ChartHelpers.Point {
-    let points: ChartHelpers.Point[] = dataset.data().map((d, i) => {
+      target: Point,
+      dataset: Plottable.Dataset): Point {
+    let points: Point[] = dataset.data().map((d, i) => {
       let x = this.xAccessor(d, i, dataset);
       let y = this.smoothingEnabled ? this.smoothedAccessor(d, i, dataset) :
                                       this.yValueAccessor(d, i, dataset);
@@ -953,7 +950,7 @@ class LineChart {
       };
     });
     let idx: number =
-        _.sortedIndex(points, target, (p: ChartHelpers.Point) => p.x);
+        _.sortedIndex(points, target, (p: Point) => p.x);
     if (idx === points.length) {
       return points[points.length - 1];
     } else if (idx === 0) {
@@ -1065,7 +1062,7 @@ class LineChart {
   /**
    * Set the data of a series on the chart.
    */
-  public setSeriesData(name: string, data: ChartHelpers.ScalarDatum[]) {
+  public setSeriesData(name: string, data: ScalarDatum[]) {
     this.getDataset(name).data(data);
   }
 
@@ -1136,3 +1133,5 @@ class LineChart {
     this.outer.destroy();
   }
 }
+
+}  // namespace vz_line_chart
diff --git a/tensorboard/components/vz_sorting/sorting.ts b/tensorboard/components/vz_sorting/sorting.ts
index 34182d1498..21651e9b0d 100644
--- a/tensorboard/components/vz_sorting/sorting.ts
+++ b/tensorboard/components/vz_sorting/sorting.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_sorting {
 
 /**
  * Compares tag names asciinumerically broken into components.
@@ -105,3 +106,5 @@ function isBreak(c: string): boolean {
   // TODO(@jart): Remove underscore when people stop using it like a slash.
   return c === '/' || c === '_' || isDigit(c);
 }
+
+}  // namespace vz_sorting
diff --git a/tensorboard/components/vz_sorting/test/BUILD b/tensorboard/components/vz_sorting/test/BUILD
index 14cd5c2025..a62bdeba4b 100644
--- a/tensorboard/components/vz_sorting/test/BUILD
+++ b/tensorboard/components/vz_sorting/test/BUILD
@@ -3,7 +3,6 @@ package(
     default_visibility = ["//tensorboard:internal"],
 )
 
-load("//tensorboard/defs:vulcanize.bzl", "tensorboard_html_binary")
 load("//tensorboard/defs:web.bzl", "ts_web_library")
 
 licenses(["notice"])  # Apache 2.0
@@ -20,12 +19,3 @@ ts_web_library(
         "//tensorboard/components/vz_sorting",
     ],
 )
-
-tensorboard_html_binary(
-    name = "devserver",
-    compilation_level = "WHITESPACE_ONLY",
-    input_path = "/vz-sorting/test/tests.html",
-    output_path = "/vz-sorting/test/tests.html",
-    deps = [":test"],
-)
-
diff --git a/tensorboard/components/vz_sorting/test/sortingTests.ts b/tensorboard/components/vz_sorting/test/sortingTests.ts
index fb4e3ed818..9423e44799 100644
--- a/tensorboard/components/vz_sorting/test/sortingTests.ts
+++ b/tensorboard/components/vz_sorting/test/sortingTests.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {compareTagNames} from '../sorting.js';
+namespace vz_sorting {
 
 describe('compareTagNames', () => {
 
@@ -75,3 +74,5 @@ describe('compareTagNames', () => {
     assert.deepEqual(sortTagNames(['.2', '.03']), ['.2', '.03']);
   });
 });
+
+}  // namespace vz_sorting
diff --git a/tensorboard/defs/vulcanize.bzl b/tensorboard/defs/vulcanize.bzl
index b9092023ea..2da4417443 100644
--- a/tensorboard/defs/vulcanize.bzl
+++ b/tensorboard/defs/vulcanize.bzl
@@ -42,6 +42,7 @@ def _tensorboard_html_binary(ctx):
       outputs=[ctx.outputs.html],
       executable=ctx.executable._Vulcanize,
       arguments=([ctx.attr.compilation_level,
+                  "true" if ctx.attr.compile else "false",
                   "true" if ctx.attr.testonly else "false",
                   ctx.attr.input_path,
                   ctx.attr.output_path,
@@ -106,6 +107,7 @@ tensorboard_html_binary = rule(
         "compilation_level": attr.string(default="ADVANCED"),
         "input_path": attr.string(mandatory=True),
         "output_path": attr.string(mandatory=True),
+        "compile": attr.bool(),
         "data": attr.label_list(cfg="data", allow_files=True),
         "deps": attr.label_list(
             aspects=[
diff --git a/tensorboard/java/org/tensorflow/tensorboard/vulcanize/Vulcanize.java b/tensorboard/java/org/tensorflow/tensorboard/vulcanize/Vulcanize.java
index a0286eaf0c..2eb63af391 100644
--- a/tensorboard/java/org/tensorflow/tensorboard/vulcanize/Vulcanize.java
+++ b/tensorboard/java/org/tensorflow/tensorboard/vulcanize/Vulcanize.java
@@ -84,6 +84,9 @@
 /** Simple one-off solution for TensorBoard vulcanization. */
 public final class Vulcanize {
 
+  private static final Pattern INLINE_SOURCE_MAP_PATTERN =
+      Pattern.compile("//# sourceMappingURL=.*");
+
   private static final Pattern IGNORE_PATHS_PATTERN =
       Pattern.compile("/(?:polymer|marked-element)/.*");
 
@@ -106,9 +109,11 @@ public final class Vulcanize {
   private static CompilationLevel compilationLevel;
   private static Webpath outputPath;
   private static Node firstCompiledScript;
+  private static Node firstScript;
   private static Node licenseComment;
   private static int insideDemoSnippet;
   private static boolean testOnly;
+  private static boolean wantsCompile;
   private static List<Pattern> ignoreRegExs = new ArrayList<>();
 
   // This is the default argument to Vulcanize for when the path_regexs_for_noinline attribute in
@@ -117,16 +122,17 @@ public final class Vulcanize {
 
   public static void main(String[] args) throws IOException {
     compilationLevel = CompilationLevel.fromString(args[0]);
-    testOnly = args[1].equals("true");
-    Webpath inputPath = Webpath.get(args[2]);
-    outputPath = Webpath.get(args[3]);
-    Path output = Paths.get(args[4]);
-    if (!args[5].equals(NO_NOINLINE_FILE_PROVIDED)) {
-      String ignoreFile = new String(Files.readAllBytes(Paths.get(args[5])), UTF_8);
+    wantsCompile = args[1].equals("true");
+    testOnly = args[2].equals("true");
+    Webpath inputPath = Webpath.get(args[3]);
+    outputPath = Webpath.get(args[4]);
+    Path output = Paths.get(args[5]);
+    if (!args[6].equals(NO_NOINLINE_FILE_PROVIDED)) {
+      String ignoreFile = new String(Files.readAllBytes(Paths.get(args[6])), UTF_8);
       Arrays.asList(ignoreFile.split("\n")).forEach(
           (str) -> ignoreRegExs.add(Pattern.compile(str)));
     }
-    for (int i = 6; i < args.length; i++) {
+    for (int i = 7; i < args.length; i++) {
       if (args[i].endsWith(".js")) {
         String code = new String(Files.readAllBytes(Paths.get(args[i])), UTF_8);
         SourceFile sourceFile = SourceFile.fromCode(args[i], code);
@@ -148,7 +154,19 @@ public static void main(String[] args) throws IOException {
     stack.add(inputPath);
     Document document = parse(Files.readAllBytes(webfiles.get(inputPath)));
     transform(document);
-    compile();
+    if (wantsCompile) {
+      compile();
+    } else if (firstScript != null) {
+      firstScript.before(
+          new Element(Tag.valueOf("script"), firstScript.baseUri())
+              .appendChild(new DataNode("var CLOSURE_NO_DEPS = true;", firstScript.baseUri())));
+      for (SourceFile source : sourcesFromJsLibraries) {
+        String code = source.getCode();
+        firstScript.before(
+            new Element(Tag.valueOf("script"), firstScript.baseUri())
+                .appendChild(new DataNode(code, firstScript.baseUri())));
+      }
+    }
     if (licenseComment != null) {
       licenseComment.attr("comment", String.format("\n%s\n", Joiner.on("\n\n").join(licenses)));
     }
@@ -240,7 +258,11 @@ private static Node enterNode(Node node) throws IOException {
         } else if (node.nodeName().equals("script")
             && !shouldIgnoreUri(node.attr("src"))
             && !node.hasAttr("jscomp-ignore")) {
-          node = visitScript(node);
+          if (wantsCompile) {
+            node = visitScript(node);
+          } else {
+            node = inlineScript(node);
+          }
         }
       }
       rootifyAttribute(node, "href");
@@ -345,6 +367,27 @@ private static Node visitStylesheet(Node node) throws IOException {
             .removeAttr("href"));
   }
 
+  private static Node inlineScript(Node node) throws IOException {
+    Node result;
+    if (node.attr("src").isEmpty()) {
+      result = node;
+    } else {
+      Webpath href = me().lookup(Webpath.get(node.attr("src")));
+      String code = new String(Files.readAllBytes(getWebfile(href)), UTF_8);
+      code = code.replace("</script>", "</JAVA_SCRIIIIPT/>");
+      code = INLINE_SOURCE_MAP_PATTERN.matcher(code).replaceAll("");
+      result = replaceNode(
+          node,
+          new Element(Tag.valueOf("script"), node.baseUri(), node.attributes())
+              .appendChild(new DataNode(code, node.baseUri()))
+              .removeAttr("src"));
+    }
+    if (firstScript == null) {
+      firstScript = result;
+    }
+    return result;
+  }
+
   private static Optional<String> getAttrTransitive(Node node, String attr) {
     while (node != null) {
       if (node.hasAttr(attr)) {
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html b/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html
index cabaeba86a..2da40028bc 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html
@@ -43,13 +43,12 @@
         <tf-audio-dashboard id="demo"></tf-audio-dashboard>
       </template>
       <script>
-        import {createRouter, setRouter} from '../tf-backend/router.js';
 
         Polymer({
           is: "audio-dash-demo",
           created: function() {
-            var router = createRouter("/data", true);
-            setRouter(router);
+            var router = tf_backend.createRouter("/data", true);
+            tf_backend.setRouter(router);
           },
         });
       </script>
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/test/audioDashboardTests.ts b/tensorboard/plugins/audio/tf_audio_dashboard/test/audioDashboardTests.ts
index b16d5d4e0c..2bdef8ef8d 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/test/audioDashboardTests.ts
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/test/audioDashboardTests.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {createRouter, setRouter} from '../../tf-backend/router.js';
+namespace tf_audio_dashboard {
 
 // TODO(@dandelionmane): Fix me.
 declare function fixture(id: string): any;
@@ -24,8 +23,8 @@ describe('audio dashboard tests', () => {
   let reloadCount = 0;
   beforeEach(() => {
     audioDash = fixture('testElementFixture');
-    const router = createRouter('/data', true);
-    setRouter(router);
+    const router = tf_backend.createRouter('/data', true);
+    tf_backend.setRouter(router);
     stub('tf-audio-loader', {
       reload: () => { reloadCount++; },
     });
@@ -44,3 +43,5 @@ describe('audio dashboard tests', () => {
     });
   });
 });
+
+}  // namespace tf_audio_dashboard
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
index 311d2a0b13..5086e139f6 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
@@ -109,11 +109,6 @@ <h3>No audio data was found.</h3>
   <script>
     "use strict";
 
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getTags} from '../tf-backend/backend.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import {categorizeRunTagCombinations} from '../tf-categorization-utils/categorizationUtils.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
 
     Polymer({
       is: 'tf-audio-dashboard',
@@ -134,7 +129,7 @@ <h3>No audio data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
       },
 
@@ -147,14 +142,14 @@ <h3>No audio data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = getRouter().pluginRoute('audio', '/tags');
+        const url = tf_backend.getRouter().pluginRoute('audio', '/tags');
         return this._requestManager.request(url).then(runToTagInfo => {
           if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
             // No need to update anything if there are no changes.
             return;
           }
           const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-          const tags = getTags(runToTag);
+          const tags = tf_backend.getTags(runToTag);
           this.set('_dataNotFound', tags.length === 0);
           this.set('_runToTagInfo', runToTagInfo);
         });
@@ -168,7 +163,7 @@ <h3>No audio data was found.</h3>
       _makeCategories(runToTagInfo, selectedRuns, tagFilter) {
         const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
         const baseCategories =
-          categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
+          tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
         function explodeItem(item) {
           const samples = runToTagInfo[item.run][item.tag].samples;
           return _.range(samples).map(i => Object.assign({}, item, {
@@ -187,7 +182,7 @@ <h3>No audio data was found.</h3>
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'audio',
       elementName: 'tf-audio-dashboard',
     });
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html
index 963b8fcd2d..fdb48737ae 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html
@@ -114,11 +114,6 @@
   </template>
   <script>
     "use strict";
-    import {addParams} from "../tf-backend/urlPathHelpers.js";
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {getRouter} from "../tf-backend/router.js";
-    import {formatDate} from '../tf-card-heading/util.js';
-    import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
     Polymer({
       is: "tf-audio-loader",
@@ -138,7 +133,7 @@
         requestManager: Object,
         _metadataCanceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
 
         // _steps: {
@@ -180,7 +175,7 @@
       },
       observers: ['reload(run, tag)'],
       _computeRunColor(run) {
-        return runsColorScale(run);
+        return tf_color_scale.runsColorScale(run);
       },
       _computeHasAtLeastOneStep(steps) {
         return !!steps && steps.length > 0;
@@ -210,8 +205,8 @@
           return;
         }
         this._metadataCanceller.cancelAll();
-        const router = getRouter();
-        const url = addParams(router.pluginRoute('audio', '/audio'), {
+        const router = tf_backend.getRouter();
+        const url = tf_backend.addParams(router.pluginRoute('audio', '/audio'), {
             tag: this.tag,
             run: this.run,
             sample: this.sample,
@@ -228,15 +223,15 @@
         this.requestManager.request(url).then(updateSteps);
       },
       _createStepDatum(audioMetadata) {
-        let url = getRouter().pluginRoute('audio', '/individualAudio');
+        let url = tf_backend.getRouter().pluginRoute('audio', '/individualAudio');
         // Include wall_time just to disambiguate the URL and force
         // the browser to reload the audio when the URL changes. The
         // backend doesn't care about the value.
-        url = addParams(url, {ts: audioMetadata.wall_time});
+        url = tf_backend.addParams(url, {ts: audioMetadata.wall_time});
         url += '&' + audioMetadata.query;
 
         return {
-          wall_time: formatDate(new Date(audioMetadata.wall_time * 1000)),
+          wall_time: tf_card_heading.formatDate(new Date(audioMetadata.wall_time * 1000)),
           step: audioMetadata.step,
           label: audioMetadata.label,
           contentType: audioMetadata.contentType,
diff --git a/tensorboard/plugins/beholder/client_side/beholder-dashboard.html b/tensorboard/plugins/beholder/client_side/beholder-dashboard.html
index 85ca7f3e4d..94d052f401 100644
--- a/tensorboard/plugins/beholder/client_side/beholder-dashboard.html
+++ b/tensorboard/plugins/beholder/client_side/beholder-dashboard.html
@@ -282,9 +282,7 @@ <h3>No Beholder data was found.</h3>
   </template>
   <script>
     "use strict";
-
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getRouter} from '../tf-backend/router.js';
+    (function() {
 
     const PLUGIN_NAME = 'beholder'
 
@@ -295,7 +293,7 @@ <h3>No Beholder data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(10, 0),
+          value: () => new tf_backend.RequestManager(10, 0),
         },
 
         ////
@@ -391,7 +389,7 @@ <h3>No Beholder data was found.</h3>
           }
         }
 
-        const url = getRouter().pluginRoute(PLUGIN_NAME, '/change-config');
+        const url = tf_backend.getRouter().pluginRoute(PLUGIN_NAME, '/change-config');
         const postData = {
           values: this._values,
           mode: this._mode,
@@ -423,12 +421,13 @@ <h3>No Beholder data was found.</h3>
       },
 
       reload() {
-        const url = getRouter().pluginRoute(PLUGIN_NAME, '/is-active');
+        const url = tf_backend.getRouter().pluginRoute(PLUGIN_NAME, '/is-active');
 
         this._requestManager.request(url).then(response => {
           this.set('_is_active', response['is_active'])
         })
       },
     });
+    })();
   </script>
 </dom-module>
diff --git a/tensorboard/plugins/beholder/client_side/beholder-info.html b/tensorboard/plugins/beholder/client_side/beholder-info.html
index 64fa5b2b0e..0655cf2cc0 100644
--- a/tensorboard/plugins/beholder/client_side/beholder-info.html
+++ b/tensorboard/plugins/beholder/client_side/beholder-info.html
@@ -47,18 +47,16 @@
 
   <script>
     "use strict";
+    (function() {
 
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getRouter} from '../tf-backend/router.js';
-
-    const INFO_ROUTE = getRouter().pluginRoute('beholder', '/section-info')
+    const INFO_ROUTE = tf_backend.getRouter().pluginRoute('beholder', '/section-info')
 
     Polymer({
       is: "beholder-info",
       properties: {
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
 
         items: {
@@ -85,5 +83,6 @@
         this._reloaditems()
       }
     });
+    })();
   </script>
 </dom-module>
diff --git a/tensorboard/plugins/beholder/client_side/beholder-video.html b/tensorboard/plugins/beholder/client_side/beholder-video.html
index 2bf3a82238..cd6561a9b2 100644
--- a/tensorboard/plugins/beholder/client_side/beholder-video.html
+++ b/tensorboard/plugins/beholder/client_side/beholder-video.html
@@ -35,12 +35,10 @@
 
   <script>
     "use strict";
+    (function() {
 
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getRouter} from '../tf-backend/router.js';
-
-    const FEED_ROUTE = getRouter().pluginRoute('beholder', '/beholder-frame')
-    const PING_ROUTE = getRouter().pluginRoute('beholder', '/ping')
+    const FEED_ROUTE = tf_backend.getRouter().pluginRoute('beholder', '/beholder-frame')
+    const PING_ROUTE = tf_backend.getRouter().pluginRoute('beholder', '/ping')
 
     var connectionFailed = false
 
@@ -49,7 +47,7 @@
       properties: {
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
 
         _imageURL: {
@@ -86,5 +84,7 @@
       },
 
     });
+
+    })();
   </script>
 </dom-module>
diff --git a/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-card.html b/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-card.html
index f729099e88..7a563ae11a 100644
--- a/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-card.html
+++ b/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-card.html
@@ -223,28 +223,6 @@ <h1>[[_titleDisplayString]]</h1>
 </template>
 <script src='tf-custom-scalar-helpers.js'></script>
 <script>
-  import * as CustomScalarCardHelpers from './tf-custom-scalar-helpers.js';
-  import {addParams} from '../tf-backend/urlPathHelpers.js';
-  import {getRouter} from '../tf-backend/router.js';
-  import {runsColorScale} from '../tf-color-scale/colorScale.js';
-  import * as storage from '../tf-storage/storage.js';
-  import * as ChartHelpers from '../vz-line-chart/vz-chart-helpers.js';
-
-  /**
-   * Allows:
-   * - "step" - Linear scale using the "step" property of the datum.
-   * - "wall_time" - Temporal scale using the "wall_time" property of the
-   * datum.
-   * - "relative" - Temporal scale using the "relative" property of the
-   * datum if it is present or calculating from "wall_time" if it isn't.
-   * @enum {string}
-   */
-  const X_TYPE = {
-    STEP: 'step',
-    RELATIVE: 'relative',
-    WALL_TIME: 'wall_time',
-  };
-
   Polymer({
       is: 'tf-custom-scalar-card',
       properties: {
@@ -273,7 +251,7 @@ <h1>[[_titleDisplayString]]</h1>
         // We use a special color scale that wraps the run-based one.
         _colorScale: {
           type: Object,
-          value: new CustomScalarCardHelpers.DataSeriesColorScale({scale: runsColorScale}),
+          value: new tf_custom_scalar_dashboard.DataSeriesColorScale({scale: tf_color_scale.runsColorScale}),
           readOnly: true,
         },
 
@@ -317,8 +295,8 @@ <h1>[[_titleDisplayString]]</h1>
         _logScaleActive: Boolean,
         _dataUrl: {
           type: Function,
-          value: () => (tag, run) => addParams(
-              getRouter().pluginRoute(
+          value: () => (tag, run) => tf_backend.addParams(
+              tf_backend.getRouter().pluginRoute(
                   'custom_scalars', '/scalars'), {tag, run}),
         },
         _xComponentsCreationMethod: {
@@ -368,11 +346,11 @@ <h1>[[_titleDisplayString]]</h1>
       },
       _csvUrl(nameToDataSeries, dataSeriesName) {
         const baseUrl = this._downloadDataUrl(nameToDataSeries, dataSeriesName);
-        return addParams(baseUrl, {format: 'csv'});
+        return tf_backend.addParams(baseUrl, {format: 'csv'});
       },
       _jsonUrl(nameToDataSeries, dataSeriesName) {
         const baseUrl = this._downloadDataUrl(nameToDataSeries, dataSeriesName);
-        return addParams(baseUrl, {format: 'json'});
+        return tf_backend.addParams(baseUrl, {format: 'json'});
       },
       _downloadDataUrl(nameToDataSeries, dataSeriesName) {
         const dataSeries = nameToDataSeries[dataSeriesName];
@@ -380,12 +358,12 @@ <h1>[[_titleDisplayString]]</h1>
             tag: dataSeries.getTag(),
             run: dataSeries.getRun(),
         };
-        return addParams(
-              getRouter().pluginRoute(
+        return tf_backend.addParams(
+              tf_backend.getRouter().pluginRoute(
                   'custom_scalars', '/download_data'), getVars);
       },
       _computeXComponentsCreationMethod(xType) {
-        return () => ChartHelpers.getXComponents(xType);
+        return () => vz_line_chart.getXComponents(xType);
       },
       _createProcessDataFunction() {
         // This function is called when data is received from the backend.
@@ -401,7 +379,7 @@ <h1>[[_titleDisplayString]]</h1>
                 scalar: datum[2],
               }));
 
-              const seriesName = CustomScalarCardHelpers.generateDataSeriesName(
+              const seriesName = tf_custom_scalar_dashboard.generateDataSeriesName(
                   run, tag);
               let series = newMapping[seriesName];
 
@@ -416,11 +394,11 @@ <h1>[[_titleDisplayString]]</h1>
                 }
 
                 // Every data series within a run has a unique symbol.
-                const lineChartSymbol = ChartHelpers.SYMBOLS_LIST[
+                const lineChartSymbol = vz_line_chart.SYMBOLS_LIST[
                     this._runToNextAvailableSymbolIndex[run]];
 
                 // Create a series with this name.
-                series = new CustomScalarCardHelpers.DataSeries(
+                series = new tf_custom_scalar_dashboard.DataSeries(
                     run,
                     tag,
                     seriesName,
@@ -429,7 +407,7 @@ <h1>[[_titleDisplayString]]</h1>
                 newMapping[seriesName] = series;
 
                 // Loop back to the beginning if we are out of symbols.
-                const numSymbols = ChartHelpers.SYMBOLS_LIST.length;
+                const numSymbols = vz_line_chart.SYMBOLS_LIST.length;
                 this._runToNextAvailableSymbolIndex[run] =
                     (this._runToNextAvailableSymbolIndex[run] + 1) % numSymbols;
               }
diff --git a/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-dashboard.html b/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-dashboard.html
index 687fc17196..99bfb06354 100644
--- a/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-dashboard.html
+++ b/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-dashboard.html
@@ -201,35 +201,29 @@ <h3>The custom scalars dashboard is inactive.</h3>
   <script>
     "use strict";
 
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import * as storage from '../tf-storage/storage.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
-
     Polymer({
       is: 'tf-custom-scalar-dashboard',
       properties: {
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(50),
+          value: () => new tf_backend.RequestManager(50),
         },
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
         _selectedRuns: Array,
         _showDownloadLinks: {
           type: Boolean,
           notify: true,
-          value: storage.getBooleanInitializer('_showDownloadLinks',
+          value: tf_storage.getBooleanInitializer('_showDownloadLinks',
               {defaultValue: false, useLocalStorage: true}),
           observer: '_showDownloadLinksObserver',
         },
         _smoothingWeight: {
           type: Number,
           notify: true,
-          value: storage.getNumberInitializer('_smoothingWeight', {defaultValue: 0.6}),
+          value: tf_storage.getNumberInitializer('_smoothingWeight', {defaultValue: 0.6}),
           observer: '_smoothingWeightObserver',
         },
         _smoothingEnabled: {
@@ -238,7 +232,7 @@ <h3>The custom scalars dashboard is inactive.</h3>
         },
         _ignoreYOutliers: {
           type: Boolean,
-          value: storage.getBooleanInitializer('_ignoreYOutliers',
+          value: tf_storage.getBooleanInitializer('_ignoreYOutliers',
               {defaultValue: true, useLocalStorage: true}),
           observer: '_ignoreYOutliersObserver',
         },
@@ -278,7 +272,7 @@ <h3>The custom scalars dashboard is inactive.</h3>
         this.reload();
       },
       reload() {
-        const url = getRouter().pluginsListing();
+        const url = tf_backend.getRouter().pluginsListing();
         const handlePluginsListingResponse = this._canceller.cancellable(
             result => {
           if (result.cancelled) {
@@ -299,7 +293,7 @@ <h3>The custom scalars dashboard is inactive.</h3>
         });
       },
       _retrieveLayoutAndData() {
-        const url = getRouter().pluginRoute('custom_scalars', '/layout');
+        const url = tf_backend.getRouter().pluginRoute('custom_scalars', '/layout');
         const update = this._canceller.cancellable(result => {
           if (result.cancelled) {
             return;
@@ -313,11 +307,11 @@ <h3>The custom scalars dashboard is inactive.</h3>
         });
         this._requestManager.request(url).then(update);
       },
-      _showDownloadLinksObserver: storage.getBooleanObserver(
+      _showDownloadLinksObserver: tf_storage.getBooleanObserver(
           '_showDownloadLinks', {defaultValue: false, useLocalStorage: true}),
-      _smoothingWeightObserver: storage.getNumberObserver(
+      _smoothingWeightObserver: tf_storage.getNumberObserver(
           '_smoothingWeight', {defaultValue: 0.6}),
-      _ignoreYOutliersObserver: storage.getBooleanObserver(
+      _ignoreYOutliersObserver: tf_storage.getBooleanObserver(
           '_ignoreYOutliers', {defaultValue: true, useLocalStorage: true}),
       _computeSmoothingEnabled(_smoothingWeight) {
         return _smoothingWeight > 0;
@@ -359,7 +353,7 @@ <h3>The custom scalars dashboard is inactive.</h3>
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'custom_scalars',
       elementName: 'tf-custom-scalar-dashboard',
       tabName: 'Custom Scalars',
diff --git a/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-helpers.ts b/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-helpers.ts
index af13bc0575..d6b96bba45 100644
--- a/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-helpers.ts
+++ b/tensorboard/plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-helpers.ts
@@ -12,14 +12,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import * as ChartHelpers from '../vz-line-chart/vz-chart-helpers.js';
+namespace tf_custom_scalar_dashboard {
 
 export interface CustomScalarResponse {
   regex_valid: boolean;
 
   // Maps tag name to a list of scalar data.
-  tag_to_events: {[key: string]: ChartHelpers.ScalarDatum[]};
+  tag_to_events: {[key: string]: vz_line_chart.ScalarDatum[]};
 }
 
 /**
@@ -59,14 +58,14 @@ export class DataSeries {
   private run: string;
   private tag: string;
   private name: string;
-  private scalarData: ChartHelpers.ScalarDatum[];
-  private symbol: ChartHelpers.LineChartSymbol;
+  private scalarData: vz_line_chart.ScalarDatum[];
+  private symbol: vz_line_chart.LineChartSymbol;
 
   constructor(run: string,
               tag: string,
               name: string,
-              scalarData: ChartHelpers.ScalarDatum[],
-              symbol: ChartHelpers.LineChartSymbol) {
+              scalarData: vz_line_chart.ScalarDatum[],
+              symbol: vz_line_chart.LineChartSymbol) {
     this.run = run;
     this.tag = tag;
     this.name = name;
@@ -78,11 +77,11 @@ export class DataSeries {
     return this.name;
   }
 
-  setData(scalarData: ChartHelpers.ScalarDatum[]) {
+  setData(scalarData: vz_line_chart.ScalarDatum[]) {
     this.scalarData = scalarData;
   }
 
-  getData(): ChartHelpers.ScalarDatum[] {
+  getData(): vz_line_chart.ScalarDatum[] {
     return this.scalarData;
   }
 
@@ -94,7 +93,7 @@ export class DataSeries {
     return this.tag;
   }
 
-  getSymbol(): ChartHelpers.LineChartSymbol {
+  getSymbol(): vz_line_chart.LineChartSymbol {
     return this.symbol;
   }
 }
@@ -137,3 +136,5 @@ export class DataSeriesColorScale {
     return match[1];
   }
 }
+
+}  // namespace tf_custom_scalar_dashboard
diff --git a/tensorboard/plugins/distribution/tf_distribution_dashboard/index.html b/tensorboard/plugins/distribution/tf_distribution_dashboard/index.html
index a33945a487..04f6658887 100644
--- a/tensorboard/plugins/distribution/tf_distribution_dashboard/index.html
+++ b/tensorboard/plugins/distribution/tf_distribution_dashboard/index.html
@@ -44,14 +44,13 @@
         <tf-distribution-dashboard id="demo"></tf-distribution-dashboard>
       </template>
       <script>
-        import {createRouter, setRouter} from "../../tf-backend/router.js";
 
         Polymer({
           is: "distribution-dash-demo",
           created: function() {
             var path = "data";
-            var router = createRouter(path, true);
-            setRouter(router);
+            var router = tf_backend.createRouter(path, true);
+            tf_backend.setRouter(router);
           },
         });
       </script>
diff --git a/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html b/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html
index 68c3f21d33..4aa4724ee4 100644
--- a/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html
+++ b/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-dashboard.html
@@ -129,12 +129,6 @@ <h3>No distribution data was found.</h3>
   <script>
     "use strict";
 
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getTags} from '../tf-backend/backend.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import {categorizeRunTagCombinations} from '../tf-categorization-utils/categorizationUtils.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
-
     Polymer({
       is: "tf-distribution-dashboard",
       properties: {
@@ -160,7 +154,7 @@ <h3>No distribution data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
       },
       ready() {
@@ -172,14 +166,14 @@ <h3>No distribution data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = getRouter().pluginRoute('distributions', '/tags');
+        const url = tf_backend.getRouter().pluginRoute('distributions', '/tags');
         return this._requestManager.request(url).then(runToTagInfo => {
           if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
             // No need to update anything if there are no changes.
             return;
           }
           const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-          const tags = getTags(runToTag);
+          const tags = tf_backend.getTags(runToTag);
           this.set('_dataNotFound', tags.length === 0);
           this.set('_runToTag', runToTag);
           this.set('_runToTagInfo', runToTagInfo);
@@ -192,14 +186,14 @@ <h3>No distribution data was found.</h3>
       },
 
       _makeCategories(runToTag, selectedRuns, tagFilter) {
-        return categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
+        return tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
       },
       _tagMetadata(runToTagInfo, run, tag) {
         return runToTagInfo[run][tag];
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'distributions',
       elementName: 'tf-distribution-dashboard',
     });
diff --git a/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-loader.html b/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-loader.html
index ebd3914da4..8fd9929fa9 100644
--- a/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-loader.html
+++ b/tensorboard/plugins/distribution/tf_distribution_dashboard/tf-distribution-loader.html
@@ -86,10 +86,6 @@
     </style>
   </template>
   <script>
-    import {addParams} from "../tf-backend/urlPathHelpers.js";
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {getRouter} from "../tf-backend/router.js";
-    import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
     Polymer({
       is: "tf-distribution-loader",
@@ -102,7 +98,7 @@
 
         _colorScale: {
           type: Object,
-          value: () => ({scale: runsColorScale}),
+          value: () => ({scale: tf_color_scale.runsColorScale}),
           readOnly: true,
         },
         _runColor: {
@@ -118,7 +114,7 @@
         requestManager: Object,
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
       },
 
@@ -142,8 +138,8 @@
           return;
         }
         this._canceller.cancelAll();
-        const router = getRouter();
-        const url = addParams(
+        const router = tf_backend.getRouter();
+        const url = tf_backend.addParams(
           router.pluginRoute("distributions", "/distributions"),
           {tag: this.tag, run: this.run});
         const updateData = this._canceller.cancellable(result => {
diff --git a/tensorboard/plugins/distribution/vz_distribution_chart/vz-distribution-chart.ts b/tensorboard/plugins/distribution/vz_distribution_chart/vz-distribution-chart.ts
index 5247e888c4..5b9ac7da50 100644
--- a/tensorboard/plugins/distribution/vz_distribution_chart/vz-distribution-chart.ts
+++ b/tensorboard/plugins/distribution/vz_distribution_chart/vz-distribution-chart.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import * as ChartHelpers from '../vz-line-chart/vz-chart-helpers.js';
+namespace vz_distribution_chart {
 
 export class DistributionChart {
   private run2datasets: {[run: string]: Plottable.Dataset};
@@ -51,15 +50,15 @@ export class DistributionChart {
     if (this.outer) {
       this.outer.destroy();
     }
-    let xComponents = ChartHelpers.getXComponents(xType);
+    let xComponents = vz_line_chart.getXComponents(xType);
     this.xAccessor = xComponents.accessor;
     this.xScale = xComponents.scale;
     this.xAxis = xComponents.axis;
     this.xAxis.margin(0).tickLabelPadding(3);
     this.yScale = new Plottable.Scales.Linear();
     this.yAxis = new Plottable.Axes.Numeric(this.yScale, 'left');
-    let yFormatter = ChartHelpers.multiscaleFormatter(
-        ChartHelpers.Y_AXIS_FORMATTER_PRECISION);
+    let yFormatter = vz_line_chart.multiscaleFormatter(
+        vz_line_chart.Y_AXIS_FORMATTER_PRECISION);
     this.yAxis.margin(0).tickLabelPadding(5).formatter(yFormatter);
     this.yAxis.usesTextWidthApproximation(true);
 
@@ -235,3 +234,5 @@ Polymer({
     this._attached = false;
   }
 });
+
+}  // namespace vz_distribution_chart
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/index.html b/tensorboard/plugins/graph/tf_graph_dashboard/demo/index.html
index 4359db51f4..f8ec4207dd 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/demo/index.html
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/demo/index.html
@@ -38,13 +38,12 @@
         <tf-graph-dashboard></tf-graph-dashboard>
       </template>
       <script>
-        import {createRouter, setRouter} from "../../tf-backend/router.js";
 
         Polymer({
           is: "graph-dashboard-demo",
           created: function() {
-            var router = createRouter("data", true);
-            setRouter(router);
+            var router = tf_backend.createRouter("data", true);
+            tf_backend.setRouter(router);
           },
         });
       </script>
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html
index c1904195c6..83fea348ca 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html
@@ -131,15 +131,6 @@ <h3>No graph definition files were found.</h3>
 </dom-module>
 
 <script>
-import {RequestManager} from "../tf-backend/requestManager.js";
-import {Canceller} from "../tf-backend/canceller.js";
-import {compareTagNames} from "../vz-sorting/sorting.js";
-import {getRouter} from "../tf-backend/router.js";
-import {addParams} from "../tf-backend/urlPathHelpers.js";
-import {queryEncoder} from "../tf-backend/urlPathHelpers.js";
-import * as storage from '../tf-storage/storage.js';
-import {registerDashboard} from '../tf-tensorboard/registry.js';
-
 /**
  * The (string) name for the run of the selected dataset in the graph dashboard.
  */
@@ -152,11 +143,11 @@ <h3>No graph definition files were found.</h3>
     _renderHierarchy: {type: Object, observer: '_renderHierarchyChanged'},
     _requestManager: {
       type: Object,
-      value: () => new RequestManager(),
+      value: () => new tf_backend.RequestManager(),
     },
     _canceller: {
       type: Object,
-      value: () => new Canceller(),
+      value: () => new tf_backend.Canceller(),
     },
     _debuggerDataEnabled: Boolean,
     allStepsModeEnabled: Boolean,
@@ -203,7 +194,7 @@ <h3>No graph definition files were found.</h3>
     run: {
       type: String,
       notify: true,
-      value: storage.getStringInitializer(
+      value: tf_storage.getStringInitializer(
           RUN_STORAGE_KEY, {
             defaultValue: '',
             useLocalStorage: false,
@@ -235,7 +226,7 @@ <h3>No graph definition files were found.</h3>
     if (!this._debuggerDataEnabled) {
       // Check if the debugger plugin is enabled now.
       this._requestManager
-          .request(getRouter().pluginsListing())
+          .request(tf_backend.getRouter().pluginsListing())
           .then(this._canceller.cancellable(result => {
             if (result.cancelled) {
               return;
@@ -253,7 +244,7 @@ <h3>No graph definition files were found.</h3>
 
     this._maybeFetchHealthPills();
   },
-  _runObserver: storage.getStringObserver(
+  _runObserver: tf_storage.getStringObserver(
       RUN_STORAGE_KEY, {
         defaultValue: '',
         polymerProperty: 'run',
@@ -261,11 +252,11 @@ <h3>No graph definition files were found.</h3>
       }),
   _fetchGraphRuns() {
     return this._requestManager.request(
-        getRouter().pluginRoute('graphs', '/runs'));
+        tf_backend.getRouter().pluginRoute('graphs', '/runs'));
   },
   _fetchRunMetadataTags() {
     return this._requestManager.request(
-        getRouter().pluginRoute('graphs', '/run_metadata_tags'));
+        tf_backend.getRouter().pluginRoute('graphs', '/run_metadata_tags'));
   },
   /*
    * See also _maybeFetchHealthPills, _initiateNetworkRequestForHealthPills.
@@ -283,16 +274,16 @@ <h3>No graph definition files were found.</h3>
       // might be slow since the backend reads events sequentially from disk.
       postData['step'] = step;
     }
-    const url = getRouter().pluginRoute('debugger', '/health_pills');
+    const url = tf_backend.getRouter().pluginRoute('debugger', '/health_pills');
     return this._requestManager.request(url, postData);
   },
   _fetchDebuggerNumericsAlerts() {
     return this._requestManager.request(
-        getRouter().pluginRoute('debugger', '/numerics_alert_report'));
+        tf_backend.getRouter().pluginRoute('debugger', '/numerics_alert_report'));
   },
   _graphUrl(run, limitAttrSize, largeAttrsKey) {
-    const demoMode = getRouter().isDemoMode();
-    const base = getRouter().pluginRoute('graphs', '/graph');
+    const demoMode = tf_backend.getRouter().isDemoMode();
+    const base = tf_backend.getRouter().pluginRoute('graphs', '/graph');
     const optional = (p) => (p != null && !demoMode || undefined) && p;
     const parameters = {
       'run': run,
@@ -300,7 +291,7 @@ <h3>No graph definition files were found.</h3>
       'large_attrs_key': optional(largeAttrsKey),
     };
     const extension = demoMode ? '.pbtxt' : '';
-    return addParams(base, parameters) + extension;
+    return tf_backend.addParams(base, parameters) + extension;
   },
   _shouldRequestHealthPills: function() {
     // Do not load debugger data if the feature is disabled, if the user toggled off the feature,
@@ -320,18 +311,18 @@ <h3>No graph definition files were found.</h3>
     this._initialized = true;
     Promise.all([this._fetchGraphRuns(), this._fetchRunMetadataTags()])
       .then(result => {
-        const runsWithGraph = result[0].sort(compareTagNames);
+        const runsWithGraph = result[0].sort(vz_sorting.compareTagNames);
         const runToMetadata = result[1];
         const datasets = _.map(runsWithGraph, runName => ({
           name: runName,
           path: this._graphUrl(
               runName, tf.graph.LIMIT_ATTR_SIZE, tf.graph.LARGE_ATTRS_KEY),
           runMetadata: _.map(
-            (runToMetadata[runName] || []).sort(compareTagNames),
+            (runToMetadata[runName] || []).sort(vz_sorting.compareTagNames),
             tag => ({
               tag: tag,
-              path: addParams(
-                getRouter().pluginRoute('graphs', '/run_metadata'),
+              path: tf_backend.addParams(
+                tf_backend.getRouter().pluginRoute('graphs', '/run_metadata'),
                 {tag: tag, run: runName}),
             })),
         }));
@@ -463,7 +454,7 @@ <h3>No graph definition files were found.</h3>
   },
 });
 
-registerDashboard({
+tf_tensorboard.registerDashboard({
   plugin: 'graphs',
   elementName: 'tf-graph-dashboard',
   // TODO(@chihuahua): Reconcile this setting with Health Pills.
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD b/tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD
index 5f78d050ae..2881ab821f 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/BUILD
@@ -8,6 +8,7 @@ ts_web_library(
     name = "tf_histogram_dashboard",
     srcs = [
         "histogramCore.ts",
+        "tf-histogram-core.html",
         "tf-histogram-dashboard.html",
         "tf-histogram-loader.html",
     ],
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/histogramCore.ts b/tensorboard/plugins/histogram/tf_histogram_dashboard/histogramCore.ts
index 0ccefd084f..bafa6b7b76 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/histogramCore.ts
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/histogramCore.ts
@@ -12,22 +12,24 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_histogram_dashboard {
 
 /**
  * Functions for converting between the different representations of
  * histograms.
  */
-
 export type BackendHistogramBin = [
   number,  // left
   number,  // right
   number   // count
 ];
+
 export type BackendHistogram = [
   number,  // wall_time, in seconds
   number,  // step
   BackendHistogramBin[]
 ];
+
 export type IntermediateHistogram = {
   wall_time: number,  // in seconds
   step: number,
@@ -39,11 +41,13 @@ export type IntermediateHistogram = {
     count: number,
   }[],
 };
+
 export type D3HistogramBin = {
   x: number,
   dx: number,
   y: number,
 };
+
 export type VzHistogram = {
   wall_time: number,  // in seconds
   step: number,
@@ -140,3 +144,5 @@ export function backendToVz(histograms: BackendHistogram[]): VzHistogram[] {
     bins: intermediateToD3(h, minmin, maxmax),
   }));
 }
+
+}  // namespace tf_histogram_dashboard
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/index.html b/tensorboard/plugins/histogram/tf_histogram_dashboard/index.html
index 2f016b0f75..ae8dee466e 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/index.html
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/index.html
@@ -43,13 +43,11 @@
         <tf-histogram-dashboard id="demo" backend="[[backend]]"></tf-histogram-dashboard>
       </template>
       <script>
-        import {createRouter, setRouter} from "../../tf-backend/router.js";
-
         Polymer({
           is: "histogram-dash-demo",
           created: function() {
-            var router = createRouter("data", true);
-            setRouter(router);
+            var router = tf_backend.createRouter("data", true);
+            tf_backend.setRouter(router);
           },
         });
       </script>
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/test/histogramTests.ts b/tensorboard/plugins/histogram/tf_histogram_dashboard/test/histogramTests.ts
index 071394af9c..b6e43b2410 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/test/histogramTests.ts
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/test/histogramTests.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {intermediateToD3} from '../histogramCore.js';
+namespace tf_histogram_dashboard {
 
 describe('Verify that the histogram format conversion works.', () => {
 
@@ -135,3 +134,5 @@ describe('Verify that the histogram format conversion works.', () => {
     assertHistogramEquality(actual, expected);
   });
 });
+
+}  // namespace tf_histogram_dashboard
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/test/tests.html b/tensorboard/plugins/histogram/tf_histogram_dashboard/test/tests.html
index 0023b700af..d2f3d67279 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/test/tests.html
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/test/tests.html
@@ -21,7 +21,7 @@
   <meta charset="utf-8">
   <script src="../../../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <script src="../../../../web-component-tester/browser.js"></script>
-  <script src="../histogramCore.js"></script>
+  <link rel="import" href="../tf-histogram-core.html">
 </head>
 <body>
   <script src="histogramTests.js"></script>
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-core.html b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-core.html
new file mode 100644
index 0000000000..83dbdb0f99
--- /dev/null
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-core.html
@@ -0,0 +1,20 @@
+<!--
+@license
+Copyright 2017 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../tf-imports/d3.html">
+
+<script src="histogramCore.js"></script>
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html
index 9838af2ae1..b018d63975 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html
@@ -137,12 +137,6 @@ <h3>No histogram data was found.</h3>
   <script>
     "use strict";
 
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getTags} from '../tf-backend/backend.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import {categorizeRunTagCombinations} from '../tf-categorization-utils/categorizationUtils.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
-
     Polymer({
       is: "tf-histogram-dashboard",
       properties: {
@@ -172,7 +166,7 @@ <h3>No histogram data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
       },
 
@@ -185,14 +179,14 @@ <h3>No histogram data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = getRouter().pluginRoute('histograms', '/tags');
+        const url = tf_backend.getRouter().pluginRoute('histograms', '/tags');
         return this._requestManager.request(url).then(runToTagInfo => {
           if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
             // No need to update anything if there are no changes.
             return;
           }
           const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-          const tags = getTags(runToTag);
+          const tags = tf_backend.getTags(runToTag);
           this.set('_dataNotFound', tags.length === 0);
           this.set('_runToTag', runToTag);
           this.set('_runToTagInfo', runToTagInfo);
@@ -205,14 +199,14 @@ <h3>No histogram data was found.</h3>
       },
 
       _makeCategories(runToTag, selectedRuns, tagFilter) {
-        return categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
+        return tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
       },
       _tagMetadata(runToTagInfo, run, tag) {
         return runToTagInfo[run][tag];
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'histograms',
       elementName: 'tf-histogram-dashboard',
     });
diff --git a/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-loader.html b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-loader.html
index a6d2c78eeb..73e002da8f 100644
--- a/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-loader.html
+++ b/tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-loader.html
@@ -20,9 +20,9 @@
 <link rel="import" href="../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-card-heading/tf-card-heading.html">
 <link rel="import" href="../tf-color-scale/tf-color-scale.html">
-<link rel="import" href="../tf-imports/d3.html">
 <link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../vz-histogram-timeseries/vz-histogram-timeseries.html">
+<link rel="import" href="tf-histogram-core.html">
 
 <!--
   tf-histogram-loader loads an individual histogram from the TensorBoard
@@ -90,14 +90,8 @@
       }
     </style>
   </template>
-  <script src="histogramCore.js"></script>
   <script>
     "use strict";
-    import {addParams} from "../tf-backend/urlPathHelpers.js";
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {getRouter} from "../tf-backend/router.js";
-    import {runsColorScale} from "../tf-color-scale/colorScale.js";
-    import {backendToVz} from "./histogramCore.js";
 
     Polymer({
       is: "tf-histogram-loader",
@@ -112,7 +106,7 @@
         /** @type {Function} */
         _colorScaleFunction: {
           type: Object,  // function: string => string
-          value: () => runsColorScale,
+          value: () => tf_color_scale.runsColorScale,
         },
         _runColor: {
           type: String,
@@ -127,7 +121,7 @@
         requestManager: Object,
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
       },
 
@@ -146,8 +140,8 @@
           return;
         }
         this._canceller.cancelAll();
-        const router = getRouter();
-        const url = addParams(router.pluginRoute("histograms", "/histograms"), {
+        const router = tf_backend.getRouter();
+        const url = tf_backend.addParams(router.pluginRoute("histograms", "/histograms"), {
           tag: this.tag,
           run: this.run,
         });
@@ -156,7 +150,7 @@
             return;
           }
           const backendData = result.value;
-          const d3Data = backendToVz(backendData);
+          const d3Data = tf_histogram_dashboard.backendToVz(backendData);
           this.$$('vz-histogram-timeseries').setSeriesData(this.run, d3Data);
         });
         this.requestManager.request(url).then(updateData);
diff --git a/tensorboard/plugins/image/tf_image_dashboard/index.html b/tensorboard/plugins/image/tf_image_dashboard/index.html
index 3d65e9c19b..277c48ac24 100644
--- a/tensorboard/plugins/image/tf_image_dashboard/index.html
+++ b/tensorboard/plugins/image/tf_image_dashboard/index.html
@@ -43,14 +43,13 @@
             </tf-image-dashboard>
           </template>
           <script>
-            import {createRouter, setRouter} from "../../tf-backend/router.js";
 
             Polymer({
               is: "image-dash-demo",
               created: function() {
                 var path = "data";
-                var router = createRouter(path, true);
-                setRouter(router);
+                var router = tf_backend.createRouter(path, true);
+                tf_backend.setRouter(router);
               },
             });
           </script>
diff --git a/tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html b/tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html
index 964436fa9f..390a74c889 100644
--- a/tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html
+++ b/tensorboard/plugins/image/tf_image_dashboard/tf-image-dashboard.html
@@ -120,11 +120,6 @@ <h3>No image data was found.</h3>
   <script>
     "use strict";
 
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getTags} from '../tf-backend/backend.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import {categorizeRunTagCombinations} from '../tf-categorization-utils/categorizationUtils.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
 
     Polymer({
       is: 'tf-image-dashboard',
@@ -146,7 +141,7 @@ <h3>No image data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
       },
 
@@ -159,14 +154,14 @@ <h3>No image data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = getRouter().pluginRoute('images', '/tags');
+        const url = tf_backend.getRouter().pluginRoute('images', '/tags');
         return this._requestManager.request(url).then(runToTagInfo => {
           if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
             // No need to update anything if there are no changes.
             return;
           }
           const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-          const tags = getTags(runToTag);
+          const tags = tf_backend.getTags(runToTag);
           this.set('_dataNotFound', tags.length === 0);
           this.set('_runToTagInfo', runToTagInfo);
         });
@@ -180,7 +175,7 @@ <h3>No image data was found.</h3>
       _makeCategories(runToTagInfo, selectedRuns, tagFilter) {
         const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
         const baseCategories =
-          categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
+          tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
         function explodeItem(item) {
           const samples = runToTagInfo[item.run][item.tag].samples;
           return _.range(samples).map(i => Object.assign({}, item, {
@@ -199,7 +194,7 @@ <h3>No image data was found.</h3>
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'images',
       elementName: 'tf-image-dashboard',
     });
diff --git a/tensorboard/plugins/image/tf_image_dashboard/tf-image-loader.html b/tensorboard/plugins/image/tf_image_dashboard/tf-image-loader.html
index 8a1edffbe4..52a2fc34ce 100644
--- a/tensorboard/plugins/image/tf_image_dashboard/tf-image-loader.html
+++ b/tensorboard/plugins/image/tf_image_dashboard/tf-image-loader.html
@@ -181,11 +181,6 @@
   </template>
   <script>
     "use strict";
-    import {addParams} from '../tf-backend/urlPathHelpers.js';
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {getRouter} from "../tf-backend/router.js";
-    import {formatDate} from '../tf-card-heading/util.js';
-    import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
     Polymer({
       is: "tf-image-loader",
@@ -210,11 +205,11 @@
         requestManager: Object,
         _metadataCanceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
         _imageCanceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
 
         // steps: {
@@ -272,7 +267,7 @@
       ],
 
       _computeRunColor(run) {
-        return runsColorScale(run);
+        return tf_color_scale.runsColorScale(run);
       },
       _computeHasAtLeastOneStep(steps) {
         return !!steps && steps.length > 0;
@@ -284,7 +279,7 @@
         return steps[stepIndex].step;
       },
       _computeCurrentWallTime(steps, stepIndex) {
-        return formatDate(steps[stepIndex].wall_time);
+        return tf_card_heading.formatDate(steps[stepIndex].wall_time);
       },
       _computeMaxStepIndex(steps) {
         return steps.length - 1;
@@ -305,8 +300,8 @@
           return;
         }
         this._metadataCanceller.cancelAll();
-        const router = getRouter();
-        const url = addParams(router.pluginRoute('images', '/images'), {
+        const router = tf_backend.getRouter();
+        const url = tf_backend.addParams(router.pluginRoute('images', '/images'), {
             tag: this.tag,
             run: this.run,
             sample: this.sample,
@@ -323,11 +318,11 @@
         this.requestManager.request(url).then(updateSteps);
       },
       _createStepDatum(imageMetadata) {
-        let url = getRouter().pluginRoute('images', '/individualImage');
+        let url = tf_backend.getRouter().pluginRoute('images', '/individualImage');
         // Include wall_time just to disambiguate the URL and force
         // the browser to reload the image when the URL changes. The
         // backend doesn't care about the value.
-        url = addParams(url, {ts: imageMetadata.wall_time});
+        url = tf_backend.addParams(url, {ts: imageMetadata.wall_time});
         url += '&' + imageMetadata.query;
 
         return {
diff --git a/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-card.html b/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-card.html
index d83aefad9e..5a20359cfa 100644
--- a/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-card.html
+++ b/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-card.html
@@ -140,12 +140,6 @@
     </style>
   </template>
   <script>
-    import {addParams} from "../tf-backend/urlPathHelpers.js";
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {getRouter} from "../tf-backend/router.js";
-    import {runsColorScale} from "../tf-color-scale/colorScale.js";
-    import * as ChartHelpers from '../vz-line-chart/vz-chart-helpers.js';
-
     Polymer({
       is: "tf-pr-curve-card",
       properties: {
@@ -197,11 +191,11 @@
         _runToDataOverTime: Object,
         _colorScaleFunction: {
           type: Object,  // function: string => string
-          value: () => ({scale: runsColorScale}),
+          value: () => ({scale: tf_color_scale.runsColorScale}),
         },
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
         _attached: Boolean,
         // The value field is a function that returns a function because Polymer
@@ -231,8 +225,8 @@
           type: Array,
           readOnly: true,
           value: () => {
-            const valueFormatter = ChartHelpers.multiscaleFormatter(
-                ChartHelpers.Y_TOOLTIP_FORMATTER_PRECISION);
+            const valueFormatter = vz_line_chart.multiscaleFormatter(
+                vz_line_chart.Y_TOOLTIP_FORMATTER_PRECISION);
             const formatValueOrNaN =
                 (x) => isNaN(x) ? 'NaN' : valueFormatter(x);
             return [
@@ -298,8 +292,8 @@
         },
         _dataUrl: {
           type: Function,
-          value: () => (tag, run) => addParams(
-              getRouter().pluginRoute('pr_curves', '/pr_curves'), {tag, run}),
+          value: () => (tag, run) => tf_backend.addParams(
+              tf_backend.getRouter().pluginRoute('pr_curves', '/pr_curves'), {tag, run}),
         },
         _smoothingEnabled: {
           type: Boolean,
diff --git a/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard.html b/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard.html
index 8a28da67d4..a468f6d8b5 100644
--- a/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard.html
+++ b/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard.html
@@ -141,13 +141,6 @@ <h3>No precision–recall curve data was found.</h3>
   </template>
 
   <script>
-  import {aggregateTagInfo} from '../tf-utils/utils.js';
-  import {categorizeTags} from '../tf-categorization-utils/categorizationUtils.js';
-  import {getRouter} from '../tf-backend/router.js';
-  import {getTags} from '../tf-backend/backend.js';
-  import {RequestManager} from '../tf-backend/requestManager.js';
-  import {runsColorScale} from "../tf-color-scale/colorScale.js";
-  import {registerDashboard} from '../tf-tensorboard/registry.js';
 
   Polymer({
     is: 'tf-pr-curve-dashboard',
@@ -189,7 +182,7 @@ <h3>No precision–recall curve data was found.</h3>
       },
       _requestManager: {
         type: Object,
-        value: () => new RequestManager(),
+        value: () => new tf_backend.RequestManager(),
       },
       _step: {
         type: Number,
@@ -207,20 +200,20 @@ <h3>No precision–recall curve data was found.</h3>
       });
     },
     _fetchTags() {
-      const url = getRouter().pluginRoute('pr_curves', '/tags');
+      const url = tf_backend.getRouter().pluginRoute('pr_curves', '/tags');
       return this._requestManager.request(url).then(runToTagInfo => {
         if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
           // No need to update anything if there are no changes.
           return;
         }
         const runToTag = _.mapValues(runToTagInfo, o => _.keys(o));
-        const tags = getTags(runToTag);
+        const tags = tf_backend.getTags(runToTag);
         this.set('_dataNotFound', tags.length === 0);
         this.set('_runToTagInfo', runToTagInfo);
       });
     },
     _fetchTimeEntriesPerRun() {
-      const url = getRouter().pluginRoute(
+      const url = tf_backend.getRouter().pluginRoute(
           'pr_curves', '/available_time_entries');
       return this._requestManager.request(url).then(timeEntriesPerRun => {
         // Compute the relative field for each time entry. For each step, the
@@ -246,10 +239,10 @@ <h3>No precision–recall curve data was found.</h3>
     },
     _makeCategories(runToTagInfo, selectedRuns, tagFilter) {
       const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-      return categorizeTags(runToTag, selectedRuns, tagFilter);
+      return tf_categorization_utils.categorizeTags(runToTag, selectedRuns, tagFilter);
     },
     _computeColorForRun(run) {
-      return runsColorScale(run);
+      return tf_color_scale.runsColorScale(run);
     },
     _computeRelevantSelectedRuns(selectedRuns, runToTagInfo) {
       return selectedRuns.filter(run => runToTagInfo[run]);
@@ -262,11 +255,11 @@ <h3>No precision–recall curve data was found.</h3>
       // All PR curve tags include the `/pr_curves` suffix. We can trim
       // that from the display name.
       const defaultDisplayName = tag.replace(/\/pr_curves$/, '');
-      return aggregateTagInfo(runToTagInfo, defaultDisplayName);
+      return tf_utils.aggregateTagInfo(runToTagInfo, defaultDisplayName);
     },
   });
 
-  registerDashboard({
+  tf_tensorboard.registerDashboard({
     plugin: 'pr_curves',
     elementName: 'tf-pr-curve-dashboard',
     tabName: 'PR Curves',
diff --git a/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-steps-selector.html b/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-steps-selector.html
index e9e1fbcac8..f92c3be77f 100644
--- a/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-steps-selector.html
+++ b/tensorboard/plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-steps-selector.html
@@ -67,7 +67,6 @@
     </style>
   </template>
   <script>
-  import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
   Polymer({
     is: "tf-pr-curve-steps-selector",
@@ -104,7 +103,7 @@
       "_updateStepsForNewRuns(runs, runToAvailableTimeEntries, _runToStepIndex)",
     ],
     _computeColorForRun(run) {
-      return runsColorScale(run);
+      return tf_color_scale.runsColorScale(run);
     },
     _computeTimeTextForRun(
         runToAvailableTimeEntries, runToStepIndex, run, timeDisplayType) {
diff --git a/tensorboard/plugins/profile/tf_op_profile/tf-op-details.html b/tensorboard/plugins/profile/tf_op_profile/tf-op-details.html
index af58f0634b..c3ecc9b648 100644
--- a/tensorboard/plugins/profile/tf_op_profile/tf-op-details.html
+++ b/tensorboard/plugins/profile/tf_op_profile/tf-op-details.html
@@ -33,8 +33,6 @@
 &nbsp;[[_percent(value)]]
   </template>
   <script>
-import {flameColor, percent} from './utils.js';
-
 Polymer({
   is: 'tf-op-bar',
   properties: {
@@ -44,10 +42,10 @@
       observer: '_updateValue',
     },
   },
-  _percent: percent,
+  _percent: tf_op_profile.percent,
   _updateValue: function(value) {
-    const color = flameColor(value);
-    const length = percent(value);
+    const color = tf_op_profile.flameColor(value);
+    const length = tf_op_profile.percent(value);
     this.style.background =
         `linear-gradient(to right, ${color} ${length}, #ccc ${length})`;
   },
@@ -146,8 +144,6 @@
   </template>
 
   <script>
-import {flameColor, utilization} from './utils.js';
-
 Polymer({
   is: 'tf-op-details',
   properties: {
@@ -157,10 +153,10 @@
       observer: '_updateCard',
     },
   },
-  _utilization: utilization,
+  _utilization: tf_op_profile.utilization,
   _updateCard: function(node){
     if (node == null) return;
-    var color = flameColor(utilization(node), 0.7);
+    var color = tf_op_profile.flameColor(tf_op_profile.utilization(node), 0.7);
     this.$.card.updateStyles({"--paper-card-header": "background-color:" + color});
     this.$.subheader.style.backgroundColor = color;
   },
@@ -176,7 +172,7 @@
     var ratio = dim.size / dim.alignment;
     // Colors should grade harshly: 50% in a dimension is already very bad.
     var harshCurve = (x) => 1 - Math.sqrt(1 - x);
-    return flameColor(ratio / Math.ceil(ratio), 1, 0.25, harshCurve);
+    return tf_op_profile.flameColor(ratio / Math.ceil(ratio), 1, 0.25, harshCurve);
   },
   _dimensionHint: function(dim) {
     if (!dim || !dim.alignment) return null;
diff --git a/tensorboard/plugins/profile/tf_op_profile/tf-op-profile.html b/tensorboard/plugins/profile/tf_op_profile/tf-op-profile.html
index a3b20d8665..a9c1bcf8a5 100644
--- a/tensorboard/plugins/profile/tf_op_profile/tf-op-profile.html
+++ b/tensorboard/plugins/profile/tf_op_profile/tf-op-profile.html
@@ -75,18 +75,13 @@ <h4>The most time was spent in a <b>[[_costlyOp.xla.category]] operation</b>
   </template>
 
   <script>
-import {addParams} from "../tf-backend/urlPathHelpers.js";
-import {RequestManager} from '../tf-backend/requestManager.js';
-import {getRouter} from '../tf-backend/router.js';
-import {flameColor, utilization, percent} from './utils.js';
-
 Polymer({
   is: 'tf-op-profile',
   properties: {
     _requestManager: {
       type: Object,
       readOnly: true,
-      value: () => new RequestManager(),
+      value: () => new tf_backend.RequestManager(),
     },
     run: {
       type: String,
@@ -112,15 +107,15 @@ <h4>The most time was spent in a <b>[[_costlyOp.xla.category]] operation</b>
     },
   },
   _load: function(run) {
-    this._requestManager.request(addParams(
-        getRouter().pluginRoute('profile', '/data'), {tag: 'op_profile', run})
+    this._requestManager.request(tf_backend.addParams(
+        tf_backend.getRouter().pluginRoute('profile', '/data'), {tag: 'op_profile', run})
     ).then((data) => {
       this._data = data;
     });
   },
   _getRoot: function(data, breakdown) { return data[breakdown]; },
-  _percent: percent,
-  _utilizationPercent: function(node) { return percent(utilization(node)); },
+  _percent: tf_op_profile.percent,
+  _utilizationPercent: function(node) { return tf_op_profile.percent(tf_op_profile.utilization(node)); },
   _worstOp: function(root, metric) {
     var worst = null, worstValue = -Infinity;
     function visit(node) {
@@ -134,8 +129,8 @@ <h4>The most time was spent in a <b>[[_costlyOp.xla.category]] operation</b>
     return worst;
   },
   _hasFlops: function(node) { return node.metrics.flops > 0; },
-  _goodFlops: function(node) { return utilization(node) > 0.4; },
-  _textColor: function(node) { return flameColor(utilization(node), 0.7); },
+  _goodFlops: function(node) { return tf_op_profile.utilization(node) > 0.4; },
+  _textColor: function(node) { return tf_op_profile.flameColor(tf_op_profile.utilization(node), 0.7); },
 });
   </script>
 </dom-module>
diff --git a/tensorboard/plugins/profile/tf_op_profile/tf-op-table.html b/tensorboard/plugins/profile/tf_op_profile/tf-op-table.html
index 3fdf373db1..2e68f0fc8e 100644
--- a/tensorboard/plugins/profile/tf_op_profile/tf-op-table.html
+++ b/tensorboard/plugins/profile/tf_op_profile/tf-op-table.html
@@ -225,8 +225,6 @@
   </template>
 
   <script>
-import {flameColor, percent, utilization} from './utils.js';
-
 Polymer({
   is: 'tf-op-table-entry',
   properties: {
@@ -272,21 +270,21 @@
   _handleHeaderMouseLeave: function(e) { this.headerHover(null); },
   _percent: function(node) {
     return (node.metrics && node.metrics.time)
-              ? percent(node.metrics.time) : "";
+              ? tf_op_profile.percent(node.metrics.time) : "";
   },
   _provenance: function(node) {
     return (node.xla && node.xla.provenance)
               ? node.xla.provenance.replace(/^.*\//, '') : "";
   },
   _utilization: function(node) {
-    return percent(utilization(node));
+    return tf_op_profile.percent(tf_op_profile.utilization(node));
   },
   _flameColor: function(node) {
-    return flameColor(utilization(node), 1, 0.2);
+    return tf_op_profile.flameColor(tf_op_profile.utilization(node), 1, 0.2);
   },
   _barWidth: function(node) {
     return (node.metrics && node.metrics.time)
-              ? percent(node.metrics.time) : 0;
+              ? tf_op_profile.percent(node.metrics.time) : 0;
   },
   _selectedChanged: function(v) { this.classList.toggle('selected', v); }
 });
diff --git a/tensorboard/plugins/profile/tf_op_profile/utils.ts b/tensorboard/plugins/profile/tf_op_profile/utils.ts
index e75306b12d..3318fb57ee 100644
--- a/tensorboard/plugins/profile/tf_op_profile/utils.ts
+++ b/tensorboard/plugins/profile/tf_op_profile/utils.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_op_profile {
 
 function rgba(red: number, green: number, blue: number, alpha: number) {
   return "rgba(" + Math.round(red * 255) + "," + Math.round(green * 255) +
@@ -48,3 +49,5 @@ export function percent(fraction: number) {
   return fraction >= 0.995 ? "100%" : fraction < 0.00001 ? "0.00%" :
     (fraction * 100).toPrecision(2) + "%";
 }
+
+}  // namespace tf_op_profile
diff --git a/tensorboard/plugins/profile/tf_profile_dashboard/tf-profile-dashboard.html b/tensorboard/plugins/profile/tf_profile_dashboard/tf-profile-dashboard.html
index 2a14b2b82c..bf1ba8f738 100644
--- a/tensorboard/plugins/profile/tf_profile_dashboard/tf-profile-dashboard.html
+++ b/tensorboard/plugins/profile/tf_profile_dashboard/tf-profile-dashboard.html
@@ -106,11 +106,6 @@ <h3>No profile data was found.</h3>
 <script>
   "use strict";
 
-  import {addParams} from "../tf-backend/urlPathHelpers.js";
-  import {RequestManager} from '../tf-backend/requestManager.js';
-  import {compareTagNames} from "../vz-sorting/sorting.js";
-  import {getRouter} from '../tf-backend/router.js';
-  import {registerDashboard} from '../tf-tensorboard/registry.js';
 
 
   Polymer({
@@ -118,7 +113,7 @@ <h3>No profile data was found.</h3>
     properties: {
       _requestManager: {
         type: Object,
-        value: () => new RequestManager(),
+        value: () => new tf_backend.RequestManager(),
       },
       _isAttached: Boolean,
       // Whether this dashboard is initialized. This dashboard should only be
@@ -183,8 +178,8 @@ <h3>No profile data was found.</h3>
       // Set this to true so we only initialize once.
       this._initialized = true;
       const profileTagsURL =
-        getRouter().pluginRoute('profile', '/tools') +
-        (getRouter().isDemoMode() ? '.json' : '');
+        tf_backend.getRouter().pluginRoute('profile', '/tools') +
+        (tf_backend.getRouter().isDemoMode() ? '.json' : '');
       this._requestManager.request(profileTagsURL).then((runToTool) => {
         var datasets = _.map(runToTool, (tools, run) => ({
           name: run,
@@ -194,7 +189,7 @@ <h3>No profile data was found.</h3>
           // The run name is currently a timestamp like "YYYY-MM-DD_HH:MM:SS".
           // Sort runs by timestamp in reversed order so that the latest run
           // comes first.
-          return 0 - compareTagNames(a.name, b.name);
+          return 0 - vz_sorting.compareTagNames(a.name, b.name);
         });
         this.set('_dataNotFound', datasets.length === 0);
         this.set('_datasets', datasets);
@@ -202,8 +197,8 @@ <h3>No profile data was found.</h3>
     },
     _maybeUpdateTool: function(datasets, selectedDataset, currentTool) {
       if (currentTool == "trace_viewer") {
-        var trace_data_url = addParams(
-            getRouter().pluginRoute('profile', '/data'),
+        var trace_data_url = tf_backend.addParams(
+            tf_backend.getRouter().pluginRoute('profile', '/data'),
             {tag: 'trace_viewer', run: datasets[selectedDataset].name});
         // Make the trace data url relative to the root.
         if (trace_data_url[0] != '/') {
@@ -246,7 +241,7 @@ <h3>No profile data was found.</h3>
     _run(datasets, index) { return datasets[index].name; },
   });
 
-  registerDashboard({
+  tf_tensorboard.registerDashboard({
     plugin: 'profile',
     elementName: 'tf-profile-dashboard',
   });
diff --git a/tensorboard/plugins/projector/vz_projector/analyticsLogger.ts b/tensorboard/plugins/projector/vz_projector/analyticsLogger.ts
index 9ffc08b4aa..7ae770cd08 100644
--- a/tensorboard/plugins/projector/vz_projector/analyticsLogger.ts
+++ b/tensorboard/plugins/projector/vz_projector/analyticsLogger.ts
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {ProjectionType} from './data.js';
+namespace vz_projector {
 
 export class AnalyticsLogger {
   private eventLogging: boolean;
@@ -65,3 +65,5 @@ export class AnalyticsLogger {
     }
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/bh_tsne.ts b/tensorboard/plugins/projector/vz_projector/bh_tsne.ts
index 53b40ba8ab..5a4b6e3ce3 100644
--- a/tensorboard/plugins/projector/vz_projector/bh_tsne.ts
+++ b/tensorboard/plugins/projector/vz_projector/bh_tsne.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 /**
  * This is a fork of the Karpathy's TSNE.js (original license below).
@@ -43,8 +44,6 @@ limitations under the License.
  * THE SOFTWARE.
  */
 
-import {SPNode, SPTree} from './sptree.js';
-
 type AugmSPNode = SPNode&{numCells: number, yCell: number[], rCell: number};
 
 /**
@@ -472,3 +471,5 @@ export class TSNE {
     return grad;
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/data-provider-demo.ts b/tensorboard/plugins/projector/vz_projector/data-provider-demo.ts
index 27e8b00c3d..2c166ea15a 100644
--- a/tensorboard/plugins/projector/vz_projector/data-provider-demo.ts
+++ b/tensorboard/plugins/projector/vz_projector/data-provider-demo.ts
@@ -12,11 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataSet, SpriteAndMetadataInfo, State} from './data.js';
-import {ProjectorConfig, DataProvider, EmbeddingInfo, TENSORS_MSG_ID} from './data-provider.js';
-import * as dataProvider from './data-provider.js';
-import * as logging from './logging.js';
+namespace vz_projector {
 
 const BYTES_EXTENSION = '.bytes';
 
@@ -75,7 +71,7 @@ export class DemoDataProvider implements DataProvider {
     let url = `${embedding.tensorPath}`;
     if (embedding.tensorPath.substr(-1 * BYTES_EXTENSION.length) ===
         BYTES_EXTENSION) {
-      dataProvider.retrieveTensorAsBytes(
+      retrieveTensorAsBytes(
           this, this.getEmbeddingInfo(tensorName), run, tensorName, url,
           callback);
     } else {
@@ -88,7 +84,7 @@ export class DemoDataProvider implements DataProvider {
         logging.setErrorMessage(request.responseText, 'fetching tensors');
       };
       request.onload = () => {
-        dataProvider.parseTensors(request.response).then(points => {
+        parseTensors(request.response).then(points => {
           callback(new DataSet(points));
         });
       };
@@ -103,7 +99,7 @@ export class DemoDataProvider implements DataProvider {
     if (embedding.sprite && embedding.sprite.imagePath) {
       spriteImagePath = embedding.sprite.imagePath;
     }
-    dataProvider.retrieveSpriteAndMetadataInfo(
+    retrieveSpriteAndMetadataInfo(
         embedding.metadataPath, spriteImagePath, embedding.sprite, callback);
   }
 
@@ -125,3 +121,5 @@ export class DemoDataProvider implements DataProvider {
     xhr.send();
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/data-provider-proto.ts b/tensorboard/plugins/projector/vz_projector/data-provider-proto.ts
index 4d3f48cf48..3c782823dd 100644
--- a/tensorboard/plugins/projector/vz_projector/data-provider-proto.ts
+++ b/tensorboard/plugins/projector/vz_projector/data-provider-proto.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataPoint, DataProto, DataSet, SpriteAndMetadataInfo, PointMetadata, State} from './data.js';
-import {analyzeMetadata, ProjectorConfig, DataProvider} from './data-provider.js';
-
+namespace vz_projector {
 
 export class ProtoDataProvider implements DataProvider {
   private dataProto: DataProto;
@@ -105,3 +102,5 @@ export class ProtoDataProvider implements DataProvider {
     return new DataSet(points);
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/data-provider-server.ts b/tensorboard/plugins/projector/vz_projector/data-provider-server.ts
index 1fe142a87e..c214d14cdc 100644
--- a/tensorboard/plugins/projector/vz_projector/data-provider-server.ts
+++ b/tensorboard/plugins/projector/vz_projector/data-provider-server.ts
@@ -12,11 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataSet, SpriteAndMetadataInfo, State} from './data.js';
-import * as dataProvider from './data-provider.js';
-import {DataProvider, EmbeddingInfo, ProjectorConfig} from './data-provider.js';
-import * as logging from './logging.js';
+namespace vz_projector {
 
 // Limit for the number of data points we receive from the server.
 export const LIMIT_NUM_POINTS = 100000;
@@ -90,7 +86,7 @@ export class ServerDataProvider implements DataProvider {
   retrieveTensor(run: string, tensorName: string,
       callback: (ds: DataSet) => void) {
     this.getEmbeddingInfo(run, tensorName, embedding => {
-      dataProvider.retrieveTensorAsBytes(
+      retrieveTensorAsBytes(
           this, embedding, run, tensorName,
           `${this.routePrefix}/tensor?run=${run}&name=${tensorName}` +
               `&num_rows=${LIMIT_NUM_POINTS}`,
@@ -112,7 +108,7 @@ export class ServerDataProvider implements DataProvider {
         spriteImagePath =
             `${this.routePrefix}/sprite_image?run=${run}&name=${tensorName}`;
       }
-      dataProvider.retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath,
+      retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath,
           embedding.sprite, callback);
     });
   }
@@ -135,3 +131,5 @@ export class ServerDataProvider implements DataProvider {
     xhr.send();
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/data-provider.ts b/tensorboard/plugins/projector/vz_projector/data-provider.ts
index 36974dd91a..7637df08f4 100644
--- a/tensorboard/plugins/projector/vz_projector/data-provider.ts
+++ b/tensorboard/plugins/projector/vz_projector/data-provider.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {ColumnStats, DataPoint, DataSet, SpriteAndMetadataInfo, PointMetadata, State} from './data.js';
-import * as logging from './logging.js';
-import {runAsyncTask} from './util.js';
+namespace vz_projector {
 
 /** Maximum number of colors supported in the color map. */
 const NUM_COLORS_COLOR_MAP = 50;
@@ -249,7 +246,7 @@ export function parseTensors(
 /** Parses a tsv text file. */
 export function parseTensorsFromFloat32Array(data: Float32Array,
     dim: number): Promise<DataPoint[]> {
-  return runAsyncTask('Parsing tensors...', () => {
+  return util.runAsyncTask('Parsing tensors...', () => {
     const N = data.length / dim;
     const dataPoints: DataPoint[] = [];
     let offset = 0;
@@ -441,3 +438,5 @@ export function retrieveSpriteAndMetadataInfo(metadataPath: string,
     }
   });
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/data.ts b/tensorboard/plugins/projector/vz_projector/data.ts
index 4d3f22a07b..ba9f7ccf94 100644
--- a/tensorboard/plugins/projector/vz_projector/data.ts
+++ b/tensorboard/plugins/projector/vz_projector/data.ts
@@ -12,14 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {TSNE} from './bh_tsne.js';
-import {SpriteMetadata} from './data-provider.js';
-import * as knn from './knn.js';
-import * as logging from './logging.js';
-import * as scatterPlot from './scatterPlot.js';
-import * as util from './util.js';
-import * as vector from './vector.js';
+namespace vz_projector {
 
 export type DistanceFunction = (a: number[], b: number[]) => number;
 export type ProjectionComponents3D = [string, string, string];
@@ -512,7 +505,7 @@ export class State {
   selectedPoints: number[] = [];
 
   /** Camera state (2d/3d, position, target, zoom, etc). */
-  cameraDef: scatterPlot.CameraDef;
+  cameraDef: CameraDef;
 
   /** Color by option. */
   selectedColorOptionName: string;
@@ -559,3 +552,5 @@ export function stateGetAccessorDimensions(state: State): Array<number|string> {
   }
   return dimensions;
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/heap.ts b/tensorboard/plugins/projector/vz_projector/heap.ts
index 0316b630a5..699d504a5a 100644
--- a/tensorboard/plugins/projector/vz_projector/heap.ts
+++ b/tensorboard/plugins/projector/vz_projector/heap.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 /** Min key heap. */
 export type HeapItem<T> = {
@@ -144,3 +145,5 @@ export class KMin<T> {
     return this.maxHeap.size() === 0 ? null : -this.maxHeap.peek().key;
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/knn.ts b/tensorboard/plugins/projector/vz_projector/knn.ts
index b8e9bbd13f..90a84ccd14 100644
--- a/tensorboard/plugins/projector/vz_projector/knn.ts
+++ b/tensorboard/plugins/projector/vz_projector/knn.ts
@@ -12,12 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {runAsyncTask} from './util.js';
-import * as logging from './logging.js';
-import {KMin} from './heap.js';
-import {Vector} from './vector.js';
-import * as vector from './vector.js';
+namespace vz_projector.knn {
 
 export type NearestEntry = {
   index: number,
@@ -75,7 +70,7 @@ export function findKNNGPUCosine<T>(
   function step(resolve: (result: NearestEntry[][]) => void) {
     let progressMsg =
         'Finding nearest neighbors: ' + (progress * 100).toFixed() + '%';
-    runAsyncTask(progressMsg, () => {
+    util.runAsyncTask(progressMsg, () => {
       let B = piece < modulo ? M + 1 : M;
       let typedB = new Float32Array(B * dim);
       for (let i = 0; i < B; ++i) {
@@ -141,9 +136,9 @@ export function findKNNGPUCosine<T>(
  */
 export function findKNN<T>(
     dataPoints: T[], k: number, accessor: (dataPoint: T) => Float32Array,
-    dist: (a: Vector, b: Vector, limit: number) =>
+    dist: (a: vector.Vector, b: vector.Vector, limit: number) =>
         number): Promise<NearestEntry[][]> {
-  return runAsyncTask<NearestEntry[][]>('Finding nearest neighbors...', () => {
+  return util.runAsyncTask<NearestEntry[][]>('Finding nearest neighbors...', () => {
     let N = dataPoints.length;
     let nearest: NearestEntry[][] = new Array(N);
     // Find the distances from node i.
@@ -220,7 +215,7 @@ function minDist(
 export function findKNNofPoint<T>(
     dataPoints: T[], pointIndex: number, k: number,
     accessor: (dataPoint: T) => Float32Array,
-    distance: (a: Vector, b: Vector) => number) {
+    distance: (a: vector.Vector, b: vector.Vector) => number) {
   let kMin = new KMin<NearestEntry>(k);
   let a = accessor(dataPoints[pointIndex]);
   for (let i = 0; i < dataPoints.length; ++i) {
@@ -233,3 +228,5 @@ export function findKNNofPoint<T>(
   }
   return kMin.getMinKItems();
 }
+
+}  // namespace vz_projector.knn
diff --git a/tensorboard/plugins/projector/vz_projector/label.ts b/tensorboard/plugins/projector/vz_projector/label.ts
index 67987f06ea..73e41915e6 100644
--- a/tensorboard/plugins/projector/vz_projector/label.ts
+++ b/tensorboard/plugins/projector/vz_projector/label.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 export interface BoundingBox {
   loX: number;
@@ -149,3 +150,5 @@ export class CollisionGrid {
     return Math.floor((y - this.bound.loY) / this.cellHeight);
   };
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/logging.ts b/tensorboard/plugins/projector/vz_projector/logging.ts
index 59f3720601..5e46325e27 100644
--- a/tensorboard/plugins/projector/vz_projector/logging.ts
+++ b/tensorboard/plugins/projector/vz_projector/logging.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector.logging {
 
 /** Duration in ms for showing warning messages to the user */
 const WARNING_DURATION_MS = 10000;
@@ -101,3 +102,5 @@ export function setWarningMessage(msg: string): void {
   toast.duration = WARNING_DURATION_MS;
   toast.open();
 }
+
+}  // namespace vz_projector.logging
diff --git a/tensorboard/plugins/projector/vz_projector/projectorEventContext.ts b/tensorboard/plugins/projector/vz_projector/projectorEventContext.ts
index 18f2834998..4ef3290679 100644
--- a/tensorboard/plugins/projector/vz_projector/projectorEventContext.ts
+++ b/tensorboard/plugins/projector/vz_projector/projectorEventContext.ts
@@ -12,13 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DistanceFunction, Projection} from './data.js';
-import {NearestEntry} from './knn.js';
+namespace vz_projector {
 
 export type HoverListener = (index: number) => void;
 export type SelectionChangedListener =
-    (selectedPointIndices: number[], neighborsOfFirstPoint: NearestEntry[]) =>
+    (selectedPointIndices: number[], neighborsOfFirstPoint: knn.NearestEntry[]) =>
         void;
 export type ProjectionChangedListener = (projection: Projection) => void;
 export type DistanceMetricChangedListener =
@@ -43,3 +41,5 @@ export interface ProjectorEventContext {
                                             DistanceMetricChangedListener);
   notifyDistanceMetricChanged(distMetric: DistanceFunction);
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/projectorScatterPlotAdapter.ts b/tensorboard/plugins/projector/vz_projector/projectorScatterPlotAdapter.ts
index 42c1a4a5b2..cc4a7e337f 100644
--- a/tensorboard/plugins/projector/vz_projector/projectorScatterPlotAdapter.ts
+++ b/tensorboard/plugins/projector/vz_projector/projectorScatterPlotAdapter.ts
@@ -12,17 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataSet, DistanceFunction, Projection, ProjectionComponents3D, State} from './data.js';
-import {NearestEntry} from './knn.js';
-import {ProjectorEventContext} from './projectorEventContext.js';
-import {LabelRenderParams} from './renderContext.js';
-import {ScatterPlot} from './scatterPlot.js';
-import {ScatterPlotVisualizer3DLabels} from './scatterPlotVisualizer3DLabels.js';
-import {ScatterPlotVisualizerCanvasLabels} from './scatterPlotVisualizerCanvasLabels.js';
-import {ScatterPlotVisualizerPolylines} from './scatterPlotVisualizerPolylines.js';
-import {ScatterPlotVisualizerSprites} from './scatterPlotVisualizerSprites.js';
-import * as vector from './vector.js';
+namespace vz_projector {
 
 const LABEL_FONT_SIZE = 10;
 const LABEL_SCALE_DEFAULT = 1.0;
@@ -79,7 +69,7 @@ export class ProjectorScatterPlotAdapter {
   private projection: Projection;
   private hoverPointIndex: number;
   private selectedPointIndices: number[];
-  private neighborsOfFirstSelectedPoint: NearestEntry[];
+  private neighborsOfFirstSelectedPoint: knn.NearestEntry[];
   private renderLabelsIn3D: boolean = false;
   private labelPointAccessor: string;
   private legendPointColorer: (ds: DataSet, index: number) => string;
@@ -297,7 +287,7 @@ export class ProjectorScatterPlotAdapter {
 
   generateVisibleLabelRenderParams(
       ds: DataSet, selectedPointIndices: number[],
-      neighborsOfFirstPoint: NearestEntry[],
+      neighborsOfFirstPoint: knn.NearestEntry[],
       hoverPointIndex: number): LabelRenderParams {
     if (ds == null) {
       return null;
@@ -382,7 +372,7 @@ export class ProjectorScatterPlotAdapter {
 
   generatePointScaleFactorArray(
       ds: DataSet, selectedPointIndices: number[],
-      neighborsOfFirstPoint: NearestEntry[],
+      neighborsOfFirstPoint: knn.NearestEntry[],
       hoverPointIndex: number): Float32Array {
     if (ds == null) {
       return new Float32Array(0);
@@ -506,7 +496,7 @@ export class ProjectorScatterPlotAdapter {
   generatePointColorArray(
       ds: DataSet, legendPointColorer: (ds: DataSet, index: number) => string,
       distFunc: DistanceFunction, selectedPointIndices: number[],
-      neighborsOfFirstPoint: NearestEntry[], hoverPointIndex: number,
+      neighborsOfFirstPoint: knn.NearestEntry[], hoverPointIndex: number,
       label3dMode: boolean, spriteImageMode: boolean): Float32Array {
     if (ds == null) {
       return new Float32Array(0);
@@ -709,3 +699,5 @@ export function dist2color(
     distFunc: DistanceFunction, d: number, minDist: number): string {
   return NN_COLOR_SCALE(normalizeDist(distFunc, d, minDist));
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/renderContext.ts b/tensorboard/plugins/projector/vz_projector/renderContext.ts
index 54ed6fbed6..c577415434 100644
--- a/tensorboard/plugins/projector/vz_projector/renderContext.ts
+++ b/tensorboard/plugins/projector/vz_projector/renderContext.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 /**
  * LabelRenderParams describes the set of points that should have labels
@@ -51,3 +52,5 @@ export class RenderContext {
       public polylineOpacities: Float32Array,
       public polylineWidths: Float32Array) {}
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlot.ts b/tensorboard/plugins/projector/vz_projector/scatterPlot.ts
index d3f09cb582..d94b629e31 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlot.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlot.ts
@@ -12,13 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {ProjectorEventContext} from './projectorEventContext.js';
-import {CameraType, LabelRenderParams, RenderContext} from './renderContext.js';
-import {BoundingBox, ScatterPlotRectangleSelector} from './scatterPlotRectangleSelector.js';
-import {ScatterPlotVisualizer} from './scatterPlotVisualizer.js';
-import * as util from './util.js';
-import {Point2D, Point3D} from './vector.js';
+namespace vz_projector {
 
 const BACKGROUND_COLOR = 0xffffff;
 
@@ -60,8 +54,8 @@ export enum MouseMode {
 /** Defines a camera, suitable for serialization. */
 export class CameraDef {
   orthographic: boolean = false;
-  position: Point3D;
-  target: Point3D;
+  position: vector.Point3D;
+  target: vector.Point3D;
   zoom: number;
 }
 
@@ -128,7 +122,7 @@ export class ScatterPlot {
 
     this.rectangleSelector = new ScatterPlotRectangleSelector(
         this.container,
-        (boundingBox: BoundingBox) => this.selectBoundingBox(boundingBox));
+        (boundingBox: ScatterBoundingBox) => this.selectBoundingBox(boundingBox));
     this.addInteractionListeners();
   }
 
@@ -375,7 +369,7 @@ export class ScatterPlot {
    * texture.
    * @param boundingBox The bounding box to select from.
    */
-  private getPointIndicesFromPickingTexture(boundingBox: BoundingBox):
+  private getPointIndicesFromPickingTexture(boundingBox: ScatterBoundingBox):
       number[] {
     if (this.worldSpacePointPositions == null) {
       return null;
@@ -417,7 +411,7 @@ export class ScatterPlot {
   }
 
 
-  private selectBoundingBox(boundingBox: BoundingBox) {
+  private selectBoundingBox(boundingBox: ScatterBoundingBox) {
     let pointIndices = this.getPointIndicesFromPickingTexture(boundingBox);
     this.projectorEventContext.notifySelectionChanged(pointIndices);
   }
@@ -428,12 +422,12 @@ export class ScatterPlot {
       return;
     }
     const boundingBox:
-        BoundingBox = {x: e.offsetX, y: e.offsetY, width: 1, height: 1};
+        ScatterBoundingBox = {x: e.offsetX, y: e.offsetY, width: 1, height: 1};
     const pointIndices = this.getPointIndicesFromPickingTexture(boundingBox);
     this.nearestPoint = (pointIndices != null) ? pointIndices[0] : null;
   }
 
-  private getLayoutValues(): Point2D {
+  private getLayoutValues(): vector.Point2D {
     this.width = this.container.offsetWidth;
     this.height = Math.max(1, this.container.offsetHeight);
     return [this.width, this.height];
@@ -493,19 +487,19 @@ export class ScatterPlot {
   }
 
   /** Gets the current camera position. */
-  getCameraPosition(): Point3D {
+  getCameraPosition(): vector.Point3D {
     const currPos = this.camera.position;
     return [currPos.x, currPos.y, currPos.z];
   }
 
   /** Gets the current camera target. */
-  getCameraTarget(): Point3D {
+  getCameraTarget(): vector.Point3D {
     let currTarget = this.orbitCameraControls.target;
     return [currTarget.x, currTarget.y, currTarget.z];
   }
 
   /** Sets up the camera from given position and target coordinates. */
-  setCameraPositionAndTarget(position: Point3D, target: Point3D) {
+  setCameraPositionAndTarget(position: vector.Point3D, target: vector.Point3D) {
     this.stopOrbitAnimation();
     this.camera.position.set(position[0], position[1], position[2]);
     this.orbitCameraControls.target.set(target[0], target[1], target[2]);
@@ -721,3 +715,5 @@ export class ScatterPlot {
     this.onClick(null, false);
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlotRectangleSelector.ts b/tensorboard/plugins/projector/vz_projector/scatterPlotRectangleSelector.ts
index a781877014..70c9556859 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlotRectangleSelector.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlotRectangleSelector.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 const FILL = '#dddddd';
 const FILL_OPACITY = .2;
@@ -19,7 +20,7 @@ const STROKE = '#aaaaaa';
 const STROKE_WIDTH = 2;
 const STROKE_DASHARRAY = '10 5';
 
-export interface BoundingBox {
+export interface ScatterBoundingBox {
   // The bounding box (x, y) position refers to the bottom left corner of the
   // rect.
   x: number;
@@ -37,9 +38,9 @@ export class ScatterPlotRectangleSelector {
 
   private isMouseDown: boolean;
   private startCoordinates: [number, number];
-  private lastBoundingBox: BoundingBox;
+  private lastBoundingBox: ScatterBoundingBox;
 
-  private selectionCallback: (boundingBox: BoundingBox) => void;
+  private selectionCallback: (boundingBox: ScatterBoundingBox) => void;
 
   /**
    * @param container The container HTML element that the selection SVG rect
@@ -50,7 +51,7 @@ export class ScatterPlotRectangleSelector {
    */
   constructor(
       container: HTMLElement,
-      selectionCallback: (boundingBox: BoundingBox) => void) {
+      selectionCallback: (boundingBox: ScatterBoundingBox) => void) {
     this.svgElement = container.querySelector('#selector') as SVGElement;
     this.rectElement =
         document.createElementNS('http://www.w3.org/2000/svg', 'rect');
@@ -105,3 +106,5 @@ export class ScatterPlotRectangleSelector {
     this.selectionCallback(this.lastBoundingBox);
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer.ts b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer.ts
index 691b7a814b..6de1dfb029 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {RenderContext} from './renderContext.js';
+namespace vz_projector {
 
 /**
  * ScatterPlotVisualizer is an interface used by ScatterPlotContainer
@@ -49,3 +48,5 @@ export interface ScatterPlotVisualizer {
    */
   onResize(newWidth: number, newHeight: number);
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer3DLabels.ts b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer3DLabels.ts
index 57b79cd673..829f9fbce6 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer3DLabels.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizer3DLabels.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {RenderContext} from './renderContext.js';
-import {ScatterPlotVisualizer} from './scatterPlotVisualizer.js';
-import * as util from './util.js';
+namespace vz_projector {
 
 const FONT_SIZE = 80;
 const ONE_OVER_FONT_SIZE = 1 / FONT_SIZE;
@@ -365,3 +362,5 @@ export class ScatterPlotVisualizer3DLabels implements ScatterPlotVisualizer {
 
   onResize(newWidth: number, newHeight: number) {}
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerCanvasLabels.ts b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerCanvasLabels.ts
index d0cd535e90..0844861113 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerCanvasLabels.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerCanvasLabels.ts
@@ -12,11 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {BoundingBox, CollisionGrid} from './label.js';
-import {CameraType, RenderContext} from './renderContext.js';
-import {ScatterPlotVisualizer} from './scatterPlotVisualizer.js';
-import * as util from './util.js';
+namespace vz_projector {
 
 const MAX_LABELS_ON_SCREEN = 10000;
 const LABEL_STROKE_WIDTH = 3;
@@ -184,3 +180,5 @@ export class ScatterPlotVisualizerCanvasLabels implements
   setScene(scene: THREE.Scene) {}
   onPickingRender(renderContext: RenderContext) {}
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerPolylines.ts b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerPolylines.ts
index a077d7ce3f..5361f930bb 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerPolylines.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerPolylines.ts
@@ -12,11 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataSet} from './data.js';
-import {RenderContext} from './renderContext.js';
-import {ScatterPlotVisualizer} from './scatterPlotVisualizer.js';
-import * as util from './util.js';
+namespace vz_projector {
 
 const RGB_NUM_ELEMENTS = 3;
 const XYZ_NUM_ELEMENTS = 3;
@@ -147,3 +143,5 @@ export class ScatterPlotVisualizerPolylines implements ScatterPlotVisualizer {
   onPickingRender(renderContext: RenderContext) {}
   onResize(newWidth: number, newHeight: number) {}
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerSprites.ts b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerSprites.ts
index 02b00dbe91..3d3f47d987 100644
--- a/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerSprites.ts
+++ b/tensorboard/plugins/projector/vz_projector/scatterPlotVisualizerSprites.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {CameraType, RenderContext} from './renderContext.js';
-import {ScatterPlotVisualizer} from './scatterPlotVisualizer.js';
-import * as util from './util.js';
+namespace vz_projector {
 
 const NUM_POINTS_FOG_THRESHOLD = 5000;
 const MIN_POINT_SIZE = 5.0;
@@ -445,3 +442,5 @@ export class ScatterPlotVisualizerSprites implements ScatterPlotVisualizer {
 
   onResize(newWidth: number, newHeight: number) {}
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/sptree.ts b/tensorboard/plugins/projector/vz_projector/sptree.ts
index 991369a335..a9e3ed1b1b 100644
--- a/tensorboard/plugins/projector/vz_projector/sptree.ts
+++ b/tensorboard/plugins/projector/vz_projector/sptree.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 /** N-dimensional point. Usually 2D or 3D. */
 export type Point = number[];
@@ -173,3 +174,5 @@ function fillArray<T>(arr: T[], value: T): void {
     arr[i] = value;
   }
 }
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/test/BUILD b/tensorboard/plugins/projector/vz_projector/test/BUILD
index e7eaae950c..4f39fae07b 100644
--- a/tensorboard/plugins/projector/vz_projector/test/BUILD
+++ b/tensorboard/plugins/projector/vz_projector/test/BUILD
@@ -27,4 +27,3 @@ ts_web_library(
         "//tensorboard/plugins/projector/vz_projector",
     ],
 )
-
diff --git a/tensorboard/plugins/projector/vz_projector/test/assert.ts b/tensorboard/plugins/projector/vz_projector/test/assert.ts
index f489517a7f..9ebdb59af1 100644
--- a/tensorboard/plugins/projector/vz_projector/test/assert.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/assert.ts
@@ -12,5 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector.test {
 
-const assert = chai.assert;
+export const assert = chai.assert;
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/test/data-provider_test.ts b/tensorboard/plugins/projector/vz_projector/test/data-provider_test.ts
index b872540e26..940cf49fb6 100644
--- a/tensorboard/plugins/projector/vz_projector/test/data-provider_test.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/data-provider_test.ts
@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataPoint, SpriteAndMetadataInfo} from '../data.js';
-import * as data_provider from '../data-provider.js';
+namespace vz_projector.test {
 
 /**
  * Converts a string to an ArrayBuffer.
@@ -46,7 +44,7 @@ describe('parse tensors', () => {
     let tensors = [[1.0, 2.0], [2.0, 3.0]];
     stringToArrayBuffer(dataToTsv(tensors))
         .then((tensorsArrayBuffer: ArrayBuffer) => {
-          data_provider.parseTensors(tensorsArrayBuffer)
+          parseTensors(tensorsArrayBuffer)
               .then((data: DataPoint[]) => {
                 assert.equal(2, data.length);
 
@@ -66,7 +64,7 @@ describe('parse tensors', () => {
 
     stringToArrayBuffer(dataToTsv(metadata))
         .then((metadataArrayBuffer: ArrayBuffer) => {
-          data_provider.parseMetadata(metadataArrayBuffer)
+          parseMetadata(metadataArrayBuffer)
               .then((spriteAndMetadataInfo: SpriteAndMetadataInfo) => {
                 assert.equal(2, spriteAndMetadataInfo.stats.length);
                 assert.equal(metadata[0][0],
@@ -94,3 +92,5 @@ describe('parse tensors', () => {
         });
   });
 });
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/test/data_test.ts b/tensorboard/plugins/projector/vz_projector/test/data_test.ts
index 1fd0a9055b..608326d727 100644
--- a/tensorboard/plugins/projector/vz_projector/test/data_test.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/data_test.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataPoint, DataSet, State, stateGetAccessorDimensions} from '../data.js';
+namespace vz_projector.test {
 
 /**
  * Helper method that makes a list of points given an array of
@@ -102,3 +101,5 @@ describe('stateGetAccessorDimensions', () => {
     assert.deepEqual(['x', 'y'], stateGetAccessorDimensions(state));
   });
 });
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/test/scatterPlotRectangleSelector_test.ts b/tensorboard/plugins/projector/vz_projector/test/scatterPlotRectangleSelector_test.ts
index ef06734a96..bd16dc8e39 100644
--- a/tensorboard/plugins/projector/vz_projector/test/scatterPlotRectangleSelector_test.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/scatterPlotRectangleSelector_test.ts
@@ -12,12 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {BoundingBox, ScatterPlotRectangleSelector} from '../scatterPlotRectangleSelector.js';
+namespace vz_projector.test {
 
 describe('selector callbacks make bounding box start bottom left', () => {
   let containerElement: HTMLElement;
-  let selectionCallback: (boundingBox: BoundingBox) => void;
+  let selectionCallback: (boundingBox: ScatterBoundingBox) => void;
   let selection: ScatterPlotRectangleSelector;
 
   beforeEach(() => {
@@ -67,3 +66,5 @@ describe('selector callbacks make bounding box start bottom left', () => {
         .toHaveBeenCalledWith({x: 0, y: 10, width: 10, height: 10});
   });
 });
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/test/sptree_test.ts b/tensorboard/plugins/projector/vz_projector/test/sptree_test.ts
index 5fa4737110..4706e32f93 100644
--- a/tensorboard/plugins/projector/vz_projector/test/sptree_test.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/sptree_test.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {SPTree} from '../sptree.js';
+namespace vz_projector.test {
 
 it('simple 2D data', () => {
   let data = [
@@ -100,3 +99,5 @@ it('Search in random data', () => {
   assert.equal(found, true);
   assert.isBelow(numVisits, N / 4);
 });
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/test/util_test.ts b/tensorboard/plugins/projector/vz_projector/test/util_test.ts
index 9f9767a978..c3095b2cda 100644
--- a/tensorboard/plugins/projector/vz_projector/test/util_test.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/util_test.ts
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import * as util from '../util.js';
+namespace vz_projector.test {
 
 describe('getURLParams', () => {
   it('search query with valid param returns correct object', () => {
@@ -40,3 +40,5 @@ describe('getURLParams', () => {
     assert.deepEqual({}, urlParams);
   });
 });
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/test/vz-projector-projections-panel_test.ts b/tensorboard/plugins/projector/vz_projector/test/vz-projector-projections-panel_test.ts
index eaf9972805..b2a0d30e04 100644
--- a/tensorboard/plugins/projector/vz_projector/test/vz-projector-projections-panel_test.ts
+++ b/tensorboard/plugins/projector/vz_projector/test/vz-projector-projections-panel_test.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {State} from '../data.js';
-import {ProjectionsPanel} from '../vz-projector-projections-panel.js';
+namespace vz_projector.test {
 
 describe('restoreUIFromBookmark', () => {
   let projectionsPanel: ProjectionsPanel;
@@ -105,3 +104,5 @@ describe('populateBookmarkFromUI', () => {
     assert.deepEqual([0, 1, 2], s.pcaComponentDimensions);
   });
 });
+
+}  // namespace vz_projector.test
diff --git a/tensorboard/plugins/projector/vz_projector/util.ts b/tensorboard/plugins/projector/vz_projector/util.ts
index f588f54ac9..511289a771 100644
--- a/tensorboard/plugins/projector/vz_projector/util.ts
+++ b/tensorboard/plugins/projector/vz_projector/util.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DataPoint} from './data.js';
-import * as logging from './logging.js';
-import {Point2D} from './vector.js';
+namespace vz_projector.util {
 
 /**
  * Delay for running expensive tasks, in milliseconds.
@@ -71,12 +68,12 @@ export function classed(
 
 /** Projects a 3d point into screen space */
 export function vector3DToScreenCoords(
-    cam: THREE.Camera, w: number, h: number, v: THREE.Vector3): Point2D {
+    cam: THREE.Camera, w: number, h: number, v: THREE.Vector3): vector.Point2D {
   let dpr = window.devicePixelRatio;
   let pv = new THREE.Vector3().copy(v).project(cam);
 
   // The screen-space origin is at the middle of the screen, with +y up.
-  let coords: Point2D =
+  let coords: vector.Point2D =
       [((pv.x + 1) / 2 * w) * dpr, -((pv.y - 1) / 2 * h) * dpr];
   return coords;
 }
@@ -250,3 +247,5 @@ export function hasWebGLSupport(): boolean {
     return false;
   }
 }
+
+}  // namespace vz_projector.util
diff --git a/tensorboard/plugins/projector/vz_projector/vector.ts b/tensorboard/plugins/projector/vz_projector/vector.ts
index 8494a58ad8..0439b9f0a8 100644
--- a/tensorboard/plugins/projector/vz_projector/vector.ts
+++ b/tensorboard/plugins/projector/vz_projector/vector.ts
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {assert} from './util.js';
+namespace vz_projector.vector {
 
 /**
  * @fileoverview Useful vector utilities.
@@ -25,7 +24,7 @@ export type Point3D = [number, number, number];
 
 /** Returns the dot product of two vectors. */
 export function dot(a: Vector, b: Vector): number {
-  assert(a.length === b.length, 'Vectors a and b must be of same length');
+  util.assert(a.length === b.length, 'Vectors a and b must be of same length');
   let result = 0;
   for (let i = 0; i < a.length; ++i) {
     result += a[i] * b[i];
@@ -44,7 +43,7 @@ export function sum(a: Vector): number {
 
 /** Returns the sum of two vectors, i.e. a + b */
 export function add(a: Vector, b: Vector): Float32Array {
-  assert(a.length === b.length, 'Vectors a and b must be of same length');
+  util.assert(a.length === b.length, 'Vectors a and b must be of same length');
   let result = new Float32Array(a.length);
   for (let i = 0; i < a.length; ++i) {
     result[i] = a[i] + b[i];
@@ -54,7 +53,7 @@ export function add(a: Vector, b: Vector): Float32Array {
 
 /** Subtracts vector b from vector a, i.e. returns a - b */
 export function sub(a: Vector, b: Vector): Float32Array {
-  assert(a.length === b.length, 'Vectors a and b must be of same length');
+  util.assert(a.length === b.length, 'Vectors a and b must be of same length');
   let result = new Float32Array(a.length);
   for (let i = 0; i < a.length; ++i) {
     result[i] = a[i] - b[i];
@@ -78,7 +77,7 @@ export function dist(a: Vector, b: Vector): number {
 
 /** Returns the square euclidean distance between two vectors. */
 export function dist2(a: Vector, b: Vector): number {
-  assert(a.length === b.length, 'Vectors a and b must be of same length');
+  util.assert(a.length === b.length, 'Vectors a and b must be of same length');
   let result = 0;
   for (let i = 0; i < a.length; ++i) {
     let diff = a[i] - b[i];
@@ -112,7 +111,7 @@ export function dist_3D(a: Vector, b: Vector): number {
  * exit (returns -1) if the distance is >= to the provided limit.
  */
 export function dist2WithLimit(a: Vector, b: Vector, limit: number): number {
-  assert(a.length === b.length, 'Vectors a and b must be of same length');
+  util.assert(a.length === b.length, 'Vectors a and b must be of same length');
   let result = 0;
   for (let i = 0; i < a.length; ++i) {
     let diff = a[i] - b[i];
@@ -134,7 +133,7 @@ export function dist22D(a: Point2D, b: Point2D): number {
 /** Modifies the vector in-place to have unit norm. */
 export function unit(a: Vector): void {
   let norm = Math.sqrt(norm2(a));
-  assert(norm >= 0, 'Norm of the vector must be > 0');
+  util.assert(norm >= 0, 'Norm of the vector must be > 0');
   for (let i = 0; i < a.length; ++i) {
     a[i] /= norm;
   }
@@ -183,7 +182,7 @@ export function centroid<T>(dataPoints: T[], accessor?: (a: T) => Vector):
   if (accessor == null) {
     accessor = (a: T) => <any>a;
   }
-  assert(dataPoints.length >= 0, '`vectors` must be of length >= 1');
+  util.assert(dataPoints.length >= 0, '`vectors` must be of length >= 1');
   let centroid = new Float32Array(accessor(dataPoints[0]).length);
   for (let i = 0; i < dataPoints.length; ++i) {
     let dataPoint = dataPoints[i];
@@ -263,3 +262,5 @@ export function transposeTypedArray(
   }
   return result;
 }
+
+}  // namespace vz_projector.vector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-bookmark-panel.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-bookmark-panel.ts
index 36ebe7ae76..63024331ec 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-bookmark-panel.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-bookmark-panel.ts
@@ -12,13 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {State} from './data.js';
-import {DataProvider, EmbeddingInfo} from './data-provider.js';
-import * as logging from './logging.js';
-import {ProjectorEventContext} from './projectorEventContext.js';
-import {Projector} from './vz-projector.js';
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 // tslint:disable-next-line
 export let BookmarkPanelPolymer = PolymerElement({
@@ -281,3 +275,5 @@ export class BookmarkPanel extends BookmarkPanelPolymer {
   }
 }
 document.registerElement(BookmarkPanel.prototype.is, BookmarkPanel);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-dashboard.html b/tensorboard/plugins/projector/vz_projector/vz-projector-dashboard.html
index fd4a57a13e..9d0a995a09 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-dashboard.html
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-dashboard.html
@@ -62,8 +62,6 @@ <h3>
   </template>
 </template>
 <script>
-import {getRouter} from '../tf-backend/router.js';
-import {registerDashboard} from '../tf-tensorboard/registry.js';
 
 Polymer({
   is: 'vz-projector-dashboard',
@@ -71,7 +69,7 @@ <h3>
     dataNotFound: Boolean,
     _routePrefix: {
       type: String,
-      value: () => getRouter().pluginRoute('projector', ''),
+      value: () => tf_backend.getRouter().pluginRoute('projector', ''),
     },
     // Whether this dashboard is initialized. This dashboard should only be initialized once.
     _initialized: Boolean,
@@ -99,7 +97,7 @@ <h3>
   },
 });
 
-registerDashboard({
+tf_tensorboard.registerDashboard({
   plugin: 'projector',
   elementName: 'vz-projector-dashboard',
   isReloadDisabled: true,
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts
index 0bb6100106..4caa436c7e 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts
@@ -12,14 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {ColorOption, ColumnStats, SpriteAndMetadataInfo} from './data.js';
-import {DataProvider, EmbeddingInfo, parseRawMetadata, parseRawTensors, ProjectorConfig} from './data-provider.js';
-import * as util from './util.js';
-import {Projector} from './vz-projector.js';
-import {ColorLegendRenderInfo, ColorLegendThreshold} from './vz-projector-legend.js';
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 export let DataPanelPolymer = PolymerElement({
   is: 'vz-projector-data-panel',
@@ -505,3 +498,5 @@ export class DataPanel extends DataPanelPolymer {
 }
 
 document.registerElement(DataPanel.prototype.is, DataPanel);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-input.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-input.ts
index 7d53182764..824c069d86 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-input.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-input.ts
@@ -12,12 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 // tslint:disable-next-line
-export let PolymerClass = PolymerElement(
+export let ProjectorInputPolymer = PolymerElement(
     {is: 'vz-projector-input', properties: {label: String, message: String}});
 
 export interface InputChangedListener {
@@ -25,7 +23,7 @@ export interface InputChangedListener {
 }
 
 /** Input control with custom capabilities (e.g. regex). */
-export class ProjectorInput extends PolymerClass {
+export class ProjectorInput extends ProjectorInputPolymer {
   private textChangedListeners: InputChangedListener[];
   private paperInput: HTMLInputElement;
   private inRegexModeButton: HTMLButtonElement;
@@ -111,3 +109,5 @@ export class ProjectorInput extends PolymerClass {
 }
 
 document.registerElement(ProjectorInput.prototype.is, ProjectorInput);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-inspector-panel.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-inspector-panel.ts
index 3b786be558..aa23ea8324 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-inspector-panel.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-inspector-panel.ts
@@ -12,28 +12,18 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {DistanceFunction, SpriteAndMetadataInfo, State} from './data.js';
-import * as knn from './knn.js';
-import {ProjectorEventContext} from './projectorEventContext.js';
-import * as adapter from './projectorScatterPlotAdapter.js';
-import * as util from './util.js';
-import * as vector from './vector.js';
-import {Projector} from './vz-projector.js';
-import {ProjectorInput} from './vz-projector-input.js';
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 /** Limit the number of search results we show to the user. */
 const LIMIT_RESULTS = 100;
 
 // tslint:disable-next-line
-export let PolymerClass = PolymerElement({
+export let InspectorPanelPolymer = PolymerElement({
   is: 'vz-projector-inspector-panel',
   properties: {selectedMetadataField: String, metadataFields: Array}
 });
 
-export class InspectorPanel extends PolymerClass {
+export class InspectorPanel extends InspectorPanelPolymer {
   distFunc: DistanceFunction;
   numNN: number;
 
@@ -189,7 +179,7 @@ export class InspectorPanel extends PolymerClass {
       const labelElement = document.createElement('div');
       labelElement.className = 'label';
       labelElement.style.color =
-          adapter.dist2color(this.distFunc, neighbor.dist, minDist);
+          dist2color(this.distFunc, neighbor.dist, minDist);
       labelElement.innerText = this.getLabelFromIndex(neighbor.index);
 
       const valueElement = document.createElement('div');
@@ -205,9 +195,9 @@ export class InspectorPanel extends PolymerClass {
       const barFillElement = document.createElement('div');
       barFillElement.className = 'fill';
       barFillElement.style.borderTopColor =
-          adapter.dist2color(this.distFunc, neighbor.dist, minDist);
+          dist2color(this.distFunc, neighbor.dist, minDist);
       barFillElement.style.width =
-          adapter.normalizeDist(this.distFunc, neighbor.dist, minDist) * 100 +
+          normalizeDist(this.distFunc, neighbor.dist, minDist) * 100 +
           '%';
       barElement.appendChild(barFillElement);
 
@@ -333,3 +323,5 @@ export class InspectorPanel extends PolymerClass {
 }
 
 document.registerElement(InspectorPanel.prototype.is, InspectorPanel);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-legend.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-legend.ts
index e0ac94911a..defc99bd08 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-legend.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-legend.ts
@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 // tslint:disable-next-line
 export let LegendPolymer = PolymerElement({
@@ -96,3 +94,5 @@ export class Legend extends LegendPolymer {
 }
 
 document.registerElement(Legend.prototype.is, Legend);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-metadata-card.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-metadata-card.ts
index 082e6f06ad..1189314e08 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-metadata-card.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-metadata-card.ts
@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {PointMetadata} from './data.js';
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 // tslint:disable-next-line
 export let MetadataCardPolymer = PolymerElement({
@@ -86,3 +83,5 @@ export class MetadataCard extends MetadataCardPolymer {
 }
 
 document.registerElement(MetadataCard.prototype.is, MetadataCard);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts
index aa8de70f60..c30d6447c7 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts
@@ -12,16 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import * as data from './data.js';
-import {DataSet, Projection, ProjectionType, SpriteAndMetadataInfo, State} from './data.js';
-import * as util from './util.js';
-import * as vector from './vector.js';
-import {Vector} from './vector.js';
-import {Projector} from './vz-projector.js';
-import {ProjectorInput} from './vz-projector-input.js';
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 const NUM_PCA_COMPONENTS = 10;
 
@@ -49,12 +40,15 @@ export let ProjectionsPanelPolymer = PolymerElement({
 type InputControlName = 'xLeft'|'xRight'|'yUp'|'yDown';
 
 type CentroidResult = {
-  centroid?: Vector; numMatches?: number;
+  centroid?: vector.Vector; numMatches?: number;
 };
 
 type Centroids = {
-  [key: string]: Vector; xLeft: Vector; xRight: Vector; yUp: Vector;
-  yDown: Vector;
+  [key: string]: vector.Vector;
+  xLeft: vector.Vector;
+  xRight: vector.Vector;
+  yUp: vector.Vector;
+  yDown: vector.Vector;
 };
 
 /**
@@ -343,10 +337,10 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
     this.clearCentroids();
 
     (this.querySelector('#tsne-sampling') as HTMLElement).style.display =
-        pointCount > data.TSNE_SAMPLE_SIZE ? null : 'none';
+        pointCount > TSNE_SAMPLE_SIZE ? null : 'none';
     const wasSampled =
-        (dataSet == null) ? false : (dataSet.dim[0] > data.PCA_SAMPLE_DIM ||
-                                     dataSet.dim[1] > data.PCA_SAMPLE_DIM);
+        (dataSet == null) ? false : (dataSet.dim[0] > PCA_SAMPLE_DIM ||
+                                     dataSet.dim[1] > PCA_SAMPLE_DIM);
     (this.querySelector('#pca-sampling') as HTMLElement).style.display =
         wasSampled ? null : 'none';
     this.showTab('pca');
@@ -436,7 +430,7 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
       return;
     }
     const accessors =
-        data.getProjectionComponents('tsne', [0, 1, this.tSNEis3d ? 2 : null]);
+        getProjectionComponents('tsne', [0, 1, this.tSNEis3d ? 2 : null]);
     const dimensionality = this.tSNEis3d ? 3 : 2;
     const projection =
         new Projection('tsne', accessors, dimensionality, dataSet);
@@ -496,7 +490,7 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
     }
     this.dataSet.projectPCA().then(() => {
       // Polymer properties are 1-based.
-      const accessors = data.getProjectionComponents(
+      const accessors = getProjectionComponents(
           'pca', [this.pcaX, this.pcaY, this.pcaZ]);
 
       const dimensionality = this.pcaIs3d ? 3 : 2;
@@ -528,7 +522,7 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
     const yDir = vector.sub(this.centroids.yUp, this.centroids.yDown);
     this.dataSet.projectLinear(yDir, 'linear-y');
 
-    const accessors = data.getProjectionComponents('custom', ['x', 'y']);
+    const accessors = getProjectionComponents('custom', ['x', 'y']);
     const projection = new Projection('custom', accessors, 2, this.dataSet);
     this.projector.setProjection(projection);
   }
@@ -612,16 +606,18 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
   }
 
   getPcaSampledDimText() {
-    return data.PCA_SAMPLE_DIM.toLocaleString();
+    return PCA_SAMPLE_DIM.toLocaleString();
   }
 
   getPcaSampleSizeText() {
-    return data.PCA_SAMPLE_SIZE.toLocaleString();
+    return PCA_SAMPLE_SIZE.toLocaleString();
   }
 
   getTsneSampleSizeText() {
-    return data.TSNE_SAMPLE_SIZE.toLocaleString();
+    return TSNE_SAMPLE_SIZE.toLocaleString();
   }
 }
 
 document.registerElement(ProjectionsPanel.prototype.is, ProjectionsPanel);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-util.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-util.ts
index 44062062a3..8d261a2c3a 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-util.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-util.ts
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace vz_projector {
 
 export type Spec = {
   is: string; properties?: {
@@ -32,3 +33,5 @@ export function PolymerElement(spec: Spec) {
 }
 
 export interface PolymerHTMLElement extends HTMLElement, polymer.Base {}
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector.ts b/tensorboard/plugins/projector/vz_projector/vz-projector.ts
index 98fea886eb..7bce8a691b 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector.ts
@@ -12,27 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {AnalyticsLogger} from './analyticsLogger.js';
-import * as data from './data.js';
-import {ColorOption, ColumnStats, DataPoint, DataProto, DataSet, DistanceFunction, PointMetadata, Projection, SpriteAndMetadataInfo, State, stateGetAccessorDimensions} from './data.js';
-import {DataProvider, EmbeddingInfo, ServingMode} from './data-provider.js';
-import {DemoDataProvider} from './data-provider-demo.js';
-import {ProtoDataProvider} from './data-provider-proto.js';
-import {ServerDataProvider} from './data-provider-server.js';
-import * as knn from './knn.js';
-import * as logging from './logging.js';
-import {DistanceMetricChangedListener, HoverListener, ProjectionChangedListener, ProjectorEventContext, SelectionChangedListener} from './projectorEventContext.js';
-import {ProjectorScatterPlotAdapter} from './projectorScatterPlotAdapter.js';
-import {MouseMode} from './scatterPlot.js';
-import * as util from './util.js';
-import {BookmarkPanel} from './vz-projector-bookmark-panel.js';
-import {DataPanel} from './vz-projector-data-panel.js';
-import {InspectorPanel} from './vz-projector-inspector-panel.js';
-import {MetadataCard} from './vz-projector-metadata-card.js';
-import {ProjectionsPanel} from './vz-projector-projections-panel.js';
-// tslint:disable-next-line:no-unused-variable
-import {PolymerElement, PolymerHTMLElement} from './vz-projector-util.js';
+namespace vz_projector {
 
 /**
  * The minimum number of dimensions the data should have to automatically
@@ -555,7 +535,7 @@ export class Projector extends ProjectorPolymer implements
     {
       const dimensions = stateGetAccessorDimensions(state);
       const components =
-          data.getProjectionComponents(state.selectedProjection, dimensions);
+          getProjectionComponents(state.selectedProjection, dimensions);
       const projection = new Projection(
           state.selectedProjection, components, dimensions.length,
           this.dataSet);
@@ -566,3 +546,5 @@ export class Projector extends ProjectorPolymer implements
 }
 
 document.registerElement(Projector.prototype.is, Projector);
+
+}  // namespace vz_projector
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html
index fbbe942859..82fa05d155 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html
@@ -46,13 +46,12 @@
         <tf-scalar-dashboard id="demo" backend="[[backend]]"></tf-scalar-dashboard>
       </template>
       <script>
-        import {createRouter, setRouter} from "../tf-backend/router.js";
 
         Polymer({
           is: "scalar-dash-demo",
           created: function() {
-            var router = createRouter("/data", true);
-            setRouter(router);
+            var router = tf_backend.createRouter("/data", true);
+            tf_backend.setRouter(router);
           },
         });
       </script>
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
index 55f3586e8a..1f4f078f19 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
@@ -161,25 +161,6 @@
   </style>
 </template>
 <script>
-  import {addParams} from '../tf-backend/urlPathHelpers.js';
-  import * as ChartHelpers from '../vz-line-chart/vz-chart-helpers.js';
-  import {getRouter} from '../tf-backend/router.js';
-
-  /**
-   * Allows:
-   * - "step" - Linear scale using the "step" property of the datum.
-   * - "wall_time" - Temporal scale using the "wall_time" property of the
-   * datum.
-   * - "relative" - Temporal scale using the "relative" property of the
-   * datum if it is present or calculating from "wall_time" if it isn't.
-   * @enum {string}
-   */
-  const X_TYPE = {
-    STEP: 'step',
-    RELATIVE: 'relative',
-    WALL_TIME: 'wall_time',
-  };
-
   Polymer({
       is: 'tf-scalar-card',
       properties: {
@@ -187,7 +168,7 @@
         tag: String,
 
         /**
-         * @type {X_TYPE}
+         * @type {vz_line_chart.XType}
          */
         xType: String,
 
@@ -224,8 +205,8 @@
 
         _dataUrl: {
           type: Function,
-          value: () => (tag, run) => addParams(
-              getRouter().pluginRoute('scalars', '/scalars'), {tag, run}),
+          value: () => (tag, run) => tf_backend.addParams(
+              tf_backend.getRouter().pluginRoute('scalars', '/scalars'), {tag, run}),
         },
 
         _xComponentsCreationMethod: {
@@ -253,13 +234,13 @@
         }
       },
       _csvUrl(tag, run) {
-        return addParams(this._dataUrl(tag, run), {format: 'csv'});
+        return tf_backend.addParams(this._dataUrl(tag, run), {format: 'csv'});
       },
       _jsonUrl(tag, run) {
         return this._dataUrl(tag, run);
       },
       _computeXComponentsCreationMethod(xType) {
-        return () => ChartHelpers.getXComponents(xType);
+        return () => vz_line_chart.getXComponents(xType);
       },
   });
 </script>
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
index 5fec0b03ca..c76fae5f11 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
@@ -191,34 +191,20 @@ <h3>No scalar data was found.</h3>
   </template>
 
   <script>
-    import {aggregateTagInfo} from '../tf-utils/utils.js';
-    import {categorizeTags} from '../tf-categorization-utils/categorizationUtils.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import {getTags} from '../tf-backend/backend.js';
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import * as storage from '../tf-storage/storage.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
-
-    /** @enum {string} */ const X_TYPE = {
-      STEP: 'step',
-      RELATIVE: 'relative',
-      WALL: 'wall',
-    };
-
     Polymer({
       is: 'tf-scalar-dashboard',
       properties: {
         _showDownloadLinks: {
           type: Boolean,
           notify: true,
-          value: storage.getBooleanInitializer('_showDownloadLinks',
+          value: tf_storage.getBooleanInitializer('_showDownloadLinks',
               {defaultValue: false, useLocalStorage: true}),
           observer: '_showDownloadLinksObserver',
         },
         _smoothingWeight: {
           type: Number,
           notify: true,
-          value: storage.getNumberInitializer('_smoothingWeight', {defaultValue: 0.6}),
+          value: tf_storage.getNumberInitializer('_smoothingWeight', {defaultValue: 0.6}),
           observer: '_smoothingWeightObserver',
         },
         _smoothingEnabled: {
@@ -227,14 +213,14 @@ <h3>No scalar data was found.</h3>
         },
         _ignoreYOutliers: {
           type: Boolean,
-          value: storage.getBooleanInitializer('_ignoreYOutliers',
+          value: tf_storage.getBooleanInitializer('_ignoreYOutliers',
               {defaultValue: true, useLocalStorage: true}),
           observer: '_ignoreYOutliersObserver',
         },
-        /** @type {X_TYPE} */
+        /** @type {vz_line_chart.XType} */
         _xType: {
           type: String,
-          value: X_TYPE.STEP,
+          value: vz_line_chart.XType.STEP,
         },
 
         _selectedRuns: Array,
@@ -253,14 +239,14 @@ <h3>No scalar data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(50),
+          value: () => new tf_backend.RequestManager(50),
         },
       },
-      _showDownloadLinksObserver: storage.getBooleanObserver(
+      _showDownloadLinksObserver: tf_storage.getBooleanObserver(
           '_showDownloadLinks', {defaultValue: false, useLocalStorage: true}),
-      _smoothingWeightObserver: storage.getNumberObserver(
+      _smoothingWeightObserver: tf_storage.getNumberObserver(
           '_smoothingWeight', {defaultValue: 0.6}),
-      _ignoreYOutliersObserver: storage.getBooleanObserver(
+      _ignoreYOutliersObserver: tf_storage.getBooleanObserver(
           '_ignoreYOutliers', {defaultValue: true, useLocalStorage: true}),
       _computeSmoothingEnabled(_smoothingWeight) {
         return _smoothingWeight > 0;
@@ -276,14 +262,14 @@ <h3>No scalar data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = getRouter().pluginRoute('scalars', '/tags');
+        const url = tf_backend.getRouter().pluginRoute('scalars', '/tags');
         return this._requestManager.request(url).then(runToTagInfo => {
           if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
             // No need to update anything if there are no changes.
             return;
           }
           const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-          const tags = getTags(runToTag);
+          const tags = tf_backend.getTags(runToTag);
           this.set('_dataNotFound', tags.length === 0);
           this.set('_runToTagInfo', runToTagInfo);
         });
@@ -296,7 +282,7 @@ <h3>No scalar data was found.</h3>
 
       _makeCategories(runToTagInfo, selectedRuns, tagFilter) {
         const runToTag = _.mapValues(runToTagInfo, x => Object.keys(x));
-        return categorizeTags(runToTag, selectedRuns, tagFilter);
+        return tf_categorization_utils.categorizeTags(runToTag, selectedRuns, tagFilter);
       },
       _tagMetadata(runToTagsInfo, runs, tag) {
         const runToTagInfo = {};
@@ -306,11 +292,11 @@ <h3>No scalar data was found.</h3>
         // All new-style scalar tags include the `/scalar_summary`
         // suffix. We can trim that from the display name.
         const defaultDisplayName = tag.replace(/\/scalar_summary$/, '');
-        return aggregateTagInfo(runToTagInfo, defaultDisplayName);
+        return tf_utils.aggregateTagInfo(runToTagInfo, defaultDisplayName);
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'scalars',
       elementName: 'tf-scalar-dashboard',
     });
diff --git a/tensorboard/plugins/text/tf_text_dashboard/index.html b/tensorboard/plugins/text/tf_text_dashboard/index.html
index ec18059866..c89d104d6f 100644
--- a/tensorboard/plugins/text/tf_text_dashboard/index.html
+++ b/tensorboard/plugins/text/tf_text_dashboard/index.html
@@ -45,14 +45,13 @@
             </tf-text-dashboard>
           </template>
           <script>
-            import {createRouter, setRouter} from '../tf-backend/router.js';
 
             Polymer({
               is: "text-dash-demo",
               created: function() {
                 var path = "data";
-                var router = createRouter(path, true);
-                setRouter(router);
+                var router = tf_backend.createRouter(path, true);
+                tf_backend.setRouter(router);
               },
             });
           </script>
diff --git a/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html b/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html
index fc0f0aea09..1509cc24c9 100644
--- a/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html
+++ b/tensorboard/plugins/text/tf_text_dashboard/tf-text-dashboard.html
@@ -103,11 +103,6 @@ <h3>No text data was found.</h3>
     </style>
   </template>
   <script>
-    import {RequestManager} from '../tf-backend/requestManager.js';
-    import {getTags} from '../tf-backend/backend.js';
-    import {getRouter} from '../tf-backend/router.js';
-    import {categorizeRunTagCombinations} from '../tf-categorization-utils/categorizationUtils.js';
-    import {registerDashboard} from '../tf-tensorboard/registry.js';
 
     Polymer({
       is: "tf-text-dashboard",
@@ -128,7 +123,7 @@ <h3>No text data was found.</h3>
 
         _requestManager: {
           type: Object,
-          value: () => new RequestManager(),
+          value: () => new tf_backend.RequestManager(),
         },
       },
       ready() {
@@ -140,13 +135,13 @@ <h3>No text data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = getRouter().pluginRoute('text', '/tags');
+        const url = tf_backend.getRouter().pluginRoute('text', '/tags');
         return this._requestManager.request(url).then(runToTag => {
           if (_.isEqual(runToTag, this._runToTag)) {
             // No need to update anything if there are no changes.
             return;
           }
-          const tags = getTags(runToTag);
+          const tags = tf_backend.getTags(runToTag);
           this.set('_dataNotFound', tags.length === 0);
           this.set('_runToTag', runToTag);
         });
@@ -157,11 +152,11 @@ <h3>No text data was found.</h3>
         });
       },
       _makeCategories(runToTag, selectedRuns, tagFilter) {
-        return categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
+        return tf_categorization_utils.categorizeRunTagCombinations(runToTag, selectedRuns, tagFilter);
       },
     });
 
-    registerDashboard({
+    tf_tensorboard.registerDashboard({
       plugin: 'text',
       elementName: 'tf-text-dashboard',
     });
diff --git a/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html b/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html
index 86c5f7aad5..c9df30a4f9 100644
--- a/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html
+++ b/tensorboard/plugins/text/tf_text_dashboard/tf-text-loader.html
@@ -92,10 +92,6 @@
     </style>
   </template>
   <script>
-    import {addParams} from "../tf-backend/urlPathHelpers.js";
-    import {Canceller} from "../tf-backend/canceller.js";
-    import {getRouter} from "../tf-backend/router.js";
-    import {runsColorScale} from "../tf-color-scale/colorScale.js";
 
     Polymer({
       is: "tf-text-loader",
@@ -121,11 +117,11 @@
         requestManager: Object,
         _canceller: {
           type: Object,
-          value: () => new Canceller(),
+          value: () => new tf_backend.Canceller(),
         },
       },
       _computeRunColor(run) {
-        return runsColorScale(run);
+        return tf_color_scale.runsColorScale(run);
       },
       attached() {
         this._attached = true;
@@ -136,8 +132,8 @@
           return;
         }
         this._canceller.cancelAll();
-        const router = getRouter();
-        const url = addParams(router.pluginRoute("text", "/text"), {
+        const router = tf_backend.getRouter();
+        const url = tf_backend.addParams(router.pluginRoute("text", "/text"), {
           tag: this.tag,
           run: this.run,
         });