Kita
Kita is a declarative, reactive GUI toolkit for build cross platform apps with web technology with single codebase. Inspired by Flutter, React.
Status
The toolkit is almost ready for create apps, but still have many improvements need to be done, such as accessibility texture view, web view, and so on...
Download the prebuilt example demo here: https://github.com/zhuah/kit/releases/download/v0.0.1/macos_linux_windows.tgz.
As my development OS is macOS, there may some bugs on linux and windows.
I have worked on it for almost 3 years. For some reason, i'm looking for financial support or business cooperation or acquisition on this project.
To contact me please send email to [email protected].
Screenshots
Language
Kita is written in Go for several reasons:
- Simple and easy to learn and use
- Memory safe
- Cross platform with good standard library
- Good performance
- Static typed with generic support
- Easy build/deploy, compiles to single binary, no bundled runtime dependence
- Good for handling network connections
- Sharing code with backend services, one language for both client and server
some drawbacks:
-
hot reload:
there is no easy way to support code hot reload in Go. We supports css asset file hot reload instead, which will significantly helps user experience when adjust styles.
-
thread safe:
ui thread are always not thread safe for performance reason. Unlike javascript which is single threaded, or other language with async/await support, a Go program will typically run with multiple goroutines, you must wrap ui modification with
RunInUI
function in non-ui goroutine.
Features
Kita = React + Hooks + DOM + Gestures + CSS + Animation + Text Layout + Fonts + Canvas + GPU Acceleration + Platform Shell + Assets + I18N + Plugins + DevTool + ...
Widget/Component
The widget system is inspired by React, but provides only function component and hooks.
JSX is not supported now, so we can only write Go code to construct the widget tree, it's just like Flutter, but moving styling into CSS file.
DOM
DOM elements are respond for event handling and style matching.
Builtin features:
- tab focus with outline
- disable element
- auto focus
- text selection
- scroll
Builtin elements:
- a
- button
- canvas
- checkbox
- div
- radio
- input
- textarea
- img
- label
- p: multiline rich text layout, supports both text span and widget span
- select
- span
- style: scoped style element like vue
- popup-container: manage tooltips, popups and modal dialogs.
Element states:
- focus
- active
- focusWithin
- drag and drop
- hover
Builtin gestures:
- tap
- double tap
- long press
- dragging
Components:
- color picker
- switch
- css transition/switch transition/transition group(inspired by React)
Style/CSS
Kita implements a custom css styler supports:
- hot reload with devtool
- importing
- nested selector
- scss variables(compile time)
- css variables(running time)
- id/class/tag/pseudo class/pseudo element/any/not selector
- child/descendant/general sibling/adjacent sibling combinator
- px/em/rem/vh/vw/vmin/vmax/safe-area-insets/currentColor
- transition/animation,keyframes
- media query
supported pseudo classes:
- hover
- any-link
- active
- focus
- focus-visible
- focus-within
- disabled
- selected
- checked
- indeterminate
- drop
- horizontal
- vertical
supported css properties:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition
- animation-name
- animation-direction
- animation-fill-mode
- animation-iteration-count
- animation-duration
- animation-timing-function
- animation-delay
- animation
- border-left-style
- border-right-style
- border-start-style
- border-end-style
- border-top-style
- border-bottom-style
- border-style
- border-left-width
- border-right-width
- border-start-width
- border-end-width
- border-top-width
- border-bottom-width
- border-width
- border-left-color
- border-right-color
- border-start-color
- border-end-color
- border-top-color
- border-bottom-color
- border-color
- border-left
- border-right
- border-start
- border-end
- border-top
- border-bottom
- border
- border-top-left-radius
- border-top-right-radius
- border-top-start-radius
- border-top-end-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-start-radius
- border-bottom-end-radius
- border-radius
- overflow-x
- overflow-y
- overflow
- content-align
- background-clip
- background-color
- background-image: image, linear-gradient, radial-gradient, conic-gradient
- background-origin
- background-size
- background-repeat
- background-position
- background
- box-shadow
- outline-style
- outline-color
- outline-offset
- outline-width
- outline-radius
- outline
- object-fit
- object-position
- transform
- transform-origin
- arrow-size
- direction
- visibility
- cursor
- opacity
- filter: drop-shadow and blur doesn't supported currently for performance issue
- display: builtin supports none, flex, stack
- flex
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-self
- align-content
- z-index
- stack-align-self
- margin-left
- margin-right
- margin-start
- margin-end
- margin-top
- margin-bottom
- margin
- padding-left
- padding-right
- padding-start
- padding-end
- padding-top
- padding-bottom
- padding
- min-width
- min-height
- max-width
- max-height
- width
- height
- aspect-ratio
- font-family
- font-size
- font-feature-settings
- font-language-override
- font-stretch
- font-style
- font-weight
- caret-color
- placeholder-color
- letter-spacing
- line-height
- color
- selection-color
- text-shadow
- text-transform
- text-decoration-line
- text-decoration-style
- text-decoration-color
- text-decoration-thickness
- text-decoration
- text-wrap
- text-align
Platforms
Implemented:
- macOS
- Linux (the shell is implemented with gtk3 currently)
- Windows (the minimum supported version is windows 7)
- Android
- iOS
Todo:
- Web
- Embedded linux
Plugins
Kita provides a general api to call system capabilities by implement plugins.
Here are some builtin plugins:
- clipboard
- cursor
- file drag and drop
- file choose/save
- system global hot key
- menubar
- context menu
- text input
- tray
- url launcher
Painting
Kita finally chooses to build it's own canvas drawing engine,instead of relies on Skia or platform drawing api.
Canvas
Kita implements a gpu based canvas drawing engine, with merge and batching draw calls to improve performance.
GPU Acceleration
Implemented:
- OpenGL 2.1+ /OpenGL ES 2.0+(macOS, Linux, Windows, Android, iOS)
- Metal(macOS, iOS)
- D3D11(Windows)
Todo:
- D3D12
- Vulkan
- WebGL
Fonts
Kita uses different font stack on each platform
- macOS/iOS: CoreText everywhere
- font shaping
- rasterizing
- font matching and fallback
- Linux:
- fontconfig for font enumeration
- custom font matching and fallback
- harfbuzz for font shaping
- freetype for font rasterizing
- Android:
- NDK API or directory searching for font enumeration
- custom font matching and fallback
- harfbuzz for font shaping
- custom font rasterizing
- Windows:
- DirectWrite font enumeration
- custom font matching and fallback
- DirectWrite for font shaping
- custom font rasterizing
Performance
Tested with the example app on my old mid 2015 mbp, the average duration per frame are about 2ms with Metal and 3ms with OpenGL.
Assets
Kita provides a default asset bundler in command line tool, each platform shell implements the api to load asset file, the core asset api implements a asset variant resolver support dpi like 1.0x, 1.5x, 2.0x, ldpi, mdpi, hdpi
and language.
I18n
Kita provides first-class i18n support. You could use react hooks to translate the message and passed the translated text to dom element.
DevTool
Kita provides a basic component/dom tree inspector like Chrome DevTool Inspector, which helps debugging style/layout issues.
TODO
- App Bundler
- Accessibility
- SVG