New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add examples of using realtime updates / Firebase db in a Redux PWA #196

Open
fafcrumb opened this Issue Jul 21, 2018 · 5 comments

Comments

Projects
None yet
5 participants
@fafcrumb

fafcrumb commented Jul 21, 2018

Firebase (the database portion, in the context of this issue) is a good fit for PWAs built with Polymer and a lot of them have chosen it as their home, myself included. The PolymerFire elements made this interaction very straightforward in the 1.0-3.0 two-way binding realm. Now that one-way binding and Redux is the endorsed method with lit-element, it would be helpful to have some examples or a best-practices guide for using a Firebase database.

Particularly, data listeners (or any realtime updates in general) confuse me in the context of Redux.
How do actions that write data to the db work when there is a listener on that same reference?
What about when there isn't a listener? Does the behavior of the action need to change in that case?
How would attaching and detaching listeners work?

Using both Redux and Firebase can feel strange because Firebase accomplishes many of the same goals as a flux system like Redux. The local copy of your db it keeps is like the store, and listeners act a lot like subscribing to that store. For this reason some people don't recommend using them together, but more often than not you don't want all of your application state going through the network layer.

Maybe my questions/concerns can just be addressed in this issue, but since PolymerFire exists there's sort of a precedent of Polymer + Firebase working together, and I'm sure a lot of people could benefit from some official guidance on how to do it with lit-element / Redux

@IadityaM

This comment has been minimized.

IadityaM commented Jul 22, 2018

it'll be really helpful to get a guide on how to integrate firebase in the pwa-starter-kit. I was working on a starter kit based PWA with had to be in sync with a firebase based android app, but importing firebase resulted in errors that didn't yield any solutions in the firebase community so had to switch to react for the project instead.

Really looking forward to get the modules/guide for using Firebase with PSK for the next iteration of the project.

@fafcrumb

This comment has been minimized.

fafcrumb commented Jul 22, 2018

@IadityaM I think your issue might have more to do with the Firebase modules not supporting ESM. The polymer-cli only supports serving and building projects with ESM. To load Firebase in the starter kit, as of right now, you need to use the old fashioned script tags. Check out this issue for more info firebase/firebase-js-sdk#815

@IadityaM

This comment has been minimized.

IadityaM commented Jul 23, 2018

@fafcrumb I had gone through the link but even after using the solutions provided in there, the error message was the same.
What i would appreciate right now would be a guide to work with firebase and Redux in order to make the best of the features offered by both. Or at the very least an example using both optimized for performance and not using redux-saga instead of the base redux-thunk.

@keanulee

This comment has been minimized.

Member

keanulee commented Jul 23, 2018

From https://firebase.google.com/docs/web/setup, put the script tags under the "Web" tab in index.html:

<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

window.firebase will now be defined, so you can use it in your actions. For example, an action could look like:

const databaseRef = window.firebase.database().ref();
const todosRef = databaseRef.child("todos");
export const addToDo = newToDo => async dispatch => {
  todosRef.push().set(newToDo);
};

(example code from https://medium.com/quick-code/how-to-integrate-react-redux-and-firebase-in-3-simple-steps-c44804a6af38)

As mentioned in firebase/firebase-js-sdk#815, the Firebase SDK isn't available as an ES module so you'll have to rely on the regular script tag that define the global window.firebase. You could optionally make your codebase more ES module-like if you export that global from one file and import it everywhere else:

src/firebase.js

  export const firebase = window.firebase;

  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

Some actions file

import { firebase } from '../firebase.js';

const databaseRef =firebase.database().ref();
const todosRef = databaseRef.child("todos");
export const addToDo = newToDo => async dispatch => {
  todosRef.push().set(newToDo);
};
@fleckdalm

This comment has been minimized.

fleckdalm commented Nov 20, 2018

Any updates on this or best practice examples?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment