ractivejs/ractive

web apps made simple

Chris Reeves

@evs-chris

if you can solve the miscommunication between teams in hospitals, there may be a nobel prize in your future

especially between the billing dept and the billing dept :laughing:

auronpriestley

@auronpriestley

haha, exactly. didn't realize how much the billing department is the hospitals major concern until I went from resident-doctor to startup - I was never on the inside of the medical business and I'm glad I didn't. Our MVP is used among resident teams at a few hundred hospitals. I always wanted the UI to be reactive but an early test didn't work. now our server has web sockets and the browsers are more stable. Funny everyone gave us a hard time because we have a c++ server backend and now the javascript guys are compiling their code.

typescript, etc. so I think this is a great time for web dev and making impactful apps.

auronpriestley

@auronpriestley

ractive/prosemirror collaborative editing in your CMS: that could be a thing.

Chris Reeves

@evs-chris

that is an interesting combo of stack pieces

one of the benefits of intranet apps is you don't have to have server-side rendering for the seo and marketing team

I've been wanting to get into rust for the backend, and now that async/await are almost stable, I may finally dip a toe in

my c++ has been condemned by the humane society as cruel and unusual to animals, though to be fair, I've only ever written win api c++ and nigh two decades ago

auronpriestley

@auronpriestley

there is a c++ evangelist, vinnie falco, who was a lead engineer behind the cryptocurrency Ripple. he released a lib for creating web backends called beast (part of the boost library). it may surprise you.

ah, so intranet was what you meant earlier!! interesting we are both in that space and its making me want to just drink the ractive kool-aid right now

i suppose ractive actually doesn't have kool-aid at all, its the opposite of hype

thanks for the conversation and i'm looking forward to returning to say we've joined the ractive community. :) night

Chris Reeves

@evs-chris

glad to chat! night

Chris Reeves

@evs-chris

@kouts, sorry, I got distracted and forgot to respond to you

yes that approach looks like it's pretty good based on the structure of the app

my approach to stuff like this has been to have an overall wrapping instance that manages a global modal area. It also manages a layered (z-index) pages area where each page also has its own modal area. With that, you can block the whole app, or only portions of the app, and switching between pages is seamless.

the downside is that it doesn't play particularly well with the history api, as there's more than one page open at a time

that's not a huge problem in my app though, as it's replacing a desktop app and as such is not meant to act like a web app so much

I've considered adding history api support to navigate back and forth between the pages without breaking the browser, but it got a bit deeper than I wanted when the designer asked if it would also handle nested tabs in each page

kouts

@kouts

thank you @evs-chris, I'm using the popup host approach right now. Actually, the popup host lives a level higher up and I have an event which clears the popup host everytime a view (which is just a component) unrenders.

@auronpriestley we are using Ractive in production, we also need support for IE11 so it's fine.

auronpriestley

@auronpriestley

@kouts :thumbsup:

amadanmath

@amadanmath

Hello! I am trying to find the right event that would trigger each time DOM is updated by Ractive, but I must have missed it. (I want to have a container which automatically sets scrollHeight to the bottom whatever the datamodel, and consequently template, does.)

Looking at the table of lifecycle events, I guess the closest would be change, but the description says "...when data changes" - that's too early for my needs, isn't it?

kouts

@kouts

you can set up an observer for this

https://ractive.js.org/concepts/#observers

kouts

@kouts

Something like

ractive.observe('datamodel.keypath.here', function(newVal, oldVal, keypath){
  if(newVal != oldVal){
    // dstuff with scrollHeight here
  }
});

Chris Reeves

@evs-chris

there's also a defer option on observers that keeps them from firing until after the associated dom is updated

amadanmath

@amadanmath

Ooh, thank you, I think defer is exactly what I was looking for (and kept missing)!

amadanmath

@amadanmath

I'll try tomorrow

auronpriestley

@auronpriestley

chris, do you use backbone with your ractive projects

Chris Reeves

@evs-chris

I do not

I know there's an adapter that people have had success with in the past, but I've been fortunate enough to not have to tie in external data sources

auronpriestley

@auronpriestley

:thumbsup:

auronpriestley

@auronpriestley

if not backbone what do you use for routing your SPA?

Chris Reeves

@evs-chris

I've used page.js when I needed actual url support, but my biggest app is a bit too complex for urls, as multiple independent views are often open at the same time

it's a replacement for a huge, complicated desktop app, and operates in a somewhat desktop manner - kinda like an mdi, but responsive

also, sorry about the lag here

gitter never actually gets notifications to the client on my phone, so I don't see anything unless I'm actively using it or until I get an email notification

auronpriestley

@auronpriestley

no worries about the lag. I did see your desktop looking examples. in reviewing vuejs it does embrace being a framework vs library. also we have our own server and nodejs server is very much integrated into the "official" way of doing vuejs apps

i'm having my team do a ractive demo to get a feel for how it would integrate into our workflow. its definitely less disruptive.

Chris Reeves

@evs-chris

That's been my experience re disruptive. If you can fit the cookie cutter for react or vue, you can definitely get a good boosted start. As soon as you step away from the status quo though, things get... interesting. I spent too much time trying to bend .net and java frameworks and rails to fit my weirdo requirements to want to try do that on the frontend too.

For the most part, I don't on the backend anymore either.

ABooooo

@ABooooo

Hello, I would like to know if it is possible to send through component nested data values? I have a textinput component with

data: {
    datakey: 'sepp',
    config: {
      urlparam: 'textparam'
    }
  }

I can define default datakey in template <textinput datakey="defaultSepp"/> The problem is with 'config.urlparam'. This for example doesn't works <textinput datakey="defaultSepp" config.urlparam="something"/>.

Norbert Haberl

@nhaberl

Maybe this helps? ractivejs/ractive#2060

Norbert Haberl

@nhaberl

<script id="template" type="text/ractive">'''
    <div style-height="40vh">
        <slideshow config.value="{{config}}" images="{{devopsImages}}" />
    </div>
    <div style-height="55vh">
        <slideshow images="{{eImages}}" />
    </div>
</script>

works but with a constant like config.value="10" doesn't

kouts

@kouts

Ractive version is 1.2.4 instead of 1.3.7 on CDNs, e.g https://unpkg.com/ractive@latest/ractive.min.js

https://cdn.jsdelivr.net/npm/ractive

Where communities thrive

People

Repo info

Activity