Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adnaan/gomodest-starter
A complex SAAS starter kit using Go, the html/template package, and sprinkles of javascript.
https://github.com/adnaan/gomodest-starter
bulma go golang golang-web goview html modest modestjs server-side-rendering stimulusjs sveltejs webapp
Last synced: 4 months ago
JSON representation
A complex SAAS starter kit using Go, the html/template package, and sprinkles of javascript.
- Host: GitHub
- URL: https://github.com/adnaan/gomodest-starter
- Owner: adnaan
- License: mit
- Created: 2020-11-20T02:01:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-24T23:08:02.000Z (almost 4 years ago)
- Last Synced: 2024-09-29T12:06:17.321Z (4 months ago)
- Topics: bulma, go, golang, golang-web, goview, html, modest, modestjs, server-side-rendering, stimulusjs, sveltejs, webapp
- Language: Go
- Homepage:
- Size: 1.98 MB
- Stars: 78
- Watchers: 2
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**GOMODEST** is a Multi Page App(MPA) **starter kit** using Go's `html/template`, `SvelteJS` and `StimulusJS`. It is inspired from modest approaches to building webapps as enlisted in https://modestjs.works/.
## Motivation
I am a devops engineer who dabbles in UI for side projects, internal tools and such. The SPA/ReactJS ecosystem is too costly for me. This is an alternative approach.
> The main idea is to use server rendered html with spots of client-side dynamism using SvelteJS & StimulusJS
The webapp is mostly plain old javascript, html, css but with sprinkles of StimulusJS & spots of SvelteJS used for interactivity sans page reloads. StimulusJS is used for sprinkling
interactivity in server rendered html & mounting Svelte components into divs.
## Stack
A few things which were used:
1. Go, html/template, goview,
2. Authentication: [github.com/adnaan/authn](https://github.com/adnaan/authn)
3. SvelteJS
4. [Hotwire](https://hotwire.dev/)
5. Bulma CSS
Many more things in `go.mod` & `web/package.json`
To run, clone this repo and:
```bash
$ make install
# another terminal
$ make run-go
```
The ideas in this starter kit follow the JS gradient as noted [here](https://modestjs.works/book/part-2/the-js-gradient/). I have taken the liberty to organise them into the following big blocks: **server-rendered html**, **sprinkles** and **spots**.
## Server Rendered HTML
Use `html/template` and `goview` to render html pages. It's quite powerful when do you don't need client-side interactions.
example:
```go
func accountPage(w http.ResponseWriter, r *http.Request) (goview.M, error) {
session, err := store.Get(r, "auth-session")
if err != nil {
return nil, fmt.Errorf("%v, %w", err, InternalErr)
}
profileData, ok := session.Values["profile"]
if !ok {
return nil, fmt.Errorf("%v, %w", err, InternalErr)
}
profile, ok := profileData.(map[string]interface{})
if !ok {
return nil, fmt.Errorf("%v, %w", err, InternalErr)
}
return goview.M{
"name": profile["name"],
}, nil
}
```
## Sprinkles
Use `stimulusjs` to level up server-rendered html to handle simple interactions like: navigations, form validations etc.
example:
```html
Home
```
```js
goto(e){
if (e.currentTarget.dataset.goto){
window.location = e.currentTarget.dataset.goto;
}
}
```
## Spots
Use `sveltejs` to take over `spots` of a server-rendered html page to provide more complex interactivity without page reloads.
This snippet is the most interesting part of this project:
```html
{{define "content"}}
{{end}}
```
[source](https://github.com/adnaan/gomodest-starter/blob/main/web/html/app.html)
In the above snippet, we use StimulusJS to mount a Svelte component by using the following code:
```js
import { Controller } from "stimulus";
import components from "./components";
export default class extends Controller {
static targets = ["component"]
connect() {
if (this.componentTargets.length > 0){
this.componentTargets.forEach(el => {
const componentName = el.dataset.componentName;
const componentProps = el.dataset.componentProps ? JSON.parse(el.dataset.componentProps): {};
if (!(componentName in components)){
console.log(`svelte component: ${componentName}, not found!`)
return;
}
const app = new components[componentName]({
target: el,
props: componentProps
});
})
}
}
}
```
[source](https://github.com/adnaan/gomodest-starter/blob/main/web/src/controllers/svelte_controller.js)
This strategy allows us to mix server rendered HTML pages with client side dynamism.
Other possibly interesting aspects could be the layout of [web/html](https://github.com/adnaan/gomodest-starter/tree/main/web/html) and the usage of the super nice [goview](https://github.com/foolin/goview) library to render html in these files:
1. [router.go](https://github.com/adnaan/gomodest-starter/blob/main/routes/router.go)
2. [view.go](https://github.com/adnaan/gomodest-starter/blob/main/routes/view.go)
3. [pages.go](https://github.com/adnaan/gomodest-starter/blob/main/routes/pages.go)
That is all.
---------------
## Attributions
1. https://areknawo.com/making-a-todo-app-in-svelte/
2. https://modestjs.works/
3. https://github.com/foolin/goview