npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

spf

v2.4.0

Published

A lightweight JS framework for fast navigation and page updates from YouTube

Downloads

14,316

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

nicksaynicksay

Keywords

Readme

SPF

Version Status

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

Overview

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

  1. Get the fastest possible initial page load.
  2. Keep a responsive persistent interface during navigation.

Performance

  1. Leverage existing techniques for static rendering.
  2. Load small responses and fewer resources each navigation.

Development

  1. Use any server-side language and template system.
  2. Be productive by using the same code for static and dynamic rendering.

Download

Install with npm:

npm install spf

Install with Bower:

bower install spf

Or, see the download page for options to download the latest release and link to minified JS from a CDN:

Download SPF

Get Started

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.

Browser Support

To use dynamic navigation, SPF requires the HTML5 History API. This is broadly supported by all current browsers, including Chrome 5+, Firefox 4+, and IE 10+. See a full browser compatibility table at Can I Use. Underlying functionality, such as AJAX-style page updates and script/style loading, is more broadly supported by IE 8+.

Get Help

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.

License

MIT
Copyright 2012-2016 Google, Inc.