Composability: how? about material-motion-js HOT 14 CLOSED

nods

TransitionDirector: Director {
  function setUp(transaction) {
    fadeDirector = RadialFadeDirector()
    fadeDirector.setUp(transaction)
    // do other thing
  }
}

from material-motion-js.

As you pointed out in Discord, we're primarily focusing on transitions across platforms right now because they represent the largest area for immediate impact.

I think the real fun will start once we start building out bespoke directors, personally :)

from material-motion-js.

Historical aside: much of this is now possible because we pulled the "director" concept out of the runtime. In the v1 proof of concept, the runtime entity could only operate with one director, period. This was the right decision at the time because it allowed us to test the constraints of such a design pattern. With the insights we gained from that research I think we've been able to confidently move forward with the current system as described by the starmap.

from material-motion-js.

I'm just glad my unsaved buffers of streams-of-consciousness have survived this many months. 😉

from material-motion-js.

Another example (both for here and #14):

In the Music vignette, you can tap album art to go to an album details page from any of {listen now, artists discography, and search results}. That should be one reusable director. You'll probably also want a higher-order director that knows about the stuff that's only on a search results page.

So then it's something like:

function listenNowToAlbumDirector(transaction = []) {
  return albumArtToAlbumDetailsDirector(
    listenNowToArtistOrAlbumDirector(
      transaction, 
      tapLocation,
      elements
    ), 
    albumArt
  );
}

The inner director transitions away the app bar and radial fades all the elements on a search results page from the location of the touch. The middle director transitions from the tapped album art to the album details page. The outer one wraps it all together in a single director.

from material-motion-js.

The idea presently being explored in the Starmap is allowing multiple directors to affect the same runtime.

Emphasis that this is one idea and that we are exploring it. The act of exploring that approach does not preclude the possibility of other ways to model composition.

from material-motion-js.

That's a valid solution to some problems, but there are other cases where I expect you'll want a different unit of composability.

It's simple enough to have a drag director handle touchmoves in one dimension and a scroll director handle touchmoves in another - those are separate interactions that affect the same elements.

There's also the class of transitions where you want to reuse a subset (radial fade being the most obvious example). It would be nice to have a "radial fade" be a thing independent of whatever else happens in the transition. Any director that needs a radial fade can feed a list of elements to the radial fader and concern itself with the other things that need moving in that transition.

from material-motion-js.

@jverkoey I like it. Can the RadialFadeDirector take arguments (e.g. a list of elements that need radial-fading)?

from material-motion-js.

Certainly. Beyond the domain of "transition" directors, which are the most structured of anything we'll likely build, directors are fairly free-form.

from material-motion-js.

E.g.

TransitionDirector: Director {
  function setUp(transaction) {
    fadeDirector = RadialFadeDirector()
    fadeDirector.radius = 500
    fadeDirector.setUp(transaction)
    // do other thing
  }
}

from material-motion-js.

Hooray learning!

from material-motion-js.

To capture the conversation and start spec'ing this out more: https://material-motion.gitbooks.io/material-motion-starmap/content/specifications/director_composition.html

Thanks for prodding this topic; happy to have been given an excuse to put this in writing :)

from material-motion-js.

I've started experimenting with this model in D1483.

A director is just a pure function that takes some inputs (targets and other parameters) and returns a plan stream (which is an Observable that's serving as our transaction in JS). If you want to compose directors together from outside a director, just call

mergeObservables(
  director1(...args), 
  director2(...otherArgs)
)

If you want to build a director that delegates to another, do

function metadirector(...args) { 
  return microdirector(
    ...someArgs
  ).someOperator(…) 
}

from material-motion-js.

I believe latest spec resolves much of this.

from material-motion-js.