Necrotizing Pineapple Music

    sexy

    0.5.2 • Public • Published

    Sexy framework

    npm size

    Sexy - is super fast reactive framework for building fast UI. Perfect Google PageSpeed metrics (better 4-5 times then NuxtJS)

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

    1. No reactivity libs (all deps are made by code analyser)
    2. No runtime (Framework doesnt work in runtime, only on compilation step)
    3. Partial hydration (even for loops and conditional statements)

    Thanks SolidJS (dom expressions) and Sinuous (fast looping) for their work that helped to make max performance.

    Benefits

    • Small. 3.73kB gzip.
    • 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

    Performance

    Performance is a main key of Sexy framework. (syntethic tests)

    1. Faster in x4.5 times to hydrate dynamic components then NuxtJS
    2. Faster in x3.5 times to hydrate static components then NuxtJS
    3. Faster in x3 times to hydrate components with events then NuxtJS
    4. Faster in x10 times to hydrate components then Svelte (in real test FID better in 3 times)

    Best choice for mobile web apps development.

    Benchmark was made with 10 000 components with loop function. (Without loop its much more faster).

    Performance TODO

    • Cache value
    • Class and style optimiztion
    • Render to string (remove JSDOM to speed up server render)

    Attribute speed test with MarkoJS benchmark showed 19000 ops/sec for sexy framework and x5 hydration speed

    Features

    • Single file components
    • Statements
    • Slots
    • Loops
    • Props
    • Hooks (mounted/unmounted)
    • Components auto import/naming
    • Directives (Plugins)
    • Two-way bindings
    • Animation (basic via class)
    • Lazy loading (there is bug with root subscriber)
    • Dependencies (SFC)
    • Store (Vuex, Mobx...)
    • SSR
    • Simple router
    • Static site generation
    • Project config for SSR (styles entry, bundle analyzer...)
    • Client ssr-first mode (if there is huge page then render it on server, cache and transfer to client instead of render on client directly)
    • Recursive components
    • Dynamic components !! (tags complete)
    • Docs !!
    • Boilerplate generation !!
    • Benchmarks for hydration most popular frameworks

    Expression generation should be fixed and tested more

    Single file components

    Syntax is similar to VueJs but loop and conditional statements has a bit different syntax

    @if(expression)
    <div :class="[var2]" :style="var1">
        <slot>Default slot text</slot>
    </div>
    @elseif(expression)
    1
    @else
    2
    @endif

    Each with multiple nodes

    @each((item, key) in items)
    <template :key="key">
    // code
    </template>
    @endeach

    Each with signle nodes

    @each((item, key) in items)
    <div :key="key">
    // code
    </div>
    @endeach

    Examples

    Example with Loop, external component, (bind) (two-way data binding and directive), references and style blocks

    <div>
        @each(item, key in items)
            <nav.container ref="test" :key="item.v" (bind)="vv" transition:classed="fade" lazy>
                test {{ item.v }}
            </nav.container>
        @endeach
        <!-- <input type="text" (bind)="vv" ref="input"> -->
        {{ vv }}
    </div>
     
    <script>
    import { bind } from 'sexy-framework/directives'
     
    let items = o([{
        v: 'a'
    }, {
        v: 'b'
    }]);
     
    let vv = o('test');
     
    function mounted()
    {
        
    }
     
    function unmounted()
    {
        
    }
    </script>
     
     
    <style>
    .red {
        color: rgb(0, 0, 0);
    }
    </style>

    Example events, classes, styles

    <div @click="change" :class="[classList, { active: tick === 1 }]" :style="{ fontSize: tick() + 'px' }">
        <slot></slot>
    </div>
     
    <script>
    let tick = o(24);
    let test = p(null);
    let value = p(null);
     
    let classList = () => {
        return {
            red: tick() % 2 == 0,
            green: tick() % 3 == 0,
            some: test() === null,
        }
    }
     
    function change()
    {
        $emit('input', 2);
    }
     
    function mounted()
    {
        console.log('container mounted');
    }
     
    function unmounted()
    {
        console.log('container unmounted');
    }
    </script>

    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.

    Keywords

    none

    Install

    npm i sexy

    DownloadsWeekly Downloads

    10

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    117 kB

    Total Files

    96

    Last publish

    Collaborators

    • lastonoga