Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
emarifer committed Dec 20, 2023
0 parents commit 54d294b
Show file tree
Hide file tree
Showing 26 changed files with 1,223 additions and 0 deletions.
44 changes: 44 additions & 0 deletions .air.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
root = "."
testdata_dir = "testdata"
tmp_dir = "tmp"

[build]
args_bin = []
bin = "./tmp/main"
cmd = "go build -o ./tmp/main ./cmd/main.go"
delay = 1000
exclude_dir = ["assets", "tmp", "vendor", "testdata"]
exclude_file = []
exclude_regex = ["_test.go"]
exclude_unchanged = false
follow_symlink = false
full_bin = ""
include_dir = []
include_ext = ["go", "tpl", "tmpl", "html"]
include_file = []
kill_delay = "10s"
log = "build-errors.log"
poll = false
poll_interval = 0
rerun = false
rerun_delay = 500
send_interrupt = false
stop_on_error = false

[color]
app = ""
build = "yellow"
main = "magenta"
runner = "green"
watcher = "cyan"

[log]
main_only = false
time = false

[misc]
clean_on_exit = false

[screen]
clear_on_rebuild = false
keep_scroll = true
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
tmp
bin
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2023 Enrique Marín

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
56 changes: 56 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Go/Echo+<span style="color:yellow"></></span>Templ: User List App as an example of a [project structured in layers](https://templ.guide/project-structure/project-structure), use of *Templ* Template language and frontend with HTMx technology (demo)

A full stack application using Golang's Echo framework. Requests to the backend are improved in their "aesthetic" aspect with the use [</>htmx](https://htmx.org/) ([hypermedia](https://hypermedia.systems/) only).

### Explanation

The architecture follows a typical "onion model" where each layer doesn't know about the layer above it, and each layer is responsible for a specific thing. Although the application is extremely simple, we use this pattern to illustrate its use in more complex applications.

Layering an application in this way can simplify code structure, since the responsibility of each type is clear.

To ensure that each part of the application is initialized with its dependencies, each struct defines a constructor (the New function in this example).

<img src="doc/structure.svg" width="90%">

<br>

>[!NOTE]
>***In this application, instead of using the html/template package (gofiber/template/html, specifically), we use the [a-h/templ](https://github.com/a-h/templ) library. This amazing library implements a templating language (very similar to JSX) that compiles to Go code. Templ will allow us to write code almost identical to Go (with expressions, control flow, if/else, for loops, etc.) and have autocompletion thanks to strong typing. This means that errors appear at compile time and any calls to these templates (which are compiled as Go functions) from the handlers side will always require the correct data, minimizing errors and thus increasing the security and speed of our coding.***
On the other hand, we use Golang's [Echo](https://echo.labstack.com/docs) web framework, which as stated on its website is a "High performance, extensible, minimalist Go web framework".

The use of </>htmx allows behavior similar to that of a SPA, without page reloads when switching from one route to another or when making requests (via AJAX) to the backend.

On the other hand, the styling of the views is achieved through Tailwind CSS and DaisyUI that are obtained from their respective CDNs.

---

## Setup:

Besides the obvious prerequisite of having Go! on your machine, you must have Air installed for hot reloading when editing code.

Start the app in development mode:

```
$ air # Ctrl + C to stop the application
```

Build for production:

```
$ go build -ldflags="-s -w" -o ./bin/main ./cmd/main.go # ./bin/main to run the application
```

>[!TIP]
>***In order to have autocompletion and syntax highlighting in VS Code for the Teml templating language, you will have to install the [templ-vscode](https://marketplace.visualstudio.com/items?itemName=a-h.templ) extension (for vim/nvim install this [plugin](https://github.com/joerdav/templ.vim)). To generate the Go code corresponding to these templates you will have to download this [executable binary](https://github.com/a-h/templ/releases/tag/v0.2.476) from Github and place it in the PATH of your system. The command:***
```
$ templ generate --watch
```

>[!TIP]
>***This will allow us to monitor changes to the .templ files and compile them as we save them. Review the documentation on Templ [installation](https://templ.guide/quick-start/installation) and [support](https://templ.guide/commands-and-tools/ide-support/) for your IDE.***
---

### Happy coding 😀!!
45 changes: 45 additions & 0 deletions assets/css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

body {
font-family: "Kanit", sans-serif;
}

@keyframes fade-in {
from {
opacity: 0;
}
}

@keyframes fade-out {
to {
opacity: 0;
}
}

@keyframes slide-from-right {
from {
transform: translateX(90px);
}
}

@keyframes slide-to-left {
to {
transform: translateX(-90px);
}
}

/* define animations for the old and new content */
::view-transition-old(slide-it) {
animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(slide-it) {
animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* tie the view transition to a given CSS class */
.sample-transition {
view-transition-name: slide-it;
}
3 changes: 3 additions & 0 deletions assets/img/info_icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/img/structure.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/templ.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions cmd/main.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
package main

import (
"net/http"

"github.com/emarifer/go-templ-project-structure/db"
"github.com/emarifer/go-templ-project-structure/handlers"
"github.com/emarifer/go-templ-project-structure/services"
"github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware"
)

// In production, the name of the database
// would be obtained from an .env file
const dbName = "user_data.db"

func main() {
app := echo.New()

app.HTTPErrorHandler = handlers.CustomHTTPErrorHandler

app.Static("/", "assets")
app.Use(middleware.Logger())

// We redirect the root route to the "/user" route
app.GET("/", func(c echo.Context) error {
return c.Redirect(http.StatusMovedPermanently, "/user")
})

uStore, err := db.NewUserStore(dbName)
if err != nil {
app.Logger.Fatalf("failed to create store: %s", err)
}

us := services.NewServicesUser(services.User{}, uStore)

h := handlers.New(us)

handlers.SetupRoutes(app, h)

app.Logger.Fatal(app.Start(":5000"))
}

/*
https://www.reddit.com/r/golang/comments/17d12wk/using_echo_with_ahtempl/
https://templ.guide/project-structure/project-structure
https://github.com/a-h/templ/tree/main/examples/counter
https://echo.labstack.com/docs
https://www.reddit.com/r/golang/comments/vggekd/whats_the_usage_of_error_in_echo_framework/
https://echo.labstack.com/docs/error-handling
https://medium.com/@emretiryaki3/custom-error-handling-for-echo-web-framework-go-152992ab9cce
https://sorcererxw.com/en/articles/go-echo-error-handing
*/
Loading

0 comments on commit 54d294b

Please sign in to comment.