sexy

Sexy framework

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 ([e-mail])

License

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