These are chat archives for mithriljs/mithril.js

19th
Apr 2016
Andrea Coiutti
@ACXgit
Apr 19 2016 00:07
@JAForbes I'm digging into the profiler data, but I can't find any evidence which could point me to any optimization
most of the time seems to be spent in mithril.js internal functions
Pat Cavit
@tivac
Apr 19 2016 00:10
Something like https://www.npmjs.com/package/mithril-objectify can certainly help you claw back some perf from rendering tons and tons of elements
since it can turn a bunch of dynamic calls to m() into static-ish objects
Andrea Coiutti
@ACXgit
Apr 19 2016 00:11
I'm already using it in the dist version, and it works brilliant :)
Pat Cavit
@tivac
Apr 19 2016 00:11
awww bummer
Andrea Coiutti
@ACXgit
Apr 19 2016 00:11
thank you for that gem
Pat Cavit
@tivac
Apr 19 2016 00:11
and you're using key properties already on the items so mithril can optimize changes in position?
Andrea Coiutti
@ACXgit
Apr 19 2016 00:12
nope, never used that yet
Andrea Coiutti
@ACXgit
Apr 19 2016 00:13
I also read that, but that's not my case in this particular part of code
I'll use keysoon then because I need the ability to sort lists
Pat Cavit
@tivac
Apr 19 2016 00:14
and you figured out adding delegation to the list?
looks like yes
those are the obvious/easy wins, to do more I'd need to be able to see it
can you put up a jsbin of the problematic code/example data?
Andrea Coiutti
@ACXgit
Apr 19 2016 00:15
this is the first and only performance issue I noticed so far in the whole app
I'm going to write you in private chat one sec
Pat Cavit
@tivac
Apr 19 2016 00:16
ok, I'm about to take off for the day so my response will be delayed for a while
Andrea Coiutti
@ACXgit
Apr 19 2016 00:17
ok no worries, thank you
Gyandeep Singh
@gyandeeps
Apr 19 2016 00:18
@tivac did u get a chance to look at my perf improvements
#1016
Pat Cavit
@tivac
Apr 19 2016 00:18
@gyandeeps no, and I don't have a commit bit so I wouldn't be making the final call either way
Gyandeep Singh
@gyandeeps
Apr 19 2016 00:18
ah ok
Pat Cavit
@tivac
Apr 19 2016 00:18
I just wanted to see the benchmarks you were using out of curiousity :)
Gyandeep Singh
@gyandeeps
Apr 19 2016 00:18
i am new to mithril so
cant share the real code since its not open sorce
but i did create a separate use case for u
its on it
Pat Cavit
@tivac
Apr 19 2016 00:19
I saw that, thanks
Gyandeep Singh
@gyandeeps
Apr 19 2016 00:19
big improvements tho
Pat Cavit
@tivac
Apr 19 2016 00:20
yeah, numbers at least look promising
afk headed home
James Forbes
@JAForbes
Apr 19 2016 00:50
@ACXgit when you were in the profiler, it sounds like you were looking at the Heavy (bottom up) view. Try switching it the top down view. Your functions will suddenly near the top of the list
Andrea Coiutti
@ACXgit
Apr 19 2016 00:50
ok let me try it again
Andrea Coiutti
@ACXgit
Apr 19 2016 16:12
@JAForbes and @tivac : I finally solved the performance issue with {subtree: "retain"}
http://lhorie.github.io/mithril/mithril.render.html#subtree-directives (thank you so much @lhorie !)
every click event triggered a redraw which turned out to be pretty expensive in case of 2k+ entries in the list
since the list doesn't change after the first render, I can use {subtree: "retain"} after it, avoiding to trigger unneccessary diff calculations at each redraw
so my app is silky smoot again :D
Leo Horie
@lhorie
Apr 19 2016 16:15
happy to help :)
Andrea Coiutti
@ACXgit
Apr 19 2016 16:19
:+1:
aucelum
@aucelum
Apr 19 2016 18:13
Is this all I need to make Mithril run on IE8 (no router)? Array::indexOf, Array::map, Object::keys, JSON2.js
Nevermind. Not going to be lazy. Firing up virtual machine... argh.
Pat Cavit
@tivac
Apr 19 2016 18:16
IE8 oof :(
aucelum
@aucelum
Apr 19 2016 18:16
Gotta love those requirements...
aucelum
@aucelum
Apr 19 2016 18:25
(Funnily enough, all of the codebase can run on IE6 except Mithril :D )
Sebastian
@dicoy
Apr 19 2016 20:35
hi guys
anyone used m.request() with POST?
I don't know where to put the JSON I want to post
David
@dlepaux
Apr 19 2016 20:37
Hi,
You can try this example
m.request({
      method: 'POST',
      url: '/api/authenticate',
      data:{email:form.email.value, password:form.password.value}}
    ).then (data) ->
     #done
Sebastian
@dicoy
Apr 19 2016 20:38
data!! thanks
David
@dlepaux
Apr 19 2016 20:38
you welcome happy coding :)
Hitesh Joshi
@hiteshjoshi
Apr 19 2016 20:39
Hi guys, can someone guide me for nested m.mount in mithril. Trying to make this code work, but it seems I am doing something wrong.


var section = function(element){
    console.log("yea")
    setTimeout(function(){
        var newComp = {
            controller: function() {
                return {greeting: "Yes!"}
            },
            view: function(ctrl) {
                return m("h1", ctrl.greeting)
            }
        }

        m.mount(element, newComp)
    },2000)
}

var mainApp = {
    controller: function() {
        return {greeting: "Hello"}
    },
    view: function(ctrl) {
        return m("div",{config:section},ctrl.greeting)
    }
}

m.mount(document.body, mainApp)
Sebastian
@dicoy
Apr 19 2016 20:42
one sec
Sebastian
@dicoy
Apr 19 2016 20:57
wow, this is wierd
why are you doing this exactly?
Hitesh Joshi
@hiteshjoshi
Apr 19 2016 21:00
for a complex application, i have removed m.route and I am using pagejs hence I want to mount a div inside a div on a url change event.
Sebastian
@dicoy
Apr 19 2016 21:05
what about something like:
var section = {
  controller: function() {
    return {
      greeting: "Yes!"
    }
  },
  view: function(ctrl) {
    return m("h1", ctrl.greeting)
  }
}

var mainApp = {
  controller: function() {
    return {
      greeting: "Hello"
    }
  },
  view: function(ctrl) {
    return m("div", ctrl.greeting,
      route() == "/something" ?
      section :
      m("div")
    )
  }
}

m.mount(document.body, mainApp)
"route()" would be whatever you use with pagejs
Hitesh Joshi
@hiteshjoshi
Apr 19 2016 21:09
ya this should work. I couldnt think beyond m.mount way ;) thanks
Sebastian
@dicoy
Apr 19 2016 21:10
to mount nested components you just use m()
Hitesh Joshi
@hiteshjoshi
Apr 19 2016 21:12
ya
Sebastian
@dicoy
Apr 19 2016 21:14

check this out:

var viewInicio ={
  controller : function(){
    return {
      foco: m.prop(""),
    }
  },
  view: function( c ){
    return [
      m(vos,{foco:c.foco}),
      m(noticias,{foco:c.foco}),
      m(agenda,{foco:c.foco})
    ];
  }
}
m.mount(dom("viewInicio"), viewInicio);

foco (focus in spanish) lets every other component know which one has the mouse over them
I use the mother component just to share that info