Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/okikio/native
An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js api's.
https://github.com/okikio/native
animate animation api app css emitter event js manager modern native ts typescript waapi web web-animations-api
Last synced: 6 days ago
JSON representation
An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js api's.
- Host: GitHub
- URL: https://github.com/okikio/native
- Owner: okikio
- License: mit
- Created: 2020-06-27T06:05:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T02:05:06.000Z (4 months ago)
- Last Synced: 2025-01-10T20:14:42.356Z (13 days ago)
- Topics: animate, animation, api, app, css, emitter, event, js, manager, modern, native, ts, typescript, waapi, web, web-animations-api
- Language: TypeScript
- Homepage: https://okikio.github.io/native/
- Size: 102 MB
- Stars: 94
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# native
 
**THIS PROJECT IS MOSTLY UNMAINTAINED, I HAVEN'T HAD ENOUGH TIME TO MAINTAIN IT**
`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
- [native](#native)
- [Table of Contents](#table-of-contents)
- [Getting started](#getting-started)
- [@okikio/manager](#okikiomanager)
- [@okikio/emitter](#okikioemitter)
- [@okikio/animate](#okikioanimate)
- [@okikio/native](#okikionative)
- [Bundling](#bundling)
- [API Documentation](#api-documentation)
- [Usage](#usage)
- [Trying it Out](#trying-it-out)
- [Demo](#demo)
- [Contributing](#contributing)
- [Licence](#licence)
## Getting started
The `native` initiative repo is a monorepo with 4 smaller packages within it, they are:
### [@okikio/manager](./packages/manager#readme)
[](https://www.npmjs.com/package/@okikio/manager) [](https://bundlephobia.com/package/@okikio/manager)
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 separate package from the rest of the `@okikio/native` framework._
[Read more...](./packages/manager/README.md)
### [@okikio/emitter](./packages/emitter#readme)
[](https://www.npmjs.com/package/@okikio/emitter) [](https://bundlephobia.com/package/@okikio/emitter)
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 separate package from the rest of the `@okikio/native` framework._
[Read more...](./packages/emitter/README.md)
### [@okikio/animate](./packages/animate#readme)
[](https://www.npmjs.com/package/@okikio/animate) [](https://bundlephobia.com/package/@okikio/animate)
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 separate package from the rest of the `@okikio/native` framework._
[Read more...](./packages/animate/README.md)
### [@okikio/native](./packages/native#readme)
[](https://npmjs.com/package/@okikio/native) [](https://bundlephobia.com/package/@okikio/native)
`@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...](./packages/native/README.md)
## 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`.*
**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](https://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](https://okikio.github.io/native/docs), for a more detailed API documentation on the native initiative.
## Usage
Located in [./build](./build), you will find multiple build files that can help you create your setup. The [./build/pug/](./build/pug) folder contains [pug](https://pugjs.org/api/getting-started.html) files; `pug` has features that normal `html` just doesn't have. The [./build/sass/](./build/sass) folder contains [scss](https://sass-lang.com/guide) files that allow for modern css without the need of polyfills. The [./build/ts/](./build/ts/) folder contains [typescript](https://www.typescriptlang.org/) files that the framework runs on; typescript is used because Intellisense is better with typescript. Outside the build folder, the [./gulpfile.js](./gulpfile.js) file, is part of my [gulp](https://gulpjs.com/) 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](./packages/native/README.md). 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.
[](https://gitpod.io/#https://github.com/okikio/native/blob/beta/README.md)
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.
```bash
pnpm demo
```
Once Gitpod has booted up, go to the [./build/pug/](./build/pug/) and [./build/ts/](./build/ts/) folders to try out the packages under the `native` initiative.
## Demo
> [View a demo →](https://okikio.github.io/native/demo/)
Read [#Usage](#usage) to find the code for the demo.
## Contributing
[](http://commitizen.github.io/cz-cli/)
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](https://www.conventionalcommits.org/en/v1.0.0/) as the style of commit, we also use the [Commitizen CLI](http://commitizen.github.io/cz-cli/) to make commits easier.*
## Licence
See the [LICENSE](./LICENSE) file for license rights and limitations (MIT).