mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-22 15:56:17 -04:00
initial commit
This commit is contained in:
Robin Linus
commit
f5b2b47136
46 changed files with 2350 additions and 0 deletions
8
docs/README.md
Normal file
8
docs/README.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# Recipes
|
||||
|
||||
* [Add ES2015 (formally ES6) support using Babel](add-es2015-support-babel.md)
|
||||
* [Polymer Performance Recipe](polymer-perf.md)
|
||||
* [Use PSK with Chrome Dev Editor](chrome-dev-editor.md)
|
||||
* [Deploy to Github Pages](deploy-to-github-pages.md)
|
||||
* [Deploy to Firebase using Pretty URLs](deploy-to-firebase-pretty-urls.md)
|
||||
* [Use PSK for Mobile Chrome Apps](mobile-chrome-apps.md)
|
||||
129
docs/add-es2015-support-babel.md
Normal file
129
docs/add-es2015-support-babel.md
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
# Add ES2015 support through Babel
|
||||
|
||||
Although support for ES2015 (formerly ES6) is improving in modern browsers, the majority do not yet support the full set of features. To benefit from the awesomeness of the new ES2015 syntax while keeping backwards compatibility with Polymer's supported browsers, you'll need to transpile your JS code from ES2015 to ES5
|
||||
|
||||
This recipe focuses on adding an ES2015 to ES5 transpile step to Polymer Starter Kit's build pipeline using [BabelJS](https://babeljs.io/).
|
||||
|
||||
|
||||
## Create a transpile gulp task
|
||||
|
||||
- Install the gulp Babel, Sourcemap, Crisper plugins and Babel ES2015 preset: `npm install --save-dev gulp-babel gulp-sourcemaps gulp-crisper babel-preset-es2015`
|
||||
- Add the following gulp task in the `gulpfile.js` file:
|
||||
|
||||
```patch
|
||||
+ // Transpile all JS to ES5.
|
||||
+ gulp.task('js', function () {
|
||||
+ return gulp.src(['app/**/*.{js,html}', '!app/bower_components/**/*'])
|
||||
+ .pipe($.sourcemaps.init())
|
||||
+ .pipe($.if('*.html', $.crisper({scriptInHead:false}))) // Extract JS from .html files
|
||||
+ .pipe($.if('*.js', $.babel({
|
||||
+ presets: ['es2015']
|
||||
+ })))
|
||||
+ .pipe($.sourcemaps.write('.'))
|
||||
+ .pipe(gulp.dest('.tmp/'))
|
||||
+ .pipe(gulp.dest(dist()));
|
||||
+ });
|
||||
```
|
||||
|
||||
This task will transpile all JS files and inline JS inside HTML files and also generate sourcemaps. The resulting files are generated in the `.tmp` and the `dist` folders
|
||||
|
||||
[Crisper](https://github.com/PolymerLabs/crisper) extracts JavaScript that's inline to HTML files (such as imports). We need this as Babel does not support transpiling HTML files such as `<script>` tags directly
|
||||
|
||||
Note: At the time of writing Crisper does not generate the sourcemaps. Your app will work but you won't get sourcemaps for files transformed by Crisper. Relevant issues:
|
||||
|
||||
- [ragingwind/gulp-crisper#4](https://github.com/ragingwind/gulp-crisper/issues/4)
|
||||
- [PolymerLabs/crisper#14](https://github.com/PolymerLabs/crisper/issues/14)
|
||||
|
||||
|
||||
## Integrating the transpile task
|
||||
|
||||
Make sure the `js` gulp task is triggered by the common build tasks:
|
||||
|
||||
- In the gulp `serve` task, make sure `js` is triggered initially and on HTML and JS files changes:
|
||||
|
||||
```patch
|
||||
-gulp.task('serve', ['lint', 'styles', 'elements', 'images'], function () {
|
||||
+gulp.task('serve', ['lint', 'styles', 'elements', 'images', 'js'], function () {
|
||||
|
||||
...
|
||||
|
||||
- gulp.watch(['app/**/*.html'], reload);
|
||||
+ gulp.watch(['app/**/*.html'], ['js', reload]);
|
||||
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
|
||||
gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
|
||||
- gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint']);
|
||||
+ gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint', 'js']);
|
||||
gulp.watch(['app/images/**/*'], reload);
|
||||
});
|
||||
```
|
||||
|
||||
- In the `default` task make sure `js` is run in parallel to `elements`:
|
||||
|
||||
```patch
|
||||
gulp.task('default', ['clean'], function (cb) {
|
||||
|
||||
...
|
||||
|
||||
runSequence(
|
||||
['copy', 'styles'],
|
||||
- 'elements',
|
||||
+ ['elements', 'js'],
|
||||
['lint', 'images', 'fonts', 'html'],
|
||||
'vulcanize', // 'cache-config',
|
||||
cb);
|
||||
});
|
||||
```
|
||||
|
||||
- In the `html` task replace `app` in the paths by `dist` since dist should already contain all JS and HTML files now transpiled.
|
||||
|
||||
```patch
|
||||
// Scan your HTML for assets & optimize them
|
||||
gulp.task('html', function () {
|
||||
return optimizeHtmlTask(
|
||||
- ['app/**/*.html', '!app/{elements,test}/**/*.html'],
|
||||
+ [dist('/**/*.html'), '!' + dist('/{elements,test}/**/*.html')],
|
||||
dist());
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
- In the `optimizeHtmlTask` function remove the `searchPath` attribute since all assets should be found under the `dist` folder and we want to make sure we are not picking up duplicates and un-transpiled JS files:
|
||||
|
||||
```patch
|
||||
var optimizeHtmlTask = function (src, dest) {
|
||||
- var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});
|
||||
+ var assets = $.useref.assets();
|
||||
```
|
||||
|
||||
|
||||
## Configure linters for ES2015
|
||||
|
||||
- Enable ES2015 support in JSCS. Add `"esnext": true` to the `.jscsrc` file:
|
||||
|
||||
```patch
|
||||
{
|
||||
+ "esnext": true,
|
||||
"preset": "google",
|
||||
"disallowSpacesInAnonymousFunctionExpression": null,
|
||||
"excludeFiles": ["node_modules/**"]
|
||||
}
|
||||
```
|
||||
|
||||
- Enable ES2015 support in JSHint. Add `"esnext": true` to the `.jshintrc` file:
|
||||
|
||||
```patch
|
||||
{
|
||||
+ "esnext": true,
|
||||
"node": true,
|
||||
"browser": true,
|
||||
```
|
||||
|
||||
## Optional - When using shadow-dom instead shady-dom
|
||||
Place this configuration ([Read more](https://www.polymer-project.org/1.0/docs/devguide/settings.html)) in a separate file like `scripts/polymer-settings`
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.Polymer = window.Polymer || {};
|
||||
window.Polymer.dom = 'shadow';
|
||||
</script>
|
||||
```
|
||||
52
docs/chrome-dev-editor.md
Normal file
52
docs/chrome-dev-editor.md
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
# Use Polymer Starter Kit on Chrome Dev Editor
|
||||
|
||||
If you are using a Chromebook, one of the few IDE you can use is [Chrome Dev Editor](https://github.com/GoogleChrome/chromedeveditor).
|
||||
|
||||
To use the Polymer Starter Kit you have to download the [latest release](https://github.com/PolymerElements/polymer-starter-kit/releases) in the `light` flavor (the additional tools can't be used from CDE).
|
||||
|
||||
After downloading the `polymer-starter-kit-light-*.zip` file unpack it in a new folder (for Example `psk-light`) you should have a directory structure like
|
||||
|
||||
|
||||
|
||||
|
||||
Before opening the folder inside CDE, we need to move the file `bower.json` to `app/bower.json`, this way running `Bower Update` from CDE's menu, will place the updated packages in `app/bower_components`
|
||||
|
||||
|
||||
|
||||
|
||||
We can now `Open Folder...` inside CDE and start renaming the file `app/manifest.json` to `app/web-app-manifest.json`, followed by updating the link to it in the file `app/index.html`
|
||||
|
||||
|
||||
|
||||
|
||||
*This change is needed because `manifest.json` is interpreted by CDE as a [Chrome Apps Manifest](https://developer.chrome.com/extensions/manifest) and the [web app manifest](https://w3c.github.io/manifest/) is slightly different*
|
||||
|
||||
Open `app/elements/routing.html` and add the following code after the last route:
|
||||
|
||||
```javascript
|
||||
page('*', function () {
|
||||
app.route = 'home';
|
||||
});
|
||||
```
|
||||
|
||||
After the change, the code will look like the following:
|
||||
|
||||
```javascript
|
||||
...
|
||||
page('/contact', function () {
|
||||
app.route = 'contact';
|
||||
});
|
||||
|
||||
page('*', function () {
|
||||
app.route = 'home';
|
||||
});
|
||||
|
||||
// add #! before urls
|
||||
page({
|
||||
hashbang: true
|
||||
});
|
||||
...
|
||||
```
|
||||
|
||||
|
||||
Select `app/index.html` and hit run (or press CTRL+R) to see the application running in the browser.
|
||||
67
docs/deploy-to-firebase-pretty-urls.md
Normal file
67
docs/deploy-to-firebase-pretty-urls.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
# Deploy to Firebase using Pretty URLs
|
||||
|
||||
Firebase is a very simple and secure way to deploy a Polymer Starter Kit site. You can sign up for a free account and deploy your application in less than 5 minutes.
|
||||
|
||||
The instructions below are based on the [Firebase hosting quick start
|
||||
guide](https://www.firebase.com/docs/hosting/quickstart.html).
|
||||
|
||||
1. [Sign up for a Firebase account](https://www.firebase.com/signup/)
|
||||
|
||||
1. Install the Firebase command line tools
|
||||
|
||||
npm install -g firebase-tools
|
||||
|
||||
The `-g` flag instructs `npm` to install the package globally so that you
|
||||
can use the `firebase` command from any directory. You may need
|
||||
to install the package with `sudo` privileges.
|
||||
|
||||
1. `cd` into your project directory
|
||||
|
||||
1. Inititalize the Firebase application
|
||||
|
||||
firebase init
|
||||
|
||||
Firebase asks you which app you would like to use for hosting. If you just
|
||||
signed up, you should see one app with a randomly-generated name. You can
|
||||
use that one. Otherwise go to
|
||||
[https://www.firebase.com/account](https://www.firebase.com/account) to
|
||||
create a new app.
|
||||
|
||||
1. Firebase asks you the name of your app's public directory. Enter `dist`.
|
||||
This works because when you run `gulp` to build your application, PSK
|
||||
builds everything and places it all in `dist`. So `dist` contains
|
||||
everything your application needs to run.
|
||||
|
||||
1. Edit firebase.json add rewrites section
|
||||
|
||||
{
|
||||
"firebase": "polymer-starter-kit",
|
||||
"public": "dist",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [ {
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
} ]
|
||||
}
|
||||
|
||||
1. Add `<base href="/">` to `head` in index.html
|
||||
|
||||
1. Remove `hashbang: true` in routing.html near bottom. The call to `page` should look like this now:
|
||||
|
||||
page();
|
||||
|
||||
1. Build
|
||||
|
||||
gulp
|
||||
|
||||
1. Deploy
|
||||
|
||||
firebase deploy
|
||||
|
||||
The URL to your live site is listed in the output.
|
||||
|
||||
You can see a demo of Polymer Starter Kit hosted on Firebase using pretty URLs at https://polymer-starter-kit.firebaseapp.com.
|
||||
23
docs/deploy-to-github-pages.md
Normal file
23
docs/deploy-to-github-pages.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# Deploy to Github Pages
|
||||
|
||||
You can deploy to github pages with a couple minor changes to Polymer Starter Kit:
|
||||
|
||||
1. Uncomment this line `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
|
||||
|
||||
```JavaScript
|
||||
// Sets app default base URL
|
||||
app.baseUrl = '/';
|
||||
if (window.location.port === '') { // if production
|
||||
// Uncomment app.baseURL below and
|
||||
// set app.baseURL to '/your-pathname/' if running from folder in production
|
||||
// app.baseUrl = '/polymer-starter-kit/';
|
||||
}
|
||||
```
|
||||
2. Change `app.baseUrl = '/polymer-starter-kit/';` to `app.baseUrl = '/your-pathname/';` (ex: if you repo is `github.com/username/bobs-awesome-site` you would change this to `bobs-awesome-site`)
|
||||
3. Run `gulp build-deploy-gh-pages` from command line
|
||||
4. To see changes wait 1-2 minutes then load Github pages for your app (ex: http://polymerelements.github.io/polymer-starter-kit)
|
||||
|
||||
### Notes
|
||||
|
||||
* When deploying to Github Pages we recommend using hashbangs which is Polymer Starter Kit default.
|
||||
* This method should work for most hosting providers when using a subfolder.
|
||||
131
docs/mobile-chrome-apps.md
Normal file
131
docs/mobile-chrome-apps.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
# Use Polymer Starter Kit for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps)
|
||||
|
||||
## Getting started
|
||||
|
||||
Polymer Starter Kit could be fully adapted to Mobile Chrome Apps through mobile-friendly features. Mobile Chrome Apps, is based on Apache Cordova, and requires mobile application SDKs such as Android and iOS. so please make sure that installation development tool by following [installation guide](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md) of Mobile Chrome Apps. And then, You do some further steps to resolve some of restrictions and configurations to use Polymer Starter Kit on Cordova. Looking for a [guide video](https://www.youtube.com/watch?v=-ifgyobPLVg) below to better understand.
|
||||
|
||||
[](https://www.youtube.com/watch?v=-ifgyobPLVg)
|
||||
|
||||
## Download Polymer Starter Kit into your workspace
|
||||
|
||||
To download and preparation, follow this [guide of Polymer Starter Kit](https://github.com/PolymerElements/polymer-starter-kit#getting-started). Make sure that install all of dependencies of npm and Bower.
|
||||
|
||||
## Create a Cordova project
|
||||
|
||||
Create a Cordova project in path `polymer-starter-kit` by following command. `platform` is the path for Cordova project files, `com.your.app` is the project name/id and next following string is the description for your app.
|
||||
|
||||
```sh
|
||||
cca create platform com.your.app "Your Polymer Starter Kit App"
|
||||
```
|
||||
|
||||
If you have no problems while creating a project you will seeing the message of installing successful coming from Cordova and have the tree of the project below.
|
||||
|
||||
```sh
|
||||
└── polymer-starter-kit
|
||||
└── app
|
||||
│ ├── elements
|
||||
│ ├── images
|
||||
│ ├── index.html
|
||||
│ ├── manifest.json
|
||||
│ ├── scripts
|
||||
│ ├── styles
|
||||
│ └── test
|
||||
├── bower.json
|
||||
├── bower_components
|
||||
├── docs
|
||||
├── gulpfile.js
|
||||
├── node_modules
|
||||
├── package.json
|
||||
├── platform
|
||||
│ ├── config.xml
|
||||
│ ├── hooks
|
||||
│ ├── platforms
|
||||
│ ├── plugins
|
||||
│ └── www
|
||||
```
|
||||
|
||||
For further informations of Cordova, please visit [corodova document](https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/docs)
|
||||
|
||||
## Configuration
|
||||
|
||||
You need to have some changes of configuration to fit for Mobile Chrome Apps as it was mentioned above.
|
||||
|
||||
### Configure path for app built by gulp
|
||||
|
||||
- Change the path `dist` in `gulpfile.js` from `dist` to `platform/www/app`, then the app built with Polymer Starter Kit will be placed under `platform/www` will be used by Cordova.
|
||||
```js
|
||||
var DIST = 'platform/www/app';
|
||||
```
|
||||
|
||||
- Change the path in `platform/www/background.js` into new path
|
||||
```js
|
||||
chrome.app.runtime.onLaunched.addListener(function() {
|
||||
chrome.app.window.create('app/index.html', {
|
||||
width: 244,
|
||||
height: 380,
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
- Add path `/app` to `app.baseURL` in `app/scripts/app.js'. `platform/www` is root path of app that will prevent errors coming from page routing.
|
||||
```js
|
||||
app.baseUrl = '/app';
|
||||
```
|
||||
|
||||
### Update gulp tasks
|
||||
|
||||
- Using `polybuild(vulcanize + crisper)` task is mandatory because of Chrome Apps doesn't allow inline script blocks according to [CSP](https://developer.chrome.com/apps/contentSecurityPolicy). You should replace current `vulcanize` task with new task below. To do this install `polybuild` first with `npm install --save-dev polybuild` command
|
||||
```js
|
||||
// load polybuild
|
||||
var polybuild = require('polybuild');
|
||||
|
||||
// Vulcanize granular configuration
|
||||
gulp.task('vulcanize', function() {
|
||||
return gulp.src('app/elements/elements.html')
|
||||
.pipe(polybuild({maximumCrush: true}))
|
||||
.pipe($.rename(function(file) {
|
||||
if (file.extname === '.html') {
|
||||
file.basename = file.basename.replace('.build', '');
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest(dist('elements')))
|
||||
.pipe($.size({title: 'vulcanize'}));
|
||||
});
|
||||
```
|
||||
|
||||
### More updates
|
||||
|
||||
- Remove useless files generated from Cordova.
|
||||
```sh
|
||||
rm platform/www/index.*
|
||||
```
|
||||
- To complete first route for `home` you need to put try/catch block into the first route code on starting app, in `app/elements/routing.html`, because Chrome Apps doesn't allow using `history` APIs which related to error message `history.pushState/replaceState is not available in packaged apps`.
|
||||
```js
|
||||
try {
|
||||
page({
|
||||
hashbang: true
|
||||
});
|
||||
} catch (e) {
|
||||
app.route = 'home';
|
||||
}
|
||||
```
|
||||
|
||||
- Using `@import` instead of `link` to download external Google robot fonts which is related to `Refused to load the stylesheet` errors. Update code in `bower_components/font-roboto/roboto.html` to using `@import` code below
|
||||
```
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic);
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700);
|
||||
```
|
||||
|
||||
## Build and run app
|
||||
|
||||
After done of above steps. run this command on root path that let you see Chrome Apps built with Polymer Starter Kit.
|
||||
|
||||
```sh
|
||||
gulp && cd platform && cca run chrome
|
||||
```
|
||||
|
||||
or to run on Android emulator or devices
|
||||
|
||||
```sh
|
||||
gulp && cd platform && cca run android
|
||||
```
|
||||
100
docs/polymer-perf.md
Normal file
100
docs/polymer-perf.md
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
### Polymer Performance Recipe
|
||||
|
||||
In the following write up we are going to take a look at how to optimize the loading of Web Component enabled websites. The goal here is not to give you a copy and paste approach, but rather to give you the starting components and thought process with how to optimize your web app given your domain constraints.
|
||||
|
||||
Current native support for Web Components is limited but growing, with only Chrome and Opera having a “fully" implemented spec. Due to the limited support, using Polymer or any web components in production across more than just chrome requires you to load a polyfill. As with any polyfill there is a performance tradeoff, in the run time performance, spec compliance, as well as the network cost overhead. Lets dive into a few approaches that you can use to conditionally load the polyfill only when it is required.
|
||||
|
||||
The first step in conditionally loading the Web Component polyfill is detecting whether or not the environment that we are in supports the features that are required.
|
||||
|
||||
Over in GitHub land @geenlen has cooked up a nifty technique bit of code to do this work for us:
|
||||
|
||||
```js
|
||||
var webComponentsSupported = ('registerElement' in document
|
||||
&& 'import' in document.createElement('link')
|
||||
&& 'content' in document.createElement('template'));
|
||||
```
|
||||
|
||||
Once we know if things are supported or not we can then dynamically load our polyfill and then load up our custom elements so that our app will be able to properly upgrade our custom elements.
|
||||
|
||||
```js
|
||||
if (webComponentsSupported) {
|
||||
loadElements();
|
||||
} else {
|
||||
loadWebComponentPolyfill(loadElements)
|
||||
}
|
||||
```
|
||||
|
||||
This bit of code can be placed directly in [`app.js`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/scripts/app.js), right under the beginning of the IIFE.
|
||||
|
||||
Now that we have our initial sniff and load call, let’s take a look at the code for `loadWebComponentPolyfill`, and how exactly it works.
|
||||
|
||||
```js
|
||||
function loadWebComponentPolyfill(cb) {
|
||||
var polyfill = document.createElement('script');
|
||||
polyfill.onload = cb || null;
|
||||
polyfill.src = 'webcomponents-lite.min.js';
|
||||
document.head.appendChild(polyfill);
|
||||
}
|
||||
```
|
||||
|
||||
So what is going on here, how does it work? The first thing that this method does is dynamically create a script tag, then conditionally assign a callback when the resource loads, the code then sets the src of the script tag, and then injects the script tag into the head of our document. Once the tag is placed inside of our document, the network request will start and the resource is fully downloaded the callback will be invoked.
|
||||
|
||||
Awesome! So now let’s move onto the logic around `loadElements`.
|
||||
|
||||
You might be wondering why `loadElements` is even needed? Why can we not just `<link rel="import" href="path_to_elements.html">` directly in our html. The reason why `loadElements` is needed is because we are loading the webComponents polyfill async to the initial page load, therefore we can not assume that our import statements will always work across browsers and browser versions, rather we need to explicitly call into loadElements only after we are sure the current environment supports webComponents (even if we have to polyfill it first).
|
||||
|
||||
```js
|
||||
function loadElements() {
|
||||
var bundle = document.createElement('link');
|
||||
bundle.rel = 'import';
|
||||
bundle.href = 'elements/path_to_bundle.html';
|
||||
|
||||
document.head.appendChild(bundle);
|
||||
}
|
||||
```
|
||||
|
||||
`loadElements` follows a very similar pattern as `loadWebComponentPolyfill`, only this time we are dynamically injecting a link tag into our head that will load our element bundle. Now that we have both of these methods defined, we are left with a very basic example of loading our polyfill and element async to the `window.onload` event.
|
||||
|
||||
This approach opens up the possibility for you to only have users download the elements that they need for specific pages in your app. Consider for instance an application with an admin panel and a general app view. Given the fact that most users in our made up app do not go to the admin panel too often, there is no need for them to always incur the cost of downloading the admin suite of elements. Instead we will only have users download the “bundle" that they need depending on what page they enter on.
|
||||
|
||||
For example with page.js your router could be structured as follows to optimize page load time, given a few assumptions about how users will be interacting with your app.
|
||||
|
||||
```js
|
||||
page.on('admin', ensureWebComponentSupport, function() {
|
||||
loadElementBundle('admin');
|
||||
renderAdminPane();
|
||||
});
|
||||
```
|
||||
|
||||
#### Further Thoughts
|
||||
|
||||
With Polymer, it is easy to fall into the trap of getting a flash of unstyled content, or a blank page while the polyfill and elements are downloading. The best way to avoid these pitfalls is to use a "loading" screen approach. The simplest of the loading approach to create a "splash" screen to display while your elements bundle is downloading.
|
||||
|
||||
You can easily modify `loadElements` to enable this type of behavior.
|
||||
|
||||
```js
|
||||
function loadElements() {
|
||||
document.body.innerHTML = '<div><!-- loading screen markup → --></div>';
|
||||
bundle.rel = 'import';
|
||||
bundle.href = 'elements/path_to_bundle.html';
|
||||
bundle.onload = function() {
|
||||
document.body.innerHTML = '<real-markup></real-markup>';
|
||||
};
|
||||
|
||||
document.head.appendChild(bundle);
|
||||
}
|
||||
```
|
||||
|
||||
You can take this concept of a loading screen one step further by instead of showing a loading screen show a screen that looks like a lite version of your app. By this I mean simple shapes and blocks that match the color and blocks of your app once your elements are fully upgraded, so that your user has a faster perceived loading time.
|
||||
|
||||
Hopefully these approaches give you some ideas on how to make your app lightning fast.
|
||||
|
||||
We hope to explore further ideas including [application shells](https://github.com/ebidel/polymer-experiments/blob/master/polymersummit/fouc/appshell.html) and being smart about your first meaningful paint in the near future.
|
||||
|
||||
--------
|
||||
|
||||
Further reading
|
||||
|
||||
* [Fast Polymer app loading](https://gist.github.com/ebidel/1ba71473d687d0567bd3) from Eric Bidelman
|
||||
* [Polymer Perf Patterns](https://www.youtube.com/watch?v=Yr84DpNaMfk) from Eric Bidelman
|
||||
* [Polymer for the Performance-obsessed](https://aerotwist.com/blog/polymer-for-the-performance-obsessed/) from Paul Lewis
|
||||
Loading…
Add table
Add a link
Reference in a new issue