# Technical Documentation: GoogleChromeLabs/ui-element-samples > ℹ️ **Provenance:** Hybrid Fusion: `GoogleChromeLabs/ui-element-samples` (README + 7 In-Tree Chapters) · [CodeWiki Reference](https://codewiki.google/github.com/GoogleChromeLabs/ui-element-samples) · Recency: Active (< 180 days) ## 1. Project Overview & Quickstart (GoogleChromeLabs/ui-element-samples) # UI Elements A collection of UI element samples written with vanilla web platform features. **Please note: these are prototypes, and not production-ready. The aim is to demonstrate a solid approach for building performant UI elements.** ## Getting started 1. Clone the repo. 2. Open an element's subfolder. 3. Run index.html ## ES2015 and ES5 Transpilation Please note: these samples are written in ES2015 and, as such, require [direct browser support](https://kangax.github.io/compat-table/es6/). You can transpile the examples with [BabelJS](https://babeljs.io/docs/usage/cli/): ```bash babel --presets=es2015 swipeable-cards/cards.js --out-file swipeable-cards/cards-es5.js babel --presets=es2015 side-nav/side-nav.js --out-file side-nav/side-nav-es5.js ``` But to keep things as simple as possible for everyone, that's out of scope for this set of samples. ## License Copyright 2015 Google, Inc. Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you 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. Please note: this is not a Google product ## 2. In-Tree Documentation Chapters (GoogleChromeLabs/ui-element-samples) ## File: README.md # UI Elements A collection of UI element samples written with vanilla web platform features. **Please note: these are prototypes, and not production-ready. The aim is to demonstrate a solid approach for building performant UI elements.** ## Getting started 1. Clone the repo. 2. Open an element's subfolder. 3. Run index.html ## ES2015 and ES5 Transpilation Please note: these samples are written in ES2015 and, as such, require [direct browser support](https://kangax.github.io/compat-table/es6/). You can transpile the examples with [BabelJS](https://babeljs.io/docs/usage/cli/): ```bash babel --presets=es2015 swipeable-cards/cards.js --out-file swipeable-cards/cards-es5.js babel --presets=es2015 side-nav/side-nav.js --out-file side-nav/side-nav-es5.js ``` But to keep things as simple as possible for everyone, that's out of scope for this set of samples. ## License Copyright 2015 Google, Inc. Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you 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. Please note: this is not a Google product --- ## File: code-splitting/README.md # Code Splitting This is mostly the code from the `server-side-rendering` sample. We have added `build.js` to perform code splitting and route-based chunking. Run `npm install` to install all dependencies. Run `node build.js` and then run the server with `node index.js`. --- ## File: router/README.md # Router The router requires a server-side component because of the deeplinking. In order to get that to work, you should clone the repo and do the following: 1. Clone the project. 1. Install the [Google App Engine SDK For Python](https://cloud.google.com/appengine/downloads#Google_App_Engine_SDK_for_Python). 1. Run the SDK app to create symlinks. 1. Add it to the GAE Launcher you downloaded (Existing app, (Ctrl|Cmd)+Shift+N, /path/to/router). 1. Enjoy your local version of the router sample, probably at [localhost:8080](http://localhost:8080). --- ## File: router-advanced/README.md # Router (Advanced) This router build on the previous SPA-like one, but does not require a server-side component, and works if the user does not have JavaScript. It also loads content over XHR rather than baking it into the page. --- ## File: server-side-rendering/README.md # Server-side Rendering This is a small backend for the `router-advances` using Node. Make sure you have node5 for HTTP/2 support! Run `npm install` to install all dependencies and run the server with `node index.js`. --- ## File: service-worker/README.md # Service-Worker This is a service-worker for our server-side-rendering session. Run `npm install` to install all dependencies and run the server with `node index.js`. Start Chrome Canary using `npm run chrome`, since HTTP/2 and ServiceWorker development on localhost doesn’t play nicely currently. --- ## File: stream-progress/README.md # Stream progress This sample loads a fairly big file via fetch, decodes it using TransformStream and displays a radial progress bar while loading. Probably best enjoyed with network throttling enabled in DevTools. --- METRICS --- - Files Extracted: 8 - Estimated Token Budget: ~1406 tokens - Recency Window: Active (< 180 days) - Canonical Reference: https://codewiki.google/github.com/GoogleChromeLabs/ui-element-samples