These are chat archives for ractivejs/ractive

28th
Jun 2017
James Green
@jmkgreen
Jun 28 2017 07:31
@evs-chris yeah tried that: No compatible version found: ractive@0.9-dev. Strangely tried one of the npm suggestions which also does not work: No compatible version found: ractive@0.9.2-build-2
Chris Reeves
@evs-chris
Jun 28 2017 10:56
I always forget the bonus v. That should be v0.9-dev.
James Green
@jmkgreen
Jun 28 2017 10:57
^0.9.2-build-2 works
Joseph
@fskreuz
Jun 28 2017 17:05
So ractive component strictly only consumes component files, yes?
Chris Reeves
@evs-chris
Jun 28 2017 17:06
yes and no
if you link to js, html, or css files, it will also load those
but it starts from a component file
Joseph
@fskreuz
Jun 28 2017 17:09
Hmm...
Chris Reeves
@evs-chris
Jun 28 2017 17:09
external files are entirely optional, and are treated as if they were inline
Joseph
@fskreuz
Jun 28 2017 17:13
Wondering if they should be imports instead of inlined. Scripts treated as modules, linked HTML treated as other component files, linked CSS... I have no idea how the other loaders handle linked CSS. :smile:
This message was deleted
Well, still playing with the bin. Trying to build stuff with it. :smile:
Chris Reeves
@evs-chris
Jun 28 2017 17:17
I've been using it with Webpack for a work project, and it's working pretty well
Joseph
@fskreuz
Jun 28 2017 17:17
:thumbsup:
Anyone know of tools that does something like:
import a from './a';  // a is a module
import b from './b.css'; // b is the css in string
import c from './c.html'; // c is the html in string
Chris Reeves
@evs-chris
Jun 28 2017 17:18
for view components, loading external files is nice because you can split out code and templates when the base file starts getting too long to be comfortable
Webpack will do that
You just have to configure the loaders, which aren't particularly complicated once you slog through the docs
Joseph
@fskreuz
Jun 28 2017 17:20
:thumbsup:
Matt Granmoe
@granmoe
Jun 28 2017 18:14
Well, been at my new gig that uses Ractive for 8 days now. Convinced them to convert to React. There are a handful of reasons. I may write a blog post about it, in which case I'll share it here.
Martin Kolárik
@MartinKolarik
Jun 28 2017 18:18
don't worry about it, everyone makes a mistake sometimes :laughing:
Chris Reeves
@evs-chris
Jun 28 2017 18:20
🤣
congrats on the new gig, and I'm looking forward to some feedback on how we can improve
Matt Granmoe
@granmoe
Jun 28 2017 18:27
@MartinKolarik :laughing:
@evs-chris Ractive served this project really well, seems like there wasn't anything especially hard to do in ractive vs react, yet there remain a few big advantages to react. Granted, one of the big ones is simply that the community is larger and, sadly, it's hard to attract developers to work on ractive. The other major one, and I think this is partially a matter of taste, is that it's always cumbersome to attempt to extend your templating language to handle complex logic. React just uses a tiny extension of javascript (JSX) and it's much easier for most people since it's less to learn. As I said, this is getting into kind of philosophical territory where it's kind of a difference of taste.
and there were some weird pains with having to keep imports out of components because rollup pukes when running tests for some reason if we import things that expect browser globals. Tried using a rollup plugin to inject browser globals. No luck
so, due to that and the template difference, you end up having 3 files in ractive (in our project) instead of just 1 in react, even for dead simple components
Joseph
@fskreuz
Jun 28 2017 18:30

keep imports out of components

I'm curious about this one. I typically write my components in vanilla JS with template and css inlined. Works well with tools like rollup.

Matt Granmoe
@granmoe
Jun 28 2017 18:31
let me replicate the error really quick and share it
Joseph
@fskreuz
Jun 28 2017 18:33
I typically write it like... this :tada:
import Ractive from 'ractive'

export default Ractive.extend({
  data: () => ({
    title: '',
    description: ''
  }),
  template: `
    <div class="header">
      <div class="header__title">{{ title }}</div>
      <div class="header__description">{{ description }}</div>
    </div>
  `,
  css: `
    .header{}

    .header__title{}

    .header__description{}
  `
})
Matt Granmoe
@granmoe
Jun 28 2017 18:33
ooo that's nice, I like the inlining of template and css
would prefer not to have template be a string literal but rather jsx ;-)
Joseph
@fskreuz
Jun 28 2017 18:34
Then just use tools to pluck out and pre-process the template and css.
Matt Granmoe
@granmoe
Jun 28 2017 18:34
I just prefer jsx
arrggh can't get that error to happen now...will share here once I have it
Bob Schellink
@sabob
Jun 28 2017 18:37
@fskreuz I use rollup + rollup-plugin-string to import html and css.
Matt Granmoe
@granmoe
Jun 28 2017 18:38
why does it seem like so many ractive people use rollup instead of webpack?
any advantage to rollup over webpack?
Joseph
@fskreuz
Jun 28 2017 18:38
Made by the same author? :D
Matt Granmoe
@granmoe
Jun 28 2017 18:38
ha
Joseph
@fskreuz
Jun 28 2017 18:38
Well, rollup just works for me. No fancy configs.
But there was a blog post by @Rich-Harris about when to use what, the overlap and that stuff.
Matt Granmoe
@granmoe
Jun 28 2017 18:39
again, and you can accuse me of Resume Driven Development, but if one option is way more common, I want to use that :)
(not that I have 100% trust in the js community...)
man, I must be coming off as jerk here :-)
Bob Schellink
@sabob
Jun 28 2017 18:40
After grunt/gulp pain I vowed to only use node based builds. Rollup fits in nicely with that flow. Dunno webpack at all though.
Joseph
@fskreuz
Jun 28 2017 18:40
@granmoe lol. different points of view are always good.
Matt Granmoe
@granmoe
Jun 28 2017 18:41
ha, well that's a good attitude
I can say, despite my complaints above, that the ractive community has proven to be very helpful and friendly to beginners
Bob Schellink
@sabob
Jun 28 2017 18:41
@granmoe nah, right tool for the right job and all that..
Joseph
@fskreuz
Jun 28 2017 18:42
@sabob exactly.
Matt Granmoe
@granmoe
Jun 28 2017 18:44
Alright, I respect that. That should be the #1 rule of any programming task. @sabob
oops, didn't mean to link an issue
but...I still have to counterbalance it with a bit of resume driven development :P
Bob Schellink
@sabob
Jun 28 2017 19:00
I like to separate my templates from code so I can see the layout of the UI. Not sure if React communicates that as clearly. From the looks of it React seems to encourage mixing the two worlds a bit. Perhaps that is needed for complex UIs such as Facebook? Fortunately I don't have to write anything as daunting :)
Matt Granmoe
@granmoe
Jun 28 2017 19:00
That makes sense
So in react, if you wanted to separate a complex component's markup into a separate file, you would just do that :-)
you can just put it in a function like
export default (props) =>
  <div>
      <MaybeAnotherComponent  foo={ props.bar } />
      <Whatever />
  </div>
I guess this is another big difference: in react, markup is always the output of a function, in ractive, markup is the result of processing a static template
not sure about all the inner workings of that processing...and that's what I see as another big advantage of react's approach. It seems far easier to reason about and predict what the output will be (to me at least)
Chris Reeves
@evs-chris
Jun 28 2017 19:07
the biggest plus for me on ractive is that the designers I work with can understand most of what's going on in the template
you throw functions and required build steps at them and they kinda shut down
Joseph
@fskreuz
Jun 28 2017 19:07
to me, the biggest plus is that... it just works everywhere. build or no build, tools or no tools, browser... or no browser. :P
Chris Reeves
@evs-chris
Jun 28 2017 19:08
that too :smile:
kouts
@kouts
Jun 28 2017 19:08
+1 @fskreuz
Chris Reeves
@evs-chris
Jun 28 2017 19:08
the good news is, larger scale apps, packaging, and distributing components are at the top of my list for improvement for 1.0
just above slimming down
I tend to prefer rollup for packaging, but I mostly deal in writing libraries
kouts
@kouts
Jun 28 2017 19:09
Ractive is easy to understand when you are coming from the php templating world or the clientside templating world (e.g handlebars)
Chris Reeves
@evs-chris
Jun 28 2017 19:10
coming at it from an app standpoint, I can see some pretty decent usability benefits to webpack
Joseph
@fskreuz
Jun 28 2017 19:10
code splitting in particular
Chris Reeves
@evs-chris
Jun 28 2017 19:10
yep
Chris Reeves
@evs-chris
Jun 28 2017 19:11
I don't know if you follow svelte development, but Rich has an open issue on component distribution where the resolution is to have a svelte property in the package.json
Bob Schellink
@sabob
Jun 28 2017 19:12
code splitting? is that about surfing a small upfront app and lazy load the rest?
Chris Reeves
@evs-chris
Jun 28 2017 19:12
webpack makes it pretty easy to do stuff like that
rollup is more manual or defers to the plugin author
@sabob pretty much
kouts
@kouts
Jun 28 2017 19:13
code splitting seems like a gret feature for large scale apps!
how would that play with Ractive, any examples scenarios?
Chris Reeves
@evs-chris
Jun 28 2017 19:14
I haven't tried code splitting yet, but based on my recent experiences, it shouldn't be difficult
I'll see if I can put together a demo repo later
my current setup pulls in ractive from the mjs and squishes it in with all of my components
it's also kinda nice to be able to bundle in other libs without fiddling
Matt Granmoe
@granmoe
Jun 28 2017 19:21
that was another thing for us: we need to implement code splitting soon
good points above
I'd argue that purely presentational react components are easy for designers to understand as well
Chris Reeves
@evs-chris
Jun 28 2017 19:23
I haven't followed the latest react trends... where did they end up on "css in muh js" and how does that play with designers?
Joseph
@fskreuz
Jun 28 2017 19:24
I've done research on that a few days ago. There's actually a lot of libs for that.
Chris Reeves
@evs-chris
Jun 28 2017 19:24
that just missed the muh
Joseph
@fskreuz
Jun 28 2017 19:25
:D
Was wondering if I could use one of them in Ractive. I think it was Glamorous was what I last looked at that was feasible.
Matt Granmoe
@granmoe
Jun 28 2017 19:26
great article
"If you need code-splitting, or you have lots of static assets, or you’re building something with lots of CommonJS dependencies, Webpack is a better choice. If your codebase is ES2015 modules and you’re making something to be used by other people, you probably want Rollup."
Chris Reeves
@evs-chris
Jun 28 2017 19:26
DANGER... PAYPAL DETECTED... :laughing:
Matt Granmoe
@granmoe
Jun 28 2017 19:27
?
Chris Reeves
@evs-chris
Jun 28 2017 19:27
glamorous is a paypal lib
Matt Granmoe
@granmoe
Jun 28 2017 19:28
ah
weird name
naming things is hard
Chris Reeves
@evs-chris
Jun 28 2017 19:29
the two biggest issues in the software world are naming things, cache invalidation, and off-by-one errors
Matt Granmoe
@granmoe
Jun 28 2017 19:30
classic :-)