Skip to content
⚡️ Kickstart a Meteor - Polymer project with MWC packages. (Flow Router is used to route)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.meteor
client
imports
public
server
.bowerrc
.gitignore
LICENSE
README.md
bower.json
bower.sh
build.sh
package.json

README.md

Use npm for polymer instead of bower. https://github.com/aruntk/kickstart-meteor-polymer/tree/npm

Use app-route element for routing instead of flow router https://github.com/aruntk/kickstart-meteor-polymer-with-app-route

Synthesis is meteor + polymer

synthesis1

Usage

Installation.

Clone the repo

git clone git@github.com:aruntk/kickstart-meteor-polymer.git your-app-folder

change remote url.

Building

Type the following in shell. Script install bower components and npm packages.

#shell
cd your-app-folder
./build.sh

cleanup bower_components script is also there in build.sh

Add a component

components are inside imports/ui/bower_components

  1. Install it as ./bower.sh install --save example-component.

  2. Input component name example-component to import example-component/example-component.html. If you want to import something else (for eg behavior/script/css) skip this step by pressing enter and then manually add it to the imports/ui/imports.html file.

Running

meteor

Polymer Settings

Create client/lib/settings.js

Why lib directory ? Settings code should run before anything else.

/* client/lib/settings.js */
window.Polymer = {
  //dom: 'shadow',
  lazyRegister: true
};

Polymer Weight

npm run weigh

See which component is making the app slow.

More details -> https://github.com/aruntk/polymer-weight

Offline First

Service worker caching is enabled in this app.

Service Worker - public/sw.js.

Initializing - client/main.js.

Web Manifest - public/web.manifest.js, client/main.html.

More about Service Worker - https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

This will cache all your assets, js, html, css etc.

What this wont do - It'll not cache db data.

To do this there are two methods

  1. Minimongo caching - Use ground:db

  2. Use iron-local-storage

To check this feature

  1. Browser console -> Network tab -> check offline -> Reload window
  2. Open the app in mobile chrome browser. Select settings -> add to home screen. Go to home screen and click on the mwc icon.

How to open app on mobile browser - https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Directory structure

synth

you can add js in separate file or you can add it inside the element html file using script tag.

client/your-element.html

//client/main.js

import '../imports/startup/client/router.js';
<!-- client/main.html -->
<head>
  <title>Synthesis</title>
  <style>
body{
  padding:0px;
  margin:0px;
}
  </style>
</head>
<body class="fullbleed">
  <mwc-layout id="demo-landing">
    <div region="header"></div>
    <div region="main"></div>
  </mwc-layout>
</body>

Routing .

//client/your-router.js

FlowRouter.wait();

document.addEventListener("WebComponentsReady", function() {

  FlowRouter.initialize({
  });
});

FlowRouter.route("/:view?", {
  name:'landing',
  triggersEnter:[function(c,r){
    if(!c.params.view)
      r("/home");
  }],
  action:function(params,queryParams){
    mwcLayout.render("demo-landing",{"main":"test-layout"});
  }
});


import '../../ui/layouts/test-layout.js';
//imports/ui/layouts/test-layout.js
import './test-layout.html';

Polymer({
  is:"test-layout",
  behaviors:[mwcMixin,mwcRouter],
  tracker:function(){
    this.set("status",Meteor.status().status);
  },
  
...

});
<link rel="import" href="../components/test-element.html">
<dom-module id="test-layout">
  <style>
  /*style goes here */
    ... 
    
  </style>
  <template>
    <paper-header-panel class="fit layout">
    
     ...
     
    </paper-header-panel>
  </template>
</dom-module>

bower_components are kept inside imports/ui/bower_components folder.

bower.json

{
    "dependencies": {
        "paper-elements": "PolymerElements/paper-elements#^1.0.5",
        "iron-pages": "PolymerElements/iron-pages#^1.0.0",
        "polymer": "Polymer/polymer#^1.0.0"
    },
    "name": "synthesis-demo",
    "version": "0.0.1"
}

Docs

Use meteor data reactively inside polymer components - https://github.com/meteorwebcomponents/mixin/blob/master/README.md

Reactively route polymer projects with flowrouter - https://github.com/meteorwebcomponents/router/blob/master/README.md

How to render polymer elements with mwc:layout - https://github.com/meteorwebcomponents/layout/blob/master/README.md

Forum

https://forums.meteor.com/t/polymer-meteor-with-meteor-webcomponents-packages/20536

MWC packages included.

mwc:synthesis - Synthesis is meteor + polymer.

mwc:mixin - Polymer data package

mwc:router - Flowrouter with polymer

MWC Layout - polymer layout renderer . Added using bower.

Other Packages Used

Flow Router - Carefully Designed Client Side Router for Meteor

You can’t perform that action at this time.