{"action":"created","issue":{"url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/issues/372","repository_url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns","labels_url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/issues/372/labels{/name}","comments_url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/issues/372/comments","events_url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/issues/372/events","html_url":"https://github.com/cloudfour/cloudfour.com-patterns/pull/372","id":189263715,"number":372,"title":"Experiment: Replace webpack and Babel with Rollup and Bublé","user":{"login":"erikjung","id":61204,"avatar_url":"https://avatars.githubusercontent.com/u/61204?v=3","gravatar_id":"","url":"https://api.github.com/users/erikjung","html_url":"https://github.com/erikjung","followers_url":"https://api.github.com/users/erikjung/followers","following_url":"https://api.github.com/users/erikjung/following{/other_user}","gists_url":"https://api.github.com/users/erikjung/gists{/gist_id}","starred_url":"https://api.github.com/users/erikjung/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/erikjung/subscriptions","organizations_url":"https://api.github.com/users/erikjung/orgs","repos_url":"https://api.github.com/users/erikjung/repos","events_url":"https://api.github.com/users/erikjung/events{/privacy}","received_events_url":"https://api.github.com/users/erikjung/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"gerardo-rodriguez","id":459757,"avatar_url":"https://avatars.githubusercontent.com/u/459757?v=3","gravatar_id":"","url":"https://api.github.com/users/gerardo-rodriguez","html_url":"https://github.com/gerardo-rodriguez","followers_url":"https://api.github.com/users/gerardo-rodriguez/followers","following_url":"https://api.github.com/users/gerardo-rodriguez/following{/other_user}","gists_url":"https://api.github.com/users/gerardo-rodriguez/gists{/gist_id}","starred_url":"https://api.github.com/users/gerardo-rodriguez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gerardo-rodriguez/subscriptions","organizations_url":"https://api.github.com/users/gerardo-rodriguez/orgs","repos_url":"https://api.github.com/users/gerardo-rodriguez/repos","events_url":"https://api.github.com/users/gerardo-rodriguez/events{/privacy}","received_events_url":"https://api.github.com/users/gerardo-rodriguez/received_events","type":"User","site_admin":false},"assignees":[{"login":"gerardo-rodriguez","id":459757,"avatar_url":"https://avatars.githubusercontent.com/u/459757?v=3","gravatar_id":"","url":"https://api.github.com/users/gerardo-rodriguez","html_url":"https://github.com/gerardo-rodriguez","followers_url":"https://api.github.com/users/gerardo-rodriguez/followers","following_url":"https://api.github.com/users/gerardo-rodriguez/following{/other_user}","gists_url":"https://api.github.com/users/gerardo-rodriguez/gists{/gist_id}","starred_url":"https://api.github.com/users/gerardo-rodriguez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gerardo-rodriguez/subscriptions","organizations_url":"https://api.github.com/users/gerardo-rodriguez/orgs","repos_url":"https://api.github.com/users/gerardo-rodriguez/repos","events_url":"https://api.github.com/users/gerardo-rodriguez/events{/privacy}","received_events_url":"https://api.github.com/users/gerardo-rodriguez/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2016-11-15T00:15:43Z","updated_at":"2016-11-15T00:19:14Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/pulls/372","html_url":"https://github.com/cloudfour/cloudfour.com-patterns/pull/372","diff_url":"https://github.com/cloudfour/cloudfour.com-patterns/pull/372.diff","patch_url":"https://github.com/cloudfour/cloudfour.com-patterns/pull/372.patch"},"body":"This updates the `js` build task to use [Rollup](http://rollupjs.org) and [Bublé](https://buble.surge.sh) instead of webpack and Babel.\r\n\r\nThis effort is aimed at addressing the size of our JS bundles. Based on claims from [this article](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/) about Rollup producing smaller bundles by _tree-shaking_, I thought it would be worth it to experiment here and see how it handles our pattern library scripts.\r\n\r\nBublé is not coupled to Rollup, but seemed like a good fit for us. The transpiling strategy it uses aligns with the Babel preset we typically need (basic ES2015 syntax). So while using this tool instead of Babel isn't entirely necessary, it does simplify things a bit by shedding the need for configs/presets. It also claims to be faster (and a much smaller module), though I did not test this.\r\n\r\n### The output of (webpack + Babel) vs. (Rollup + Bublé)\r\n\r\nThese are the output size differences between this branch vs. master, using local HAR files for the comparison. (On production with GZIP enabled, all of the numbers will be smaller.)\r\n\r\n**Un-minified** (`gulp build --dev`)\r\n\r\n```diff\r\ntoolkit.js\r\n-size: 86.0K (86020 bytes)\r\n+size: 63.7K (63766 bytes)\r\n```\r\n\r\n```diff\r\ndrizzle.js\r\n-size: 4.2K (4287 bytes)\r\n+size: 2.0K (2039 bytes)\r\n```\r\n\r\nbundle | webpack | Rollup | difference\r\n---       | ---           | ---       | ---\r\ntoolkit.js | 86020 | 63766 | 26% smaller\r\ndrizzle.js | 4287 | 2039 | 52% smaller\r\n\r\n**Minified** (`gulp build`)\r\n\r\n```diff\r\ntoolkit.js\r\n-size: 41.5K (41520 bytes)\r\n+size: 35.6K (35627 bytes)\r\n```\r\n\r\n```diff\r\ndrizzle.js\r\n-size: 1.7K (1789 bytes)\r\n+size: 1.2K (1283 bytes)\r\n```\r\n\r\nbundle | webpack | Rollup | difference\r\n---       | ---           | ---       | ---\r\ntoolkit.js | 41520 | 35627 | 14% smaller\r\ndrizzle.js | 1789 | 1283 | 28% smaller\r\n\r\nSo, there's a difference. Rollup does produce smaller bundles for us. Should we make this change?\r\n\r\n### Pros\r\n- Cleaner, smaller output\r\n- Less configuration\r\n\r\n### Cons\r\n- Less community/plugins/etc.\r\n- Less flexibility (mainly for the transpiling)\r\n\r\n/CC @tylersticka \r\n"},"comment":{"url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/issues/comments/260507088","html_url":"https://github.com/cloudfour/cloudfour.com-patterns/pull/372#issuecomment-260507088","issue_url":"https://api.github.com/repos/cloudfour/cloudfour.com-patterns/issues/372","id":260507088,"user":{"login":"tylersticka","id":69633,"avatar_url":"https://avatars.githubusercontent.com/u/69633?v=3","gravatar_id":"","url":"https://api.github.com/users/tylersticka","html_url":"https://github.com/tylersticka","followers_url":"https://api.github.com/users/tylersticka/followers","following_url":"https://api.github.com/users/tylersticka/following{/other_user}","gists_url":"https://api.github.com/users/tylersticka/gists{/gist_id}","starred_url":"https://api.github.com/users/tylersticka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tylersticka/subscriptions","organizations_url":"https://api.github.com/users/tylersticka/orgs","repos_url":"https://api.github.com/users/tylersticka/repos","events_url":"https://api.github.com/users/tylersticka/events{/privacy}","received_events_url":"https://api.github.com/users/tylersticka/received_events","type":"User","site_admin":false},"created_at":"2016-11-15T00:19:14Z","updated_at":"2016-11-15T00:19:14Z","body":"Neat. Were the changes to `toolkit.js` required or an unrelated change?"}}
{"actor":{"display_login":"tylersticka"}}