{"id":13472637,"url":"https://github.com/youtube/spfjs","last_synced_at":"2025-05-14T06:13:01.631Z","repository":{"id":16632481,"uuid":"19387628","full_name":"youtube/spfjs","owner":"youtube","description":"A lightweight JS framework for fast navigation and page updates from YouTube","archived":false,"fork":false,"pushed_at":"2024-10-09T18:58:17.000Z","size":3482,"stargazers_count":2248,"open_issues_count":49,"forks_count":150,"subscribers_count":73,"default_branch":"master","last_synced_at":"2025-05-09T02:55:28.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://youtube.github.io/spfjs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/youtube.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-05-02T20:24:59.000Z","updated_at":"2025-05-01T12:48:20.000Z","dependencies_parsed_at":"2024-11-19T01:11:50.840Z","dependency_job_id":"9dfc1e78-1565-4037-b515-b8c96b401eb7","html_url":"https://github.com/youtube/spfjs","commit_stats":{"total_commits":531,"total_committers":27,"mean_commits":"19.666666666666668","dds":0.2542372881355932,"last_synced_commit":"e05f3e491a2947397162d201d3116caced3829f2"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youtube%2Fspfjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youtube%2Fspfjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youtube%2Fspfjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youtube%2Fspfjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youtube","download_url":"https://codeload.github.com/youtube/spfjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254080863,"owners_count":22011514,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:00:56.532Z","updated_at":"2025-05-14T06:13:01.576Z","avatar_url":"https://github.com/youtube.png","language":"JavaScript","readme":"# [![SPF][]](https://youtube.github.io/spfjs/)\n\n[![Version][]](https://badge.fury.io/js/spf)\n[![Status][]](https://travis-ci.org/youtube/spfjs)\n[![InlineDocs][]](https://inch-ci.org/github/youtube/spfjs)\n\n\nStructured Page Fragments — or SPF for short — is a lightweight\nJS framework for fast navigation and page updates from YouTube.\n\nUsing progressive enhancement and HTML5, SPF integrates with\nyour site to enable a faster, more fluid user experience by\nupdating just the sections of the page that change during\nnavigation, not the whole page.  SPF provides a response format\nfor sending document fragments, a robust system for script and\nstyle management, an in-memory cache, on-the-fly processing, and\nmore.\n\n**Learn more at [youtube.github.io/spfjs][]**\n\n\n## Overview\n\nSPF allows you to leverage the benefits of a static initial page\nload, while gaining the performance and user experience benefits\nof dynamic page loads:\n\n**User Experience**  \n1. Get the fastest possible initial page load.  \n2. Keep a responsive persistent interface during navigation.  \n\n**Performance**  \n1. Leverage existing techniques for static rendering.  \n2. Load small responses and fewer resources each navigation.  \n\n**Development**  \n1. Use any server-side language and template system.  \n2. Be productive by using the same code for static and dynamic\n   rendering.\n\n\n## Download\n\nInstall with [npm][]:\n\n```sh\nnpm install spf\n```\n\nInstall with [Bower][]:\n\n```sh\nbower install spf\n```\n\nOr, see the [download page][] for options to download the latest\nrelease and link to minified JS from a CDN:\n\n\u003e [Download SPF](https://youtube.github.io/spfjs/download/)\n\n\n## Get Started\n\nThe SPF client library is a single ~10K [UMD][] JS file with no\ndependencies.  It may be asynchronously delay-loaded.  All\nfunctions are exposed via the global `spf` object.\n\n**Enable SPF**\n\nTo add SPF to your site, include the JS file and run `spf.init()`.\n\n```html\n\u003cscript\u003e\n  spf.init();\n\u003c/script\u003e\n```\n\n**Send requests**\n\nSPF does not change your site's navigation automatically and\ninstead uses progressive enhancement to enable dynamic\nnavigation for certain links.  Just add a `spf-link` class to an\n`\u003ca\u003e` tag to activate SPF.\n\nGo from static navigation:\n\n```html\n\u003ca href=\"/destination\"\u003eGo!\u003c/a\u003e\n```\n\nto dynamic navigation:\n\n```html\n\u003c!-- Link enabled: a SPF request will be sent --\u003e\n\u003ca class=\"spf-link\" href=\"/destination\"\u003eGo!\u003c/a\u003e\n```\n\n**Return responses**\n\nIn static navigation, an entire HTML page is sent.  In dynamic\nnavigation, only fragments are sent, using JSON as transport.\nWhen SPF sends a request to the server, it appends a\nconfigurable identifier to the URL so that your server can\nproperly handle the request.  (By default, this will be\n`?spf=navigate`.)\n\nIn the following example, a common layout of upper masthead,\nmiddle content, and lower footer is used.  In dynamic\nnavigation, only the fragment for the middle content is sent,\nsince the masthead and footer don't change.\n\nGo from static navigation:\n\n`GET /destination`\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- Styles --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"masthead\"\u003e...\u003c/div\u003e\n    \u003cdiv id=\"content\"\u003e\n      \u003c!-- Content --\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"footer\"\u003e...\u003c/div\u003e\n    \u003c!-- Scripts --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nto dynamic navigation:\n\n`GET /destination?spf=navigate`\n\n```json\n{\n  \"head\": \"\u003c!-- Styles --\u003e\",\n  \"body\": {\n    \"content\":\n        \"\u003c!-- Content --\u003e\",\n  },\n  \"foot\": \"\u003c!-- Scripts --\u003e\"\n}\n```\n\nSee the [documentation][] for complete information.\n\n\n## Browser Support\n\nTo use dynamic navigation, SPF requires the HTML5 History API.\nThis is broadly supported by all current browsers, including\nChrome 5+, Firefox 4+, and IE 10+.  See a full browser\ncompatibility table at [Can I Use][].  Underlying functionality,\nsuch as AJAX-style page updates and script/style loading, is\nmore broadly supported by IE 8+.\n\n\n## Get Help\n\nSend feedback, comments, or questions about SPF to\n\u003cspfjs@googlegroups.com\u003e.\n\nFile bugs or feature requests at [GitHub][].\n\nJoin our [mailing list][] and follow [@spfjs][] on Twitter for\nupdates.\n\n\n## License\n\nMIT  \nCopyright 2012-2017 Google, Inc.\n\n\n\n[youtube.github.io/spfjs]: https://youtube.github.io/spfjs/\n[npm]: https://www.npmjs.com/\n[Bower]: http://bower.io/\n[download page]: https://youtube.github.io/spfjs/download/\n[UMD]: https://github.com/umdjs/umd\n[documentation]: https://youtube.github.io/spfjs/documentation/\n[Can I Use]: http://caniuse.com/#feat=history\n[GitHub]: https://github.com/youtube/spfjs/issues\n[mailing list]: https://groups.google.com/group/spfjs\n[@spfjs]: https://twitter.com/spfjs\n\n[SPF]: https://youtube.github.io/spfjs/assets/images/banner-728x388.jpg\n[Version]: https://badge.fury.io/js/spf.svg\n[Status]: https://secure.travis-ci.org/youtube/spfjs.svg?branch=master\n[InlineDocs]: https://inch-ci.org/github/youtube/spfjs.svg?branch=master\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoutube%2Fspfjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoutube%2Fspfjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoutube%2Fspfjs/lists"}