https://www.polymer-project.org/1.0/start/toolbox/deploy https://youtu.be/ByV3MWTa1fw | https://www.youtube.com/watch?v=ByV3MWTa1fw&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=1
- polymer.json
- package.json
- gulpfile.js
npm install gulp
thennpm run build
orgulp
- For error debugging, run
polymer build -v
- Test build with serve command:
polymer serve build/bundled -p 8081
https://github.com/PolymerElements/generator-polymer-init-custom-build
http://softwareengineering.stackexchange.com/a/68150
Github backup instructions are at Dropbox/CodeBase/Automation/Shell/GitBackup.sh (at bottom of page โ currently labeled ITEM 4)
polymer lint --verbose --input src/app-main/app-main.html
polymer lint --help
polymer lint --verbose
"lint": { "rules": ["polymer-1", polymer-2", polymer-2-hybrid", ] }
https://github.com/Polymer/shop
mkdir shop
cd shop
polymer init shop
git clone https://github.com/Polymer/shop.git
cd shop
bower install
Polymer Shop Demo Vaadin Velo Theme Vaadin CheapTickets Demo CSS Grid Demo: Source Code CSS Grid Demo: Article CSS Grid Demo: Supplemental Reading
v2.0 Element Definition v2.0 Cheat Sheet
- Solved for standardized content styling by creating custom element.
- Implemented throught the app to hold content, display information on both the list and detail views.
- Implemented split-screen style viewing of list items on left and detail of selected item on right side of view.
- TODO: a. Automate data retieval to fetch then push data from database to display and internal elements. b. Consider adding internal references to data node location by adding, say, a "name" property to the or elements. Then passing that "name" value to the .
- Implemented shell.
- Implemented .
- Implemented data architechture and data flow to Firebase.
- Implemented Material Design specs and professional app themes (e.g., Velo from Vaadin).
- Implemented extensive use of and lists to give 'mobile' look-feel.
- Extend mobile look-feel to tablet and desktop.
- Implemented and templated use of Cloud Functions for Firebase to automate server tasks.
- TODO: Refactor UI/UX to: a. more closely resemble standard Android apps (e.g., Settings, Gmail, Youtube, etc.). b. navigate with maximum use of 'lists within lists' nesting concept seen in standard Android apps.
- Clone Shop app. https://github.com/Polymer/shop
- Begin integration.
- Create app shell:
app-shell.html
- TODO: Complete shell and integration.
- Branch v05 to explore fixing
user-action-module/user-dialog.html
dialog.
- TODO: Merge v02a into v04
a. Preserve routing structure
b. Preserve Vaadin Board
c. Guard against introducing
polymer build
errors
- Cloned Vaadin-Board-Demo.
- Added features.
- Added Vaadin Valo Theme and QuickTickets Demo.
- PSK2 plus added gage progressbar.js
- Broken by running
polymer build
- Extended swap/v01
- Began experimenting with dashboard components
- TODO: a. Improve UX b. Improve navigation experience c. Leverage other apps 1. Home Assistant | https://home-assistant.io/demo/ | https://github.com/home-assistant/home-assistant-polymer 2. Polymer Admin | https://polymer-admin.firebaseapp.com/ | https://github.com/akveo/polymer-admin 3. FitBit | https://www.microsoft.com/en-us/store/p/fitbit/9wzdncrfj1xx# d. Begin with PSK-2 e. Add dashboard components, paper drawer panel, minimizer, as described f. Fix build error by starting with PSK-2 (zero build errors) and building incrementally
- Forked emna/v15
- Created MVP (minimum viable product) for deployment and beta test release
- TODO: a. Replace iron-data-table with Vaadin Grid 2.x -- for 1. CRUD and 2. data refreshing b. Improve UX 1. Minimize clicks 2. More logical navigation layout
Name | Demo | Source |
---|---|---|
Vaadin Board | Demo | Source |
Moji Brag | Demo | Source |
Blocks Dashboard | Demo | None |
Home Assistant | Demo | Source |
Polymer Admin | Demo | Source |
Admin Template | Demo | Source |
Vaadin Dashboard Demo | Demo | Source |
Vaadin Valo Theme | Demo | Source |
Vaadin Expense Manager | Demo | Source |
Vaadin Fitness Tracker | None | Source |
Hoverboard | Demo | Source |
git clone https://github.com/vaadin/vaadin-board-demo
cd vaadin-board-demo
bower install
polymer serve
Say, v1.0 is the latest stable release. But you want the features of v3.0. Use:
bower install --save vaadin-context-menu#3.0.0-alpha1
30-day free trial license for Vaadin Charts and clicking the orange "Free trial key" button. It gives you a trial key. See the help section which shows you how to install the key.
Base | Complementary | Palette | Source |
---|---|---|---|
rgb(0, 105, 204) | Apple web site: https://support.apple.com/en-us/HT201236 | ||
#0079FF | #FF9A00 | Palette | Apple osX, iOS, Valo? |
#00B4F0 | #FF8300 | Palette | Vaadin (Theme-A) primary ("--water") |
#33383A | #5C5751 | Palette | Vaadin (Theme-A) secondary ("--charcoal") |
#414B56 | #847661 | Palette | Vaadin (Theme-B) secondary valo-menu-background-color |
#1879DB | Valo Theme Primary ("--water", gradient: low:rgb(22, 110, 213), mid:rgb(24, 121, 219), high:rgb(27, 135, 227) | ||
#1778DC | Valo Theme Primary ("--water", rgb(23, 120, 220)) (measured by Digital Color Meter : macOS > Utilities) | ||
#187CDD | Valo Theme Primary ("--water", rgb(24, 124, 221)) (measured by Digital Color Meter : macOS > Utilities) | ||
#4B4B4B | Valo Theme Secondary ("--charcoal", rgb(75, 75, 75)) (measured by Digital Color Meter : macOS > Utilities) | ||
#434343 | Valo Theme Secondary-selected ("--charcoal-dark", rgb(67, 67, 67)) (measured by Digital Color Meter : macOS > Utilities) | ||
#585858 | Valo Theme Secondary-selected ("--charcoal-light", rgb(88, 88, 88)) (measured by Digital Color Meter : macOS > Utilities) | ||
#FAFAFA | Valo Theme Background ("--smoke", rgb(250, 250, 250)) (measured by Digital Color Meter : macOS > Utilities) |
Demo app for vaadin-board element
First, install Polymer CLI using npm (we assume you have pre-installed node.js).
npm install -g polymer-cli
bower install
This command serves the app at http://localhost:8080
and provides basic URL
routing for the app:
polymer serve --open
Install polymer-cli:
npm install -g polymer-cli
# Using CLI
mkdir shop
cd shop
polymer init shop
# Or cloning direct from GitHub
git clone https://github.com/Polymer/shop.git
cd shop
bower install
polymer serve
polymer test
Build presets provide an easy way to define common build configurations in your polymer.json
file. There are 2 build presets we put in polymer.json
file in Shop:
es5-bundled
- js: {minify: true, compile: true}
- css: {minify: true}
- html: {minify: true}
- bundle: true
- addServiceWorker: true
- addPushManifest: true
- insertPrefetchLinks: true
es6-unbundled
- js: {minify: true, compile: false}
- css: {minify: true}
- html: {minify: true}
- bundle: false
- addServiceWorker: true
- addPushManifest: true
- insertPrefetchLinks: true
Run the command to build the presets:
polymer build
This command serves the es5-bundled
build version of the app:
polymer serve build/es5-bundled
This command serves the es6-unbundled
build version of the app:
polymer serve build/es6-unbundled