Okiba Core
Sharp collection of tools for front-end development, created with performance in mind.
Our primary concerns are: maximum FPS and minimum bundle size
You can visualize it as a bag full of ninja tools for you to pick and use to tackle your front-end challenges.
Okiba is:
A set of tools you can use separately.
It is meant to level-up and ease-in your web-development routines.
It's designed so that you can drop-in as much or as less you want, by importing just what you actually use, up to a single function level, so that your final bundle will stay slim.
It is always evolving and open to contributons from OSS peers.
Okiba is not:
A library, framework or language.
It is not meant to replace the tools you already have, but rather offer battle-tested solutions to common routine tasks; sometimes it offers a cheaper alternative.
It does not impose choiches and integrates smoothly with frameworks you already use.
We strive to achieve affidability and affordability.
Our granularity is fine
We export single units that you can import separately. ✨
This way tree-shake and uglification can work at their best.
Being dependency-free you always know what you're using and can look it up in our API, no surpises.
Our code is DRY and minimal
If something is common we abstract it away. 💡
We don't put something in until it is actually needed.
We strictly check for duplication and complexity, and take charge of some development pain in order to keep bundle size small.
Our seriousness level is high
Our quality checks are automated. 🤖
Metrics matter, so our CI tools help us by enforcing 100% coverage and A maintainability.
No line makes it into master if the overall code quality gets degraded.
We could state that our API is 100% documented, but we still have no tests in place to back this metric up... so we don't
Installation
You can grab all Okiba Core packages by using npx installer:
npx @okiba/coreUsage
Untranspiled code 🛑
Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
{
test: /\.js$/,
exclude: /node_modules\/(?!(@okiba)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}Full API List:
arrays
Array utils for okiba js
arrayOrOne, castArray, spliceOne
class-utils
Utilities that operate on classes
mixin
component
Manages a DOM component, binds UI and recursively binds child components. Can be extended or instantiated
constructor, onDestroy, destroy
dom
Utilities to work with dom elements and selectors
byId, qs, qsa, on, off, eventCoords, offset, getElements, matches, isChildOf, delegate, createCustomEvent
drag-emitter
Emits drag events for all common pointers kinds (touch & mouse)
constructor, destroy
easings
Collection of easings to alter a value
event-emitter
Emits events that can be listened and unlistened to. Allows for a catch-all event which is always triggered.
on, off, emit, hasListeners, destroy
evented-component
A component that has events. Extends Component and composes with EventEmitter, inerithing both's method sets.
on, off, emit, destroy
functions
A collection of contextless utility functions
debounce
math
Collection of math functions
lerp, map, cap, distance, round
pool-system
Manages a dinamically grown pool of DOM Elements import PoolSystem from '@okiba/pool-system'
constructor, ensure, get, free, destroy
resource-loader
Manages loading of resources trough fetch to boost caching. Transparently relies on a WebWorker if possible to load on a separate thread.
load
search
Search utilities
binarySearch
store
A store module to implement state management. It allows registering to prop updates, as well as any update trough the catch-all callback.
constructor, set, get, getState, setState, reset, subscribe, unsubscribe
time-progress
Maps progress ovrer time, normalized between 0 and 1
constructor, update, reset, setProgress, setDirection, reverse
worker-utils
Set of useful functions to ease WebWorkers development