News for hackers. Stuff that matters.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by dmbass on Saturday August 27, 2016 @10:29AM (#12372477)
Babel and webpack are megaoverkill for this and account for a good chunk of the 2k gzipped size. The actual library code is barely 140SLOC. There's a lot of room for improvement if this is intended to be a real standalone library (vs. a webpack/babel test).
Re:Show HN: In-view.js – Get notified when DOM elements ente... by johnhenry on Saturday August 27, 2016 @10:36AM (#12372508)
I've found rollup, https://rollupjs.org/, to be really useful for this.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by jonahx on Saturday August 27, 2016 @11:51AM (#12372821)
This looks nice. Is it as battle-tested as browserify?
Re:Show HN: In-view.js – Get notified when DOM elements ente... by sotojuan on Saturday August 27, 2016 @11:56AM (#12372843)
It's fairly new but The Guardian uses it for all their JavaScript (the creator works there).
Re:Show HN: In-view.js – Get notified when DOM elements ente... by JasonSage on Saturday August 27, 2016 @04:49PM (#12374107)
tl;dr—don't use rollup with large untested dependencies

I've had projects that got really strange error messages when using rollup that completely went away when I switched back to Babel.

One "issue" with rollup is that it is not 100% semantically correct. Neither is Babel in all cases, but the creator argues that if you're not following exact semantics now, you're relying on your tests to ensure proper behavior, so use something that is at least more minimal and keeps your bundle size down.

So when you're writing code and bundling with rollup, you can pretty much ensure everything works fine, but as soon as you pull in an extensive third-party library you have no assurances that it has been tested with rollup and will work correctly in all cases. In the worst case, it will seem to work fine but in weird situations will actually error out. This was my experience with rollup.

Re:Show HN: In-view.js – Get notified when DOM elements ente... by JasonSage on Saturday August 27, 2016 @05:23PM (#12374252)
I should clarify on my above comment, in rollup the semantics don't matter as much but if you're using Bublé instead of Babel, the semantics may very well come into play. In either case, I didn't have luck on a project until I moved fully to webpack+Babel.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by mbell on Saturday August 27, 2016 @12:35PM (#12373044)
Webpack's runtime overhead is tiny, babel's varies based on what polyfills you need but very little is included here.

Most of the code here is actually from lodash due to the use of `throttle`, not either of the projects you mentioned.

Re:Show HN: In-view.js – Get notified when DOM elements ente... by Eric_WVGG on Saturday August 27, 2016 @10:48AM (#12372565)
I believe Waypoints also does this same thing, it's a fairly mature lib. https://github.com/imakewebthings/waypoints

kudos for in-view's demo page though

Re:Show HN: In-view.js – Get notified when DOM elements ente... by zeroxfe on Saturday August 27, 2016 @11:06AM (#12372637)
Why is Babel overkill? It lets you write your code in ES6, which is a huge benefit for many reasons.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by nathancahill on Saturday August 27, 2016 @11:18AM (#12372699)
The fact that it's delivering 140 lines in 5.5kb. That's a lot of bloat! There are ways to write code in ES6 without that (see sibling responses).
Re:Show HN: In-view.js – Get notified when DOM elements ente... by Heqx on Saturday August 27, 2016 @11:44AM (#12372805)
Hey, author here. I'm very open to ideas to reduce bloat. It's 140 SLOC and ~1.1kb gzipped without lodash/throttle. I considered writing my own throttle, but wanted something more battle-tested.

Does Rollup produce a more efficient bundle in your experience?

Re:Show HN: In-view.js – Get notified when DOM elements ente... by nathancahill on Saturday August 27, 2016 @02:19PM (#12373484)
Not sure why I was downvoted, I think it's a valid point. To prove it, here's the functionality of your library in ES5 with a naive throttle function: https://gist.github.com/nathancahill/f7ea239306737f2075a94de...

Minified (1.49kb) and gzipped (677b).

Whether lodash functions should be used instead of naive functions is up for debate. My opinion is if the lodash functions are 5x the size of the entire library, it's probably best to not include it, or to include it as a build option (if the user's project already includes lodash for example).

Re:Show HN: In-view.js – Get notified when DOM elements ente... by jdd on Sunday August 28, 2016 @01:56AM (#12375471)
No worries, lodash/debounce can be reduced further with babel+webpack plugins.

Assuming the current setup of babel+webpack the difference between your naive version is just ~0.5 kB.

Re:Show HN: In-view.js – Get notified when DOM elements ente... by nathancahill on Sunday August 28, 2016 @11:35AM (#12376912)
Which still doubles the size of the library: ~0.6kb to ~1.1kb. So while it's just half a kilobyte, do that over and over, with nested dependencies and it really adds up.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by yagami_san on Saturday August 27, 2016 @01:16PM (#12373213)
Re:Show HN: In-view.js – Get notified when DOM elements ente... by Heqx on Saturday August 27, 2016 @02:01PM (#12373409)
Can you point me to an explanation of the differences between the 'lodash.throttle' module and importing 'lodash/throttle'?
Re:Show HN: In-view.js – Get notified when DOM elements ente... by jdd on Sunday August 28, 2016 @02:19AM (#12375518)
lodash.throttle is a standalone zero-dependency package of just the throttle module. The `lodash` package is a collection of modules one of which is `lodash/throttle`.

You can generally get smaller bundles using `lodash/xyz` modules over the `lodash.xyz` packages because of plugins like:

https://github.com/lodash/babel-plugin-lodash

https://github.com/lodash/lodash-webpack-plugin

Though in the future lodash-webpack-plugin may support `lodash.xyz` packages too.

Re:Show HN: In-view.js – Get notified when DOM elements ente... by freditup on Saturday August 27, 2016 @08:02PM (#12374723)
You should get about the same results using a bundler. Perhaps the lodash.throttle package is for reducing `npm install` time or reducing bloat if you check in your node modules?
Re:Show HN: In-view.js – Get notified when DOM elements ente... by nathancahill on Saturday August 27, 2016 @02:29PM (#12373526)
OP is using that already.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by andreasklinger on Saturday August 27, 2016 @11:59AM (#12372856)
rollup can only load the functions of lodash you actually use into your bundle
Re:Show HN: In-view.js – Get notified when DOM elements ente... by tdumitrescu on Saturday August 27, 2016 @01:04PM (#12373170)
So can lodash. That's what the author is doing here by using

  import throttle from 'lodash/throttle';
rather than

  import { throttle } from 'lodash';
Re:Show HN: In-view.js – Get notified when DOM elements ente... by zeroxfe on Saturday August 27, 2016 @11:57AM (#12372848)
The only sibling response is rollupjs, which replaces webpack with ES6 import syntax. You still need bablel for the rest of the ES6 syntax.
Re:Show HN: In-view.js – Get notified when DOM elements ente... by epidemian on Saturday August 27, 2016 @01:47PM (#12373357)
> You still need bablel for the rest of the ES6 syntax.

Or Bublé[1] ;) which i've found to be much faster than Babel, even for relatively small codebases (~ a couple thousand LoC).

[1]: https://gitlab.com/Rich-Harris/buble

Re:Show HN: In-view.js – Get notified when DOM elements ente... by Ralfp on Saturday August 27, 2016 @11:46AM (#12372811)
But if your entire project uses Babel, those 140 lines will already be in your code and thus won't be added.