Socket
Socket
Sign inDemoInstall

git.sr.ht/~kyoto-framework/kyoto

Package Overview
Dependencies
3
Maintainers
0
Alerts
File Explorer

Install Socket

Protect your apps from supply chain attacks

Install

git.sr.ht/~kyoto-framework/kyoto

Extensible Go library for creating fast, SSR-first frontend avoiding vanilla templating downsides. Creating asynchronous and dynamic layout parts is a complex problem for larger projects using `html/template`. Library tries to simplify this process. Let's go straight into a simple example. Then, we will dig into details, step by step, how it works. Kyoto provides a simple net/http handlers and function wrappers to handle pages rendering and serving. See functions inside of nethttp.go file for details and advanced usage. Example: Kyoto provides a way to define components. It's a very common approach for modern libraries to manage frontend parts. In kyoto each component is a context receiver, which returns it's state. Each component becomes a part of the page or top-level component, which executes component asynchronously and gets a state future object. In that way your components are executing in a non-blocking way. Pages are just top-level components, where you can configure rendering and page related stuff. Example: As an option, you can wrap component with another function to accept additional paramenters from top-level page/component. Example: Kyoto provides a context, which holds common objects like http.ResponseWriter, *http.Request, etc. See kyoto.Context for details. Example: Kyoto provides a set of parameters and functions to provide a comfortable template building process. You can configure template building parameters with kyoto.TemplateConf configuration. See template.go for available functions and kyoto.TemplateConfiguration for configuration details. Example: Kyoto provides a way to simplify building dynamic UIs. For this purpose it has a feature named actions. Logic is pretty simple. Client calls an action (sends a request to the server). Action is executing on server side and server is sending updated component markup to the client which will be morphed into DOM. That's it. To use actions, you need to go through a few steps. You'll need to include a client into page (JS functions for communication) and register an actions handler for a needed component. Let's start from including a client. Then, let's register an actions handler for a needed component. That's all! Now we ready to use actions to provide a dynamic UI. Example: In this example you can see provided modifications to the quick start example. First, we've added a state and name into our components' markup. In this way we are saving our components' state between actions and find a component root. Unfortunately, we have to manually provide a component name for now, we haven't found a way to provide it dynamically. Second, we've added a reload button with onclick function call. We're using a function Action provided by a client. Action triggering will be described in details later. Third, we've added an action handler inside of our component. This handler will be executed when a client calls an action with a corresponding name. It's highly recommended to keep components' state as small as possible. It will be transmitted on each action call. Kyoto have multiple ways to trigger actions. Now we will check them one by one. This is the simplest way to trigger an action. It's just a function call with a referer (usually 'this', f.e. button) as a first argument (used to determine root), action name as a second argument and arguments as a rest. Arguments must to be JSON serializable. It's possible to trigger an action of another component. If you want to call an action of parent component, use $ prefix in action name. If you want to call an action of component by id, use <id:action> as an action name. This is a specific action which is triggered when a form is submitted. Usually called in onsubmit="..." attribute of a form. You'll need to implement 'Submit' action to handle this trigger. This is a special HTML attribute which will trigger an action on page load. This may be useful for components' lazy loading. With this special HTML attributes you can trigger an action with interval. Useful for components that must to be updated over time (f.e. charts, stats, etc). You can use this trigger with ssa:poll and ssa:poll.interval HTML attributes. This one attribute allows you to trigger an action when an element is visible on the screen. May be useful for lazy loading. Kyoto provides a way to control action flow. For now, it's possible to control display style on component call and push multiple UI updates to the client during a single action. Because kyoto makes a roundtrip to the server every time an action is triggered on the page, there are cases where the page may not react immediately to a user event (like a click). That's why the library provides a way to easily control display attributes on action call. You can use this HTML attribute to control display during action call. At the end of an action the layout will be restored. A small note. Don't forget to set a default display for loading elements like spinners and loaders. You can push multiple component UI updates during a single action call. Just call kyoto.ActionFlush(ctx, state) to initiate an update. Kyoto provides a way to control action rendering. Now there is at least 2 rendering options after an action call: morph (default) and replace. Morph will try to morph received markup to the current one with morphdom library. In case of an error, or explicit "replace" mode, markup will be replaced with x.outerHTML = '...'.

    v1.1.1

Version published
Maintainers
0

Readme

<p align="center">
    <img width="200" src="https://kyoto.codes/images/logo.svg" />
</p>

<h1 align="center">kyoto</h1>

<p align="center">
    Go library for creating fast, SSR-first frontend avoiding vanilla templating downsides.
</p>

<p align="center">
    <a href="https://goreportcard.com/report/git.sr.ht/~kyoto-framework/kyoto">
        <img src="https://goreportcard.com/badge/git.sr.ht/~kyoto-framework/kyoto">
    </a>
    <a href="https://pkg.go.dev/git.sr.ht/~kyoto-framework/kyoto">
        <img src="https://pkg.go.dev/badge/git.sr.ht/~kyoto-framework/kyoto.svg">
    </a>
    <a href="https://opencollective.com/kyoto-framework">
        <img src="https://img.shields.io/opencollective/all/kyoto-framework?label=backers%20%26%20sponsors">
    </a>
    <img src="https://img.shields.io/github/license/kyoto-framework/kyoto">
    <img src="https://visitor-badge.glitch.me/badge?page_id=kyoto-framework&left_color=grey&right_color=green">
</p>

<p align="center">
    <a href="https://pkg.go.dev/git.sr.ht/~kyoto-framework/kyoto">Documentation</a>&nbsp;&bull; <a href="#team">Team</a>&nbsp;&bull; <a href="#who-uses">Who uses?</a>&nbsp;&bull; <a href="#support-us">Support us</a>
</p>

## Motivation

Creating asynchronous and dynamic layout parts is a complex problem for larger projects using `html/template`.
Library tries to simplify this process.

## What kyoto proposes?

- Organize code into configurable and standalone components structure
- Get rid of spaghetti inside of handlers
- Simple asynchronous lifecycle
- Built-in dynamics like Hotwire or Laravel Livewire
- Using a familiar built-in `html/template`
- Full control over project setup (minimal dependencies)
- 0kb JS payload without actions client (~12kb when including a client)
- Minimalistic utility-first package to simplify work with Go
- Internationalizing helper
- Cache control helper package (with a CDN page caching setup guide)

## Reasons to opt out

- API may change drastically between major versions
- You want to develop SPA/PWA
- You're just feeling OK with JS frameworks
- Not situable for a frontend with a lot of client-side logic

## Team

- Yurii Zinets: [email](mailto:yurii.zinets@icloud.com), [telegram](https://t.me/yuriizinets)
- Viktor Korniichuk: [email](mailto:rowdyhcs@gmail.com), [telegram](https://t.me/dinoarmless)

## Who uses?

### Broker One

**Website**: [https://mybrokerone.com](https://mybrokerone.com)

The first version of the site was developed with Vue and suffered from large payload and low performance.
After discussion, it was decided to migrate to Go with a built-in `html/template` due to existing libraries infrastructure inside of the project.  
Despite the good performance result, the code was badly structured and it was very uncomfortable to work in existing paradigm.  
On the basis of these problems, kyoto was born. Now, this library lies in the core of the platform.

### Using the library in your project?

Please tell us about your story! We would love to talk about your usage experience.

## Support us

Any project support is appreciated! Providing a feedback, pull requests, new ideas, whatever. Also, donations and sponsoring will help us to keep high updates frequency. Just send us a quick email or a message on contacts provided above.

If you have an option to donate us with a crypto, we have some addresses.

Bitcoin: `bc1qgxe4u799f8pdyzk65sqpq28xj0yc6g05ckhvkk`  
Ethereum: `0xEB2f24e830223bE081264e0c81fb5FD4DDD2B7B0`

Also, we have a page on open collective for backers support.

Open Collective: [https://opencollective.com/kyoto-framework](https://opencollective.com/kyoto-framework)

FAQs

Last updated on 15 Oct 2022

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc