polymer interview questions
Top polymer frequently asked interview questions
In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools:
I've also seen a selector with pseudo selector ::shadow.
So, what do /deep/ and ::shadow in a CSS selector mean?
Source: (StackOverflow)
What's the difference between those three things? As far as I understand:
- Bootstrap is a library which helps you to use nice pre-made elements on your webpage,
- Dart is another language which helps you to create apps faster than those made with JS (but can be converted to JS)
- Polymer is something like bootstrap, but let you to create all those elements (bootstrap is a collection of ready elements, but polymer allows you to create custom elements)
Please tell me if I got it right or give me some hints what are the differences between them.
Source: (StackOverflow)
On the Polymer Getting Started page, we see an example of Polymer in action:
<html>
<head>
<!-- 1. Shim missing platform features -->
<script src="polymer-all/platform/platform.js"></script>
<!-- 2. Load a component -->
<link rel="import" rel='nofollow' href="x-foo.html">
</head>
<body>
<!-- 3. Declare the component by its tag. -->
<x-foo></x-foo>
</body>
</html>
What you will notice is <x-foo></x-foo> being defined by platform.js and x-foo.html.
It seems like this is the equivalent to a directive module in AngularJS:
angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
$scope.text = 'hey hey!';
})
.directive('x-foo', function() {
return {
restrict: 'EA',
replace: true,
controller: 'X-Foo',
templateUrl: '/views/x-foo.html',
link: function(scope, controller) {
}
};
});
What is the difference between the two?
What problems does Polymer solve that AngularJS has not or will not?
Are there plans to tie Polymer in with AngularJS in the future?
Source: (StackOverflow)
What are the main benefits of Facebook's React over the upcoming Web Components spec and vice versa (or perhaps a more apples-to-apples comparison would be to Google's Polymer library)?
According to this JSConf EU talk and the React homepage, the main benefits of React are:
- Decoupling and increased cohesion using a component model
- Abstraction, Composition and Expressivity
- Virtual DOM & Synthetic events (which basically means they completely re-implemented the DOM and its event system)
- Enables modern HTML5 event stuff on IE 8
- Server-side rendering
- Testability
- Bindings to SVG, VML, and
<canvas>
Almost everything mentioned is being integrated into browsers natively through Web Components except this virtual DOM concept (obviously). I can see how the virtual DOM and synthetic events can be beneficial today to support old browsers, but isn't throwing away a huge chunk of native browser code kind of like shooting yourself in the foot in the long term? As far as modern browsers are concerned, isn't that a lot of unnecessary overhead/reinventing of the wheel?
Here are some things I think React is missing that Web Components will care of. Correct me if I'm wrong.
- Native browser support (read "guaranteed to be faster")
- Write JavaScript in vanilla JavaScript, write CSS in CSS, write HTML in HTML.
- Style encapsulation using Shadow DOM
- React instead has this, which requires writing CSS in JavaScript. Not pretty.
- Two-way binding
Source: (StackOverflow)
I have elements built with Polymer which needs to run on multiple sites (a widget) which:
- Don't have Polymer included (fine, I can include)
- Polymer already included at a compatible version (brilliant, unlikely)
- Polymer at an unknown version (too old or too new, tricky)
Is it possible to load Polymer in a namespace? e.g. myObj.Polymer or MyPolymerName
I have found polymer-js which will let me load Polymer as a module, but this isn't an official way. This still exports to the global scope
Source: (StackOverflow)
I know that this has been asked previously, most notably here.
However, the answers seem to me quite abstract and I find my self quite confused in practice.
The .vs answer seem to be:
Polymer (and more correctly, Shadow DOM) create the ability to not
only compose bits of HTML, but to encapsulate them as well. This is a
fundamentally new capability and one that can be used with any other
templating system or framework to enhance their power.
Which doesn't really tell me all that much, as far as I understand angular directives do pretty much the same thing in practice, although polymer elements might be a bit more efficient performance wise. I'm sure that "encapsulate" has some kind of deeper meaning here in this context that I am not comprehending.
Let's say I'm developing an AngularJS web application. When, how and why would I use polymer elements over angular directives?
Would polymer elements be used instead of angular directives, if so when would one use one over the other? Or would angular directives be implemented in terms of polymer elements?
Source: (StackOverflow)
The question is in regard to AngularJS, BackboneJS, EmberJS and the other frameworks.
I have to translate a project from php to javascript and I have to decide, if I am going to use:
- AngularJS
- Polymer
- A combination of them
I prefer using Polymer, because I like it.
Yet, I am missing (and correct me where I am wrong) the ability to make:
- Views and link between them (like in Angualar)
- Controllers
I know that the structure is up to me, on how to build my application, but it seems that angularjs has a well predefined structure for building mvc-applications.
Therefore I want to know: Is Polymer a substitute for Angular, if you want to build a well structured web application or is Polymer complementary library to be used along other existing frameworks?
EDIT 21.09.2014
No one really answered the question to my fullest satisfaction, therefore I marked it as not answered yet. Many say it just "DEPENDS". But no one is able to elaborate, on what exactly it depends.
On the complexity of the application? On the needs of the application? For what needs does Polymer fit and for which doesn't it fit? These are the answers I was looking for.
Some say it can be used as a frontend framework. Others say that is just a library and others say "Yes and No". Unfortunately rather confusing answers.
I wish there was an official answer to this, but I let you in on what my feeling is. I believe it is a substitute, but Polymer hasn't yet reached the structure, that other frameworks require to work. Maybe this is intentional, maybe it is just a matter of unreached maturity, because the framework is new.
I hope that the creators will explain, when it is best to use AngularJS and when should someone use Polymer for building large scalable web applications.
EDIT 15.08.2015
Polymer 1.0 is out. And it turns out Polymer is officially NOT a framework and is supposed to work in a complentary way with other frontend frameworks.
https://youtu.be/fD2As5RmM8Q?t=6m42s
Source: (StackOverflow)
In Dart's Web UI, it was possible to pass arbitrary data to function in response to events, for example, the following snippet passes the value 2 to the increment(int incBy) method in response to the button's on-click event:
<!-- Web UI -->
<element name="x-click-counter">
<template>
<button on-click="increment(2)"> <!-- passing a value of 2 -->
Click me
</button>
</template>
</element>
<script>
import 'package:web_ui/web_ui.dart';
class CounterComponent extends WebComponent {
void increment(int incBy) { // accept the value of 2
count = count + incBy;
}
}
</script>
In Polymer (and Polymer.dart), the on-click event attribute requires a string version of the function name, rather than an actual function call. This is described on the polymer docs page as:
The value of an event handler attribute is the string name of a method
on the component. Unlike traditional syntax, you cannot put executable
code in the attribute.
Using polymer.dart, this looks like:
<polymer-element name="x-click-counter">
<template>
<button on-click="increment"> <!-- can't pass a value of 2, as you need to pass a string -->
Click Me
</button>
</template>
</polymer-element>
<script>
import 'package:polymer/polymer.dart';
@CustomTag("x-click-counter")
class CounterComponent extends PolymerElement with ObservableMixin {
@observable int count = 0;
void increment(Event event, var detail, var target) { // How do I pass 2 to this function?
count = count ++;
}
}
</script>
Question: How do I pass an arbitrary value to the increment function?
Source: (StackOverflow)
I've created a Polymer element for rendering markdown which uses the marked.js library. I was wondering, what is the recommended way of loading in its dependencies?
Should I just use a script tag?
<script src="../marked/lib/marked.js>
Or would it be better to put all of my dependencies into an html import and link to that one file. In this case I only have one dependency but I could easily have more.
<!-- in scripts.html -->
<script src="../marked/lib/marked.js>
<script src="../foo/foo.js>
<script src="../bar/bar.js>
<!-- in mark-down.html -->
<link rel="import" rel='nofollow' href="scripts.html">
Note: These paths assume my element (and its dependencies) are being installed with bower so they should all be siblings in bower_components.
Source: (StackOverflow)
Given an element like:
<polymer-element name="custom-element">
<template>
<style>
#container {
color: red;
}
</style>
<div id="container" on-click="{{clickContainer}}">
... lots of other stuff here ...
</div>
</template>
<script>
Polymer('custom-element', {
clickContainer: function() {
}
});
</script>
</polymer-element>
I'd like to have another element that wraps the first:
<polymer-element name="my-custom-element" extends="custom-element">
<!-- extra styling -->
<script>
Polymer('my-custom-element', {
clickContainer: function() {
this.super();
}
});
</script>
</polymer-element>
My problems:
- What's the best way to specify additional styling ?
- Can I wrap the base element in additional markup (like another container) ?
- Can I select elements from the base element ? Something like
<content select=".stuff"> but for the base's shadow markup.
Source: (StackOverflow)
Generally
I'm finding it difficult to use the core-animated-pages Polymer element to implement a chip list to card type pattern when I have a very long list that scrolls the page. I think the difficulty is that once the transition has finished, the hidden portion is taken out of the layout and I'm having a hard time figuring out a way around this.
Easy Illustration
JSFiddle: http://jsfiddle.net/hmknv3jh/
On the output, scroll to the bottom and click a chip, the problem should be obvious.
Details
Make sure you have to scroll to get to a chip toward the bottom and click one. The chip flies off the screen to the top then suddenly the card appears centered and the list behind is gone (along with the scroll bars). Once you click the card, it flies off the screen at the bottom and the list appears again, but you're at the top of the page, not the bottom where you clicked.
Help?
Does anyone know the best way to fix this? Ideally I would like the card to behave like a modal dialog with no movement in the list behind, but still have the nice hero transitions between the chips and card.
Source: (StackOverflow)
I was wondering how much SEO friendly could Polymer be.
As all the code is fully dynamic like Angular, how can the search engines pick up the information of the page? Because also doing things in Angular, I really had a hard time making it SEO friendly.
Will there be a tool to generate the _escaped_fragment_ automatically to feed the search engines?
I guess Google may have thought of the solution, but I wasn't able to find it (even on Google).
According to the Polymer FAQ all we have is
Crawlers understand custom elements? How does SEO work?
They don’t. However, search engines have been dealing with heavy AJAX based application for some time now. Moving away from JS and being more declarative is a good thing and will generally make things better.
http://www.polymer-project.org/faq.html#seo
Not very helpful
Source: (StackOverflow)
I'm trying to use paper-tabs inside new element (tabs-list) but after print tabs I can't use querySelector to change selected one.
Element code (without style):
<link rel="import" rel='nofollow' href="../components/polymer/polymer.html">
<link rel="import" rel='nofollow' href="../sprint-service/sprint-service.html">
<link rel="import" rel='nofollow' href="../components/paper-tabs/paper-tabs.html">
<polymer-element name="tab-list" attributes="show">
<template>
<sprint-service id="service" sprints="{{sprints}}"></sprint-service>
<paper-tabs selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab>
<template repeat="{{sprint in sprints}}">
<paper-tab name="{{sprint.id}}">{{sprint.id}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer('tab-list', {
ready: function() {
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
})
}
});
</script>
</polymer-element>
Index.html code (whitout style):
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform-dev/platform.js"></script>
<link rel="import" rel='nofollow' href="../components/font-roboto/roboto.html">
<link rel="import"
rel='nofollow' href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
rel='nofollow' href="../components/core-toolbar/core-toolbar.html">
<link rel="import" rel='nofollow' href="tab-list.html">
<link rel="import" rel='nofollow' href="post-list.html">
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<tab-list></tab-list>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
</div>
</core-header-panel>
<script>
var list = document.querySelector('post-list');
</script>
</body>
</html>
But
querySelector('paper-tabs') = *null*
I've tried to put the eventListener in index.html but I have the same problem.
can anyone tell me where the problem is?
Thank you very much!
Source: (StackOverflow)
I have been developing a chrome extension using Polymer for some time now and I have a couple of concerns about releasing it in it's current state. I would like to hear about some strategies for preventing the following problems I have been facing:
1) Loading Polymer into the page leaks into the global namespace. Polymer does not come bundled into JS files but rather, it comes in the form of an html page and requires the user to use an HTML import to load it into the page. AFAIK, content scripts only allow for CSS and JS but not HTML. To resolve this issue, I am including it by dynamically generating a link element and adding it as such into the page:
function loadUrl(url) {
return new Promise(
function(resolve, reject) {
var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', url);
link.onload = function() {
resolve(url);
};
document.head.appendChild(link);
});
}
loadUrl(chrome.extension.getURL("polymer/polymer.html")).
then( loadUrl(chrome.extension.getURL("my/component.html")) )
Once loaded into the host page, it does not run in isolation like content scripts and can cause namespace conflicts if the page already has Polymer loaded.
2) Polymer does not tell you when it is loaded and ready to use. Polymer does not (currently) fire an event when it has loaded and as result, my components sometimes load before Polymer does and break.
To mitigate this, I am triggering a custom event at the end of polymer-micro.html (which is where Polymer) is defined as such:
var ev = new CustomEvent('polymer-loaded');
document.dispatchEvent(ev);
3) The Polybuild tool does not generate proper code for a chrome extension. As useful as it is, it generates a separate javascript file outside of the dom-module causing a namespace leak into the global window object. For example, if was importing jQuery in my module, Polybuild would generate a JS file containing jQuery outside of the DOM module causing it to be attached to the host window object - a big no-no in a chrome extension.
Thanks for the feedback.
At the time of writing this, I am using Polymer 1.2.3
Source: (StackOverflow)
I've been muddling around with Polymer 1.0 since its release, and I've hit a use case where a select list just won't be sufficient (too many options to select from). What I really need is an autocomplete textbox.
Is there one built-in or planned in the paper or iron Polymer controls? Or should I be looking at autocomplete solutions from other frameworks? So far, I've been able to keep my app light-weight, and I'd prefer to avoid other frameworks if I can help it.
Thanks,
Ryan
Edit: The best place I've seen to bring up a first-party developed autocomplete is on the PolymerElements/paper-elements repo on GitHub. I'd discuss at https://github.com/PolymerElements/paper-elements/issues/26.
Source: (StackOverflow)