Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 04 2017 01:57

    DylanPiercey on master

    Update README.md (compare)

  • Dec 15 2015 02:54

    DylanPiercey on master

    Add simple utility to test if a… (compare)

  • Dec 15 2015 02:34

    DylanPiercey on master

    Switch to plain js (compare)

  • Oct 27 2015 13:36
    DylanPiercey commented #3
  • Oct 27 2015 09:18
    qur2 opened #3
  • Oct 23 2015 20:08
    qur2 closed #2
  • Oct 23 2015 20:08
    qur2 commented #2
  • Oct 20 2015 23:43
    DylanPiercey commented #2
  • Oct 20 2015 07:33
    qur2 opened #2
  • Sep 30 2015 02:24

    DylanPiercey on master

    Ignored nodes can now be change… (compare)

  • Sep 26 2015 04:20

    DylanPiercey on master

    Add 'ignored' nodes (compare)

  • Sep 23 2015 01:16

    DylanPiercey on master

    Optimize dismount so that the d… (compare)

  • Sep 22 2015 03:36

    DylanPiercey on master

    Update scripts (compare)

  • Sep 22 2015 03:20

    DylanPiercey on master

    Update .gitattributes (compare)

  • Sep 21 2015 00:31

    DylanPiercey on master

    Optimize dismount so that the d… (compare)

  • Sep 21 2015 00:28

    DylanPiercey on master

    Optimize dismount so that the d… (compare)

  • Sep 07 2015 05:50

    DylanPiercey on master

    More aggressive uglification (compare)

  • Sep 07 2015 05:45

    DylanPiercey on master

    Optimize browser bundle, a bit … (compare)

  • Sep 07 2015 05:26

    DylanPiercey on master

    Fix issue with breaking referen… (compare)

  • Sep 07 2015 05:13

    DylanPiercey on master

    Perf optimizations. No longer a… (compare)

Dylan Piercey
@DylanPiercey
Yeah, they can be.
Personally I just use context to load all of my data sideways,
Jake Rosoman
@jkroso
That sounds..different??
Dylan Piercey
@DylanPiercey
How do you mean?
Jake Rosoman
@jkroso
I have no idea how that would look
And how to you update your data when it comes via contexts
Dylan Piercey
@DylanPiercey
// I have multiple top level page components.
function MyPage (props, children, ctx) {
    return (
         <div>{ ctx.get("News").map(...) ... }</div>
    );
}

// ... More pages

// Simple route change.
function handlePageReq (req, res, next) {
    // State unique to req.
    req.state.set("News", ...)
    tusk.with(req.state, ()=> <MyPage/>);
}
Theres a handful more abstractions than that but at its base thats what i'm doing. In the browser and in the server.
Subcomponents are also given the contexts so it's easy to expand the site only pulling the top level state that I need for any component at any depth.
Dylan Piercey
@DylanPiercey
Not sure if i'm clear enough :p.
Jake Rosoman
@jkroso
But that example could just as easily be written using props:
function MyPage (props, children) {
    return <div>{ props.get("News").map(...) ... }</div>
}

function handlePageReq (req, res, next) {
   req.state.set("News", ...)
   return <MyPage {…req.state}/>
}
Oh I guess with contexts you can skip nodes though
So you don’t have to pass it all the way down the tree
Dylan Piercey
@DylanPiercey
function ComponentUsedByMyPage (props, children, ctx) {
    // Has access to the same context without explicitly being passed it.
    // Can update the context directly via context.update which triggers a top down re-render.
}
So basically I use context for app state/db data and props where they make sense for ui and such.
Jake Rosoman
@jkroso
Yea Context could be called DB and its injected into every node automatically so you don’t have to do it yourself
The ideas warming on me
Dylan Piercey
@DylanPiercey
It works really well in prod. I ran into so many issues trying to force my data to match some obscure tree that was created to mostly satisfy the design.
(Using props).
I use props for things like { size, color, default }. Not for things like { Users, News, etc }.
Also, when the app gets big and you don't necessarily want to give (in your example) full db access to some obscure nested component created by some colleague, then you can just render the component with:
function ComponentUsedByMyPage (..., ctx) {
      tusk.with(ctx.get("SomeLessImportantPart"), ()=> <SomeComponent/>);
}
Since you can swap the ctx at any level in the tree.
Dylan Piercey
@DylanPiercey
(Atleast for the children of the render function).
Jake Rosoman
@jkroso
Thanks for explaining it :)
Dylan Piercey
@DylanPiercey
Not a problem :).
Currently I'm not using tusk in production, but this is how I use react in production :p.
Dylan Piercey
@DylanPiercey
@jkroso - Finally added lifecycle events :) DylanPiercey/tusk@5de08e8
Jake Rosoman
@jkroso
Whats the advantage of using real DOM event objects?
And does the dismount event get triggered recursively on all children of the node thats being removed?
Dylan Piercey
@DylanPiercey
I'm using real Dom events for consistency with every other event tusk handles. Also I don't think dismount is recurssive. I should fix that.
Dylan Piercey
@DylanPiercey
Fixed in DylanPiercey/tusk@2d6a4d0 :)
Dylan Piercey
@DylanPiercey
@jkroso if you have any other ideas for tusk I'd love to hear them :). Hopefully within the next month or so I will be using it in production.
Jake Rosoman
@jkroso
I’m currently implementing a google maps wrapper and its a pretty good test for an API I think. Its already turned out I need to hook into the update() method. To do this I just sub-classed my Element type instead of adding an “onUpdate” event.
Also I noticed the need to hold references to resources (like the google.maps.Map instance) on virtual dom nodes that are carried across instances until the component is unmounted. For now I’m just attaching these references to the DOM element. A bit of a hack but I’ll probably stick with it
Dylan Piercey
@DylanPiercey
What type of update hook are you referring too? Like a props update?
I've been thinking about refs, seems a lot like state though.
Jake Rosoman
@jkroso

What type of update hook are you referring too?

Node::update

Dylan Piercey
@DylanPiercey
I'm just curious because it seems like this could be done without a hook since its not much different from the render method. Also instead of applying refs I was playing with the idea of simply giving nodes a uid that persisted across same type updates, that way data access for persisted state could be outside of the library. What are your thoughts?
Jake Rosoman
@jkroso

seems a lot like state though

it is state but not state that affects the view. It might be a websocket connection or something like that

So this is completly different from React’s refs feature
Dylan Piercey
@DylanPiercey
Icic, so state for "owners/renders" or nodes? And it's basically just persisted states across updates right?
Also if its not state that affects the view then why couple it with the view? Maybe a good example would help.
Jake Rosoman
@jkroso

so state for "owners/renders" or nodes?

Kind of neither and kind of both. We need to come up with a word for this :). Maybe “logical nodes”. I think you know what I’m talking about though; its state that carries over from one node to the next when they are updated

Also if its not state that affects the view then why couple it with the view? Maybe a good example would help.

Because these resources need to be unique to each node they provide services to. I’ll send you a link to an example when I’m done with my google maps wrapper

Dylan Piercey
@DylanPiercey
Sounds cool. So what are your thoughts on simply ensuring that nodes are given a uuid that exists as long as they are not conceptually removed from the dom? This way the state can be accessed for a specific nodes I'd and the logic that handles providing the state is separate, but this would allow for access to a "logical" nodes state.
Alternatively it could be managed as the context of the "owner" function. But I'm not sure how I feel about that.
Jake Rosoman
@jkroso
I don’t think uuid’s would provide much of a benefit. Only a very limited number of components need this type of state so just sticking things on the DOM node is OK with me. And if you want to avoid attatching things to DOM nodes you can use the DOM node itself as a unique key with the new ES6 Maps. So they can serve the role of a uuid
Dylan Piercey
@DylanPiercey
Very true actually. Especially with weakmaps.
Jake Rosoman
@jkroso
OK so that was kind of tricky. I’ve just pushed the initial commit https://github.com/jkroso/mana-map/blob/e74719b0209e1deb9f7e1cdee34c2870bce0ca8a/index.js. I ended up using the DOM node to store a few things. The google map instance, a isanimating flag, and the previously rendered geographic center. Thinking about it now it probably would of been possible to store all that via the cursor but I’m glad I had another choice
Dylan Piercey
@DylanPiercey
Looks cool, are you using gmaps as a global script? I'd recommend this (https://www.npmjs.com/package/google-maps), that way consumers of the api don't need to have google maps. Also if the currently rendered app doesn't yet show the map it doesnt load google maps right away.
Jake Rosoman
@jkroso
yea thats on my todo list
Jake Rosoman
@jkroso
actually its not really very doable by the looks GoogleWebComponents/google-apis#22