git clone [email protected]:aruntk/kickstart-meteor-polymer-with-app-route.git your-app-folderType the following in shell. Script install bower components and npm packages.
#shell
cd your-app-folder
./build.shcleanup bower_components script is also there in build.sh
-
Install it as
./bower.sh install --save example-component. -
Input component name
example-componentto importexample-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 theimports/ui/imports.htmlfile.
meteorCreate client/lib/settings.js
Why lib directory ? Settings code should run before anything else.
/* client/lib/settings.js */
window.Polymer = {
//dom: 'shadow',
lazyRegister: true
};npm run weighSee which component is making the app slow.
More details -> https://github.com/aruntk/polymer-weight
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
-
Minimongo caching - Use ground:db
To check this feature
- Browser console -> Network tab -> check offline -> Reload window
- 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/
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">
<test-layout></test-layout>
</body><!-- imports/ui/layout/test-layout.html -->
...
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/:page" data="{{routeData}}"></app-route>
...//imports/ui/layouts/test-layout.js
import './test-layout.html';
Polymer({
is:"test-layout",
behaviors:[mwcMixin],
tracker:function(){
this.changeStatus();
},
changeStatus(){
this.set("appState",`Page : ${this.routeData.page || 'home'} , Status : ${Meteor.status().status}`);
if(!Meteor.isCordova){
this.notCordova = true;
}
},
properties:{
route:Object,
routeData:{
type: Object,
value: function() {
return {
page: ''
};
}
},
appState:{
type:String
},
notCordova:Boolean
},
trackers:["changeStatus(routeData.page)"],
second:function(){
this.set("routeData.page", "second");
},
home:function(){
this.set("routeData.page", "");
}
});
bower_components are kept inside public/bower_components folder.
bower.json
{
"dependencies": {
"paper-elements": "PolymerElements/paper-elements#^1.0.5",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0",
"app-route": "PolymerElements/app-route#^0.9.2"
},
"name": "synthesis-demo",
"version": "0.0.1"
}Use meteor data reactively inside polymer components - https://github.com/meteorwebcomponents/mixin/blob/master/README.md
Refer (app-route)[https://github.com/PolymerElements/app-route] for info regarding routing
https://forums.meteor.com/t/polymer-meteor-with-meteor-webcomponents-packages/20536
mwc:synthesis - Synthesis is meteor + polymer.
mwc:mixin - Polymer data package