Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aruntk/kickstart-meteor-polymer-with-app-route
Demo for meteor + polymer using meteorwebcomponents projects.
https://github.com/aruntk/kickstart-meteor-polymer-with-app-route
bower-components meteor meteor-polymer mwc polymer synthesis
Last synced: about 1 month ago
JSON representation
Demo for meteor + polymer using meteorwebcomponents projects.
- Host: GitHub
- URL: https://github.com/aruntk/kickstart-meteor-polymer-with-app-route
- Owner: aruntk
- License: mit
- Created: 2016-07-28T08:57:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-04T07:39:29.000Z (over 7 years ago)
- Last Synced: 2024-10-01T14:51:18.985Z (about 2 months ago)
- Topics: bower-components, meteor, meteor-polymer, mwc, polymer, synthesis
- Language: JavaScript
- Homepage:
- Size: 11.4 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Synthesis is meteor + polymer
## Usage
### Installation.
#### Clone the repo
```sh
git clone [email protected]:aruntk/kickstart-meteor-polymer-with-app-route.git your-app-folder
```
[change remote url](https://help.github.com/articles/changing-a-remote-s-url/).
#### Building
Type the following in shell. Script install bower components and npm packages.
```sh
#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
```sh
meteor
```
### Polymer Settings
Create client/lib/settings.js
Why lib directory ? Settings code should run before anything else.
```js
/* client/lib/settings.js */
window.Polymer = {
//dom: 'shadow',
lazyRegister: true
};
```
### Polymer Weight
```sh
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](public/sw.js).
Initializing - [client/main.js](client/main.js).
Web Manifest - [public/web.manifest.js](public/web.manifest.js), [client/main.html](client/main.html#L5).
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](https://github.com/GroundMeteor/db)
2. Use [iron-local-storage](https://elements.polymer-project.org/elements/iron-localstorage)
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
you can add js in separate file or you can add it inside the element html file using script tag.
client/your-element.html
```js
//client/main.js
import '../imports/startup/client/router.js';
```
```html
Synthesis
body{
padding:0px;
margin:0px;
}
```
#### Routing .
```html
...
...
```
```js
//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
```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"
}
```
### Docs
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
### Forum
https://forums.meteor.com/t/polymer-meteor-with-meteor-webcomponents-packages/20536
### MWC packages included.
[mwc:synthesis](https://github.com/meteorwebcomponents/synthesis) - Synthesis is meteor + polymer.
[mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package