I have worked around one year with Polymer 1 and 2 in a big company with large webcomponents catalog and I am confident webcomponents can be very usefull. I am aware about "cons ideas" like https://adamsilver.io/articles/the-problem-with-web-components/.
Now I am studding deepely how to efficiently use vanilla webcomponents. I just started with the premisse that using vanilla web-components will help to be a aligned with webcomponents improvement (I can't defend such idea - I just assume this for now). Then I am trying to create an stack for working with vanilla webcomponents.
Searching for a recommended approach for testing I reached https://open-wc.org/testing and I assume it is aimed to promote good practices without adds to specific framework (from its site: "Open Web Components is a community-effort, independent of any framework or company"). It is exactly what I am looking for: a kind of good pratices and well-known recommendation similar as we have for microservice from micorservice.io (this is just an analogy).
Trying it scaffold I got in package.json:
"dependencies": {
"lit-html": "^1.0.0",
"lit-element": "^2.0.1"
}
So, my main question is: why lit-html for a webcomponent?
Usefull doubts surrounding my main question, as far as I know lit-html is a framework sponsored by google and polymer team. Isn't that somehow forcing me to use polifylls to run in all browsers? Assuming I don't care about browsers not compliance with webcomponents, why would I need a framework?
Maintainer of open-wc here :)
The reason we recommend lit-html/element is because they are very small libraries that help you write web components, and dont lock you in to a framework. Down the line, LitElement simply extends HTMLElement, which makes it interoperable with other web components and even frameworks. LitElement also reduces the boilerplate you have to write for vanilla web components. We’re not married to it however, and personally I really enjoy vanilla component solutions. Also, most (if not all) of our tools should be compatible with web components.
Regarding polyfills; LitElement will attempt to use modern standards is possible (eg: constructable stylesheets), and use a fallback if not available. Loading the web components polyfills is up to the developer - not litelement. If you use our build configurations for rollup or webpack, you can opt in to having the polyfills loaded.
Hope that answers your questions, feel free to reach out!
Related
It's been about a while Polymer version 2 is available out there, but
few people talk about it
few developers write about it in their blogs
few developers share their workflow and their experiences
Polymer Project is powered by Google, and the team seems have impeccable philosophy behind it.
Beside lack of browser support, Polyfills are doing the job still fine.
By the way, It seems people don't prefer to switch on it and work on it although Web components is an standard of the web.
There's a big why for me, there should be an explanation.
This is I think is related to Stackoverflow However I know many wouldn't like this kind of questions.
First, it's actually a very new technology since Polymer 2 was officially released in May of 2017.
Second, the fact that it is supported by Google is not necessarily an advantage: web developers who want to rely on this company's products may prefer Angular, which is also promoted by Google and is much more mature and famous.
Third, the fact that it is founded on the Web components standard is not an advantage too:
polyfills are doing the job (though not always) but their use adds a bit of complexity and can introduce a gap in therm of performance between the native and polyfilled implementation of Custom Element and Shadow DOM.
developers who know Custom Elements and Shadow DOM may prefer to create Vanilla web components instead as they became very easy to design thanks to... Google :-) That's precisely the purpose of these new web standards.
Fourth, the Material Design flavor chosen for UI elements may not fit everyone's taste.
Fifth, version 2 is not fully compatible with version 1, which may bring some confusion for newcomers, and some disappointments for those who invested on the ephemeral version 1.
Finally, one can question if Polymer is a long-term framework or just a way to support the launch of the early standards (Custom Elements and Shadow DOM) proposed by Google, and promote their adoption.
PS
Some of the above points are only assumptions.
Personally, I started using Polymer 1 during a few months, then I switched to Vanilla Custom Elements.
because of that is harder to implement other than material design or bootstrap or other designing frameworks
bootstrap is easily implemented and no other things to do with it like adding javascript with each of components and each component have its own styles
but afterall polymer is good project for whom who has a better designing skills and bootstrap and other is'nt requires higher designing skills
Even though Polymer is getting closer and closer to native Vanilla web components the fact that they are still not fully supported across all Browsers makes it not really practical to use.
I personally like the idea that this(Polymer) might end one day with a somewhat seamless transfer to native components.
What I also picked up during talks and conversations with fellow developers is that React is way bigger in the states while Developers in Europe tend to choose rather Polymer. Why exactly that is I do not really know, but I believe that there are many factors influencing it and that it can't be pinpointed to a specific disadvantage or advantage of one of these libraries.
As Supersharp already mentioned Polymer is still pretty new compared to other libraries such as Angular & React. But the developer community is growing from year to year which was especially emphasized at the last Polymer summit in Copenhagen where everything was about "The Platform". This turned out to be the community, web standards and everything around it rather than a total Polymer worship which I felt pretty pleasant.
On last thing to add.
Although, Polymer might be backed by Google the team working on it is relatively small. Youtube just switched to a 100% Polymer and what I picked up is that the team that made this happen is way bigger than the actual team developing the platform.(We are talking about a handful people here).
I use Polymer 2 for a small demo project mid 2017 (RC2, not final one), was nice and enjoyable. For my point of view, it is easier than Angular (1.6), but I don't have a lot of experience with it.
Pro
I like this idea of a component for each problem
Easy to split data (properties) and template
Easy use of events
Con
CSS rules was really intuitive
Polymer 2 Example Element
<dom-module id="input-array-element">
<template>
<h3>Inputs Array</h3>
<template is="dom-repeat" items="{{technology}}">
<input type="text" value="{{item.label::input}}">[[item.label]]<br/>
</template><br>
</template>
<script>
class InputArrayElement extends Polymer.Element {
static get is() { return 'input-array-element'; }
static get properties() {
return {
technology : {
type: Array,
value: [
{id:"php", label:"PHP", selected:false},
{id:"js", label:"Javascript", selected:false},
{id:"html", label:"HTML", selected:false},
{id:"css", label:"CSS", selected:false},
],
notify: true
}
}
}
ready() {
super.ready();
this.addEventListener("technology-changed", function(e){
console.log(e);
});
}
}
window.customElements.define(InputArrayElement.is, InputArrayElement);
</script>
</dom-module>
I am going to port our windows-based Customer Management software to Web-based. I find polymer may be a choice.
However, for our usage, we can't find polymer component has table-view, drop-down menu(aka. the "select" element in html), date-picker, tree list.
Will polymer add these components later? Or these components will not be the target?
Thanks,
Barry
Polymer is just primarily a polyfill library that helps enabling HTML 5 Web Components in browsers that don't support them by themselves.
Web Components can be written by any developer, so you might need to develop some controls on your own especially the table view one. I'd guess you'll find most of the others mentioned in your question implemented one way or another. You should check out some of the WebComponents collection pages:
http://customelements.io/
http://component.kitchen/
http://bower.io/search/?q=web-components
For your table view control: I had a similar problem couple of years ago and had to implement my own solution. Maybe you can find a regular HTML library that supports table views and make it a (Polymer) Web Component by yourself.
I want to start a project and I am evaluating the architecture.
And now I am at point to decide the front end components.
I want to use HTML5 + Css3 + Javascript
On Javascript side I don't know what do you recommend. YUI or Backbone. I don't know how to evaluate what can be the best for me. The idea is to create a Browser web app and a Mobile app.
Do you recommend another framework for do that? Or some book, url or something that expose how to organize my front end?
This might be a bit late. But I will say this. I've looked through these so far:
Angular, Knockout, Backbone, YUI
And I read some other comments on Ember.
From what I've seen, Angular and Knockout take the same starting approach. They start out telling you how to interface with the front end. I do NOT like this. They give you a whole lot of rope to hang yourself with if you don't know how to design good architecture. Its completely up to you to build a proper MVC app with them.
From what I've seen of YUI, its EXTREMELY similar to Backbone, which is no surprise because YUI was INSPIRED by Backbone. I have spent a LOT of time looking at backbone and I'm very impressed with it. If you follow its principles and standards, it will encourage you to build a sound framework that won't leave you hanging later.
But I saw another commentor who actually actually moved from Backbone to YUI because he said YUI is more streamlined and all around better. I wouldn't be surprised if this is true. But I need to evaluate it further.
Many folks, including myself, agree that Ember, Knockback, and Angular are rather "heavy handed" in their approach. Like I said, they START with explaining how to interface with the HTML. Right out of the gate, they're wanting you to do things a certain way. This could be very problematic depending on your particular application.. OR it could make your particular application a piece of cake if it fits nicely in their approach!
My two cents!
Backbone is great for creating web apps, both for desktop and mobile. It's strongest point is that it's small and quite simple: you can actually read through the entire annotated source code. Backbone helps you structure your code in a maintainable way, which is the main benefit.
The downside of backbone is that it's not very beginner-friendly: setting up the collections, models and views can be quite challenging if you're not used to it. It also doesn't help you at all in rendering the views, which is a blessing and a curse: it's not as easy or helpful as a widget based framework, but it also doesn't get in your way, which is especially important when implementing the mobile app.
I would recommend you study the backbone todo-example ( http://documentcloud.github.com/backbone/#examples-todos ) to get an idea how the framework works.
I know very little HTML or web dev, but I would like to write an
HTML5 app with a fairly complex UI. Is there a framework that stands
out among the rest for this type of job? Do I need a framework; or can
I just do everything in straight HTML+CSS+JS? And what about GWT?
Thanks!
As a general HTML5 starting template, Boilerplate is always a good choice.
It will optimize and chain all your scripts and CSS files, as well as your HTML code and images, it also comes with useful tools like Modernizr.
If you are looking for JavaScript libraries, YUI is a very good library when it comes to UI, though maybe a little more complicated than jQuery or jQuery UI at first. I found it better than jQuery UI, and can work together with jQuery anyway.
EDIT
You may also be interested in Ext JS. Looking at the demo it provides, seems really like a powerful library with many ready to use UI widgets. Never used it though, and looks like it only offers a commercial license.
I suggest you to use Html5-boilerplate.
Download from github
Video Tutorials from author :
http://www.youtube.com/watch?v=qyM37XKkmKQ
http://www.youtube.com/watch?v=OXpCB3U_4Ig
GWT is a good way to go for a complex web application, particularly if you're familiar with java but not javascript. GWT now provides support for HTML5 features such as offline storage, canvas, audio, and video, although it's possible to use any HTML5 features whether GWT provides specific Java classes to support them or not (I implemented the offline storage feature in one of my apps before it was part of GWT). Using GWT will mitigate many of the browser compatibility problems you will encounter with straight HTML+CSS+JS. Although you write in Java, it's still important to be familiar with HTML, CSS and JS, since the java is compiled to js.
I'm a .NET guy desktop developer, and I love that. I don't really love web development because we lost precious time to debug CSS, javascript, and compatibility stuff instead of creating value.
But I think it's because I had not taken time to learn about good web development practices, so now because I want to become the best developer that I can, I'd like to learn about my weakness.
Can you give me some advices/links/patterns/frameworks to become a good web developer ? (I am a .NET guy so I accept everything that will permit me to develop better websites in .NET).
Thanks !
Precision
I have done a lot of ASP.NET webform in the past, but this is not enough to create great web site without loosing time on compatibility/css/javascript issue.
You could take a shortcut and use ASP.NET, which provides a number of controls to make web development easier - and you'll be familiar using them.
Unfortunately, they aren't really that great (imo) and do not teach you good practices with the web.
I suggest you look into ASP MVC, which is now in beta. This will teach you how to write websites whilst allowing you to use libraries you are familiar with .NET
With general web development, look into websites like W3schools which will teach you the basics.
Remember to seperate presentation from markup with CSS and make sure you are using javascript to add value to a page, but make sure your page is still usable without it.
You will always lose time with CSS compatability issues, all I can say is with practice you learn what pitfalls to avoid so it gets a little easier.
As for javascript development, it has improved considerably in the past few years with frameworks which in theory are cross-browser. Maybe try looking into JQuery which syncs well with ASP MVC and has intellisense in visual studio
Advices:
Best advice I can give to you: Just don`t get angry when you done something correct but it wont show as you wanted. Patience! :)
Links:
www.w3schools.com
Nettuts.com
Webappers.com
Digital Point - webmasters forum
Patterns:
My advice is to get more into MVC pattern and any enterprise pattern.
Frameworks:
Just see this link :) Framework Guide
For Javascript: JQuery,Prototype,Mootools,EXTJs
For CSS: 960 grid system is pretty good
Make sure you learn about the client/browser side as well.
Current best practice with all the different browsers around is to use a javascript library to make your web-application cross platform and cross-browser. An AJAX library like jQuery or Prototype to perform the interactive actions you wouldn't be able to do with standard HTML and CSS in the pre-AJAX era.