nevinhajs/nevinha-js

More than just framework... A component framework to make the web animations development easier

NevinhaJS

What's NevinhaJS?

A component render as React that goes beyond static methods and component lifecycles, including state, props and improving the way you make meaningful animations, providing an amazing experience.

🚨 Importants Notes

• NevinhaJS uses the virtual DOM as base of their diff.
• NevinhaJS uses CSS Typed OM API, which improves arround 30% the performance of your browser's css manipulations. You can learn more in this google article

Actually, we're implementing new features and animations to make this framework more powerful and sexy for your projects.

Quickly create components for motion animation.

🤔 What's Missing?

• Web Animations API
• Parallax animations
• Include All Animations CSS3
• Unit tests
• Pre-commit tasks
• ...

Table of Contents

• Install
• Usage
• Contributing
• Examples
• License

Install

We'll put NevinhaJS in NPM as soon as possible.

Usage

With a bundler like rollup or webpack, use:

// using ES6 modules
import {NevinhaComponent, render} from 'nevinha-js';

class App extends NevinhaComponent {
  constructor(){
    super();
    this.state.name = "NevinhaJS"
  }

  customEvent(){
    console.log('this is a custom event')
  }

  render() {
    const {name} = this.state;
    const {customEvent} = this.props;

    return (
      <div>
          <SomeNevinhaComponent />

          <AnotherComponent>
            <p>Don't forget to declare this component, because it wasn't declared yet</p>
          </AnotherComponent>

          // Yeah it has some effects inside our architecture,
          // you just need to call the effect name  😉
          <h1 fadeIn>
            <p>Hello! This is the new: {name}</p>
            {name}
          </h1>

          <AnotherComponentWithProps myEvent={customEvent} myProp="anything" />
      </div>
    );
  }
}

You can learn more about how to use NevinhaJs in the NevinhaJs Examples repo

We're taking special care with browser animation performance. We're always following google developer's documentation and developers group to ensure performance compatibility

Contributing

First of all, thank you for your contribution. If you want to contribute, feel free to search for open issues or our project roadmap, we have a lot of work to do, and of course we'll need you.

Reporting Issues

Did you find a problem? Do you want a new feature? First check if your problem or idea has been reported. If there is a new question, please be clear and descriptive.

🚨 Check issue open and closed.

Submitting pull requests

Make sure your pull requests are within scope and that you follow the project assumptions.

🚨 Submit your pull solipsies with tests if necessary.

• Fork it!
• Clone your fork: git clone https://github.com/<your-username>/NevinhaJS
• Navigate to the newly cloned directory: cd NevinhaJS
• Create a new branch for the new feature: git checkout -b new-feature
• Install the tools necessary for development: yarn
• Make your changes.
• yarn run build to verify your change doesn't increase output size.
• Commit your changes: git commit -am 'Add new feature'
• Push to the branch: git push origin new-feature
• Submit a pull request with full remarks documenting your changes.

License

MIT License © NevinhaJS

nevinha-js's Issues

Parse some animations from all animation to WebAnimationsAPI

FadeIn, FadeOut and Bomb is not working when we change between they

Add pre-commit script configuration

Create motion architecture

We have created the base of NevinhaJS, with lifecycles and setState methods, we have the main base to follow creating the motion architecture of NevinhaJS framework.

Animations don't stop when we update them to false

Add unit tests

Hey @clovisdasilvaneto,
Do you think to add unit tests?

Add CSS Typed OM in the NevinhaJS core API

We're already using CSS Typed OM in NevinhaJs motions, but we can improve our DOM manipulation performance treating in an internally way the NevinhaJS style api.

For example when the user call some component like:

 <MyComponent style="background: red" />

We could replace the style method internally calling something like: el.attributeStyleMap.set('background', 'red')

Create NevinhaJS documentation

Motions is not working in Firefox and Safari

As we're using CSS Typed OM methods, we received a undefined exception in the console

TypeError: e.attributeStyleMap is undefined

So we need to develop a polyfill to use element.style if the browser doesn't support CSS Typed OM methods.

Create Lifecycle componentDidMount

Create Lifecycle - ComponentWillUnmount

Create NevinhaJs Website