Better explanation of run vs hack the code

[jimthedev]

Hi all, was just reading through the documentation and saw that we use grunt in some fashion for 'hacking the code'. I've used jspm before but wasn't sure what unbundle does. Can anyone explain? Also, how does hack differ from unbundle. I just want it to clear. Additionally, does it make sense for us to have some recommendation for --watch functionality where you can edit code. Perhaps that is what gulp is there for but the docs just don't show it.

Cheers.

[bkinsey808]

oops I just realize our prod.sh script needed to be updated. just pushed a fix.

Anyway, bundling means we combine all (or rather most) of the js files into a single file, in this project it is build.js, which is 1.4 mb. We do this if we were to deploy this project into production because it would reduce the initial page load by reducing the number of http requests.

When we unbundle we get separate files for all of those which makes this angular2 project significantly slower to load (tons more http requests), but it makes dev (hacking) way easier (faster) because gulp doesn't have to build the whole project each time you change a single file. Does that answer you question?

[bkinsey808]

In this project gulp (default) is set up to both build and watch. But build is really only necessary at initial point of install, or if you make any changes if you are not watching. But I do build in the default anyway, just to be safe. If you ARE SURE the project is already built, you can use gulp watch when you dev ("hack") to save yourself a little time.

[bkinsey808]

I'm definitely open to making the documentation more clear. It's obviously geared toward ppl who already have a lot of experience, hackers like us, but ideally it should be made clear enough even for a beginner to understand.

[bkinsey808]

As an aside the founder of jspm called bundling an "anti-pattern" (in the video linked below). Which is funny because jspm does it so well. The downside of bundling is that small changes to the app require a whole new build file, and defeats caching between versions, which is true.

But until http/2, bundling is not yet actually an anti-pattern (in other words it is currently a necessary evil) because it does reduce initial page load (when you first visit the site) so significantly, and studies show initial page load dramatically affects a web page's bounce rate.

https://youtu.be/szJjsduHBQQ?t=6m55s

[bkinsey808]

Okay, just pushed an update to the readme, maybe a bit more clear.

[jimthedev]

Sweet. Yeah I think I understand.

I just want to make sure we have the following use cases covered:

1. I want to run my app in a dev mode that allows for watching and live reload.
2. I want to run my app in prod mode (bundled) for non http2 (an anti pattern until http2 is ubiquitous)
3. I want to run my app in prod mode unbundled for http2.

Am I missing any use-cases? If these are the only use cases and we've got them covered then I'd be comfortable closing this.

[bkinsey808]

Live reload! Yes! What a great idea. We need this. This looks like the best solution: http://www.browsersync.io/

[bkinsey808]

http://ponyfoo.com/articles/a-browsersync-primer

[jimthedev]

https://www.npmjs.com/package/jspm-server might be an option, I've never used it however On Mon, Oct 5, 2015 at 6:20 AM bkinsey808 notifications@github.com wrote:

http://ponyfoo.com/articles/a-browsersync-primer

— Reply to this email directly or view it on GitHub https://github.com/bkinsey808/bk-fullstack-ts/issues/11#issuecomment-145499352 .

[bkinsey808]

Hey hey hey, got browser-sync working. Super sweet, I might have to use this at my day job too. :)

[jimthedev]

Weeee. Next: component hot loading. On Mon, Oct 5, 2015 at 7:48 AM bkinsey808 notifications@github.com wrote:

Hey hey hey, got browser-sync working. Super sweet, I might have to use this at my day job too. :)

— Reply to this email directly or view it on GitHub https://github.com/bkinsey808/bk-fullstack-ts/issues/11#issuecomment-145517061 .

[bkinsey808]

You mean component lazy loading? http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2/

[jimthedev]

That'd be interesting, too but I was thinking more about being able to reload only the components that have changed alla react-hot-loader or https://github.com/milankinen/livereactload

[bkinsey808]

Hm. I don't know how to do this with this with ng2. Are you aware of any projects in the angular world that demonstrate this?

[jimthedev]

The one I am thinking of is: https://github.com/wbuchwalter/ng2-redux

We can shelve this for now and add it to the docs as a nice-to-have / help wanted PR. I was half kidding :)