From 1318347fd811688ec67af9fd202c60eb05a9f410 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sun, 12 Jul 2015 22:38:54 -0700 Subject: [PATCH] Add README.md --- README.md | 45 +++++++++++++++++++++++++++++++ docs/es2015-build-steps.png | Bin 0 -> 26057 bytes docs/screenshot.png | Bin 0 -> 360320 bytes docs/webcomponent-embed-js.png | Bin 0 -> 15086 bytes docs/webcomponent-js-modules.png | Bin 0 -> 16986 bytes scripts/minify.js | 2 -- 6 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 README.md create mode 100644 docs/es2015-build-steps.png create mode 100644 docs/screenshot.png create mode 100644 docs/webcomponent-embed-js.png create mode 100644 docs/webcomponent-js-modules.png diff --git a/README.md b/README.md new file mode 100644 index 0000000000..6424a1a1fd --- /dev/null +++ b/README.md @@ -0,0 +1,45 @@ +# Home Assistant Polymer + +This is the repository for the official Home Assistant frontend. The frontend is built on top of the following technologies: + + * [Polymer](https://www.polymer-project.org/1.0/) + * [NuclearJS](http://optimizely.github.io/nuclear-js/) + * [ES2015 via Babel](http://babeljs.io/) + * [WebPack](http://webpack.github.io/) + * [Bower](https://bower.io) for Polymer package management + * [NPM](https://npmjs.com) for JavaScript package management + +[![Screenshot of the frontend](https://raw.githubusercontent.com/balloob/home-assistant-polymer/master/docs/screenshot.png)](https://home-assistant.io/demo/) + +## An unusual approach to Polymer + +As you might have noticed, we are using two different package managers. This might seem crazy but we have good reasons. Let us explain… + +One of the big advantages of webcomponents is that you can ship all your HTML resources in a single file: HTML-template, CSS and JavaScript. From your HTML template and JavaScript you are then able to embed extra webcomponents and use it to build a whole UI. + +![Structure webcomponents](https://raw.githubusercontent.com/balloob/home-assistant-polymer/master/docs/webcomponent-embed-js.png) + +Before the release of Polymer 0.8, you would define all parts of your webcomponent inside a ``. With the introduction of Polymer 0.8 the structure of a webcomponent has been split up into a `` for the CSS and HTML template and a `