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!
- No reactivity libs (all deps are made by code analyser)
- No runtime (Framework doesnt work in runtime, only on compilation step)
- 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)
- Faster in x4.5 times to hydrate dynamic components then NuxtJS
- Faster in x3.5 times to hydrate static components then NuxtJS
- Faster in x3 times to hydrate components with events then NuxtJS
- 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@else2@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.