These are chat archives for ractivejs/ractive

9th
Dec 2017
Joseph
@fskreuz
Dec 09 2017 01:12
What's reason why Ractive used component.exports instead of module.exports? Is it because it made sense as component? Or does it collide with Node's module? Or something else entirely?
Chris Reeves
@evs-chris
Dec 09 2017 02:00
Reasons ™?
I'd guess there's some info in an issue or pr related to single file components from back in the day, but searching GitHub on a phone is not easy.
Paul Maly
@PaulMaly_twitter
Dec 09 2017 04:03
I've no idea, but seems it's design intent. For example, Vue uses CommonJS style with module.exports. But I think RiotJS provides the best solution:
Anatoli Radulov
@avoto
Dec 09 2017 06:31
In my use case I have Java code on my backend which produces Ractive component files consumed by the browser via an Ajax request. The browser on then uses a modified RVC (actually RCU) which caches the parsed Ractive template into localstorage resulting in faster user experience. I have many reasons for generating code on the fly but one of the many is that our app has a massive resource bundle (language files) and components are translated before sent to the browser. We support nearly all languages and precompiling the components for production is just not an option. Our English translation is nearly 70MB :) Also I’ve being using RVC in production for nearly 3 years now and imho crunching Ractive components on the client has been the smallest issue in our UI so far.
Paul Maly
@PaulMaly_twitter
Dec 09 2017 06:42
But AST it's just a js representation of ractive's template. So, you don't need to warry about your languages. You don't need to work with string templates on fly.
Anatoli Radulov
@avoto
Dec 09 2017 07:03
The server code I was referring to generates Ractive components as in the single file Ractive component spec. In other words XML starting with a bunch of <link rel=“ractive” ...> tags requiring some static and some other generated component files. Followed by a generated xml construct of the required tags. The above process happens when a component is required via Amazon Cloudfront server pointing to us as an origin. Then this generated component which has a unique version in as part of the file name is cached in S3 and on on all clients browsers once parsed. The generated component different based on who requests it from us. Think of hundreds of versions of a single site in tens of languages each. I am sure that somewhere in the mix we can use an isomorphic approach (as our widgets are mostly static and not generated code) but having a build step would add an additional complexity to the already complex architecture we have. :)
Paul Maly
@PaulMaly_twitter
Dec 09 2017 07:12
Ok, single file components change the deal. I don't use this approach and can't tell anything else about it.
Joseph
@fskreuz
Dec 09 2017 18:01

Our English translation is nearly 70MB

@avoto That's scary. If I follow correctly, you're creating components on-the-fly based on language. Is it possible to send translation data in a separate request, and have components not contain language-specific content. I once did this in Drupal, where I sent admin-generated translations in a separate request and stuck it to Ractive.defaults.data.i18n, and each component would do something like <span>{{ i18n.someBlurbOfText }}</span>. All the components needed to assume was that an i18n data property always existed with key-value pairs of user-specific translations, sort of like properties files.

Chris Reeves
@evs-chris
Dec 09 2017 18:04
On the plus side, I feel much less bad about all the various bits of my apps adding up to ~1mb 😁
Joseph
@fskreuz
Dec 09 2017 18:05
200KB doesn't sound as bad anymore does it? :D
70MB would be something like game assets and textures for some WebGL game. But translations for one language? :scream:
Chris Reeves
@evs-chris
Dec 09 2017 18:06
I think I saw something about the average news page weighing in at 5mb years ago and 15mb in 2016
but yeah, that's a lot of text
kouts
@kouts
Dec 09 2017 18:07
@avoto I'm using a similar concept, I have components split into html and js files, server side the components get str replaced with translations before sent to the client
kouts
@kouts
Dec 09 2017 18:19
Share time
super easy routing views with page js + Ractive
Ractive.components['empty'] = Ractive.extend({
    isolated: false,
    template: `<div>Loading...</div>`
});

page('/:action?', function(ctx, next){
    let page_data = getPageData(ctx).then((data)=>{
        data.cmp = 'my-view';
        return data;
    });
    let my_view = lazy_load('ractive_components/my-view');
    Promise.all([page_data, my_view]).then(res => {
        Ractive.components['my-view'] = res[1];
        window.ractive.set(res[0]);
    });
});

window.ractive = new Ractive({
    template: `{{> router_view(cmp) }}`,
    el: '#app',
    router_view(cmp){
        var cmp = cmp ? cmp : 'empty';
        var key = 'partial-' + cmp;
        if (!!this.partials[key]) return key;
        this.partials[key] = '<'+cmp+' />';
        return key;
    }
});
Paul Maly
@PaulMaly_twitter
Dec 09 2017 18:28
For langs I use isomorphic approach + static mustaches to single rendering i18n values on server. Lang name comes with cookies.
Joseph
@fskreuz
Dec 09 2017 18:35

You could also have component-style routing using page and conditional rendering. Something like:

import page from 'page'

const Route = Ractive.extend({
  template: `{{#if render }}{{> content }}{/if}}`,
  data: { pattern: '/', params: {}},
  onrender(){
    page(this.get('pattern'), (ctx, next) => {
      this.set('render', true)
      this.set('params', ctx.params)
      next()
    })
    page.exit(this.get('pattern'), (ctx, next) => {
      this.set('render', false)
      this.set('params', null)
      next()
    })
  }
})

And used like

<Route pattern="/"> stuff to render on root </Route>
<Route pattern="/about"> stuff in about </Route>
<Route pattern="/books/:id"> I have Book with id {{ params.id }}</Route>

Of course, this is just from the top of my head, not all of it. I remember I did some intricacies with the page.js handlers to do some fall backs and other things, but it's the general idea.

I think I had to create a container component to contain the <Route> so I can properly call page.start() or something after all handlers were set using the container's oncomplete.
Paul Maly
@PaulMaly_twitter
Dec 09 2017 18:47
My routing style I described here: ractivejs/ractive#3134
Cerem Cem ASLAN
@ceremcem
Dec 09 2017 21:18
is there anyone interested in building a drawing application specifically designed for electrical circuit board design, like https://easyeda.com/, but will be an alternative to Kicad, which will be run both online or offline.
Anatoli Radulov
@avoto
Dec 09 2017 22:24
@fskreuz The ajax approach for fetching translations should work for me too, and is worth exploring. My primary reason for translating components on the server was the fact that the markup for most of those was server generated anyway so I would simply replace the i18n strings with the translation before returning the http response to RVC.