Angularfire: Enhancement: Make v5 More Expressive

Created on 2 Oct 2017  路  7Comments  路  Source: angular/angularfire

TL:DR Here's a demo of how the v5 could be more expressive (see app.component). https://stackblitz.com/edit/angular-q7fbm7

The new API is looks good from a minimalist perspective, but it misses the opportunity to simplify tasks should be easy. Let's say you want to do something very common - query a list, then make secondary queries for denormalized data with a specific key.

// v4
const books = db.list('/books', { query: { limitToFirst: 5 } })

// v5 (this is not approachable code IMO)
this.ref = db('books', ref => ref.limitToFirst(5) )
const books = ref.snapshotChanges().map(arr => {
      return arr.map(snap => Object.assign(snap.payload.val(), { $key: snap.key }) )
 })

Proposal

Make common tasks easier to read and perform. The new flexibility can be preserved, while giving developers a simple and approachable API. I hacked together this wrapper of my vision here: https://stackblitz.com/edit/angular-q7fbm7

// option to make queries with objects - much easier than chaining methods in most cases
const ref = db.query('books', { limitToFirst: 5 }) 

// use a new get method to make the API expressive and flexible
const books = ref.get({ withKeys: true })

// Do other useful stuff while we're at it
ref.get({ reverse: true }) /// reverse list
ref.get({ callback: callbackFn }) /// map the array with your own callback

Most helpful comment

@Toxicable This is in reference to the rewrite.
@davideast A utility module providing Lodash-style simplification would be extremely useful. I predict new users will get frustrated when trying to do basic data wrangling in Angular.

All 7 comments

There has just been a rewrite of the Database API, see here https://github.com/angular/angularfire2/issues/1158

@codediodeio Thanks for taking the time to send up this proposal! I'm interested in these changes but I don't think they belong in the core API. Perhaps we could provide an additional module?

@Toxicable This is in reference to the rewrite.
@davideast A utility module providing Lodash-style simplification would be extremely useful. I predict new users will get frustrated when trying to do basic data wrangling in Angular.

@codediodeio great! Would you like to flush out a official proposal for a utility module?

@davideast Is there a template for an "official proposal" or do you mean a PR?

@codediodeio First we need an issue. There's no official template. You can take a look at what I've done in the past (#1158). It doesn't have to be perfect. The main thing is to include the interfaces and a small code sample so we can get a good idea of how it would be used.

@davideast Sounds good

Was this page helpful?
0 / 5 - 0 ratings

Related issues

cre8 picture cre8  路  3Comments

Leanvitale picture Leanvitale  路  3Comments

Sun3 picture Sun3  路  3Comments

avanderbergh picture avanderbergh  路  3Comments

adriandurran picture adriandurran  路  3Comments