AngularJS (2.0) and Polymer

[mofi...@mofirouz.com]

Hi all,

I have a couple question about the future of AngularJS, specifically about the upcoming 2.0 version, and how it relates to Polymer. I've been through previous posts on the forums, articles about it on the web and all the answers I could find from last year.

Polymer seems to focus on composition of elements on a page, these elements can be visible or not and can have associated behaviour, combined with data binding and event dispatching it makes it very easy to share state and trigger updates when information is changed. Polymer doesn't seem to address the problem of routing in a Single Page Application (although there appears to be a few fledgling attempts in the Web Components community to provide "router" elements).

In the Topeka example application from the Polymer team, the "sign in" view doesn't appear to have any kind of representation in the URL. No hash-fragment, no direct way to reach that view. They do use HTML5 pushState for history though, although this is manually wired up.

As far as I can see Polymer handles templating, data binding, data persistence (via "core-localstorage" etc), modularity (via HTML imports) and AJAX (via "core-ajax"). The only things that is missing is routing.

Most questions about how Polymer fits into other frameworks generates the response "They're just DOM elements, anything that understands the DOM will understand Polymer elements." This isn't strictly fair when we can already see that the Angular 2.0 templating will need some additional work to integrate with Web Components: https://github.com/angular/templating/issues/9

Where does Angular 2.0 fit alongside Polymer if routing is addressed? How will they work together? Does Polymer plan to enable support for building Single Page Applications?

Cheers,

Mo.

[Pascal Precht]

Hi Mo.

So these are a lot of question, I try to answer them one by one.

> Polymer doesn't seem to address the problem of routing in a Single Page Application (although there appears to be a few fledgling attempts in the Web Components community to provide "router" elements).

So, Polymer just uses Web Components polyfills under the hood and adds a small sugar layer on top of that to give a direction on how to uses the four specs (Custom Elements, Shadow DOM, HTML Templates, HTML Imports) in combination. In addition there are a lot of web components already implemented with Polymer (like paper elements or core element) to bring specific functionality to your web app via web components.

In the end it's not polymer's job to provide web components that handle routing, *but* you *can* build web components with it, to make that possible. Just like things like `core-localstorage` etc. are not really *part* of Polymer but *built with* Polymer.

> As far as I can see Polymer handles templating, data binding, data persistence (via "core-localstorage" etc), modularity (via HTML imports) and AJAX (via "core-ajax"). The only things that is missing is routing.

Like mention above, doesn't really handle data persistence. `core-localstorage` is just an element built with Polymer to make data persistence possible via web components. Same goes for `core-ajax`. So, one can't really say that Polymer misses a web component that handles routing.

> Most questions about how Polymer fits into other frameworks generates the response "They're just DOM elements, anything that understands the DOM will understand Polymer elements." This isn't strictly fair when we can already see that the Angular 2.0 templating will need some additional work to integrate with Web Components: https://github.com/angular/templating/issues/9

This is due to the fact that angular has it's own implementation to create custom elements (Angular Directives). Angular comes with its own kind of event loop to make two-way data-binding possible. These are not compatible with (native or custom) Elements per se. However, there are plans to make angular work with custom elements (that are not made in the angular world via directives) out of the box. You can read about it here: https://docs.google.com/document/d/1L-9bBL-smMrAmxC_pVBdKWKcB-ZlOLTj-jmzAJ2jKeE/edit

I hope this answers a few of your questions.

/pp

[Rob Eisenberg]

Hello, I'm a member of the Angular 2.0 team. So, perhaps I can provide some information form our perspective.

One of the main goals of Angular 2.0 is the ability to work with WebComponents. This means *any* WebComponent, including those built with WebComponent libraries such as Polymer and XTags. We've got some of this working already in our templating engine, including two-way databinding to XTags components. We've also go a demo that shows Angular's depdency injection working to inject a custom Polymer component with services. Integration is a pretty important story for us.

I think it's important to point out that Angular is really designed around optimizing *application* development (including DI, routing, templating and decorator directives, more advanced databinding) while Polymer is really optimized around *custom element* development. So, it has basic templating and binding and a strong component model. The idea here is that if you want to build a generally re-usable component across frameworks, you would do it with WebComponents directly or Polymer. I expect the community is going to generate a ton of creative content in this way. But, when you want to build an application, you would just import those Polymer elements and use them directly in your Angular app. You would also write application-specific components in Angular.

Does that help clarify things a bit from our perspective?

PS - The Angular issue and the code you've looked at is probably not our latest templating implementation. That repo has been very volatile over the last few months. At this moment, the branch representing our latest prototype is called "custom-element". You will find the XTag and Polymer integration examples in there.

[chris.m...@gmail.com]

Hi all,

First of all, big thanks to Mo for asking the question. I've just watched the Polymer videos from Google I/O 2014 on the technology and it looks amazing.

I would like to ask if the Polymer team considers the platform ready to be used as a standalone system to build single page applications? or do you recommend a framework of some kind (is Angular 2.0 ready enough yet?) or EmberJS to provide the application structure?

Cheers,

Chris

[Scott Miles]

We built Polymer to be just exactly "the kind we like" (http://i.imgur.com/PIfD0.jpg), so we tend to use it exclusively.

But our intent has always been to support interoperability, so that users could choose whatever superstructure they prefer.

Scott

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/cbc9f816-1e03-4d67-a170-bcdb38ccc621%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Eric Bidelman]

I created a SPA example for my Google I/O presentation but didn't have time to show it:

http://polymer-change.appspot.com/demos/spa.html

It uses the flatiron-director component (https://github.com/PolymerLabs/flatiron-director) for url routing. We'll clean this up, use core-animated-pages, and other new material design elements, and write an article on how to use components for routing and SPA-setups. Sound good?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLYWrFw5RqNXmZQLRwr068bYtsAgR0fK6eYN-cOsa3g83A%40mail.gmail.com.

[mofi...@mofirouz.com]

Hi all,

Firstly, thanks for all your replies. It's great to have an active community like this.

Your answers, along with Chris's question has pretty much answered my question from all angles. It would be really really nice if Eric could post a little tutorial about how to use 'flatiron-director' and how to use it to build SPAs. Looking very much forward to it.

Thanks again!

Mo.

[chris.m...@gmail.com]

Hi Eric,

Thanks for the link to the SPA demo application that you posted. I tried it in Firefox, Safari and Google Chrome.

In Safari (Version 7.0.4 (9537.76.4)) the first page loads but I cannot navigate to any other route. In Firefox (30.0 stable channel) none of the routes load at all. In Google Chrome (Version 35.0.1916.114 (270117)) the first view loads and I can navigate to all of the views.

I also tried url-route and it did not work with the Polymer vulcanize tool.

It would be really great to see an article about building SPAs with Polymer. It would be particularly awesome if you could include authentication in a SPA with Polymer when transitioning between a login view and an authenticated view. This type of application is (in my humble opinion) the first thing that web developers want to know how to handle when building a web application with a new library.

I look forward to the article, thanks Eric.

Cheers,

Chris

[jua...@gmail.com]

Hi Eric,

excellent demo! Is it possible to access the code? 

for a large number of architects, designers and programmers is of great interest to us to know how to make a real-world application (with MVC or SOA -. MVVM / MVP, dependency injection, etc) 

The big question is: how to start? 

you are a great evangelist of this technology, that changes paradigm to us , what ideas do you have? 

Thanks for your attention, 

John 

[Eric Bidelman]

Thanks! The code is here: https://github.com/ebidel/polymer-change/tree/master/demos

Note: there's also some other unfinished demos in there.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/df1809b5-5900-408a-a4ea-6e3e84990f03%40googlegroups.com.

[trevor...@icloud.com]

"We'll clean this up, use core-animated-pages, and other new material design elements, and write an article on how to use components for routing and SPA-setups. Sound good?"

This sounds great! Have there been any updates, Eric? I'm building a SPA and would like to use Polymer exclusively, rather than relying on importing another heavy library and stuff I don't want/need just for animations/routing...but I'm not exactly sure how to do this with Polymer. How was Topeka built? I would love to see a "good" example of what you recommend and an article and/or video about it like you mentioned :)

Thanks!

[Eric Bidelman]

We'll be building an app around a more full featured app like Topeka in the future, but nothing yet.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/378c73cc-e9a8-47ad-a74c-17f708808059%40googlegroups.com.

[Juan Vicente Pradilla Cerón]

Hi Eric,

I have found an excellent implementation for this behavior in https://github.com/erikringsmuth/app-router.

Greetings

[danel...@hotmail.com]

Still a little unclear as the direction of Polymer.

Minus the polyfill part that will go away, is Polymer just a web component building framework?  Things like layout,two-way-databinding,core-scaffold  make it seem more than just a web component building framework.

So yes people can build polymer  components that wrap ajax, and router frameworks, but as far as long term Polymer core is not designed and will not be designed to be an application building framework like Angular 2.0 that will use web components and web components built using Polymer, correct?

Thanks.

Thanks,

Dan

[Matthew McNulty]

You are incorrect. Polymer is a library that makes building components and applications easier, and is absolutely intended to be used to build everything from small components to large applications. Polymer is factored differently, into various elements above the core library, but the goal is indistinguishable from those of Angular. There are various ways to do interop as well, especially to use Polymer bits inside of an Angular app. But that's a side effect of the Polymer approach and not really an end goal.

-Matt

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3b605fda-8f00-452a-b7e9-51a4b8e00477%40googlegroups.com.

[danel...@hotmail.com]

Matt, thanks for replying

That is good to hear but then will the team be adding features to polymer such as routing or other advanced features to its core elements.  A Road map of planned features would be great!!  

I really like Polymer but just having a hard time deciding for Polymer vs Angular 2.0 if the intent is for both of them to be Application Frameworks.  Then the question is why both.  I would understand why both if the main intent for Polymer is just building web components even though you use those web components to build a complete Web App.

The difference that I see is that Angular will have all of the core features needed to build apps, these features are maintained by the Angular team, of course people make add-ons, but for Polymer as it stands routing is not a core feature, but an add-on by a third party.

What can we expect from Polymer in the future in regards to core functionality for web applications, things like form validation, server validation.  I know that core-input has validation but Angular makes it easy to validate a whole form, and produces a error object. 

Another example Angular 2.0 data persistence some really nice and advanced features, are these types of features something Polymer is intended to have in the core at some future date? core-local storage is nice but not enough.

 

There are many more of these types of examples that Angular handles, so the question, does the Polymer team plan to add these types of core features even in the form of core-elements or is it going to be up us?  Preferably it would be nice to have all the core features maintained and tested by the team, like Angular does, with the community adding widgets and other sugar.

Thanks,

Dan

[vivek...@gmail.com]

Hi,

I am trying to build a single page application but facing similar issues. Like I need to use cloud endpoint in my polymer application but I find no example or tutorial about it. Also, routing too is not that much mature in third party apps too.

[oldschoo...@gmail.com]

Not sure Dan's question was completely answered.  Looks like there are two different teams at Google developing Polymer and AngularJS.  Also appears that while the focus of each may be a bit different there is a good bit of overlap as well.

Perhaps this is a not a question for a Polymer forum but what is the picture that Google is painting relative to these web frameworks?  For a new web application development effort what foundation would Google suggest to build upon?  Polymer, AngularJS, some hybrid?

Thanks

Steve

[trefigh...@gmail.com]

> "Perhaps this is a not a question for a Polymer forum but what is the picture that Google is painting relative to these web frameworks?  For a new web application development effort what foundation would Google suggest to build upon?  Polymer, AngularJS, some hybrid?"

Exactly this.

I'm trying to decide between the myriad frameworks, and Angular/2.0 seems the most compelling. However, after reading this thread, the purpose of Polymer and its relationship to Angular is confounding.

[Matthew McNulty]

Google vends many products and technologies, and is a relatively large company full of smart people with lots of different ideas on how to solve similar problems. There is no singular Google opinion or singular picture Google is painting as a whole.

Angular is one of the best of the current generation of JS frameworks. It is a fine choice for building applications today.

Polymer is the first of a next generation of technologies that posit a future where there does not have to be an additional framework layered on top of the web platform, because the platform itself is much more functional now that it has web components. The framework is DOM. We like to say this is like what should have happened if the web platform had kept evolving naturally and not gotten stuck, and a JS-heavy apparatus strapped on top. Polymer is markup- and DOM-centric.

Polymer is useful for building custom elements or applications. Elements built with Polymer can easily serve as leaf nodes in applications built with web component-friendly frameworks like Angular 2.

Polymer is part of the Chrome team, and as a result embraces the platform and web components in an idiomatic manner. This is also why you see Polymer featured at events like Chrome Dev Summit and Google I/O. Angular is a separate effort by a different team at Google with no relation to Chrome.

Hope that helps.

-Matt

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2dc1f504-0706-4e66-b3b8-946c83f92279%40googlegroups.com.

[Artem Khodyush]

> Polymer is part of the Chrome team, and as a result embraces the platform and web components in an idiomatic manner. This is also why you see Polymer featured at events like Chrome Dev Summit and Google I/O. Angular is a separate effort by a different team at Google with no relation to Chrome.

This immediately brings a question: could you clarify your intent with regard to other browsers? Are you going to make sure that production-ready Polymer (promised to appear relatively soon AFAIR) will work equally well across major browsers? Does 0.8 mark the end of big push to move Web platform forward with Polymer, and if so, what's coming next (you said Polymer is the first of a next generation of technologies)?

[Matthew McNulty]

On Thu, Mar 5, 2015 at 10:23 PM, Artem Khodyush <gree...@gmail.com> wrote:

> Polymer is part of the Chrome team, and as a result embraces the platform and web components in an idiomatic manner. This is also why you see Polymer featured at events like Chrome Dev Summit and Google I/O. Angular is a separate effort by a different team at Google with no relation to Chrome.

This immediately brings a question: could you clarify your intent with regard to other browsers? Are you going to make sure that production-ready Polymer (promised to appear relatively soon AFAIR) will work equally well across major browsers?

Polymer works best on Chrome because it natively supports web components. Polymer works reasonably well on other evergreen browsers - nearly as well as (but not equal to) Chrome with Polymer 0.8.

Does 0.8 mark the end of big push to move Web platform forward with Polymer, and if so, what's coming next (you said Polymer is the first of a next generation of technologies)?

0.8 marks the end of the development of 0.8, like any version. 0.9, 1.0, 1.1, etc will follow along. Polymer will continue to push the envelope on the web platform - this is our mission. Web components are only the first step. The web platform is constantly moving forward, and there are new features like Service Workers, ES6, Push Notifications, etc to incorporate, shape, and get in the hands of as many developers as possible via Polymer. This is only the beginning. 

On Thursday, March 5, 2015 at 9:14:41 PM UTC-8, Matthew McNulty wrote:

Google vends many products and technologies, and is a relatively large company full of smart people with lots of different ideas on how to solve similar problems. There is no singular Google opinion or singular picture Google is painting as a whole.

Angular is one of the best of the current generation of JS frameworks. It is a fine choice for building applications today.

Polymer is the first of a next generation of technologies that posit a future where there does not have to be an additional framework layered on top of the web platform, because the platform itself is much more functional now that it has web components. The framework is DOM. We like to say this is like what should have happened if the web platform had kept evolving naturally and not gotten stuck, and a JS-heavy apparatus strapped on top. Polymer is markup- and DOM-centric.

Polymer is useful for building custom elements or applications. Elements built with Polymer can easily serve as leaf nodes in applications built with web component-friendly frameworks like Angular 2.

Polymer is part of the Chrome team, and as a result embraces the platform and web components in an idiomatic manner. This is also why you see Polymer featured at events like Chrome Dev Summit and Google I/O. Angular is a separate effort by a different team at Google with no relation to Chrome.

Hope that helps.

-Matt

On Thu, Mar 5, 2015 at 7:49 PM, <trefigh...@gmail.com> wrote:

> "Perhaps this is a not a question for a Polymer forum but what is the picture that Google is painting relative to these web frameworks?  For a new web application development effort what foundation would Google suggest to build upon?  Polymer, AngularJS, some hybrid?"

Exactly this.

I'm trying to decide between the myriad frameworks, and Angular/2.0 seems the most compelling. However, after reading this thread, the purpose of Polymer and its relationship to Angular is confounding.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2dc1f504-0706-4e66-b3b8-946c83f92279%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f602ae19-2ddd-45c9-89b7-f2f4e64df143%40googlegroups.com.

[Artem Khodyush]

On Thursday, March 5, 2015 at 10:41:38 PM UTC-8, Matthew McNulty wrote:

On Thu, Mar 5, 2015 at 10:23 PM, Artem Khodyush <gree...@gmail.com> wrote:

> Polymer is part of the Chrome team, and as a result embraces the platform and web components in an idiomatic manner. This is also why you see Polymer featured at events like Chrome Dev Summit and Google I/O. Angular is a separate effort by a different team at Google with no relation to Chrome.

This immediately brings a question: could you clarify your intent with regard to other browsers? Are you going to make sure that production-ready Polymer (promised to appear relatively soon AFAIR) will work equally well across major browsers?

Polymer works best on Chrome because it natively supports web components. Polymer works reasonably well on other evergreen browsers - nearly as well as (but not equal to) Chrome with Polymer 0.8.

Does 0.8 mark the end of big push to move Web platform forward with Polymer, and if so, what's coming next (you said Polymer is the first of a next generation of technologies)?

0.8 marks the end of the development of 0.8, like any version. 0.9, 1.0, 1.1, etc will follow along. Polymer will continue to push the envelope on the web platform - this is our mission. Web components are only the first step. The web platform is constantly moving forward, and there are new features like Service Workers, ES6, Push Notifications, etc to incorporate, shape, and get in the hands of as many developers as possible via Polymer. This is only the beginning. 

Oh, I thought 0.8 is not like any other version - I thought there was a reason why many features from 0.5 are missing in 0.8-preview. But you are the boss :-)

[oldschoo...@gmail.com]

Yes that does help quite a bit in understanding how these frameworks are evolving.  I appreciate your response.  I would agree with your statement that "Angular is a fine choice for building applications today" except the 2.0 effort really gives me pause.  Do I invest thousands of hours developing a system on a foundation that is to completely change in the not too distant future?  Or instead do I invest in a newer framework (Polymer) that may possibly better represent the future?

I did find this post: http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html that was really effective in illustrating strengths of both frameworks, overlaps and how to get them to work together.

I do appreciate that Google is full of smart people solving problems in different ways.  However, I perceive Google, as a customer, as one entity that provides many services useful to me personally and professionally.  I'm hopeful that soon Google will communicate a consolidated, cohesive vision for web application frameworks.  Don't get me wrong, I'm appreciative of the work that's being done, it just gets difficult at times to sift the best choices out of the plethora of technology stack choices.

[Eric Eslinger]

FWIW, I have been using polymer and angular together in the same application, and they seem to serve different roles. The strength of polymer (and webcomponents) is in the composability and independence of each webcomponent. You don't need to worry about what's going on outside the component, just what gets passed in via content selectors and DOM properties. Angular, OTOH, is all about the relationships inside and outside- url routing, DI and so forth means you can put pages together with appropriate data.

So, that's what I'm doing. Angular handles the big, stateful, url-routed issues with the data model layer and API integration. Polymer handles the composible layout elements- I've subclassed and extended core-scaffold, for example, to deal with drawer navigation and menubars, and angular worries about injecting content into those drawers and menubars.

e

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2d22d30a-dea1-498b-b9da-8bb74fba762c%40googlegroups.com.

[nonu...@gmail.com]

I tend to agree with you and share a similar dilemma as well. I've been playing around with Polymer for about a month now, as well as Angular 2.0 and ai must say, I have grown very "fond" of polymer. There's almost a certain finesse and elegance introduced to web development with web components and Polymer.

I'm about to start a large project with my team, and we almost refuse entirely to use Angular 1.x, because we see the glory of Angular 2 and we so want to bask in it. We have also talked about using Angular with Polymer as well, but just can't resolve to use Angular 1 because we actually want to write the UI for our apps with ES6. We see Polymer as a great platform for our UI, and Angular 2 as the "UI glue". But what do we do in this transition period (i.e. Angular 1.x to 2)? Do we use Angular 1.x when Angular 2 seems to be so close?

[Rob Eisenberg]

Shameless self promotion......you could use Aurelia with Polymer ;) 

You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/fAvqDo40tMk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7a534af6-e8d0-4520-9d90-a06dbcc62cee%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Rob Eisenberg,

President - Blue Spire
www.durandaljs.com