Direction of Polymerfire

[tjmonsi]

@merlinnot We can put our discussion here.

Because of the dependencies included in Polymerfire, I don't know if it would be possible to port it out on its own without the need of using the Polymer's local storage. It would be nice but I am thinking of doing a do-over of the whole thing with the thought of making it into a standalone web component without dependency on Polymer (which makes it big).

That would make it a breaking change though and will not be compatible to either Polymer 1 or 2 (or actually we can still make it compatible by making just an html to load the js file.

We need to do an inventory of the tests, and the other tests as well so we can just add on top of it.

[merlinnot]

Ok, if we drop Polymer, should we still call it Polymerfire? ;)

On a more serious note:
What would be the purpose of these components in this scenario? For Firestore mixin it might actually work, since it’s a mixin, we can set properties on an instance and people can use PropertiesMixin to subscribe to these changes (would work with both Polymer 3 and Lit). What about database etc.? What’s your idea? How can we make the experience better than just using the SDK?

One of the things that people requested a lot is making it more declarative, which isn’t really a direction which is now recommended and which people take with new apps.

[phidias51]

To be frank, it would be more valuable if the Polymerfire components did more than simply wrap the existing javascript library. There's not much value there. What would be of value however, would be a series of components that leverage the Firebase javascript library to do common tasks:

• A file upload component that lets you drag and drop a file into storage with a similar look and feel to what you get in Google Drive.
• An aesthetically pleasing login component that lets you select auth providers.
• An infinite scrolling card tray with support for caching in local storage.
• A filterable card tray with support for pluggable filters and filter dialogs
• A pageable table/grid component
• An autocomplete component that works with a user-definable query.
• An auth component with support for setting/getting custom claims.
• An editable listbox component that lets you update the database with new values.
• A mixin that makes it easy to use custom auth credentials so that developers can easily implement role-based components.
• Versions of the components that can be used either with the realtime database, or with Firestore.

A firebase starter kit template (similar to the Polymer Starter Kit) that demonstrates best practices.

Admittedly, most of the these components are not difficult to implement, but when you're just getting started with Firebase, it would be nice to have a set of components that cuts down on the amount of work you have to do to get an application up and running.

[tjmonsi]

@merlinnot I laughed at the polymerfire if not using polymer

[tjmonsi]

I guess I think it would be apt to start again with the basics:

• firebase scripts
• firebase behaviors (backwards compat) / mixins (for polymer 3)
  • general mixin
  • auth
  • database
  • storage
  • firestore
• basic declarative components of the mixins
  • firebase-auth
  • firebase-query
  • firebase-document
  • firebase-storage
  • firestore-query
  • firestore-document
• and then the ones @phidias51 suggested

And then create a Firebase starter kit template

[merlinnot]

Could you give me an example of how you imagine firestore-query? I'm trying to think of something that would really improve user experience, but I have trouble finding a good example.

Do you want it to look like this?

class MyFavoriteEmoji extends LitElement {
  static get properties() {
    return {
      emoji: String,
      uid: String,
    };
  }

  _render({ emoji, uid }) {
    return html`
      <firestore-document
        path="users/${uid}"
        on-change="${({value: {after: {favEmo}}}) => this.emoji = favEmo}">
      <div>${emoji}</div>
    `;
  }
}

[tjmonsi]

Right... I forgot that there's no double binding with polymer 3 (or at least that's what it seems when using lit-html).

Making it declarative, I would be thinking

_render() {
  return html`
    <firestore-document
      path="users/${uid}"
      on-change=${this.changeEmoji.bind(this)}></firestore-document>
  `
}
changeEmoji ({value}) {
  this.emoji = value
}

Ughhh... welp this makes it a little bit harder if it becomes declarative without double binding.

[merlinnot]

That's why I'm asking. It's really fun and easy to use the firebase-js-sdk with things like redux-saga or RxJS. The only thing I can imagine would be really helpful is wrapping (which is a fairly easy thing to do) firebaseui-web, so one could consume it as a component.

Mixins might be ok-ish too, both for Firestore and Realtime Database.

File upload with drag & drop? I could actually share the one that I wrote for myself, it's of a high quality.

But these changes would dramatically change this repository, it wouldn't be even slightly similar to what we have now.

[tjmonsi]

I think as long as we can have the original components, we can still use it.
The double binding might still work as long as we get to keep the original event firing mechanisms when properties changes.

As for the other stuff, I think if the community needs it, it should be provided.... as long as we don't get our selves into doing a scope creep.

[merlinnot]

Hm, so you want to keep it compatible with Polymer 2, or even 1?

[tjmonsi]

Compatible in such a way that they can still do this:

<firebase-query data="{{data}}"></firebase-query>

Which I think should work if we have this.dispatchEvent(new CustomEvent('on-data-change', { detail: data }));

[FluorescentHallucinogen]

Web components are a set of web platform APIs: Custom Elements, HTML Templates, Shadow DOM, HTML Imports (ES Modules / HTML Modules). The component does not have to use all of these specifications. If the web component does not use HTML Templates, Shadow DOM, HTML Imports (ES Modules / HTML Modules) specifications, it is still a web component. But what if the web component does not use Custom Elements specification? Is it still a web component? What if it does not use any of these specification? Is it still a web component?

Custom Elements is what makes web components declarative.

The best thing of web components is that they are interoperable, they can be used in a Polymer project, despite the fact that they themselves are written using lit-element.

Imagine that <firebase-document> web component (custom element) is written using lit-element.

If I use <firebase-document> web component in <my-view> that written using Polymer template system (that supports two-way data binding):

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@polymer/polymerfire/firebase-document.js';

class MyView extends PolymerElement {

  static get properties() {
    return {
      data: {
        type: String
      }
    }
  }

  static get template() {
    return html`
      <paper-input value="{{data}}"></paper-input>

      <firebase-document
          path="/note/text"
          data="{{data}}">
      </firebase-document>
    `;
  }

}

customElements.define('my-view', MyView);

If I use <firebase-document> web component in <my-view> that written using lit-element (there is no two-way data binding in lit-element):

import {LitElement, html} from '@polymer/lit-element/lit-element.js';
import '@polymer/polymerfire/firebase-document.js';

export class MyView extends LitElement {

  static get properties() {
    return {
      data: String
    }
  }

  _render({data}) {
    return html`
      <paper-input on-value-changed="${(e) => this.data = e.detail.value}"></paper-input>

      <firebase-document
          path="/note/text"
          data="${data}"
          on-data-changed="${(e) => this.data = e.detail.value}">
      </firebase-document>
    `;
  }

}

customElements.define('my-view', MyView);

[tjmonsi]

Actually, all of the declarative elements of firebase will not need Polymer nor lit-html / lit-element because they don't need a shadow DOM. That would at least remove a large part and can be used regardless if it is used in Polymer or in another setting or even when used in vanilla HTML.

That I think should be the goal of this repo.

[FluorescentHallucinogen]

@tjmonsi Vanilla web components?

[arjunyel]

Seems like rxfire is a great match with litElement firebase/firebase-js-sdk#933

[phidias51]

The other thing you might consider is breaking out the components into smaller projects (like PolymerElements). It would make it easier to decouple visual from non-visual components and allow their development to proceed apace.

[JGSolutions]

So seriously. I really don't know the future of this element. Hasn't been updated in months. Lacking the latest features from firebase SDK. No sense of direction. Bunch of pull requests which have not been merged for months

It is fine if everyone is busy but at least can anyone direct me in a way I can avoid using polymerfire and go straight with native firebase. My project is 100% polymer V2.

[arjunyel]

rxFire is releasing soon by the firebase team, I would personally go with that

[JGSolutions]

@arjunyel Polymer element?

[arjunyel]

Sorry, rxFire is basically an extension of the Firebase JS SDK that uses Rxjs, I would recommend using that, it should be fully released soon, here's some documentation https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire

[MarcMouallem]

Seems like this repo is dead or dying.

[arjunyel]

Heres an example of using rxFire with Web Components https://youtu.be/fq6UPn5H2Bs

[phidias51]

It would also be great if we could see better support for web applications in the Firebase console. Virtually every one of the Analytics components works only with ios/Android. And although this issue is about the Polymer Fire components, I would add that we need components that make it possible to take advantage of the features currently available to ios/Android apps. To that end, I'd like to add to my previous list of components the following:

• An updated messaging component with step-by-step instructions for integrating it into my app. (It would be nice if the starter app included messaging). The current documentation refers to gcm_sender_id which other documentation leads me to believe is deprecated.
• A notification console app that lets me send notifications to my application for testing purposes.
• A remote config element

[halloweenman]

Given that PolymerFire is not supported for use with Polymer 3 it would make sense to have some use examples for using RXFire with Polymer 3. Most important are Firebase Initialization. User Authentication, including sign in and sign out, and reading and writing data to/from Firestore and Realtime Database. Perhaps using something like the Polymer 3 Starter Kit.

I'm struggling to find anything. Plenty of info and examples for Angular but nothing for Polymer 3. It's extremely frustrating given Firebase, Angular, and Polymer are all in the Google camp. Google sort it out and support and resource Polymer 3 properly please.

[phidias51]

My guess is that in Polymer 3 you would use the Polymer JS library instead of the PolymerFire elements. I suspect that they may have some announcements later in the month during the Firebase Summit.

[phidias51]

There's an unofficial Polymer3 port of polymerfire here: https://github.com/iceflow19/polymerfire3. Has anyone tried it out? No support for firestore yet.

[gdevacc12]

It would seem the clock is ticking on polymerfire as it is now (polymer 2). HTML imports is deprecated on Google Chrome and will be removed around April 2019 https://www.chromestatus.com/features/5144752345317376.
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/h-JwMiPUnuU/sl79aLoLBQAJ
I have a few apps using polymerfire that I would like to update to Polymer 3 but it sounds like there's no easy migration path right now.
Perhaps a useful start is a wrapper to use Firebase-JS SDK to help migration of current polymerfire apps to Polymer 3. Then start adding more value with some of suggestions above from: @tjmonsi @phidias51

[gdevacc12]

@phidias51 Looks like https://github.com/iceflow19/polymerfire3 maybe from polymer modulizer: firebase-app.js contains:

FIXME(polymer-modulizer): the above comments were extracted
from HTML and may be out of place here. Review them and
then delete this comment!

[phidias51]

@gdevacc12, @tjmonsi and I were discussing this on Slack. The @iceflow polymerfire3 conversion would be a useful starting point, but @tjmonsi apparently has a polymerfire3 implementation that also includes support for firestore. ATM the @tjmonsi iceflow project doesn't.

The Firebase team seems a bit mum ATM on their plans for polymerfire, and their support for web applications on Firebase always seems to be the red-headed step-child of their development plans.

I can speculate that the support for Polymer3 has been lagging because they've been waiting for Polymer3 to have an official release, but that would seem short-sighted. I know that Firebase has been doing some hiring of late, so maybe they'll start to staff up in this area. It would be good to get some direction from the Firebase team before we go off and waste a bunch of our own time.

Lacking any direction from the Firebase team, my thought has been to create a firefly project group (similar to the PolymerElements project group) that would include a Polymer3 wrapper of the JS library, and would include some of the GUI components that I listed earlier. I have implementations for Polymer2 that I would convert over and donate to the project. I know that there are others that have GUI auth components that they might be willing to donate. At least if it's under a single umbrella github group, it would be easier for users to find.

That said, I have a few caveats:

1. I have "usage patterns" for these components and I don't know how "standard" they are. For example, I use "detail panel" components which provide the detail for a single record, and have a dialog wrapper that wraps the detail panel and lets you add a record to a card list. To edit the record there's a detail page which wraps the detail panel and provides record querying & update capabilities.

2. I also use custom claims to do role-based authorisation, so the user doesn't see parts of the UI that aren't relevant to their role. This is currently implemented as a mixin, and the components could be separated into secure and non-secure versions.

3. Currently the components make use of paper components, but as I understand it MDC web components are waiting in the wings (not sure of the projected release date). In any case, I suspect a fair amount of rewriting would be required.

I'm wondering if we simply check-in what we have (regardless of its current condition), and then work on it until it's in a releaseable condition. Neither @tjmonsi or I have a lot of free time on our hands right now, so it would require the community to step up. A demo project would also be useful to make testing easier and would make it easier for people to see and express the usage patterns that they have in mind.

[mmikrut]

Hi,
I have a couple projects I'm required to convert to polymer3 ahead of the April deadline for p2 and no programming resources for switching to rxFire at the moment :(

Has anyone got a working port of polymerfire ?

[iceflow19]

@phidias51 I never got a notification that I was tagged in this issue for whatever reason. A bit of background on my repo. It comes from the non-functional incomplete npm package someone else put out that was basically the output from modulizer (like serious why even publish it to npm in that state?). The problem was the git repo that is the base for the npm package is not public, so I had to start a new repo. We are using polymer at my company and we use firebase for our auth. Another developer and I fixed it, and we are using polymerfire with Polymer3 in production (just to be clear though not everything is tested).

The repo in it's current state should work. If you have any issues, feel free to open an issue on my repo, and I'll try to help in what ways I can. As for Firestore, I don't have any issue putting together a new wrapper component for it, I'd just would need a consensus on how we would expect it to work. Personally I find RxJs complex and convoluted, its api only something a PHD candidate would love, and it produces some pretty ugly code imo. So I am less than thrilled to say the least about Firebase getting all cuddly with it, at the same time as others have mentioned the raw firebase library is a tad low level.

[mmikrut]

@singerswang - I love polymer, but sometimes I feel my feelings are not returned ... :D

[tjmonsi]

Hi everyone, given that Polymer has switched its focus from Polymer to Lit Element, I feel that would be a problem. But regardless, as I don't have access to @Polymer or @firebase to create an npm module, i might do an adhoc one instead under @tjmonsi handle in npm. I'm still buried in work so I might do it when I get free. The only problem is I would just want to push this out there to use but it might not be fully tested... so anyone who can do unit tests are welcome once I have created the npm module branch version.

[iceflow19]

@tjmonsi I think it's pretty clear to everyone google is pushing Lit.

The problem some (myself included) face is that Google didn't provide a clear path forward from Polymer3 to Lit-Element, it was a rather abrupt breaking change. While it is preferable that new codebases should use Lit, that doesn't necessarily mean companies who invested in Polymer2 and upgraded to Polymer3 for their tech stacks but don't have the resources to migrate (again) to Lit should be left out in the cold. It's not so much that we are expecting the Firebase team to back-port new bells and whistles, but rather that we have a feature parity on Polymer3 with Polymer2 where sensible. Otherwise P3 seems half-baked and not worth upgrading to from P2 (but alas since html-imports are being dropped staying on P2 is not an option either...)

[tjmonsi]

Are you using P3 with a builder like Webpack? Or using the Polymer builder? Using "import"?

…

[iceflow19]

We're on webpack.

We started with the following as our base, but made some changes such as in the webpack configs and removing postcss which interferes with css mixin support with the polyfills. I never made our changes public but I probably should, since its a working foundation for porting Polymer2 code to Polymer3 especially if you want to use typescript as well.

https://github.com/Dabolus/polymer3-webpack-starter-kit

[MarcusGV]

Sorry guys but Im lost :) all this conversation means we are not going to have a new web component similar to polymerfire with litelement and firestore? any suggestions for someone who is starting with polymer or litelement and firestore?

Thanks a lot

[arjunyel]

@MarcusGV I would not expect anything official similar to Polymerfire, if you are starting a new project I would recommend you use rxFire https://firebase.googleblog.com/2018/09/introducing-rxfire-easy-async-firebase.html

[MarcusGV]

arjunyel thans for your answer, I will try, but ¿do you know about an example using polymer 3 or litelement please? Im a newbe and very confused with this :( thanks a lot

[derhuebiii]

If anyone is interested:
I made a very basic implementation (it is more a quick&dirty hack yet) but it works for my project. You are welcome to use it or even better let's work on it to improve it. I am happy to give you more rights to the repository if you are interested. I never created a git rep so please be patient ;)

https://github.com/derhuebiii/polymer3-firebase

@arjunyel: We might also consider using rxFire in some way, but I didn't really figure out how to use it.

[tjmonsi]

I'm planning again to create a rough working component that would work regardless if you are using Polymer 3 or not. I know I am not a good maintainer given that we have moved out from using polymerfire. But I promise to put out a quick one if still need it for your polymer project.

…

On Thu, Feb 14, 2019 at 6:10 PM Thomas Royko ***@***.***> wrote: We're on webpack. We started with the following as our base, but made some changes such as in the webpack configs and removing postcss which interferes with css mixin support with the polyfills. I never made our changes public but I probably should, since its a working foundation for porting Polymer2 code to Polymer3 especially if you want to use typescript as well. https://github.com/Dabolus/polymer3-webpack-starter-kit — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#353 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AChe1taT8QkrPqwStD8HGfd0cZwOvezQks5vNTYdgaJpZM4UfXS-> .

[derhuebiii]

@tjmonsi Die you see my link above? It could be a start and didn't need a lot of code.
Would be interested to hear if this would be a way to go.

Also it's a component again, not a mixing as it was for firestore.

[tjmonsi]

I am going to look at it tomorrow. Thanks

…

On Sat, Feb 23, 2019 at 4:47 PM TimJ ***@***.***> wrote: @tjmonsi <https://github.com/tjmonsi> Die you see my link above? It could be a start and didn't need a lot of code. Would be interested to hear if this would be a way to go. Also it's a component again, not a mixing as it was for firestore. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#353 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AChe1u4MHxrs3-lceFzhENI_e4W0T9EHks5vQQA8gaJpZM4UfXS-> .

[MarcusGV]

Thanks all of you, I will be very interested in your comments, I need to learn about this :)

[MarcusGV]

Hi, I realy apreciate what you did, but Im new and when I try tu use the component I got this errors, could you help me a little please? :( [image: componente.png] El sáb., 23 feb. 2019 a las 2:48, TimJ (<[email protected]>) escribió:

…

@tjmonsi <https://github.com/tjmonsi> Die you see my link above? It could be a start and didn't need a lot of code. Would be interested to hear if this would be a way to go. Also it's a component again, not a mixing as it was for firestore. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#353 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Alfxl7CtDruXXeTFyGBt7CD5x8rxqpJzks5vQQBDgaJpZM4UfXS-> .

[derhuebiii]

@MarcusGV let's discuss in the components issues page. Also your screenshot is not visible

[MarcusGV]

Thanks the problem is with the data-auth component, I get those errors but I dont understand why :(

[mmikrut]

This is a working polymer3 port
https://github.com/iceflow19/polymerfire

[tjmonsi]

Looking at it right now. It is a good port of what we have, and you guys can use it. But I am looking at a performance stand point and I am not really comfortable with it, even this (as in the current repo that we have) repo's implementation will hit the performance part hard. That's why I wanted to remove the polymer legacy part, and might be the polymer part, just to make it have lesser code. But iceflow19's port is a good port.

…

On Thu, Mar 7, 2019 at 7:20 PM SingersWang ***@***.***> wrote: This is a working polymer3 port https://github.com/iceflow19/polymerfire @tjmonsi <https://github.com/tjmonsi> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#353 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AChe1muhS7DYeXqmD7DJEpnnwahcXA81ks5vUPXugaJpZM4UfXS-> .

[iceflow19]

@tjmonsi I'm planning to strip out the legacy stuff at some point.

[tjmonsi]

That's great! :)

…

On Fri, Mar 8, 2019 at 8:54 AM Thomas Royko ***@***.***> wrote: @tjmonsi <https://github.com/tjmonsi> I'm planning to strip out the legacy stuff at some point. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#353 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AChe1jiDcyWrQr5jcGd-UjX-qqNnZ4z_ks5vUbTCgaJpZM4UfXS-> .

[phidias51]

Are there any plans to support firestore? On Thu, 7 Mar 2019, 4:58 pm Toni-Jan Keith Monserrat, < [email protected]> wrote:

…

That's great! :) On Fri, Mar 8, 2019 at 8:54 AM Thomas Royko ***@***.***> wrote: > @tjmonsi <https://github.com/tjmonsi> I'm planning to strip out the > legacy stuff at some point. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #353 (comment) >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AChe1jiDcyWrQr5jcGd-UjX-qqNnZ4z_ks5vUbTCgaJpZM4UfXS- > > . > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#353 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABOqRzQm2d0SWGY5nU7SmGohelyJxNQXks5vUbW9gaJpZM4UfXS-> .

[samtstern]

@singerswang your comments are spamming and disrespecting other people, they are not productive and because of that I have to block them.

[christophe-g]

And a port to lit-element : https://github.com/preignition/lit-firebase

Caution: Very early preview. Not for production. Only equivalent to firebase-document and firebase-query available.

[phidias51]

We created a project called firefly-elements last year because we needed to port some very large codebases over to Polymer 3. It’s a conversion of the firebase elements to Polymer 3 with some additional elements that make it easier to use firebase in your projects. Most of these additional elements are described in my previous post, earlier in this thread.

At some point we may refactor them to use Lit-Element, but for now they do what we need them to do. They support firestore as well, including support for client-side caching. PRs are always welcome.

[samtstern]

@christophe-g @phidias51 these are great! If either of you wants your project to be on firebaseopensource.com just follow the link at the top of the page and I am happy to add it.

[MarcusGV]

And a port to lit-element : https://github.com/preignition/lit-firebase

Caution: Very early preview. Not for production. Only equivalent to firebase-document and firebase-query available.

wow great job, what do you think about using rxfire? https://www.npmjs.com/package/rxfire