Structured Page Fragments — or SPF for short — is a lightweight JS framework for fast navigation and page updates from YouTube.
Using progressive enhancement and HTML5, SPF integrates with your site to enable a faster, more fluid user experience by updating just the sections of the page that change during navigation, not the whole page. SPF provides a response format for sending document fragments, a robust system for script and style management, an in-memory cache, on-the-fly processing, and more.
Learn more at youtube.github.io/spfjs
SPF allows you to leverage the benefits of a static initial page load, while gaining the performance and user experience benefits of dynamic page loads:
User Experience
- Get the fastest possible initial page load.
- Keep a responsive persistent interface during navigation.
Performance
- Leverage existing techniques for static rendering.
- Load small responses and fewer resources each navigation.
Development
- Use any server-side language and template system.
- Be productive by using the same code for static and dynamic rendering.
The most recent release is SPF 20 (v2.0.1).
Link to the minified JS from a CDN:
<script src="https://ajax.googleapis.com/ajax/libs/spf/2.0.1/spf.js">
</script>Or, install with npm or Bower:
npm install [email protected]bower install spf#2.0.1See the download page for more options.
The SPF client library is a single ~10K UMD JS
file with no dependencies. It may be asynchronously delay-loaded. All
functions are exposed via the global spf object.
Enable SPF
To add SPF to your site, include the JS file and run spf.init().
<script>
spf.init();
</script>Send requests
SPF does not change your site's navigation automatically and instead uses
progressive enhancement to enable dynamic navigation for certain links. Just
add a spf-link class to an <a> tag to activate SPF.
Go from static navigation:
<a href="/destination">Go!</a>to dynamic navigation:
<!-- Link enabled: a SPF request will be sent -->
<a class="spf-link" href="/destination">Go!</a>Return responses
In static navigation, an entire HTML page is sent. In dynamic navigation, only
fragments are sent, using JSON as transport. When SPF sends a request to the
server, it appends a configurable identifier to the URL so that your server can
properly handle the request. (By default, this will be ?spf=navigate.)
In the following example, a common layout of upper masthead, middle content, and lower footer is used. In dynamic navigation, only the fragment for the middle content is sent, since the masthead and footer don't change.
Go from static navigation:
GET /destination
<html>
<head>
<!-- Styles -->
</head>
<body>
<div id="masthead">...</div>
<div id="content">
<!-- Content -->
</div>
<div id="footer">...</div>
<!-- Scripts -->
</body>
</html>to dynamic navigation:
GET /destination?spf=navigate
{
"head": "<!-- Styles -->",
"body": {
"content":
"<!-- Content -->",
},
"foot": "<!-- Scripts -->"
}See the documentation for complete information.
Send feedback, comments, or questions about SPF to [email protected].
File bugs or feature requests at GitHub.
Join our mailing list and follow @spfjs on Twitter for updates.
MIT
Copyright 2012-2014 Google, Inc.