{"action":"created","issue":{"url":"https://api.github.com/repos/guardian/frontend/issues/11258","labels_url":"https://api.github.com/repos/guardian/frontend/issues/11258/labels{/name}","comments_url":"https://api.github.com/repos/guardian/frontend/issues/11258/comments","events_url":"https://api.github.com/repos/guardian/frontend/issues/11258/events","html_url":"https://github.com/guardian/frontend/pull/11258","id":119958320,"number":11258,"title":"New JS load infrastructure","user":{"login":"OliverJAsh","id":921609,"avatar_url":"https://avatars.githubusercontent.com/u/921609?v=3","gravatar_id":"","url":"https://api.github.com/users/OliverJAsh","html_url":"https://github.com/OliverJAsh","followers_url":"https://api.github.com/users/OliverJAsh/followers","following_url":"https://api.github.com/users/OliverJAsh/following{/other_user}","gists_url":"https://api.github.com/users/OliverJAsh/gists{/gist_id}","starred_url":"https://api.github.com/users/OliverJAsh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/OliverJAsh/subscriptions","organizations_url":"https://api.github.com/users/OliverJAsh/orgs","repos_url":"https://api.github.com/users/OliverJAsh/repos","events_url":"https://api.github.com/users/OliverJAsh/events{/privacy}","received_events_url":"https://api.github.com/users/OliverJAsh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-12-02T14:53:27Z","updated_at":"2015-12-03T11:58:36Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/guardian/frontend/pulls/11258","html_url":"https://github.com/guardian/frontend/pull/11258","diff_url":"https://github.com/guardian/frontend/pull/11258.diff","patch_url":"https://github.com/guardian/frontend/pull/11258.patch"},"body":"This new load infrastructure attempts to strike a happy medium between optimal caching (infrequent cache busting) and optimal load times for first time visits (low number of requests). @sndrs and I have thought through the different options and decided this is the best for us.\r\n\r\nBelow shows is the execution order of our JS before and after.\r\n\r\n# Before\r\n\r\n```\r\n└── curl (inline)\r\n    └── boot (inline)\r\n        └── core (manually curated vendor and common modules)\r\n            ├── bootstraps/commercial\r\n            └── bootstraps/enhanced (previously bootstraps/app)\r\n```\r\n\r\n`curl` and `boot` (i.e. `require('core')`) were inline on the page\r\n\r\n# After\r\n\r\n```\r\n└── curl + bootstraps/standard + boot (standard.js)\r\n    └── enhanced-vendor\r\n        └── bootstraps/enhanced\r\n```\r\n\r\n`curl + bootstraps/standard + boot` is loaded using a script tag at the bottom of the page. This means the browser’s preload scanner can pick it up.\r\n\r\n`bootstraps/standard` is everything that runs outside of `bootstraps/enhanced` (https://github.com/guardian/frontend/commit/132d5b74f20694e0edaa675de358c96343749518#diff-27b345caf3191fb7f89f276adf891433R40):\r\n\r\n * Raven setup\r\n * A/B tests\r\n * Image upgrades\r\n * Commercial\r\n * Membership access check\r\n\r\nIf and only if we detect that we should run enhance, `enhanced-vendor` and `bootstraps/enhanced` will be downloaded in parallel and then executed sequentially.\r\n\r\n## Notes\r\n* The separate `enhanced-vendor` bundle means we'll have better caching on vendor\r\n  dependencies used in enhanced. Previously, `core` contained vendor and our own\r\n  common modules (many of which had transitive vendor dependencies), and this\r\n  meant `core.js` was being frequently cache busted.\r\n* In the future we might want to refactor what is in standard to avoid large\r\n  dependencies.\r\n* Bonus: previously React appeared duplicated in four different bundles:\r\n  `bootstraps/acessibility`, `bootstraps/crosswords`, `bootstraps/preferences`, and `bootstraps/sudoku`.\r\n  I have removed this duplication and improved caching by fetching React from a\r\n  CDN instead. (Alternatively we could serve React standalone ourselves, if\r\n  people are worried about the SPOF.)\r\n* We might want to rename files to make the load order clearer (i.e. `bootstraps/enhanced/crosswords`)\r\n* We have to manually find the common modules of all `enhanced` bootstraps, which is a bit of a PITA. Webpack and jspm can do this automatically for you.\r\n\r\nThis spreadsheet shows the file size breakdown for bundles before and after: https://docs.google.com/spreadsheets/d/1M4yqKbKBcSny273MC1DTUFtII26bTY43KAYPhJ8eSNo/edit?usp=sharing\r\n\r\n## To do\r\n\r\n- [x] Fix `allcreatives.scala.html`\r\n\r\n## Test urls\r\n* http://www.theguardian.com/membership/2015/apr/27/the-spin-london-cycle-festival-save-mop\r\n* http://m.code.dev-theguardian.com/commercial/test-page"},"comment":{"url":"https://api.github.com/repos/guardian/frontend/issues/comments/161610962","html_url":"https://github.com/guardian/frontend/pull/11258#issuecomment-161610962","issue_url":"https://api.github.com/repos/guardian/frontend/issues/11258","id":161610962,"user":{"login":"piuccio","id":680284,"avatar_url":"https://avatars.githubusercontent.com/u/680284?v=3","gravatar_id":"","url":"https://api.github.com/users/piuccio","html_url":"https://github.com/piuccio","followers_url":"https://api.github.com/users/piuccio/followers","following_url":"https://api.github.com/users/piuccio/following{/other_user}","gists_url":"https://api.github.com/users/piuccio/gists{/gist_id}","starred_url":"https://api.github.com/users/piuccio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/piuccio/subscriptions","organizations_url":"https://api.github.com/users/piuccio/orgs","repos_url":"https://api.github.com/users/piuccio/repos","events_url":"https://api.github.com/users/piuccio/events{/privacy}","received_events_url":"https://api.github.com/users/piuccio/received_events","type":"User","site_admin":false},"created_at":"2015-12-03T11:58:36Z","updated_at":"2015-12-03T11:58:36Z","body":"great idea.\r\nwhat metrics do you plan to look at to define success?\r\nthe spreadsheet of bundle size is not indicative of an improvement for real users with different caching strategies and visiting profiles."}}