Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Ezra Morse
    @ezramorse
    Glad you sorted that out.
    Andrea Coiutti
    @ACXgit
    good to know
    I'm looking through your approach and it's very interesting
    Ezra Morse
    @ezramorse
    Thanks. :) Just trying to make something comprehenisve and turnkey. Any feedback is appreciated, because I plan to continue to iterate on this quite a bit. Have some cool things I need to push already
    Andrea Coiutti
    @ACXgit
    however I was wondering if it's possible to keep some of the things I'm used to without messing everything
    for example, will it be still possible to use AJAX request instead of socket connection?
    Ezra Morse
    @ezramorse
    You could. I've thought about making it optional.
    So most of the fetching happens with a m.poll function
    Andrea Coiutti
    @ACXgit
    in the project I'm appaching to, there will probably be external RESTful APIs on a different server
    Ezra Morse
    @ezramorse
    Which uses websockets.
    So I imagine I could probably restructure the socket.io events into an object that can be parsed to automatically setup event listeners in socket.io or API endpoints (or both).
    But if you already have that stuff setup...
    Andrea Coiutti
    @ACXgit
    so on this machine I would only take care of gathering the data and render the page server-side
    Ezra Morse
    @ezramorse
    Then its simply a matter of overriding m.poll client function
    Ah, I see what you're saying. If you email me more specific details on your use case Ill see if it makes sense to integrate some type of adapter for that scenario
    Andrea Coiutti
    @ACXgit
    ok
    another thing I'm used to (suggested me personally by Leo) about code organization is to keep controller, view and related functions inside the same file, named as the component
    for example
    Library.js:
    var Library = {
        vm: {
            ...
        },
        controller: function() {
    
        },
        view: function(ctrl) {
            return m(...);
        }
    }
    would it be possible with some adaptations to keep such a code structure, or does it go too far from the requirements?
    Andrea Coiutti
    @ACXgit
    I find a bit strange to define the controller inside the routes for example
    that's the good thing of Mithril, you are free to use it as you wish :)
    Ezra Morse
    @ezramorse
    No, you aren't the first person to mention this. In fact, when I compiled the jsx I basically make a single component object that looks like that. I don't think its too much of a strectch to allows those, and perhaps even allow a compiled jsx file to be inserted as a view if present. Actually, might make more sense than current approach.
    Yeah, and Im trying to be unopinionated, which means allowing everything...but its also nice to create some guidance for the most sensible way to structure a project
    Ill definitely try and work in something like that, where they can optionally keep the view separate.
    thanks! :)
    Andrea Coiutti
    @ACXgit
    well thank you :)
    I personally found that structure of code very pragmatic
    it helps me keep things ordered in a rational way
    var Layout = function(component) {
        return {
            controller: function() {
                // Avoid to redraw everything on route change
                m.redraw.strategy('diff');
                // Manage components manually, so that rendering takes a single pass (thus preventing UI flickering)
                this.component = new (component.controller || function() {});
                this.topBar = new TopBar.controller();
                this.bottomBar = new BottomBar.controller();
                this.sideBar = new SideBar.controller();
                this.TrackInfo = new TrackInfo.controller();
                this.onunload = function() {
                    // console.log('Changing route, unloading component');
                };
            },
            view: function(ctrl) {
                return [
                    m('#main', [
                        component.view(ctrl.component)
                    ]),
                    TopBar.view(ctrl.topBar),
                    BottomBar.view(ctrl.bottomBar),
                    SideBar.view(ctrl.sideBar)
                ];
            }
        };
    };
    this is basically how I manage the layout with separated components
    Ezra Morse
    @ezramorse
    That how I do it normally too, but I often keep this in one large file (which can becomes disasterous).
    :) Ill see what I can manage on this next week.
    Andrea Coiutti
    @ACXgit
    great, we're evaluating different approaches for an incoming project and the Mithril+isomorphism one is one of the most interesting in my opinion
    as you wrote, "little to no differentiation between coding on the frontend and the backend" is a game changer
    plus Mithril's simplicity and great performances
    Barney Carroll
    @barneycarroll
    @ACXgit hey you know if you're using m.redraw.strategy( 'diff' ) manually instantiating controllers and passing them to the views is redundant
    Your code should behave identically and be far more readable if you just instantiate all of those as components in the view
    // In your route 
    m( Layout, Component1 ),
    m( Layout, Component2 )
    
    // Elsewhere 
    var Layout = {
      controller : function(){
        m.redraw.strategy( 'diff' )
      },
      view : function( ctrl, component ){
        m( '#main',
          m( component )
        ),
        m( TopBar ),
        m( BottomBar ),
        m( SideBar )
      }
    }
    Oops, obviously the view needs to return that function body as an array
    But this is not only far less verbose — it's much more maintainable
    Barney Carroll
    @barneycarroll
    For one thing, it allows components to be initialised in the view logic, whereas the old method means that you need to re-route in order for any changes in component structure to occur because the top level controller takes responsibility for initialising the whole controller tree
    Andrea Coiutti
    @ACXgit
    @barneycarroll I'm back home, trying to apply your suggestion
    Andrea Coiutti
    @ACXgit
    @barneycarroll I finally managed to follow your suggestion, much better now :)
    Barney Carroll
    @barneycarroll
    @ACXgit awesome! :)
    Andrea Coiutti
    @ACXgit
    well I spoke too soon yesterday :D
    Barney Carroll
    @barneycarroll
    Haha
    I mean
    Uh-oh
    Andrea Coiutti
    @ACXgit
    I tried to contact you, I broke the toy