I want to create Custom Web Components and use them in variety of frameworks like Angular, React and vanilla Javascript.
My question is Should I use Polymer(or any other library) to create one or write down by extending "HTMLElement".
What are the differences.
If you want to develop Custom Elements with Polymer, and intergrate them with another framework, you'll need to understand internals of both the Polymer and the other framework(s) to make them work flawlessly together, especially for complex architecture. I guess it's a challenge.
Also, you'll have to deal with the versions and compatibility between different framework versions. For exemple, if you develop a component with Polymer v3, il will be difficult to integrate it with Polymer v2, especially in a cross-browser ecosystem.
Lastly, if you intend to distribute your Custom Elements, you can imagine the 2 constraints above will apply to the targeted developers too. As a React developer, I wouldn't like to have to import another (the Polymer) framework and polyfill to integrate some 3rd-party components.
For theses reasons I would recomment to design Vanilla Custom Elements in order to interact with a highest number of web frameworks.
Related
why dojo2 doesn't take an already created framework as base. For example they could use angular2 as base and then only create the widgets.
why they want to create everything from scratch? Is there any advantage on doing that?
Angular and Dojo are two different things.
Dojo is a JavaScript toolkit. Provides everything you need to build a Web app. From widgets, utilities, pub/sub, aol programming even a build tool and much more.
AngularJS is a specialized structural framework for dynamic web apps.
The advantage of dojo is that cover majority of aspects needed for a complex Web app with a standard API.
If you would use instead several combination of frameworks, would be more difficult to achieve such uniformity.
Interestingly Dojo2 now use an external library for virtual dom called maquettejs for its widget system, but I believe it is a special case otherwise dojo itself is quite comprehensive toolkit.
Hm, apart from dojo's modularity and different goal :
dojo appeared in 2005 (history)
and angular appeared in 2009
Note that dojo2 is beta.
They could use angular (but why a new isolated product) or polymer (but not serverside) or react (but not typescripted) but why should they change the philosophy behind the widget system at all. They recently decided to support TSX which is a react like syntax.
The idea of web components is to modularize the web regardless of what framework you use.
The Polymer project promise the possibility to create web components, not to be a framework, so it should be possible to use it with any framework. More than that, I should be able to just download the elements from the element catalog and use it without the polymer library, just with the webcomponents.js.
I recognize that this is an ongoing project and most of browser's vendors are still developing the web components requirements, but what I'm concluding so far is that the Polymer is becoming a new framework as I cannot use their elements without the Polymer library and the use with framework as Angular 2 is not yet working well.
Is that a way to use web components in a real modular way without all the boilerplate that the Polymer suggest?
TL;DR;
Polymer does not break the modularity merely by the fact that it's required to use Web Components built with it. It is just a library, albeit opinionated, used to implement custom elements.
These elements are however still independent modules. All of Polymer stuff should be hidden inside a component and not interfere with the outside.
Long read
The idea of web components is to modularize the web regardless of what framework you use
In a sense, yes. Though Web Components target to modularize the DOM really. For general modularization, there are ES6 modules IMO.
The Polymer project promise the possibility to create web components, not to be a framework, so it should be possible to use it with any framework.
I'm not sure what you expect from Polymer and Web Components in general. The modularity of Web Components come from the fact that when used, they are just an ordinary part of the DOM tree. Any existing library can work with that. Any Web Component is just a HTML element and exposes a uniform interface: attributes and events. What Polymer does is add some niceties on top of that so that you can enjoy data-binding, simpler custom element declarations, simpler events API, styling polyfill, shady DOM and more.
It's a dependency like any other and should not stop you from using Polymer (or Bosonic, or x-tag, or basic-web-components) with any other web framework.
More than that, I should be able to just download the elements from the element catalog and use it without the polymer library, just with the webcomponents.js.
Where did you read that? Also, is it a problem that polymer.html is required for the components to work? You may get the same with other Web Components libraries.
I recognize that this is an ongoing project and most of browser's vendors are still developing the web components requirements.
I believe there is a need of clarification. The vendors implement the Web Components spec and where it isn't ready, webcomponents.js fill in the blanks. Just as I write above however, Polymer is a little bit more, because it gives you more than pure specs.
Is that a way to use web components in a real modular way without all the boilerplate that the Polymer suggest?
Not sure what is the bolierplate that you refer to, but yes, you can write Web Components in plain javascript (or in a minimal dependencies fashion) but you will lose some of the sugar that Web Components give you. It is just like arguing that one shouldn't use jQuery, because all that it does can be done without it.
I am developing single page application which can be used on all the devices Phone, tablets (using apache Cordova) and desktop. Initially I started with Angular2 since it has component based development model (for code reusability), two way databindng, separation of concerns, dependency injection and efficient DOM manipulation. After developing it for some time, I was frustrated mainly because it has a lot of learning curve, it requires lot of tooling support for development (nodejs, node lite development server, polyfills, systemjs, observables, typescripts etc.), obscure error messages, lack of adequate documentation (since it is in beta). Also one has to write lot of code to accomplish simple task such as setting the focus in the textbox.
Finally I decided to go with Jquery 2.0. Since Jquery is lacking templating support and two way data binding, I am using JSRender and JSViews. JSRender and JSView will help to reduce the amount of code that I need to write. I believe I certainly can write clean code if I separate logic for services and repositories into separate files even using Jquery. So question is
What benefits I am going to lose if I use combination of JQuery, JSRender and JSView over Angular2. I know dependency injection feature is one of them.
Any other popular library with minimum learning curve for templating and two way data binding which can be used with Jquery?
What benefits I am going to lose if I use combination of JQuery, JSRender and JSView over Angular2. I know dependency injection feature is one of them.
I guess you have answered it in the question. Although i am not aware of JSRender/JSView so i will not comment on it. jQuery is good for DOM and ajax based operation, as i have used it and i like it.
Any other popular library with minimum learning curve for templating and two way data binding which can be used with Jquery?
For this you can look into ReactJs. It does have minimum1 ← learning curve. These are some of the benefits of ReactJs:
Simple.
Declarative
Build Composable Components
Interactivity and Dynamic UIs
Multiple Components
Reusable Components
Transferring Props
Forms
Working With the Browser
Refs to Components
Tooling Integration
Add-Ons
12.1 Animation
12.2 Two-Way Binding Helpers
12.3 Test Utilities
12.4 Cloning Elements
12.5 Keyed Fragments
12.6 Immutability Helpers
12.7 PureRenderMixin
12.8 Performance Tools
12.9 Shallow Compare
You can get more details about these here.
1. This does have a learning curve but can't say min or max. That actually depends on author who is using this library.
I use the combination of jQuery + jsView in a production sites.I have worked with Angular and ReactJS and both require a lot of other files and libs and are over complicated. With jQuery + jsView you can simply do everything.
Will it be widely used in front-end engineering?
How to evaluate the potential of Polymer 1.0?
I use Polymer, but it's clear that it'll not become the authority in front-end engineering, specially with Angular 2.0 going it's own custom way of building components, and React having it's own opinion on solving the same problems that Polymer solves.
One thing I do see is that Web Components are definitely gaining traction, specially the shadow-dom which is embraced by both Polymer and Angular 2.0 Components.
Also, though future frameworks will support web components Eg.Angular 2.0 , and Polymer elements or any other library written on top of the web components spec, can be used with such frameworks, it wouldn't really make sense in doing so, as then you'll have to carry the weight of Polymer on top of your primary framework like Angular/React, which doesn't make sense as both frameworks solve essentially the same problems in their own opinionated way.
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
IMHO both are two different things and they both are to serve two different purposes. Though they have some common features to offer, data-binding can be one of them.
Polymer
If you truly want to use the Awesome Webcomponents, Polymer is one way to achieve that. There are other options like you can go with your vanilla JS, or use other libraries like X-Tag from Mozilla or Bosonic. These libraries polyfill the webcomponent features which are still in drafted state. So, these libs help us have/provide the same user experience across browsers even where there is no native support for the webcomponents.
Angular
This is a full fledged MVC framework. And people here know what Angular as an MVC framework includes/provides.
That all said to answer your question
Google's Polymer is not exactly a fully functioning Frontend Framework and can be used as a Subsitute OR Complement to other Frontend Frameworks. It can be used as a substitution for the V part in Angular as MVC. Like people use React as V in different frameworks. It is not much a different case for me. Being more specific in case of Angular, Polymer is like directives in Angular 1.x while like components in upcoming Angular 2.x.
References
To be more sure of what I am talking about and for additional sources on how to use the Polymer with Angular2 (Angular2 not released to this date)
you can check this video at "https://youtu.be/7WgEuNZCCHk?t=32m15s" starting from time 32:15 where Rob explains how to use the generic webcomponents/polymer as the components/View in the Angular2.
you can check this project "https://github.com/rkirov/youtube-app" which uses Angular2 and google-youtube web component.
https://github.com/ebidel/polymer-experiments/tree/master/polymer-and-angular/together
From the polymer-starter-kit
Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!
So, in my view these two projects are not competing each other.
Webcomponent Specs
The webcomponent specs are here for one's reference
Custom Elements - http://w3c.github.io/webcomponents/spec/custom/
HTML Imports - http://w3c.github.io/webcomponents/spec/imports/
Shadow DOM - http://w3c.github.io/webcomponents/spec/shadow/
I just wish the webcomponents are native to the evergreen browsers ASAP.
From the Polymer Starter Kit:
"Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!"
Update:
What was described as Carbon Elements seems to fall under:
Polymer(version 2) App Toolbox
Component-based architecture using Polymer and web components.
Responsive design using the app layout components.
Modular routing using the elements.
Localization with <app-localize-behavior>.
Turnkey support for local storage with app storage elements.
Offline caching as a progressive enhancement, using service workers.
Build tooling to support serving your app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1.
Carbon Elements adding framework features
During The Polymer Summit 2015 Keynote, Google announced a new "Polymer idiomatic and framework oriented" set of elements, tentatively named the Carbon elements.
Some quotes from the longer tjsavage answer regarding Angular 2 vs Polymer Carbon:
"The trick is in thinking about the web platform as an application framework... Polymer the library is to the web components component model as the carbon elements will be to using the web platform itself as an application framework: the opinionated rails to make it easier to understand and achieve."
"Angular 2 will provide one way of structuring your application that uses Angular's view of what makes a good application structure. The carbon elements will provide a different way of structuring your application that more directly uses what the web platform itself provides as its structural underpinning."
Polymer is almost fully functional.
Currently it is missing routing for example but this doesn't mean you can't do this with Polymer.
There is now https://elements.polymer-project.org/elements/app-route
In Dart also dependency injection works fine with Polymer because of the types. If it's possible in Dart, it's possible in JS as well because Dart transpiles to JS. DI in plain JS might be more cumbersome though.
In this package (Dart)
https://github.com/bwu-dart/bwu_polymer_routing
I made the routing and DI packages used by Angular.dart available for Polymer. There are also routing packages for Polymer.js available.
I put together some router demos. The "missing parts" really depend on what type of application you're building.
https://github.com/erikringsmuth/polymer-router-demos
I've used it as both, as an enhancement to an app written in another framework, and as the full framework itself, where it was responsible for every element on the page.
I really like just about everything about Polymer, so I've been very happy using it for the whole app, even built my own router. If you've got an existing app I'd recommend dipping your toe in the water, as Polymer works great composed into other apps to see if it's to your liking.
Let me give this another try:
The key behind web-components (and thus Polymer) is, that they are self-contained. You have a web-component somewhere, you import it, and (if you're lucky) it just works, wherever it comes from. The web-component will NOT interfere other components. So doing things like MVC is not Polymers business (although it provides a data-binding mechanism), as this belongs to the process of tying things together. It is considered to be best practice that these kind of things are solved by creating new elements too, that create and react to events. When it comes to the model you code non-visual web-components, that don't have/need a template. TodoMVC has an (outdated) example for that (https://github.com/tastejs/todomvc/tree/gh-pages/examples/polymer).
So Angular gives you a path to follow on how to do MVVM, whereas it is up to you on how to do the "logic" in your app when using Polymer. IMHO Angular is for more complex and rather enclosed apps, whereas Polymer is for any kind of app, that embraces the web. You even can use Polymer, if you're not writing an app at all ;)