These are chat archives for ractivejs/ractive

4th
Oct 2017
Qtaza
@Qtaza
Oct 04 2017 12:38
Hello.
Where i can find clean tempalte for reactive.js app?
Chris Reeves
@evs-chris
Oct 04 2017 12:42
there's not an updated one available at the moment, but it's something that's on our list of things to do
the simplest setup is with webpack and ractive-bin-loader and is pretty uncomplicated
Joseph
@fskreuz
Oct 04 2017 12:47
My setup is Rollup, ES modules, and inlined template and styles. All Ractive constructors are just default exports, one component per module.
// MyComponent.js
import Ractive from 'ractive'
import SomeOtherComponent from './somewhere'

export default Ractive.extend({
  components: { SomeOtherComponent },
  template: `...`,
  css: `...`,
  // Other stuff
})
Probably the one with least overhead (Just JS and Rollup is all you need), but misses out in terms of tools (unless you write your own Rollup plugins for it).
Joseph
@fskreuz
Oct 04 2017 12:53
Just discovered that there's a rollup bundler for component files. Same concept, but you write using component files. https://github.com/rollup/rollup-plugin-ractive
Occasionally bumping up to Gobble if I need to compile SASS. So that's Gobble with gobble-rollup and gobble-sass.
lazylester
@lazylester
Oct 04 2017 12:58
@fskreuz just to clarify, then... you use es6 backticks for templates. So this means you use $() format vs mustache handlebars. Is that right?
for variable interpolation
Joseph
@fskreuz
Oct 04 2017 13:24
Nope. Still using {{ }} for most of the stuff. If I use ${ }, that's probably for a static, component-wide value (or anything that needs to go in before Ractive parses the template).
lazylester
@lazylester
Oct 04 2017 13:26
so why backticks iso quotes?
Joseph
@fskreuz
Oct 04 2017 13:26
multi-line :D
lazylester
@lazylester
Oct 04 2017 13:26
aaah I get it, thanks!
Joseph
@fskreuz
Oct 04 2017 13:48
Occasionally, if I need to get stuff done fast without futzing with build setups, I fall back to component files, Ractive 0.7 and ractive-load. All runtime, still the most reliable setup around. I can always drop in a build setup afterwards and the component files are left virtually unchanged.
And this is the reason why I still value runtime-based libs. Hit the ground running. :D
lazylester
@lazylester
Oct 04 2017 13:51
"runtime-based libs" means not requiring a build step?
Joseph
@fskreuz
Oct 04 2017 13:52
yes, or at least that's what I call them. :P
kouts
@kouts
Oct 04 2017 13:58
You can also use ractive-load with 0.9.x also, but it needs some tinkering
For my main project I don't even use ractive-load, all templates are handled by a backend and "printed" in the appropriate pages
inside a <script type="text/template"> tag
Joseph
@fskreuz
Oct 04 2017 14:00
Nice :D
kouts
@kouts
Oct 04 2017 14:01
It works ok
lazylester
@lazylester
Oct 04 2017 14:03
@kouts do you mean "printed" as html ( vs. precompiled AST format)?
kouts
@kouts
Oct 04 2017 14:03
I'm also using ractive-bin-loader in a smaller project
yes @lazylester printed as html
I also have an experiment somewhere
where I used ractive-loader
but I had a script in the build process that would take the template, parse it with Ractive.parse and put in the template attr
something like ractive-bin-loader does, but manually
kouts
@kouts
Oct 04 2017 14:10
It was a combination of gulp+browserify
here is the gulp.js file in all it's glory
please don't laugh at the lazy implementation :smile:
so I had ractive-load components that looked like this:
<script>
    component.exports = {
        template: loadFrom('public/templates/pg_bugs.html'),
        oninit: function(){
        }
    }
</script>
kouts
@kouts
Oct 04 2017 14:17
and the result was:
<script>
    component.exports = {
        template: {"v":4,"t":[{"t":7,"e":"div","m":[{"n":"class","f":"row","t":13}],"f":[{"t":7,"e":"div","m":[{"n":"class","f":"col-sm-12","t":13}],"f":["This is the bugs page",{"t":7,"e":"br"}]}]}]},
        oninit: function(){
        }
    }
</script>
Cerem Cem ASLAN
@ceremcem
Oct 04 2017 14:31
@Qtaza if it's not a bit overkill for your use case, check out ScadaJS: https://github.com/aktos-io/scada.js