Spars
🌲 A general toolkit for creating interactive web experiences.
Installation
Make sure you have Node.js installed.
$ npm install spars
Statement
Spars
is not a framework but a minimalistic toolkit with a strong focus on creating progressivily enhanced interactive experiences on a wide range of consumer devices. The goal of the toolkit is to empower the developer to focus on the creative process and less on implementation details, repetitive work and browser specific workarounds. The components in the core of the library are things you will likely need when developing an interactive experience, handle edge-cases (like vendor prefixing, experimental feature support testing and fallbacks) or are things that should inspire the developer to make use of more advanced optimisations that one normally does not have the time to implement and test under short deadlines.
API
I'm well aware that the library is currently lacking a lot of documentation you would need to get started. I'm planning to improve the quality of the documentation over time but for now I would like to point you to the examples and the index of the project.
Analytics
Contains a code snippet to help you set up Google Analytics tracking and reporting of individual events. The reporting of events are optionally throttled using requestIdleCallback which guarantees no interference with higher priority code.
Audio
Contains an audio manager to help you manage multiple audio sources (play
, pause
, mute
, unmute
, fade-in
, fade-out
, etc..) on each source individually or as a whole (muteAll
, unmuteAll
). It also has utility functions to check if the audio context has been unlocked through user interaction and otherwise a transparent interaction layer is put on top of the page to unlock it.
Caching
Contains code to set up persistent caching using IndexedDB
and with an in-memory Map
cache as fallback.
Constants
Contains constant values (names of exposed events and cookies) used inside of Spars
.
Cookies
Contains code to help you with getting and setting cookies.
Data structures
Contains implementations of Bitfield and Deque data structures.
Decorators
Contains an implementation of @Memoize decorator
Easings
Contains code to handle all commonly used easings (easeInQuad
, easeOutCubic
, etc..).
Events
Contains code to handle network connection changes, key presses, device orientation changes, document visibility changes and window size changes. It exposes an EventEmitter
wrapper around mitt.
Features
Contains code to check the support of various browser features (What extensions are available for WebGL on this device?
, is requestIdleCallback available in this browser?
), test for browser settings (Are cookies enabled in this browser?
, has the user enabled the 'do not track' setting? If so, avoid any tracking analytics.
) and check for certain hardware features (What pixel density is the screen?
, How well does the GPU perform on this device? If it is lower quality mobile device I need to make sure to run a reduced quality version of the experience so it still has a good framerate.
).
Frame scheduler
Contains a scheduler to schedule tasks over multiple frames to avoid dropping below 60 frames per second.
Frame ticker
Contains code to set up a global requestAnimationFrame
ticker which fires the SPARS::FRAME_TICK
event that one can listen to.
Loaders
Contains code for an AssetLoader used for preloading commonly used assets like binary encoded buffers, images, GPU compressed images, bitmaps, audiopacks, binpacks, video, audio, fonts, WebAssembly, JSON, SVG, XML, HTML).
Polyfills
Contains a fullscreen
and pointerlock
polyfill that can be used without having to worry about vendor prefixes.
Scrolling
Contains some utility functions for smooth scrolling to certain positions on the page and scrolling to top on page unload.
Settings
Contains code to parse ?key1=value&key2=value
search queries in the URL to override application wide settings. Useful for toggling settings on any device without requiring special builds.
Thread pool
Contains code to run arbitrary tasks efficiently off of the main thread largely based on the Task Worklet polyfill by Jason Miller.
Sticky threads
allow you to use re-usable generic worklets
(modularized web workers) retrieved from a centralized sticky thread pool
. In order to maximize concurrency and minimize transfer overhead the library distributes work across multiple threads through an implicit data flow graph that is formed based on how the different tasks are linked.
Results from one task can be directly passed into another task but instead of pulling the result of the first task back to the main thread and sending it to the thread running the second task the second task will instead be routed to the thread that already has the first result ready.
Utilities
Contains some commonly used utilities (debounce, memoization, hashing strings, creating UUID's, etc..).
Browser support
Spars
supports the latest two versions of evergreen
browsers (not Internet Explorer 11
and lower):
- Edge
- Firefox
- Chrome
- Chrome Android
- Safari
- iOS Safari
Spars
does not include any polyfills. It is recommended to use the polyfill.io service in your application.
Development
$ yarn start $ yarn lint $ yarn test $ yarn build
Licence
My work is released under the MIT license.