native

An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js. The initiative is a monorepo with 4 smaller packages within it, they are @okikio/manager, @okikio/emitter, @okikio/animate, and @okikio/native.

@okikio/manager

A superset of the Map class, it extends the Map classes capabilities with awesome new features, and relieves some of the inconvient quirks of the Map class.

Documentation | NPM

@okikio/emitter

A small Event Emitter written in typescript with performance and ease of use in mind.

Documentation | NPM

@okikio/animate

An animation library for the modern web. Inspired by animate plus, and animejs, it is a Javascript animation library focused on performance and ease of use. It utilizes the Web Animation API (WAAPI) to deliver fluid animations at a semi-small size.

Documentation | NPM

@okikio/native

A framework to build custom dynamic web experiences around. It acts as a very light weight to build complex web apps, ranging from PJAX based sites to other Single Page Applications (SPA) (React, Vue, etc…) based sites and web apps.

Documentation | NPM

Demo & Showcases

View a demo →

API Documentation

Go to /docs/api, for detailed API documentation on the packages under native initiative.

Contributing

Note: By default we use Gitpod for contributions, but you can also use Github Codespaces. You will need to follow each packages documentation on how you contribute changes.

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 start

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

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.

The native initiative uses Changesets, for versioning and Changelog generation, you don’t need to create one, but it would be amazing if you could.

Warning: all contributions must be done on the beta branch. By default Gitpod will open on the beta branch, but still keep this in mind.

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 suggest using bundle.js.org, if you would like to quickly bundle the package online or check the size of your final bundle.

File Structure

demo/ - contains the build files for the demo.
- pug/ - contains the pug files for the demo.
- scss/ - contains the scss files for the demo.
- ts/ - contains typescript files for the demo.
- assets/ - contains favicon, manifest.json, and other assets that we don’t want to be processed for the demo.
packages/ - contains the packages under the native initiative.
- manager/ - contains the @okikio/manager package.
- emitter/ - contains the @okikio/emitter package.
- animate/ - contains the @okikio/animate package.
- native/ - contains the @okikio/native package.

I use a couple conventions when naming my files, these will help you navigate the repo.:

lib/ - lib folders contain the javascript results of the source typescript files
src/ - src folders contain the source typescript files
assets/ - assets folders contain unprocessed assets, e.g. images, fonts, etc…
LICENSE - contains the license
README.md - contains info. for using the project or package
CHANGELOG.md - contains a log of all changes till this point
TODO.md - contains goals for specific packages as well as the native initiative as a whole
package.json - contains info. that npm/pnpm uses to install and publish packages
build.js - contains a rollup script that builds the typescript files into javascripts files contained in the lib/ folder
snowpack.config.mjs - configurations for Astro's snowpack setup
tailwind.config.cjs - configurations for tailwind
tsconfig.json - config for typescript
repl.js - a small js files for testing concepts and finding logic errors, you run it by typing node repl.js into your terminal.
api.ts - the typescript file that exports all available modules

📦native
 ┣ 📂docs
 ┃ ┣ 📂demo
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂pug
 ┃ ┃ ┣ 📂scss
 ┃ ┃ ┗ 📂ts
 ┣ 📂packages
 ┃ ┣ 📂animate
 ┃ ┣ 📂emitter
 ┃ ┣ 📂manager
 ┃ ┗ 📂native
 ┃ ┃ ┣ 📂lib
 ┃ ┃ ┣ 📂src
 ┃ ┃ ┃ ┣ 📜api.ts
 ┃ ┃ ┣ 📜CHANGELOG.md
 ┃ ┃ ┣ 📜LICENSE
 ┃ ┃ ┣ 📜README.md
 ┃ ┃ ┣ 📜TODO.md
 ┃ ┃ ┣ 📜package.json
 ┃ ┃ ┗ 📜tsconfig.json
 ┣ 📜LICENSE
 ┣ 📜README.md
 ┣ 📜TODO.md
 ┣ 📜build.js
 ┣ 📜repl.js
 ┣ 📜package.json
 ┣ 📜snowpack.config.mjs
 ┣ 📜tailwind.config.cjs
 ┣ 📜tsconfig.json

I ignored some files in the file structure above, thats because they are files that aren’t necessary for most contributions, but if you happen to know what the missing files do, and have suggestions I would appreciate any pull-requests or github issues on the matter.

Licence

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

- 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…
↩