54sword / sexy

Super fast reactive UI framework with no runtime overhead created to use with SSR 🤙

Home Page:http://sexy-js.ninja/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sexy framework

npm size

Sexy framework – is a reactive compiler and javascript analyser for building user interfaces. Unlike other frameworks, Sexy is designed to be truly native.

Sexy doesnt work in runtime. Framework analyse your components and turn them into native javascript with little overhead: 3.8kb gzip.

Well, sexy was designed to work with sever rendering but you can also use it without to make responsible SPA's

Performance

Sexy is fast because it compiles components to Native Javascript and it manages reactivity at compiler time!

  • Small. 3.78kB gzip.
  • Super Fast. No reactivity libs, No runtime work
  • Partial hydration. Hydrate only dynamic and statefull parts of application
  • Truly reactive. automatically derived from the app state.
  • Tips & Tricks. Slots, Loops, Statements and Props as we get used to

Sexy framework is faster then NuxtJS in x4.5 times to hydrate dynamic components. First Input Delay and TTI better in 3 times (google pagespeed).

Benchmark (lighthouse)

Sexy is faster than VueJS in 200 times.

Sexy-js Benchmark benchmark-sexy

NuxtJS Benchmark benchmark-nuxt

Documentation

To check out live examples and docs, visit sexy-js.ninja.

How-to

1. You can create app with SSR

npx create-sexy-app my-app
yarn create sexy-app my-app

And use it in development mode:

npm run dev

Or production:

npm run build && npm run start

2. You can use it manually

npm install sexy sexy-loader --save

And use it with webpack

module: {
  rules: [
    {
      test: /.sexy$/i,
      use: [{
        loader: 'sexy-loader',
        options: {
          path: './components', // path to folder where components located
          styles: true,
        }
      }]
    },
  ]
}

Then your enty js file should contain:

import { render } from 'sexy/render';
import HelloWorld from './components/hello-world.sexy';

const layout = document.getElementById('layout');

render(HelloWorld, layout);

Known problems

Reactivity in loops with object props is not reactive.

Contribution

We need contributors to make project production-ready.

Contributors

Burkhanov Kirill (kir.burkhanov@gmail.com)

License

Copyright (c) 2020 Burkhanov Kirill. This is free software, and may be redistributed under the terms specified in the LICENSE file.

About

Super fast reactive UI framework with no runtime overhead created to use with SSR 🤙

http://sexy-js.ninja/


Languages

Language:JavaScript 93.9%Language:SCSS 4.9%Language:HTML 1.2%Language:CSS 0.0%