These are chat archives for ractivejs/ractive

30th
May 2017
kouts
@kouts
May 30 2017 12:14
Any thoughts on this: ractivejs/ractive#2985 ?
Juan C. Andreu
@andreujuanc
May 30 2017 12:18
If you going to target users with ie11, then why not use your own pf?
Joseph
@fskreuz
May 30 2017 12:18
The polyfills file isn't that big so I wouldn't worry about it. Also, the polyfills file is 95% modular. You can simply just take a copy of the polyfills file and start deleting the ones you don't need.
I can only think of a few polyfills that depend on another polyfill in there.
kouts
@kouts
May 30 2017 12:25
Ok so editing https://cdn.jsdelivr.net/npm/ractive@0.9.0/polyfills.js is the way to go, right?
Joseph
@fskreuz
May 30 2017 12:26
Well, i'm kinda allergic to the idea of having something version-specific/track a specific version. We could ship an ie11-only file, but that would only become a reason to ship more of the same.
Then the cat-and-mouse game of chasing versions starts.
kouts
@kouts
May 30 2017 12:36
Yes @fskreuz you're probably right, I'll take the approach of editing the polyfills file
Joseph
@fskreuz
May 30 2017 12:38
But that's just me. Others might have better suggestions. :D
Juan C. Andreu
@andreujuanc
May 30 2017 12:40
Make it work, fast. Don't sweat. Buy wine, Enjoy...
:wine_glass:
Lately i'm not sweating over too much. sorry xD
kouts
@kouts
May 30 2017 12:55
Haha nice suggestion @andreujuanc I'll try that!
Juan C. Andreu
@andreujuanc
May 30 2017 12:56
@kouts cheers
kouts
@kouts
May 30 2017 13:00
@andreujuanc cheers
Juan C. Andreu
@andreujuanc
May 30 2017 13:01
Write on #2985 what you are going to do. Might help others.
Bob Schellink
@sabob
May 30 2017 14:31
When opening the playground for the first time I find a definite delay (.5s) before anything happens. Perhaps we can show a spinner on the "Run'to indicate playground is loading?
Joseph
@fskreuz
May 30 2017 14:31
:thumbsup:
Bob Schellink
@sabob
May 30 2017 14:33
I really appreciate all the work that went into 0.9, especially the docos, lots of good info there that wasn't available before, especially the Archicture page.
Joseph
@fskreuz
May 30 2017 14:35
Actually, everything was there. Just needed exposure. :D
Kinda justifies the 200kb size after seeing everything in there.
Chris Reeves
@evs-chris
May 30 2017 14:41
I was thinking about loading the playground in the background after the page is ready, now that we have our own theme that's a bit easier to control
That should get everything nice and warm in the cache
Also, if you go by numbers all the other frameworks use, it's 60k 😉 (min.gz)
I've poked through, and I'm pretty sure we can hit 180k min for 1.0
Juan C. Andreu
@andreujuanc
May 30 2017 14:44
Size does not matter!
I never had the urge to measure a library's size.
When compared to the rest of app, it's just not worth it.
Chris Reeves
@evs-chris
May 30 2017 14:45
It matters a little 😄
Juan C. Andreu
@andreujuanc
May 30 2017 14:46
Maybe... :eyes:
Joseph
@fskreuz
May 30 2017 14:46
I don't usually look at gzip numbers :P
Chris Reeves
@evs-chris
May 30 2017 14:46
Most of my size fix is actually improvements to minification
Joseph
@fskreuz
May 30 2017 14:46
I assume gzip is a must for everything :D
Juan C. Andreu
@andreujuanc
May 30 2017 14:46
xP
Joseph
@fskreuz
May 30 2017 14:48
Last I added the hoist-props, it was about 170k. That tool is pure genius. :thumbsup:
Chris Reeves
@evs-chris
May 30 2017 14:48
The Ractive code base is excessively classy, so there's like 20k of just Fragment.prototype.someMethod = function...- stuff in there
Juan C. Andreu
@andreujuanc
May 30 2017 14:48
What was your approach there?
Chris Reeves
@evs-chris
May 30 2017 14:49
Unfortunately there's a bit of perf hit on it
Joseph
@fskreuz
May 30 2017 14:49
ooh, props access?
Martin Kolárik
@MartinKolarik
May 30 2017 14:49
improvements to minification don't always mean improvements after gzip, but I guess it's worth the try
Chris Reeves
@evs-chris
May 30 2017 14:50
Just hosting prototype refs gets you 7k and doesn't really do much to perf
min size is becoming a slightly more observed metric, since it's what the browser has to parse through and load
Juan C. Andreu
@andreujuanc
May 30 2017 14:51
still, sometimes it's too much xD
Martin Kolárik
@MartinKolarik
May 30 2017 14:51
yes but IMHO also less meaningful
Chris Reeves
@evs-chris
May 30 2017 14:51
but yes, dropping min size by 10-20k of 200 might get you 1k off gz
Juan C. Andreu
@andreujuanc
May 30 2017 14:51
If one is 300kB vs 250kB, it's just meh
I mean, if taking size into consideration when choosing a framework to work with
It's more important to consider what the implementation gonna be like.
Cos then it'd be in the MB side of things
Chris Reeves
@evs-chris
May 30 2017 14:53
I'm happy under 200k, which is my totally arbitrary feel-good number 😄
Juan C. Andreu
@andreujuanc
May 30 2017 14:54
Interview to @evs-chris :
  • Person: What's your favorite number?
  • Chris: Anything under 200000.
  • Person: :sparkles:
Chris Reeves
@evs-chris
May 30 2017 14:55
pulling messages into a common module using ids is an open issue, and having a min build that just logs id links to the docs is a pretty significant savings
lol
Joseph
@fskreuz
May 30 2017 14:57
:thumbsup:
Juan C. Andreu
@andreujuanc
May 30 2017 14:58
Any negative perf hit for console.log?
Chris Reeves
@evs-chris
May 30 2017 14:58
also technically < 204800 😜
Juan C. Andreu
@andreujuanc
May 30 2017 14:58
Ha xD
Sorry, I was thinking like a harddrive manufacturer....
Chris Reeves
@evs-chris
May 30 2017 14:58
yes, but not significant if you don't spam it
Juan C. Andreu
@andreujuanc
May 30 2017 14:59
Alright.
Chris Reeves
@evs-chris
May 30 2017 21:07
I'm playing with a webpack loader using the ractive bin - what naming convention do most people use with their components?
I was thinking Foo.ractive.html
for text editor highlighting purposes
Joseph
@fskreuz
May 30 2017 21:08
MyComponent.html
Constructor-case and just html. I usually have all components in one ginormous directory though.
Chris Reeves
@evs-chris
May 30 2017 21:09
do you use webpack?
Joseph
@fskreuz
May 30 2017 21:09
nope :D
Chris Reeves
@evs-chris
May 30 2017 21:09
ah
neither do I
it seems the convention is to apply loaders by file extension match on a regex
Joseph
@fskreuz
May 30 2017 21:10
Aaand we're back to the "official extension" discussions. :D
Chris Reeves
@evs-chris
May 30 2017 21:11
keeping components in a directory sounds reasonable, so /^components\/.*\.html$/ would be a reasonable thing to suggest
yep :smile:
Martin Kolárik
@MartinKolarik
May 30 2017 21:12
I don't know about any editor that supports special ractive syntax, so no reason for anything else than html :D
Chris Reeves
@evs-chris
May 30 2017 21:13
well, /\.ractive\.html$/, but I imagine that would be weird with some other html loader
again, I don't webpack, so I really dunno
I have used .handlebars to get a bit of mustache highlighting before
or .hb, I suppose
Joseph
@fskreuz
May 30 2017 21:15
.ractive.html seems fine though. Both highlighters and webpack can catch it.
Chris Reeves
@evs-chris
May 30 2017 21:44
well the webpack docs are a bit janky, but it seems like it's pretty easy to build a decently complicated app with it
here's the code for a ractive bin component loader that only supports single file components:
const { build } = require('ractive/lib/component.js');
module.exports = function(src) { return build(src, {}); };

with that, you can have components like Component.html:

<h2 fade-in>I'm a component named {{name}}</h2>
<script>
  import Ractive from 'ractive';
  export default Ractive.extend({
    template: $TEMPLATE
  });
</script>

and use it like this:

import Component from 'Component.html';
new Component({
  target: '#target',
  data: { name: 'Joe' }
});
Chris Reeves
@evs-chris
May 30 2017 21:50
multi-file components don't seem like they would be hard to support either, especially since the ractive bin requires you to pass in a file read function
you'd have to require the index file in the dir though for dir-based components e.g. import Tab from 'components/Tab/index.html'