Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Nelo Mitranim
    @Mitranim
    will make it a hard rule :D
    Nelo Mitranim
    @Mitranim
    By the way can anyone recommend a good observable library? I'm using Polymer's observe-js at the moment, but was wondering if I missed something better
    Antonio Stoilkov
    @astoilkov
    Hey
    What are you using from the objserve-js?
    If you show some code I could advice you something
    Nelo Mitranim
    @Mitranim
    @astoilkov That's really nice of you. I don't want to publish the new repo until the documentation is ready (will probably take a week), but here's basically the entire observation code:
    function observe(target: any, path: string, callback: (value: any) => boolean): OJS.PathObserver {
      let pathObserver = new OJS.PathObserver(target, path);
      let objectObserver: OJS.Observer;
      let lastValue: any;
    
      function observeObject(value) {
        if (value == null || typeof value !== 'object') return;
        objectObserver = value instanceof Array ? new OJS.ArrayObserver(value) : new OJS.ObjectObserver(value);
        objectObserver.open(() => {update(lastValue)});
      }
    
      function update(value) {
        window.requestAnimationFrame(() => {
          lastValue = value;
          if (objectObserver) objectObserver.close();
          if (callback(value) === false) pathObserver.close();
          else observeObject(value);
        });
      }
    
      update(pathObserver.open(update));
      return pathObserver;
    }
    (syntax highlighting not working?)
    this is how it's used for attributes:
    observe(model, attr.value, value => {
      if (element.parentNode) {
        if (typeof controller.onUpdate === 'function') controller.onUpdate(value);
      } else {
        if (typeof controller.onDestroy === 'function') controller.onDestroy();
        return false;
      }
    });
    basically I'm using a combination of PathObserver (primary) and ArrayObserver/ObjectObserver (refreshed when the pointer changes)
    Antonio Stoilkov
    @astoilkov
    With this approach how would you handle expression like this: data.filter('selected')[Math.random() > 0.5].property
    I am not sure but I think this kind of implementation will force you to use only dot and [] accessing of known values
    Nelo Mitranim
    @Mitranim
    I'm not yet sure that supporting expressions is worth it, currently it only supports property bindings in views
    ^ yep like you said
    Antonio Stoilkov
    @astoilkov
    Yeah. I also think that it is worth exploring the idea of supporting only simple dot expressions
    Nelo Mitranim
    @Mitranim
    the upside is that it's insanely easy to support
    I'm positively impressed how this approach has turned out
    in ≈350 lines I have more functionality than in the previous version, and it's much faster too
    Antonio Stoilkov
    @astoilkov
    Yeah. Exactly
    I believe the only problem is observe-js
    It is overly complicated
    1.7k lines of code
    and you need only some of those
    Nelo Mitranim
    @Mitranim
    Yeah I'm considering using a stripped down version at some point
    Antonio Stoilkov
    @astoilkov
    I also believe that you don't need the window.requestAnimationFrame
    The Object.obseve callback is always called before paint
    which is the ideal time to update the dom
    Nelo Mitranim
    @Mitranim
    ooh? didn't know that, thanks
    was able to avoid using a virtual DOM this time, the system is so much simpler now
    directives are 3-5x times simpler to write too
    anyway it's best to discuss when the result is published
    Antonio Stoilkov
    @astoilkov
    Yeah. I also experiment with similar approach and can say that its worth it
    Nelo Mitranim
    @Mitranim
    :beers:
    Antonio Stoilkov
    @astoilkov
    I actually created an observe function which does similar thing to PathObserver. However, it is incomplete. :(
    Nelo Mitranim
    @Mitranim
    thanks for the idea about using comments, by the way
    Antonio Stoilkov
    @astoilkov
    It was just a quick experiment but I don't have time at the moment to finish it
    I will send you the implementation if I finish it
    Nelo Mitranim
    @Mitranim
    one of the reason I originally used a virtual DOM was that it allows to maintain node locations even when they're not in the DOM
    Antonio Stoilkov
    @astoilkov
    No problem...happy to help
    Nelo Mitranim
    @Mitranim
    now just using pairs of comments as delimiters, much better
    ^ haha I also started by writing a custom path observer, but switched to observe-js for the other complementary observers
    for observing arrays and objects
    was unable to dodge dependency injection this time
    it's pretty good with TypeScript param metadata and reflection
    too good to pass :D and the simplest implementation can be like 5-6 lines
    Feras Khoursheed
    @devmondo
    @Mitranim so you dont use virtual dom anymore ?
    Nelo Mitranim
    @Mitranim
    @devmondo yeah it turned out to be unnecessary, dropping it is a win
    Feras Khoursheed
    @devmondo
    wow
    so all tha fad of react is nothing