Web components support

core
1

Recently Polymer 1.0 was announced on Google IO.
Googleā€™s headline is simple and straightforward:

"There is component for that"

Some considerations:

  • Web Components is frontend future.
  • Polymer make sense. Blaze grow dim in comparison with Polymer. Especially with awesome officially supported by Google cross platform Material Design library of iron, platinum and paper elements.
  • Firebase + Polymer seems more simple to use though closed source backend is not the thing.

I am not experienced web developer. I am try to implement my app using - Meteor-Polymer. Thinking to move to Asteroid backend. But to be honest I donā€™t have enough background to understand all consequences of such a decision. That is there I need community help.

It feels for me that there is no meteoric way of using nor Polymer nor Web components with Meteor. Issues that I care of (correct me if not the true):

  • No support of MDG
  • Compatibility issues: Body tag, non-reactive components code, templating, etc.
  • Documentation: Almost everything from official Meteor docs just donā€™t work.
  • Packages compatibility: Forget about packages depending on Blaze.

I know that recently Uri Goldshtein joined MDG. That make me think that native support of Web Components right on the way inasmuch as Angular 2 is all about Web Components.

That is there I need MDG help as right now I am between two business decisions:

  • Move my product really fast with Firebase + Polymer. I donā€™t like this solution due to closed source nature, pricing, cropped db.
  • Learn how to connect and support Polymer with Meteor. That is what I love but donā€™t sure that I will be able to do it.

I do believe that official Polymer support will boost Meteor adoption as it is (almost) ready to use ultimate UI solution. So any official comments regarding Web Components by @sashko or guys from MDG are highly appreciated.

Update:
It seem that topic is really hot. I will collect related topics here:

Update 2:
Iā€™ve moved this topic to the ā€œcoreā€ category.

3 Likes
2

The state of my test integration:

You can always write your own polymer component to wrap whole application and use meteor to yeld data into it as separate html elements.
As I did in Fun with Polymer Google maps
There is element for that :smiley:

But you can also do your own data binding using blaze, for example my approach to Tabs + Iron Pages:

<template name="tabs">
	<paper-tabs id="tabs-select" selected={{defaultSelection}}>
		<paper-tab>Chat</paper-tab>
		<paper-tab>Search</paper-tab>
		<paper-tab>Social</paper-tab>
	</paper-tabs>
</template>

And JS part

Template.tabs.events({
	"click paper-tab": function() {
		Session.set( "tabSelected" , $( "#tabs-select" ).prop( "selected" ) );
	}
});

Template.tabs.helpers({
	defaultSelection: function() {
		return Session.get("tabSelected");
	}
})

Tracker.autorun(function() {
	$( "#pages-select" ).prop( "selected", Session.get( "tabSelected" ) );
})

Similar with input fields, you can provide value=ā€œsomethingā€ for whole element

<paper-input label="Title" id="searchTitle"  value={{initValue 'searchTitle' }}>
	<paper-input-container>
		<input is="iron-input"   type="text">
	</paper-input-container>
</paper-input>

Template.searchForm.helpers({
    initValue: function(sessionName) {
      switch (sessionName) {
        case "searchTitle" :
          return Session.get('activeSearch').searchTitle;
          break;
        case "searchLanguage" :
          return Session.get('activeSearch').searchLanguage;
          break;
      }
      
    }
})

And access or change it using jquery

Template.searchForm.events({
    "keyup #searchTitle": _.debounce(function (event, template) {
    	RunSearch({searchTitle: event.target.value, searchSkip: 0});
   },1000),
   "keyup #searchLanguage": _.debounce(function(event, template) {
      RunSearch({searchLanguage: event.target.value, searchSkip: 0});
   },1000)
});

RunSearch serialize that query and call router, so I keep track of given query also in URL.
I have not tested it on all browsers and such, just playing with it :smiley:

good luck

1 Like
3

And when now looking back on this code, I must be drunk to write that.
Cause I am setting default value by same session variable as I am changing, so it reactive re-run helper function after each click, updating it to same value.

Well, time to rewrite it if I figure out better way :smiley:

1 Like