5 ms·

Have you successfully tried this out in a real app? Why would you want to structure your dom inside an array? Seem pretty crazy, my dude. todo.view = function(

Have you successfully tried this out in a real app? Why would you want to structure your dom inside an array? Seem pretty crazy, my dude. todo.view = function(ctrl) { return m("html", [ m("body", [ m("input"), m("button", "Add"), m("table", [ m("tr", [ m("td", [ m("input[type=checkbox]") ]), m("td", "task description"), ]) ]) ]) ]); };

chc 13y ago
I think the idea is that it's simple — it's just a basic data structure in the language and can be generated or manipulated with just simple JavaScript. This is similar to why Lisp programs being Lisp data structures is interesting. Intriguingly, it looks like the API is compatible with React's JSX. With that, you could write this as: @jsx m todo.view = function(ctrl) { return ( <html> <body> <input/> <button>Add</button> <table> <tr> <td><input type="checkbox"/></td> <td>Desk description</td> </tr> </table> </body> </html> ); }
- ulisesrmzroche 13y ago
  Adding some more css declarations, id, data-hooks, etc., and make it span 100+ lines, like in real life. Scares me just thinking about it.
  - chc 13y ago
    Are those things you wouldn't have to do under any other system, or which would be significantly simpler there? Because I'm not seeing it. You seem to be saying "This involves building a web page" — which is true, but would be regardless.
    - ulisesrmzroche 13y ago
      Yes, it would be simplificantly simpler to edit html if it wasn't stuck in between two strings, for one, let alone inside an array. todo.view = function(ctrl) { return m("html", [ m("body class='application", [ m("input class='add input input-sm input-md"), m("button class='btn btn-success button-green", "Add"), m("table class='table table-strped table-row", [ m("tr class='tr'", [ m("td", [ m("input[type=checkbox] class='checkbox input input-sm' id=firstName name=firstName") ]), m("td class='td", "task description"), ]) ]) ]) ]); }; I honestly can't tell you what the hell that is supposed to be anymore. Also, you guys are using invalid html for everything. Your example is not going to validate on anything.
      - deleted 13y ago
        [deleted]
      - danneu 13y ago
        > Yes, it would be simplificantly simpler to edit html > if it wasn't stuck in between two strings > ... > m("body class='application", ... You would put attributes in an object. m("body", {class: "application"}, [ ... ]) Sure, it's no Lisp, but to me it's just Javascript's commas that suck the thunder out of it.
        insin 13y ago
        This is exactly why JSX is such a big win for this method of creating content - it's just sugar for the same function calls, but expressed in a form we're already used to multiply-nesting, with closing tags to help keep context and no need for commas when you need to break a line. Quite neat that you can use it for non-React stuff just by tweaking the pragma comment the JSX transformer requires. Here's an actual example of a Bootstrap table in a React component using JSX: https://github.com/insin/lifequote/blob/master/src/components/steps/QuoteInfo.jsx https://github.com/insin/lifequote/blob/master/src/component... There's not much display logic in it, so it doesn't exhibit the usual progression I've seen when writing React components so far, in which most display logic happens up-front in a component's render() and often gets moved into another method and called directly from where it's going to go in the structure being returned from render(), so you generally don't end up with huge whacks of JSX in components which are doing more work.
- Bahamut 13y ago
  That is ugly as heck - for some of the complaints that some people have with Angular's templating, it doesn't force you into tying your view so heavily to JS. That is far more of a travesty.
  - deleted 13y ago
    [deleted]
jonahx 13y ago
While I admit I'm somewhat sympathetic to this reaction, it really is a cosmetic complaint. It's hardly uglier or more complex than ordinary html -- we're just used to html. Ofc there's some benefit to the technologies we're used to all things being equal, but I think architectural benefits trump concerns like this. I'm not making a case for or against Mithril, btw, just noting that this objection is a fairly surface one.
- ulisesrmzroche 13y ago
  How many times have you messed up a comma inside an array? And just for looping, this is literally constructing a web page out of it. There is no architectural benefit to this, all that's going to happen is that your going to fat finger some shit, and the compiler will complain to no end. Guys, rule of thumb, architecture === directory names. Performance is an implementation detail. Frameworks live and die by their APIs. The easier it is to work with, to read and write and reason with, the better it is. But you know what, this can be easily proved. Someone take a stab at todomvc with this and let me know if it hurt or not.
  - jpmonette 13y ago
    There's a sample TodoMVC posted here - https://github.com/jpmonette/todomvc-mithril https://github.com/jpmonette/todomvc-mithril. If you have any idea to improve, feel free to send a pull request!
    - thefreeman 13y ago
      https://github.com/jpmonette/todomvc-mithril/blob/master/js/views/todo-view.js https://github.com/jpmonette/todomvc-mithril/blob/master/js/... Looks pretty painful, but I do think adapting JSX could be a pretty painless solution so I don't look at it as a deal breaker. I am still yet to find a javascript templating solution that I don't have at least 1 or 2 issues with.
      - insin 13y ago

chc 13y ago

I think the idea is that it's simple — it's just a basic data structure in the language and can be generated or manipulated with just simple JavaScript. This is similar to why Lisp programs being Lisp data structures is interesting. Intriguingly, it looks like the API is compatible with React's JSX. With that, you could write this as: @jsx m todo.view = function(ctrl) { return ( <html> <body> <input/> <button>Add</button> <table> <tr> <td><input type="checkbox"/></td> <td>Desk description</td> </tr> </table> </body> </html> ); }

ulisesrmzroche 13y ago
Adding some more css declarations, id, data-hooks, etc., and make it span 100+ lines, like in real life. Scares me just thinking about it.
- chc 13y ago
  Are those things you wouldn't have to do under any other system, or which would be significantly simpler there? Because I'm not seeing it. You seem to be saying "This involves building a web page" — which is true, but would be regardless.
  - ulisesrmzroche 13y ago
    Yes, it would be simplificantly simpler to edit html if it wasn't stuck in between two strings, for one, let alone inside an array. todo.view = function(ctrl) { return m("html", [ m("body class='application", [ m("input class='add input input-sm input-md"), m("button class='btn btn-success button-green", "Add"), m("table class='table table-strped table-row", [ m("tr class='tr'", [ m("td", [ m("input[type=checkbox] class='checkbox input input-sm' id=firstName name=firstName") ]), m("td class='td", "task description"), ]) ]) ]) ]); }; I honestly can't tell you what the hell that is supposed to be anymore. Also, you guys are using invalid html for everything. Your example is not going to validate on anything.
    - deleted 13y ago
      [deleted]
    - danneu 13y ago
      > Yes, it would be simplificantly simpler to edit html > if it wasn't stuck in between two strings > ... > m("body class='application", ... You would put attributes in an object. m("body", {class: "application"}, [ ... ]) Sure, it's no Lisp, but to me it's just Javascript's commas that suck the thunder out of it.
      - insin 13y ago
        This is exactly why JSX is such a big win for this method of creating content - it's just sugar for the same function calls, but expressed in a form we're already used to multiply-nesting, with closing tags to help keep context and no need for commas when you need to break a line. Quite neat that you can use it for non-React stuff just by tweaking the pragma comment the JSX transformer requires. Here's an actual example of a Bootstrap table in a React component using JSX: https://github.com/insin/lifequote/blob/master/src/components/steps/QuoteInfo.jsx https://github.com/insin/lifequote/blob/master/src/component... There's not much display logic in it, so it doesn't exhibit the usual progression I've seen when writing React components so far, in which most display logic happens up-front in a component's render() and often gets moved into another method and called directly from where it's going to go in the structure being returned from render(), so you generally don't end up with huge whacks of JSX in components which are doing more work.
Bahamut 13y ago
That is ugly as heck - for some of the complaints that some people have with Angular's templating, it doesn't force you into tying your view so heavily to JS. That is far more of a travesty.
- deleted 13y ago
  [deleted]

jonahx 13y ago

While I admit I'm somewhat sympathetic to this reaction, it really is a cosmetic complaint. It's hardly uglier or more complex than ordinary html -- we're just used to html. Ofc there's some benefit to the technologies we're used to all things being equal, but I think architectural benefits trump concerns like this. I'm not making a case for or against Mithril, btw, just noting that this objection is a fairly surface one.

ulisesrmzroche 13y ago
How many times have you messed up a comma inside an array? And just for looping, this is literally constructing a web page out of it. There is no architectural benefit to this, all that's going to happen is that your going to fat finger some shit, and the compiler will complain to no end. Guys, rule of thumb, architecture === directory names. Performance is an implementation detail. Frameworks live and die by their APIs. The easier it is to work with, to read and write and reason with, the better it is. But you know what, this can be easily proved. Someone take a stab at todomvc with this and let me know if it hurt or not.
- jpmonette 13y ago
  There's a sample TodoMVC posted here - https://github.com/jpmonette/todomvc-mithril https://github.com/jpmonette/todomvc-mithril. If you have any idea to improve, feel free to send a pull request!
  - thefreeman 13y ago
    https://github.com/jpmonette/todomvc-mithril/blob/master/js/views/todo-view.js https://github.com/jpmonette/todomvc-mithril/blob/master/js/... Looks pretty painful, but I do think adapting JSX could be a pretty painless solution so I don't look at it as a deal breaker. I am still yet to find a javascript templating solution that I don't have at least 1 or 2 issues with.
    - insin 13y ago