@okikio/manager

A superset of the Map class, it gives the Map class superpowers.

Usage no npm install needed!

<script type="module">
  import okikioManager from 'https://cdn.skypack.dev/@okikio/manager';
</script>

README

native

GitHub issues GitHub

native is an initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js.

Table of Contents

Getting started

The native initiative repo is a monorepo with 4 smaller packages within it, they are:

@okikio/manager

npm npm bundle size

The Map class is the most efficient way to handle large amounts of controlled data, but it has some inconvient quirks that would be annoying to handle, so I built this package to avoid some of it's quirks and introduce new features.

Note: you can install it as a seperate package from the rest of the @okikio/native framework.

Read more...

@okikio/emitter

npm npm bundle size

A small Event Emitter written in typescript with performance and ease of use in mind. It's pretty self explanitory, there are millions of event emitters like this one, the only difference is that this one is optimized for use in the @okikio/native framework.

Note: you can install it as a seperate package from the rest of the @okikio/native framework.

Read more...

@okikio/animate

npm npm bundle size

A truly native animation library that takes full advantage of the Web Animation API to create amazingly pollished experiences on all devices. To future proof animation in an easy to use and effiecient manner, I built this library as a light wrapper around the Web Animation API, that takes on conventional means for creating animation today, allowing developers to get started with modern animation today.

Note: you can install it as a seperate package from the rest of the @okikio/native framework.

Read more...

@okikio/native

npm npm bundle size

@okikio/native is the framework component of the native initiative. This package encourages the user to download/copy-and-paste the code into their development enviroment of choice, and tweak it to match their projects needs.

Read more...

Bundling

Note: All package in the native initiative are built for ES2020, This project expects the user to use a build tool to support older versions of browsers, the idea being most people are using evergreen browsers, so, why are web developers piling on polyfill code that most users don't need. I suggest esbuild, rollup, *typescript, or webpack for bundling the library, and for polyfills babel or polyfill.io.

*I have found typescript to be the best method for bundling for older browsers e.g. IE11. I only suggest you use babel for polyfilling Promise, fetch, etc...

I suggest using bundle.js.org, if you would like to quickly bundle the package online or check the size of your final bundle.

API Documentation

Go to okikio.github.io/native/docs, for a more detailed API documentation on the native initiative.

Usage

Located in ./build, you will find multiple build files that can help you create your setup. The ./build/pug/ folder contains pug files; pug has features that normal html just doesn't have. The ./build/sass/ folder contains scss files that allow for modern css without the need of polyfills. The ./build/ts/ folder contains typescript files that the framework runs on; typescript is used because Intellisense is better with typescript. Outside the build folder, the ./gulpfile.js file, is part of my gulp config, and is the tool I use to build the demo. For your project other tools should also work with some tweaks. Explore the files stated above to learn how to get started. Read more about native in the @okikio/native README. Explore the other packages as well to learn how they all work together.

Trying it Out

You can try out the native initiative via the @okikio/native framework.

Open In Gitpod

By default Gitpod will start the dev script for you, but if you need to restart the dev script you can do so by typing into the terminal.

pnpm demo

Once Gitpod has booted up, go to the ./build/pug/ and ./build/ts/ folders to try out the packages under the native initiative.

Demo

View a demo →

Read #Usage to find the code for the demo.

Contributing

Commitizen friendly

If there is something I missed, a mistake, or a feature you would like added please create an issue or a pull request and I'll try to get to it.

Note: all contributions must be done on the beta branch, using the Conventional Commits style.

The native project uses Conventional Commits as the style of commit, we also use the Commitizen CLI to make commits easier.

Licence

See the LICENSE file for license rights and limitations (MIT).