Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to use Polymer and Brick together?

There are some great components provided by Brick and other provided by Polymer. Is it technically possible to use them together ?

like image 312
Alexandre Ardhuin Avatar asked Mar 05 '14 10:03

Alexandre Ardhuin


2 Answers

x-tags (the basis for Brick) and Polymer use exactly the same polyfills, but x-tags uses a reduced set.

Brick itself ships as a single minified JS file, so that distribution doesn't work with Polymer (if you load brick.min.js and platform.js, there are polyfill collisions).

However, the x-tags themselves can work with Polymer. If you load platform.js (the polyfills), then x-tag-core (x-tag's sugaring layer), then you can import Polymer elements and load x-tags together with no problems.

This process can be simplified using imports, but x-tags/brick doesn't ship with supporting imports files (yet, but we are trying to work that out). There's an article at http://www.polymer-project.org/articles/polymer-xtag-vanilla.html with more information and some examples.

like image 148
Scott Miles Avatar answered Nov 13 '22 03:11

Scott Miles


Yes, It is 100% possible to use Brick & Polymer, see this code - http://www.polymer-project.org/articles/polymer-xtag-vanilla.html and Code - https://github.com/x-tag/interop-examples

Without import, here is the flow

  • load https://github.com/Polymer/platform/blob/master/platform.js
  • load https://github.com/x-tag/core/blob/master/src/core.js
  • load custom element - https://github.com/mozilla/brick/blob/master/dist/x-tag-flipbox.js

Here you go, See jsfiddle for this ! http://jsfiddle.net/nsisodiya/266tt/

<head>
<script src="http://rawgit.com/Polymer/platform/0.2.4/platform.js" type="text/javascript"></script>
<link href="http://rawgit.com/mozilla/brick/1.0.1/dist/x-tag-flipbox.css" type="text/css" rel="stylesheet">
<script src="http://rawgit.com/x-tag/core/1.0.0-beta-4/src/core.js" type="text/javascript"></script>
<script src="http://rawgit.com/mozilla/brick/1.0.1/dist/x-tag-flipbox.js" type="text/javascript"></script>
</head>
like image 35
Narendra Sisodiya Avatar answered Nov 13 '22 05:11

Narendra Sisodiya