Griddle 1.0

[ryanlanciaux]

The Road to Griddle 1.0

---

Update ( Feb. 6, 2016): Griddle 1.0 pre-release docs are available here http://griddlegriddle.github.io/Griddle/next/

Throughout the 6 months or so, we've been working on a new version of Griddle. It's not quite ready yet (alpha likely coming before Jan. 1, 2016) but we wanted to start communicating where we're at with it and where it's going.

One of the biggest things that we've encountered with Griddle is that we would like to enable all sorts of features without making the codebase too bloated for those that want a more minimal grid. Too often we would add new features which added additional complexity. Over time, this complexity makes it harder to quickly add new features, harder to fix bugs, harder to avoid regressions, and a bit more difficult for others in the community to jump in and contribute.

To address all these concerns, we began working on a new version of Griddle that is more modular. While the modularity doesn't single-handedly take care of the issues listed above, it does make tackling these things easier.

New Architecture

Griddle will now exist as a series of modules:

• griddle-core - Grid state management
• griddle-render - View components
• griddle-connector - Connect the grid state to the view components

In addition to these modules, the main Griddle (griddle-react) module will still exist as an opinionated default setup for using Griddle. Conceptually, the main Griddle component will import the other modules and pass set up a default configuration.

Plugins

Another big part of the new architecture is that we wanted to introduce plugins to the Griddle landscape. Instead of having subgrid / selection / remote / editing (not yet implemented), etc support as part of the default Griddle module, these features are added in as plugins. We are currently documenting how the plugins work in a lot more detail but for now, they can be thought of as a series of higher-order components and redux reducer / action creators (please see the selection plugin for more information on how they look in the meantime).

We've had a lot of requests for awesome features that we would really like to see exist as plugins. Again there will be more documentation on how plugins work and how to create them in the coming weeks / months. Until then please see a couple of the core plugins.

The Road to 1.0

As noted above, we're trying to stay mostly consistent while still introducing some breaking changes (while still establishing a nice upgrade path). To that end, we're calling this Griddle 1.0 (obviously pre-release at this point) and are hoping to have the offical 1.0 release out sometime in the Spring of 2016.

That all said, a very very early version of these components can be used today by taking the following, exhausting steps (if it's not abundantly clear -- these components are not production ready yet 😄).

1. Clone griddle-core, griddle-render, griddle-connector and griddle-test (this is a module that will be going away once we are wiring everything up inside the main Griddle component) and the various plugins listed in the organization (at the time of writing it is just subgrid and select).
2. npm link all of the modules in griddle-test and npm-install & npm-start everything. Running npm-start in griddle-test should log that a webserver is running on port 3000.
3. Visit http://localhost:3000 and try out the new Griddle components (and note that there is a lot of the styling / overall polish / performance type of things that we are still working on)

As of this weekend, we're trying to place all of the things that are left to do and not currently being worked on into GitHub issues in their various projects. Any help / feedback would be much appreciated.

The best place to discuss all this is in the comments here -- or the Griddle gitter.im channel 👍

[bjrmatos]

👍 the new architecture looks very solid!

[eriknyk]

cool,
maybe you can see the facebook's fixed-data-table components,
the most important feature in that project is its scrolling feature, it have its own scroll component and not using the browser native scroll, they said it is just because to grant the support of thousands of records without loss performance, on my fast view to its scroll component,.. it renders the rows according the scroll navigation, it is not rendering all records (10000000 rows) that is in the store, it is rendering only the records that the user can see.

Regards. nice job.

[eriknyk]

one more thing,
fixed-data-table is a state-less component and that's good, just because it can be used
in a flux (I use redux) application, where we can have containers that connects with the app state and serve into its properties and pass it down into the state-less child components.

but actually griddle is storing data on its own state making difficult implement it with a flux (redux) application, and even it make difficult create testable components.

The problem that actually I have, is that the only way to pass data to Griddle
using GriddleWithCallback, and setting the getExternalResults param with a function that it must
execute a callback passing to it the fetched data,

but in a Flux app, I execute and async action USER_FETCH -> that calls the action -> USER_FETCH_SUCCESS when the response was retrieved successfully.

so in that escenario seems is not possible to use griddle.

the following pseudo code will explain better:

thats how it actually works

class MyContainer extends React.Component {
getExternalResults(filterString, sortColumn, sortAscending, page, pageSize, callback) {
  // get async stuff
  callback({
    results:  respose.json(),
    totalResults: totalResults,
    pageSize: pageSize
  })
}
render() {
  return <GriddleTable getExternalResults={getExternalResults} ... />
}
}

but, in a FLUX app we need something like this:

class MyContainer extends React.Component {
getExternalResults(filterString, sortColumn, sortAscending, page, pageSize, rowIndex) {
  if (this.state.data[rowIndex]) {
     return this.state.data[rowIndex];
  }

  this.dispatch({
    type: 'USER_FETCH_DATA',
    payload: { page: page + 1, pageSize: pageSize}
  });
}
render() {
  return <GriddleTable getExternalResults={getExternalResults} ... />
}
}

this approach is how actually fixed-data-table works, would be great if you can analyze a little bit this.

Regards.

[ryanlanciaux]

Thanks a ton for your thoughts on this and totally understand the pain you've encountered passing state to the components. One of the big reasons for splitting up Griddle like we are is to allow more customization at each point in the component (and to make view components just view components). We first wrote Griddle when we were switching to React and later realized we were forcing some design decisions that we didn't want to be making for people (such as how the grid state was managed, etc).

The new separation of the modules helps us avoid some of that.

• griddle-render is a series of stateless components.
• griddle-core is the state management part (and is using redux behind the scenes -- people won't need to use redux to use Griddle)
• griddle-connector hooks up griddle-core and griddle-render.

This will allow someone that is managing their own state to use just the griddle-render components. Additionally (spoilers), we plan to make something that hooks up fixed-data-table to griddle-core state management since the state is no longer tightly tied to our view components.

[dlong500]

Ryan, would it be possible to export a reducer (or multiple reducers) in griddle-core for someone who is already using redux but didn't want to have to code their own state management from scratch? It would seem that the exported reducer(s) could be combined with an app's other reducers so the griddle state would become a part of an app's redux store without requiring someone to write any of their own griddle state management if they didn't want to.

[ryanlanciaux]

That is definitely the intent (although it may not be in 1.0 -- maybe a release that quickly follows 1.x). Do you have any thoughts on what the best way to do that may be? One of the things I want to make sure is that everything is setup for people who may want multiple grids on the page too.

I totally agree though that there should be a nice way that people who are already using Redux can just add the grid state management to their own state tree.

[dlong500]

I'm fairly new to redux myself (and also not a full-time coder) so I'm probably not a good person to make architectural decisions. But I think one pattern that might work is demonstrated at least on a basic level in the redux real-world example where there is a pagination reducer "factory" so that multiple store objects can re-use the same pagination reducer functions. There is also a library (https://github.com/erikras/multireducer) built to allow sharing a single reducer. Just throwing out some avenues to explore.

[ryanlanciaux]

I appreciate the suggestions -- these look like great options.

[ryanlanciaux]

We've been starting to work on the documentation for 1.0 a bit. One of the first things we're trying to make sure we have documented clearly is the overall architecture mainly as it relates to the state management piece. While understanding the architecture won't be necessary for using Griddle, it is necessary for contributors / plugin creators (the community plugin ability is what I'm most excited about for a 1.0 release). This document will likely be changing over the next couple of weeks as we receive more feedback but the initial architecture page is available here:

Griddle Architecture Documentation

[yorchv]

I am having a problem with the dependency on underscore when my project already has lodash, seems to me like a burden. Can you make it like optional or inforce it inside the library?

[ryanlanciaux]

Thanks for asking. Griddle 1.0 doesn't use the full underscore or lodash (it does use some of the individual modules from lodash). 👍

[legomind]

Very exciting! Ready for alpha!

[yorchv]

@ryanlanciaux awesome!

[jjstrat3]

@ryanlanciaux I was wondering where I could start digging in to help contribute with the 1.0 release? I use Griddle a lot(including with a production app for work), and I'd love to be able to give back by contributing towards this release! I've been more of a Github consumer in the past, and I'm looking to change that. :)

[ryanlanciaux]

That would be incredible! We're trying to start triaging anything that's ready here https://waffle.io/GriddleGriddle/griddle and I'm "trying" to do a better job at adding notes in there so they are more clear to others (and sometimes myself a couple weeks after I create an issue for the new stuff 😕 haha). If there's anything in there that looks to be of particular interest and isn't well defined please let me know.

We have the new docs for the alpha version at http://griddlegriddle.github.io/Griddle/next/ -- One other thing that would be extremely helpful is we are still thinking through how to make the upgrade from 0.x to 1.x as smooth as possible. Where I'm currently at on that is making a higher order component that takes similar props (probably not 100%) to the 0.x component and maps to 1.0. Any thoughts around that sort of thing would be much appreciated also.

[Janekk]

Thanks for that neat update with using lodash modules instead of underscore dep.

[orangecoding]

is there any timeline when griddle 1 will come out?

[andrewmclagan]

YAY!

[yarinass]

What are the chances of getting Griddle 1.0 this year ?

[thj-dk]

@ryanlanciaux any news on this?

[ryanlanciaux]

I'm using 1.0 on several projects BUT we are trying to make sure the API is solid before we start promoting it more heavily / calling it something more concrete than alpha. I don't have any specific timeline regarding when it will be released -- currently churning on some parts of the API around plugins.

[mrn3]

Can you release the alpha version for early adopters to try out?

[blkmutt]

@mrn3 - this is on NPM as alpha and if you go to http://griddlegriddle.github.io/Griddle/next docs are there.

[tim-phillips]

I added Griddle 1.0 to a test project using npm install --save griddle-react@alpha. Griddle renders to the browser with the text "No results found." and gives the following error in the console:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

I'm running the project using react-create-app.

Here's my App.js:

https://gist.github.com/babenzele/9d3ba9b1f426103b32eafe4038880c8d

@ryanlanciaux I'd like to get this working to get myself familiar with 1.0 and start taking some issues to push forward to the 1.0 release.

[mrn3]

@babenzele - this is usually because two versions of React are being loaded (usually one from an npm module, and one from your main project that is including the npm module). I am wondering if it is because the peer dependencies are set up correctly on griddle-react@alpha npm module. Also, it could be that another npm module you are including is including React incorrectly and needs to switch to peer dependencies.

[tim-phillips]

@mrn3, I ran npm ls react as suggested in the react docs and only one reference to react is listed for my project:

[email protected] /home/babenzele/griddle-test
└── [email protected]

Maybe something else is going on inside react-create-app.

[ryanlanciaux]

@babenzele Sorry that's not working out so well for you. I will try to get create-react-app going with it and see if I have diff results. Interacting with Griddle should mostly be the same as the current alpha (except plugins) but we are going to be merging the 1.0-combined branch into 1.0 (the current alpha) as soon as we get the base Griddle plugins converted over.

The 1.0-combined branch removes some of our custom conventions and gets them more inline with what others in the React ecosystem are doing. This is mostly only pertinent to people who will be creating plugins but that's a big thing we're trying to get "right" (or as right as can be in software ha) with the 1.0 release.

[tim-phillips]

@ryanlanciaux I tried loading [email protected] using just webpack and babel and get the same error.

npm ls react still just shows the one reference to react in griddle-test.

[tim-phillips]

@ryanlanciaux Would you mind describing how I would get 1.0-combined installed in a project?

[garretfick]

@babenzele @ryanlanciaux I suspect the issue is not related to react-create-app. I was able to reproduce the same problem with react-starter-kit.

I do see warnings when installing the griddle dependency:

npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of griddle-core@^0.0.20 but none was installed.
npm WARN [email protected] requires a peer of griddle-render@^0.0.30 but none was installed.

[ryanlanciaux]

@babenzele This is some uncharted territory right now as it's our most in-flight branch :) but ultimately it most closely matches the direction we want to go with 1.0. That said, I would imagine that if the package.json file points to src/index as the entry point, that you could reference the package this way.

Traditionally, we build the project with webpack before pushing to npm and have package.json point to the built version of the package. We have not set up the build stuff too much for this branch just yet since we're mostly working out of storybook to finalize the features. We are is porting over the virtual scrolling plugin (@joellanciaux has been working on this -- plugins are the thing that should be changing the most between current alpha and the upcoming version) and then we will be focusing on the build steps. We would love any additional assistance or thoughts around this, approach!

[ryanlanciaux]

@garretfick Thanks for calling this out -- we will have to look into this a bit more as we may have something misconfigured with our externals.

[ghost]

Does this thing output semantic tabular markup?

[ryanlanciaux]

We use table elements by default instead of divs or other elements. With the customization coming in 1.0 it should be relatively straight-forward to write a plugin that uses divs and other elements instead.

[ghost]

@ryanlanciaux thanks, Ryan. Here's my top resource for planning accessible tables, if you haven't read it yet: http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

[ryanlanciaux]

This is a great read, thanks!

[ryanlanciaux]

1.0 is released

Please check out the docs for more info http://griddlegriddle.github.io/Griddle/ -- We've taken the approach that the core library should mostly be just the core things that a datagrid needs (we do have a virtual scrolling plugin and local state management plugin that we ship currently) and everything else should be plugins and npm installed separately.

This all said, 0.x should ideally still be receiving updates for a bit and is available at griddle-react@version0 tag on npm. 👍

[capouch]

@babenzele have you figured anything out on that Ref error mentioned in your first post? I just tried running 1.0.0-alpha.43 and I get the same behavior you describe.

[tim-phillips]

@capouch I haven't tried 1.0.0 since