These are chat archives for ractivejs/ractive

2nd
Jun 2017
Matt Granmoe
@granmoe
Jun 02 2017 17:28
Is there any particular use case where Ractive shines in comparison to other libraries?
Joseph
@fskreuz
Jun 02 2017 17:30
For me, where it shines is familiarity, flexibility and simplicity. It doesn't force any strange convention on your workflow, most of its features can be toggled (two-way, lazy binding, isolation, etc.). And if you think about it, it's just componentized handlebars. :D
You can use Ractive with or without a build step. You can do traditional two-way binding, or one-way data flow. You can build stateful or stateless components. You can use fat models or POJOs. The choice is entirely yours.
Chris Reeves
@evs-chris
Jun 02 2017 17:32
When it was younger, it was much simpler to use and faster than most of the competition. Other libraries and frameworks have since caught up.
Joseph
@fskreuz
Jun 02 2017 17:33
younger = when your only options were Ember, Angular and Backbone or straight up jQuery. React, Vue and friends didn't exist/wasn't famous yet. :D
Chris Reeves
@evs-chris
Jun 02 2017 17:35
Yep. Evan You actually used ractive a bit back in the day.
Intuitive templates are the biggest benefit for me.
I can usually explain to a designer how the templates work in an hour or so, and they can modify them however they need to from there without getting frustrated.
Chris Reeves
@evs-chris
Jun 02 2017 17:40
The fragment-based approach also allows things like <table>{{#each items}}<tr><td>detail line 1</td></tr><tr><td>detail line 2</td></tr>{{/each}}</table>, which aren't possible with element+directive-only based approaches
Matt Granmoe
@granmoe
Jun 02 2017 17:54
Great info, guys. Thanks! Follow-up: any good "real world" examples on github? I'm referring to OSS stuff, not just contrived examples ;-)
Joseph
@fskreuz
Jun 02 2017 18:00
You can ask around. I've seen people use it in production setups. My previous job also used Ractive on a product, but it's an org-based service so not sure if you can actually get to the Ractive part.
Also, the documentation "playground" is built with Ractive. :wink:
Martin Kolárik
@MartinKolarik
Jun 02 2017 18:05
@granmoe https://www.jsdelivr.com/ is OSS and built with Ractive, although it's 3 years old and currently slightly broken (for reasons not related to Ractive).
Matt Granmoe
@granmoe
Jun 02 2017 18:11
Cool, thanks. I ask because I'm going to a job where they use Ractive
Joseph
@fskreuz
Jun 02 2017 18:11
Cool!
Matt Granmoe
@granmoe
Jun 02 2017 18:18
This is interesting. There's a bunch of unminified code available on the page, and Ractive is running in debug mode: https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
some cool 3js integration, too
Rich Harris
@Rich-Harris
Jun 02 2017 18:19
shit did i forget to minify something? :grimacing:
(I made that page)
Chris Reeves
@evs-chris
Jun 02 2017 18:21
I suspect there are a few Guardian projects floating around out there using ractive 😄
Martin Kolárik
@MartinKolarik
Jun 02 2017 18:21
wow that's pretty cool :+1:
Rich Harris
@Rich-Harris
Jun 02 2017 18:22

I suspect there are a few Guardian projects floating around out there using ractive 😄

there sure are!

Chris Reeves
@evs-chris
Jun 02 2017 18:23
my home media server is built with Ractive, but I've not yet gotten round to publishing the source
Rich Harris
@Rich-Harris
Jun 02 2017 18:23
that's amazing!
must have been a fun thing to build
Chris Reeves
@evs-chris
Jun 02 2017 18:25
it's basically just a pretty front for a node streaming server that plays with a video element
movie info is collected from omdb complete with posters for the pretty
works great with a Chromecast, and the kids don't have to gum up the discs 😀
Joseph
@fskreuz
Jun 02 2017 18:29

Ractive is running in debug mode

Debug mode is nothing more than Ractive being noisier than usual. Helps even when you're working on minified code (i.e. production code). Can easily be disabled with Ractive.DEBUG = false.

Chris Reeves
@evs-chris
Jun 02 2017 18:29
btw, don't use svg blur effects on mobile unless you want warm your hands
Joseph
@fskreuz
Jun 02 2017 18:29
lol
Rich Harris
@Rich-Harris
Jun 02 2017 18:30
now that I think about it, we initially forgot to include Ractive.DEBUG = false in production, but then it turned out that a lot of people were discovering Ractive by opening devtools on Guardian pages, so we left it in deliberately since it has no impact on perf
Chris Reeves
@evs-chris
Jun 02 2017 18:34
10.0.5.1- (1).png
Martin Kolárik
@MartinKolarik
Jun 02 2017 18:35
nice
Rich Harris
@Rich-Harris
Jun 02 2017 18:35
badass
Joseph
@fskreuz
Jun 02 2017 18:38
:thumbsup:
Chris Reeves
@evs-chris
Jun 02 2017 18:38
the banner is a pretty good advert
Matt Granmoe
@granmoe
Jun 02 2017 18:39
@Rich-Harris Nice work! Makes sense why you leave debug on. As to the unminified code, I'm not quite sure what these files are, but I they're quite readable
Chris Reeves
@evs-chris
Jun 02 2017 18:39
is svelte going to get one? :smile:
Matt Granmoe
@granmoe
Jun 02 2017 18:40
Screen Shot 2017-06-02 at 1.36.34 PM.png
Joseph
@fskreuz
Jun 02 2017 18:41
Doesn't orange mean it's translated via source map?
(doublechecks)
Rich Harris
@Rich-Harris
Jun 02 2017 18:42
oh, graun.article.js is CMS-level stuff, not my domain :grinning:
Matt Granmoe
@granmoe
Jun 02 2017 18:42
ah, I see
Rich Harris
@Rich-Harris
Jun 02 2017 18:43
@evs-chris no banner for svelte, can't justify the extra bytes!
Chris Reeves
@evs-chris
Jun 02 2017 18:45
one of the small downsides to being a (the, still, I think) disappearing framework, but svelte has pretty decent exposure nonetheless
Joseph
@fskreuz
Jun 02 2017 18:46
(no puns intended) :D
Rich Harris
@Rich-Harris
Jun 02 2017 18:46
currently seeing if I can sneak it into the NYT's project setup
Chris Reeves
@evs-chris
Jun 02 2017 18:47
if they only use in house stuff, it could be considered in house now, right? 😉
and definitely cutting edge
Rich Harris
@Rich-Harris
Jun 02 2017 18:50
in-house, yep. joins the likes of D3, Backbone, Underscore, CoffeeScript etc — good company! That's just us on the graphics desk though, we do our own thing, decoupled from the larger org (which is how most interactive/visuals teams work in news orgs)
Chris Reeves
@evs-chris
Jun 02 2017 18:51
that is an impressive set of peers
a veritable covfefe
Rich Harris
@Rich-Harris
Jun 02 2017 18:53
best usage yet
Matt Granmoe
@granmoe
Jun 02 2017 19:20
:laughing:
Matt Granmoe
@granmoe
Jun 02 2017 19:33
I've gotta start using "covfefe" whenever I can't find the right word :-)
Juan C. Andreu
@andreujuanc
Jun 02 2017 19:35
I just opened gitter because I saw covfefe on your message... :loudspeaker:
Juan C. Andreu
@andreujuanc
Jun 02 2017 19:42
Just read convo. @granmoe Not OSS but I'm using Ractive on 2 projects. One of those is a Cordova app. Nothing fancy like that guardian artcile, but ractive works flawlessly anywhere :)
Matt Granmoe
@granmoe
Jun 02 2017 19:44
:thumbsup:
Joseph
@fskreuz
Jun 02 2017 21:13
At what point do the terms directives and attributes differ? Or are they entirely the same thing named differently?
Dan
@dan2dev
Jun 02 2017 21:26
Hi people.
Juan C. Andreu
@andreujuanc
Jun 02 2017 21:27
:wave:
Dan
@dan2dev
Jun 02 2017 21:27
I just saw the site upgrade. Do we have new a new version?
Juan C. Andreu
@andreujuanc
Jun 02 2017 21:28
guys are on :fire:
Joseph
@fskreuz
Jun 02 2017 21:28
Yep. 0.9 is out. Site gets new coat of paint. Documentation currently being updated.
Dan
@dan2dev
Jun 02 2017 21:29
Ractivejs is my favorite! :)
Chris Reeves
@evs-chris
Jun 02 2017 21:31
A directive is a ractive thing that doesn't render to the dom, whereas an attribute is a dom thing that ractive may look at when doing certain things
like values for options
or is for custom elements
Joseph
@fskreuz
Jun 02 2017 21:32
So technically... special attributes are directives, yes?
Chris Reeves
@evs-chris
Jun 02 2017 21:32
technically
type is also special
Juan C. Andreu
@andreujuanc
Jun 02 2017 21:33
is there docs for this?
Joseph
@fskreuz
Jun 02 2017 21:34
I know not what is and type are :D
Chris Reeves
@evs-chris
Jun 02 2017 21:34
attributes that control how dom elements behave
type determines how the browser renders an input
Joseph
@fskreuz
Jun 02 2017 21:35
You mean <input type="text"> <- this type?
oh
Chris Reeves
@evs-chris
Jun 02 2017 21:35
yep
Joseph
@fskreuz
Jun 02 2017 21:35
ahh
Chris Reeves
@evs-chris
Jun 02 2017 21:35
ractive also looks at it when deciding how to bind
it's an attribute, but also kinda directive
Joseph
@fskreuz
Jun 02 2017 21:37
Just wondering if we could use the terms interchangeably or if I should explicitly call out which is which. 🤔
Chris Reeves
@evs-chris
Jun 02 2017 21:40
it's a bit fuzzy
event listeners, decorators, and transitions are clearly directives
Joseph
@fskreuz
Jun 02 2017 21:42
yup, but value is sort of maybe not so depends :D
Chris Reeves
@evs-chris
Jun 02 2017 21:42
yep
class- and style- are directives, but they're basically attributes that combine in a friendly way
I HAVE CONQUERED THE COVERALLS
I think
definitely nicer on local builds
Joseph
@fskreuz
Jun 02 2017 21:45
Currently checking it out. nice :clap:
Chris Reeves
@evs-chris
Jun 02 2017 21:46
I'm going to leave sauce off for a bit, because it's been making for 10min builds lately
Joseph
@fskreuz
Jun 02 2017 21:46
Yeah, there's something wrong with Chrome beta. Not sure why tho.
Chris Reeves
@evs-chris
Jun 02 2017 21:49
I think what I've done is safe as far as ci release, because the scripts throw away the build dir and start fresh for the release bundle, right?
Joseph
@fskreuz
Jun 02 2017 21:49
yup
Chris Reeves
@evs-chris
Jun 02 2017 21:50
:+1: just wanted a sanity check before I merge
does it look ok otherwise?
Joseph
@fskreuz
Jun 02 2017 21:53
what's the swizle script for?
(asks while installing node modules) :P
Chris Reeves
@evs-chris
Jun 02 2017 21:56
it fixes paths in the instrumented src
Joseph
@fskreuz
Jun 02 2017 21:56
ahh
Chris Reeves
@evs-chris
Jun 02 2017 22:00
I tried to do it elegantly first
Joseph
@fskreuz
Jun 02 2017 22:08
Looks good to me!
Chris Reeves
@evs-chris
Jun 02 2017 22:08
g up and beat it with a hammer
Chris Reeves
@evs-chris
Jun 02 2017 22:31
looks like we can skip some of the nigh-impossible-to-test code with istanbul comments
most of the worst coverage offenders fall in that category
Martin Kolárik
@MartinKolarik
Jun 02 2017 22:32
yeah those comments are a must if you aim for 100%
there's also https://github.com/istanbuljs/nyc which has better support for ES2015+ code and supports excluding whole files
Chris Reeves
@evs-chris
Jun 02 2017 22:47
don't know about 100%, but 99 with a bit of rounding seems attainable 😆