These are chat archives for mithriljs/mithril.js

16th
Jan 2018
spacejack
@spacejack
Jan 16 02:43
I think Mithril's problem is that it is so practical that everyone who uses it is getting shit done with it rather than writing blog posts or step-by-step tutorials or example apps.
Nguyễn Quang Huy
@huystart17
Jan 16 02:43
Yeah , that i think
because mithril clear, simple but powerfull.
spacejack
@spacejack
Jan 16 02:56
Not to belittle the work that people have done writing articles etc. for Mithril of course. :) But when I see yet another Medium article with a basic intro to Vue I wonder where people find the time.
Isiah Meadows
@isiahmeadows
Jan 16 03:01
@spacejack That might be an influence.
Nguyễn Quang Huy
@huystart17
Jan 16 03:13
I think in mithril with just need 1 or 2 tutorial to understand the concept and apply it . the render we use hyper script, that almost people understand after use css(no more explain) , binding event without this sick, auto redraw system, clear lifecycle , and best docs ever cover from (auth, upload, animation,....) that all we want to find even for beginer
Foundasys
@Foundasys
Jan 16 09:38
Patrik Johnson
@orbitbot
Jan 16 09:45
I get the feeling that a lot of the framework hype follows from devs not really understanding what the frameworks actually do
like where they're not sure what <random angularjs concept> is in pure js
not that I did myself either, to start with, ofc, but it seems like people need to spend some time with at least a few different frameworks or go frameworkless for a while to actually get a complete-ish picture
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:25
hey! how can i merge vnode.attrs with other component properties. in this flems i want to have class: 'white'
Andrea Coiutti
@ACXgit
Jan 16 11:27
in which point do you want to override che color with class: 'white'?
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:30
well, i don't want to change it; only to add extra classes, or other attrs
Andrea Coiutti
@ACXgit
Jan 16 11:30
one simple way is this
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:31
well yeah, but is not only class
Andrea Coiutti
@ACXgit
Jan 16 11:31
you can use Object.assign then
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:32
thanks i'll do that
Andrea Coiutti
@ACXgit
Jan 16 11:32
const attrs = Object.assign({ class: 'bg-white' }, vnode.attrs)
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:33
yeah
a bit tricky tho; keys are overwritten
i'll dig on this. thank you
found mergeWithKey [using rambda] js(http://ramdajs.com/docs/#mergeWithKey)
Andrea Coiutti
@ACXgit
Jan 16 11:46
oh I thought you wanted to keep a default
in that case you might do const attrs = Object.assign(vnode.attrs, { class: 'bg-white' })
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:48
i want to be abble to append extra values for a given key
Andrea Coiutti
@ACXgit
Jan 16 11:48
if you need to merge properties, mergeWithKey is for you
Constantin Angheloiu
@cmnstmntmn
Jan 16 11:48
yeap
Oscar
@osban
Jan 16 11:58
@cmnstmntmn Maybe you could also use class and style, like this?
Patrik Johnson
@orbitbot
Jan 16 12:02
@cmnstmntmn I created this helper for a bootstrap adaptation that I'm not really actively working on: https://github.com/orbitbot/mithril-bootstrap/blob/master/utils/index.js , it's basically an object-assign polyfill adapted to allow string concatenation for f.e. class fields
Constantin Angheloiu
@cmnstmntmn
Jan 16 12:06
ty @orbitbot , i'll have a look
Patrik Johnson
@orbitbot
Jan 16 12:09
... though looking at it the mergeWithKey implementation seems to be more generic
James Forbes
@JAForbes
Jan 16 12:17
Constantin Angheloiu
@cmnstmntmn
Jan 16 12:25
@JAForbes :D nice
James Forbes
@JAForbes
Jan 16 12:25
Early days, still dogfooding
Constantin Angheloiu
@cmnstmntmn
Jan 16 12:25
'18 i'll read more on FP
James Forbes
@JAForbes
Jan 16 12:27
I've got a tachyons query module in the works too: https://unpkg.com/hickery@0.26.0/dist/modules/tachyons.js. Using it for work.
Andrea Coiutti
@ACXgit
Jan 16 12:27
@orbitbot I've always been a constant user of Bootstrap until I tried Bulma
James Forbes
@JAForbes
Jan 16 12:27
Patrik Johnson
@orbitbot
Jan 16 12:29
@ACXgit :+1: I'm not that interested in bootstrap as such, the whole project was more set up because I felt that it should be possible to implement relatively quickly (which it probably is, I think I've spent like three evenings in total on whatever's there) and people in the chat were saying that there should be adapters for popular frameworks so people unfamiliar with mithril would consider it
basically the util/library space is still a bit sparse, IMO mainly since it's really easy to just whip up small custom solutions as you go along
which might imply that others discard mithril since it doesn't seem to be that established
theoretically
Dominik Dumaine
@Bondifrench
Jan 16 12:41
@ACXgit @orbitbot Did you see someone did a library of Bulma Mithril components called Bulmit? Haven't tested myself though.
Andrea Coiutti
@ACXgit
Jan 16 12:50
uh no! well spotted
Patrik Johnson
@orbitbot
Jan 16 14:25
@spacejack do you happen to know of some decent single page (standalone) webgl examples I could use to test basic functionality? I'd use some of the pixi or google's webgl demos, but they're both of the kitchen-sink kind where nothing can easily be loaded individually
cavemansspa
@cavemansspa
Jan 16 14:34

one thought on mithril adoption / awareness these days. i suspect that in the past, a lot of traction was from @lhorie's blog posts. many of those were what i consider higher level application concerns / architecture (i.e. more than just component consumption) and were very helpful. others (e.g. @JAForbes, @foxdonut ) more recently have done some great posts, but i believe that leo's blogs attracted a lot of looks at the framework. that's kind of missing in more recent times.

that being said, i know it takes time to put those blogs together plus a lot of actual experience of building apps so that you can write about it.

Patrik Johnson
@orbitbot
Jan 16 14:37
yeah, I guess also that promotion (of self, of tech) is a good motivator for actually writing about tech solutions, otherwise it's easily a chore
or alternatively you could write about the learning experience as you're picking up new tech, but I guess a lot of the people on this chat are kind of past that phase already
spacejack
@spacejack
Jan 16 15:23
Each of those has all the html/css/js in a single page (excluding vendor scripts, resources)
Really easy to hack
I'd pull the whole repo, you get those examples with it.
Patrik Johnson
@orbitbot
Jan 16 15:24
tried one of those already but it was pulling random stuff and ended up not working
(used wget)
though could perhaps give it another go
spacejack
@spacejack
Jan 16 15:25
Try cloning the repo... some examples are super simple, some are more complex
Then run a http server at the examples root
Patrik Johnson
@orbitbot
Jan 16 15:25
yah, that's the same as everywhere
would just hope that some kind soul out there would produce single file html examples...
Scotty Simpson
@CreaturesInUnitards
Jan 16 15:26
I think Mithril suffers from a lack of energy for evangelism on the part of the community, which is a direct result (in comparison to React/Angular, especially) of not being the darling of a giant tech company. No one is getting paid to promote Mithril to the masses, and it shows.
Patrik Johnson
@orbitbot
Jan 16 15:26
or at least something that loads all dependencies remotely
Aside from the library scripts that's pretty standalone
You pretty much need a library so your example isn't 50K long...
Patrik Johnson
@orbitbot
Jan 16 15:28
well, if some developer would be gracious enough to load resources from a CDN I'd be done already :P
spacejack
@spacejack
Jan 16 15:34
You can wget the raw three.js from github...
spacejack
@spacejack
Jan 16 15:40
BTW those extra libs like stats or detector probably aren't needed
Patrik Johnson
@orbitbot
Jan 16 15:41
the main issue is that there's no tool to use to mark which files are being used or not in something I'm trying to deploy, so I have to do a bit of legwork finding the relevant files etc, since f.e. the three.js examples folder is about 370 MB
and every example seems to be set up to run from the repo root :tired_face:
Fred Daoud
@foxdonut
Jan 16 15:54
@CreaturesInUnitards I agree. How would you explain Vue's popularity? How did it get to be so well-known so fast?
Patrik Johnson
@orbitbot
Jan 16 15:54
@spacejack what's your reaction if I say that the device seems to be able to pull off 15 fps with this demo? https://threejs.org/examples/#canvas_geometry_hierarchy
spacejack
@spacejack
Jan 16 15:57
@orbitbot that's not webgl so not too surprising
Patrik Johnson
@orbitbot
Jan 16 15:58
ok, having a tough time finding something that would be even the slightest representative of what the thing would need to be able to pull off
Patrik Johnson
@orbitbot
Jan 16 16:10
webgl stuff doesn't seem to be flying either, to say the least...
Patrik Johnson
@orbitbot
Jan 16 16:17
just about to leave, I'll try it out tomorrow
Scotty Simpson
@CreaturesInUnitards
Jan 16 16:29
@foxdonut my only real theory about Vue’s success is that their twig/handlebars-style syntax is far more approachable than hyperscript to the uninitiated
Barney Carroll
@barneycarroll
Jan 16 18:07
I think Vue did some really good marketing
The twig thing is part of it — a lot of people don't really care about the flexibility provisions of hyperscript, so if you're a "don't make me think" type who just wants some simple logic in a relatively small or procedural bunch of components, this makes a lot of sense
But they have other things going for them
Foundasys
@Foundasys
Jan 16 18:10
Is there something like a mithril roadmap?
Haven't scratched the surface yet but was just wondering
Pat Cavit
@tivac
Jan 16 18:13
Pretty sure there's an issue tracking the plans for v2
Barney Carroll
@barneycarroll
Jan 16 18:14
Their website is nice. It's not just a minimalist API documentation template. It says 'nice websites', which is going to appeal to people who want to make 'nice websites' a priori. Their comparative documentation is also a really nice touch — they demonstrate API ergonomics difference in comparison to other major frameworks, which is a pleasant change from the self-referential platitudes + stats of other libs. Basically they've made an effort to appeal to people from the outset.
Finally, they've got a financial model for crowd funded maintenance. That's a nice kind of contract for some people.
Foundasys
@Foundasys
Jan 16 18:16
@tivac makes sense. Base the new version on issues / wishes.
Barney Carroll
@barneycarroll
Jan 16 18:17
One of the things that makes it hard to evangelise Mithril is that there's no leadership to rest on.
robinchew
@robinchew
Jan 16 18:18
what happened to leo?
Barney Carroll
@barneycarroll
Jan 16 18:24
I don't think anything bad happened to him, he just moved on.
robinchew
@robinchew
Jan 16 18:25
What version of Mithril was his last contribution?
Barney Carroll
@barneycarroll
Jan 16 18:27
v1
The bulk of v1 was written in isolation and arrived on Github nearly fully formed, as I remember
Then there was a bit of debate about some APIs, a few fixes, a period of waiting to see if anybody had any major issues with the new thing… And that was that
robinchew
@robinchew
Jan 16 18:30
Where was this debate on?
Is it more of Leo letting Mithril just take a life of its own or more of him not caring about it anymore?
or non of the above
Patrik Johnson
@orbitbot
Jan 16 18:34
from what I could gather (from lurking here), Leo moved towns and changed jobs
fwict when he wrote mithril originally he was using it at his workplace, so it was somewhat of a priority
Fred Daoud
@foxdonut
Jan 16 18:35
Uber ate him
Barney Carroll
@barneycarroll
Jan 16 18:38
Leo had some awesome ideas about how hyperscript could be a really powerful tool
He demystified implementation and application massively, while showing all sorts of interesting possibilities
Pat Cavit
@tivac
Jan 16 18:40
Priorities shift, stuff happens
he also had a young kid and that eats time like woah
pygy, isiahmeadows, and to a less extent myself are the owners now more or less
I wish I could be more active but I've got real life stuff too, it happens
Patrik Johnson
@orbitbot
Jan 16 18:42
life happens :+1:
which is kinda why corporate backing isn't necessarily a bad thing
Pat Cavit
@tivac
Jan 16 18:43
yup, having a model where you've got paid contributors is very powerful
Patrik Johnson
@orbitbot
Jan 16 18:43
though I'm not sure if paying someone full time to maintain a web framework is that good of a ROI
Pat Cavit
@tivac
Jan 16 18:43
depends on how much your business depends on the framework XD
for instance, almost ALL of ArenaNet's revenue comes in via the GW2 gem store, which is 100% powered by mithril
robinchew
@robinchew
Jan 16 18:51
time to get on the phones then
I've been using vue recently for work, this is fuckin disgusting:
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
Scotty Simpson
@CreaturesInUnitards
Jan 16 18:54
@robinchew yes, it looks an awful lot like ng-whatever
robinchew
@robinchew
Jan 16 18:55
i've not used angular, is it similar to vue?
Scotty Simpson
@CreaturesInUnitards
Jan 16 18:55
demystifying hyperscript is a big goal of mine
robinchew
@robinchew
Jan 16 18:57
Another killer feature to me is how easy it is to integrate 3rd party JS libraries into Mithril.
Scotty Simpson
@CreaturesInUnitards
Jan 16 18:57
I haven't used angular since 1.4, but yeah, Vue took some cues from it for sure. Instead of v-for it was ng-repeat, but the philosophy is the same: write application logic directly in HTML via custom syntax (in angular they're called "directives")
Fred Daoud
@foxdonut
Jan 16 18:59
I really hate that. Framework-specific special attributes in HTML.
robinchew
@robinchew
Jan 16 18:59
Thanks now I have an opinion on Angular
cavemansspa
@cavemansspa
Jan 16 19:00
@robinchew -- one of leo's quotes re: for loop and other proprietary template directives went something like: "there's already a language for that, it's called javascript". lol
Fred Daoud
@foxdonut
Jan 16 19:00
that and dependency injection are the main reasons I dislike AngularJS. The "new" Angular just isn't worth a second look to me, personally.
it's like someone took JavaScript front-end development and "Enterprise Java"-d the heck out of it. =P
robinchew
@robinchew
Jan 16 19:01
HTML is the new programming language
Fred Daoud
@foxdonut
Jan 16 19:04
it's not new, AngularJS came out in 2010 or so.
robinchew
@robinchew
Jan 16 19:04
defacto programming language for the frontend then
About the awesomeness of 3rd party integration with Mithril, I have lots of jquery and jquery-ui plugins before going virtualdom, I could continue to use those together with Mithril. I could reuse my own custom dropdown and ondrag jquery library to work with mithril's lifecycle. Whereas with React, it's just painful for some reason, I can't explain why since it's been a while ago, maybe it's the Object-Oriented nature of react components. You are pushed towards finding alternative react specific libraries like react-dropdown and react-drag.
Scotty Simpson
@CreaturesInUnitards
Jan 16 19:10
I think the biggest problem (for me, personally) with Ember, Angular and to a lesser extent React, is that they hijack too much browser-native functionality for the sake of controlling too many aspects of the MVC (or MVVM) experience. What sets Mithril apart, above all else, is that while it's completely agnostic wrt M&C, it explicitly encourages the use of plain JS for virtually everything.
Patrik Johnson
@orbitbot
Jan 16 19:11
html isn't a programming language, in the literal sense, there's just a bunch of DSLs masquerading as HTML
robinchew
@robinchew
Jan 16 19:13
Yeh i was joking, writing html is certainly not programming
Scotty Simpson
@CreaturesInUnitards
Jan 16 19:14
@robinchew but all these other frameworks which use html-style templating have blurred that line. Even Mithril if you're using JSX, IMHO
I greatly prefer doing all of my application's reasoning in JS. No cognitive dissonances, no forgetting "where" a particular bit of functionality is implemented.
Patrik Johnson
@orbitbot
Jan 16 19:17
mithril feels a bit like a hotrod vs other frameworks and their production cars. You can look under the hood and point at the parts
or maybe I've just been watching too much roadkill :P
Scotty Simpson
@CreaturesInUnitards
Jan 16 19:18
heh
agreed, though — the analogy is sound
although: the one major difference is that it's actually easier to get up & running with Mithril
Foundasys
@Foundasys
Jan 16 19:19
I know it's a contradiction in terms but why if mithril is so unique aren't there more frameworks like it?
Patrik Johnson
@orbitbot
Jan 16 19:21
there are, if you know where to look
or, I mean, most frameworks have some slightly different design decisions to start with so they end up different
well, lemme rephrase, if you start to look for vdom frameworks, at least a good handful or more has some surface-level familiarity
Foundasys
@Foundasys
Jan 16 19:25
From the look of it they are all somewhat in the same corner as mithril
Guess all it needs is a pile of cash to get the masses to use something
Pat Cavit
@tivac
Jan 16 19:28
Marketing is important, and it's hard to distinguish mithril from react
Foundasys
@Foundasys
Jan 16 19:34
Let's sue Zuckerberg then.... 😁
Fred Daoud
@foxdonut
Jan 16 20:04

@CreaturesInUnitards

no forgetting "where" a particular bit of functionality is implemented.

In AngularJS, "where" something comes from is a fantastic mystery
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:05
YES
Fred Daoud
@foxdonut
Jan 16 20:05
you look at some code and there is nothing to tell you where things come from
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:06
...specifically because your logic might live in your view, or your directive, or your service/factory, or any of the cascading controllers you might have working
and we haven't event mentioned $scope LOL
Fred Daoud
@foxdonut
Jan 16 20:07
and the DI is insanely stupid. 1) you load the JS files, 2) you load the modules, and 3) you inject the services. There is a complete disconnect between each of 1) 2) and 3)
so if I load foo.js and bar.js, then say my module depends on ["duck", "quack"], and I inject Yellow and Feather, there is no way to look at this and know where what is defined.
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:08
and the array syntax for DI is beyond cringeworthy
Fred Daoud
@foxdonut
Jan 16 20:09
nothing tells you in which of "duck" or "quack" is Yellow or Feather defined; and nothing tells you in which of foo.js or bar.js is "duck" or "quack" defined
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:10
Precisely. And 9/10ths of your console errors are taking place DEEP in the parser, far away from your ill-advised attempts
Fred Daoud
@foxdonut
Jan 16 20:10
if you mean ["duck", "quack", function(duck, quack) {...}], yeah that is fugly. We now use .$inject
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:11
how about, instead of .$inject, we think: "Hmmm.... is the thing I need in scope? No? let's pass it in then."
Patrik Johnson
@orbitbot
Jan 16 20:11
I was looking at some angular code again for the first time in a long time, and it was kinda funny to see some service or the other with about 16 dependencies getting injected...
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:11
...just a little suggestion
Fred Daoud
@foxdonut
Jan 16 20:12
AngularJS programming flow chart goes like this: [ try something ] → [ did it work? ] → [ no ] → [ no idea why ]
[ try something ] → [ did it work? ] → [ yes ] → [ no idea why ]
Patrik Johnson
@orbitbot
Jan 16 20:12
I think that goes for all programming when you're starting out :P
Fred Daoud
@foxdonut
Jan 16 20:13
heh
Patrik Johnson
@orbitbot
Jan 16 20:13
DI makes some sense in an android programming context at least, but ng-1 feels really overengineered for no particular reason
Fred Daoud
@foxdonut
Jan 16 20:13
problem with AngularJS is, that workflow remains forever, to some extent
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:14

Here's a thing I showed my team back around ng-1.3

Unfortunately there's another datapoint they left out at the end:

Patrik Johnson
@orbitbot
Jan 16 20:14
that doesn't define what the axises are
Fred Daoud
@foxdonut
Jan 16 20:14
What if an individual had created AngularJS and Google had created Mithril? :dreaming:
Patrik Johnson
@orbitbot
Jan 16 20:15
so I'd say time/despair
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:15
time/[achievement, despair]
yes
Patrik Johnson
@orbitbot
Jan 16 20:15
or perhaps time/delusion
Scotty Simpson
@CreaturesInUnitards
Jan 16 20:16
:stuck_out_tongue:
Patrik Johnson
@orbitbot
Jan 16 20:16
err wait, that's the wrong way around, delusion/time
spacejack
@spacejack
Jan 16 21:18
Playing with WebVR and a Vive... pretty nifty :)
Alex G Rice
@guidorice
Jan 16 21:41

Hey all, I have a weird mithril routing problem.

First off, I am using m.route.prefix('?')
and if the router is at this route : '/product/:productId/band/new' e.g. the address is
/?/product/xxx/band/new
then an onclick event runs this code:

 m.route.set('/product/:productId/:bandName/edit',  { productId, bandName }, { replace: true } );

then mithril just appends the new route after a hash (forgetting the route prefix is "?") and the new route is not loaded. What I see in the address is:

/?/product/xxx/band/new#!/product/xxx/test/edit

The problem seems to be the router is getting confused and just appending some string, and using hash prefix instead of query string prefix. Has anyone seen this problem? Any suggestions for debugging? thanks

Isiah Meadows
@isiahmeadows
Jan 16 22:47
@guidorice File an issue, preferably with a small repo, so we can take a look at it. That's something that should never happen.