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
    Okay going to sleep now, later
    Feras Khoursheed
    @devmondo
    night man :)
    Nelo Mitranim
    @Mitranim
    Come to think of it, it might be the time to part with UI-framework-specific routers
    there are some good independent routers floating around
    just slap the two together
    Nelo Mitranim
    @Mitranim
    Decided to start from scratch to roll a simpler version
    this time only real DOM, using observables
    managed to keep under 250 lines so far
    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