Article original : The Best Go Tools to Use for Your Frontend Projects
Le langage de programmation Go est réputé pour son efficacité dans le développement backend. Mais il est assez facile d'étendre ses capacités aux projets frontend également.
Cet article explore les outils Go essentiels qui permettent aux développeurs frontend d'améliorer leurs workflows, en mettant l'accent sur la simplicité et la productivité.
Prérequis
Avant de plonger dans l'exploration des outils Go pour les projets frontend, assurez-vous d'avoir les éléments suivants en place :
- Go installé sur votre machine. Vous pouvez le télécharger sur le site officiel de Go.
- Un éditeur de code de votre choix installé, tel que Visual Studio Code, GoLand ou Zed.
- Une compréhension de base de Go, consultez la documentation de Go ou ce manuel Go.
Outils Go pour vos projets frontend
Voici cinq outils Go que vous pouvez essayer pour vos projets frontend :
1. Fiber : un framework web performant
Fiber est un framework web pour Go inspiré d'Express.js, connu pour ses hautes performances et son design minimaliste. Il facilite le routage efficace et le support des middlewares, ce qui le rend idéal pour la communication frontend-backend et le développement d'API.
Fiber est particulièrement utile pour créer des API robustes et performantes avec lesquelles les applications frontend peuvent interagir de manière fluide.
Exemple de code :
Cet exemple sera une application web simple où les utilisateurs peuvent saisir leur nom, soumettre un formulaire et recevoir un message de salutation personnalisé en retour.
Dans votre éditeur de code, utilisez cette structure pour le projet :
Saisissez ce code pour le fichier main.go :
package main
import (
"fmt"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/template/html/v2"
)
// RenderForm renders the HTML form.
func RenderForm(c *fiber.Ctx) error {
return c.Render("form", fiber.Map{})
}
// ProcessForm processes the form submission.
func ProcessForm(c *fiber.Ctx) error {
name := c.FormValue("name")
greeting := fmt.Sprintf("Hello, %s!", name)
return c.Render("greeting", fiber.Map{"Greeting": greeting})
}
func main() {
app := fiber.New(fiber.Config{
Views: html.New("./views", ".html"),
})
// Serve static files (HTML templates and stylesheets).
app.Static("/", "./static")
// Define routes.
app.Get("/", RenderForm)
app.Post("/submit", ProcessForm)
// Start the Fiber app on port 8080.
app.Listen(":8080")
}
Le dossier views contient deux fichiers HTML qui affichent le formulaire et la réponse dans le navigateur. Saisissez le code pour ceux-ci :
form.html
<!-- views/form.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fiber Example</title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<form action="/submit" method="post">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
greeting.html
<!-- views/greeting.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fiber Example</title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<p>{{.Greeting}}</p>
</body>
</html>
Ensuite, dans le dossier styles à l'intérieur du répertoire static, saisissez ce code pour le fichier main.css :
/* main.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
form {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 20px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Le code de ce projet est accessible sur ce dépôt GitHub.
Moteur de rendu de Fiber
Fiber s'intègre à des moteurs de rendu (view engines), et nous utiliserons le moteur de template HTML dans cet exemple. La configuration du moteur de rendu est simple, permettant une séparation claire des préoccupations entre le backend et le frontend.
app := fiber.New(fiber.Config{
Views: html.New("./views", ".html"),
})
Fiber simplifie le service des actifs statiques, assurant une livraison efficace des feuilles de style, des images et des fichiers JavaScript côté client. Dans notre exemple, les styles sont stockés dans le dossier static et liés dans les templates HTML.
// Serve static files (HTML templates and stylesheets)
app.Static("/", "/.static")
Exécutez le programme en utilisant main.go pour démarrer le serveur sur le port 8080. Il affiche une sortie console générée par le framework Fiber.
go run main.go
Visitez http://127.0.0.1:8080/ dans votre navigateur pour voir la réponse. Voici comment cela fonctionne :
2. Buffalo : un écosystème de développement web holistique
Buffalo est un écosystème de développement web holistique pour Go, fournissant un ensemble complet d'outils, de bibliothèques et de conventions pour construire des applications web modernes. Il simplifie le développement frontend et backend en proposant du scaffolding et des fonctionnalités de hot-reload.
Buffalo est avantageux pour mettre en place rapidement des applications web full-stack, permettant aux développeurs de se concentrer sur la création de fonctionnalités plutôt que sur le code boilerplate.
Un projet Buffalo typique a la structure suivante :
myapp/
|-- actions/
|-- grifts/
|-- migrations/
|-- models/
|-- public/
|-- templates/
|-- go.mod
|-- go.sum
|-- main.go
- actions : Contient les gestionnaires (handlers) pour les routes web.
- grifts : Héberge les tâches Grift pour l'automatisation.
- migrations : Stocke les fichiers de migration de la base de données.
- models : Définit les modèles de données.
- public : Contient les actifs statiques comme les feuilles de style et les images.
- templates : Stocke les templates HTML.
go.mod et go.sum: Suivent les dépendances du projet et leurs versions.main.go: Point d'entrée de l'application Buffalo, initialise et démarre le serveur.
Exécutez cette commande pour créer une nouvelle application Buffalo :
buffalo new myapp
3. Grift : automatiser les tâches en Go
Grift est un exécuteur de tâches (task runner) idéal pour automatiser diverses tâches liées au projet. Il gère les processus de build frontend, la manipulation des actifs et l'automatisation du déploiement.
Grift s'avère précieux pour automatiser les tâches répétitives dans le workflow de développement frontend, améliorant ainsi l'efficacité et réduisant l'intervention manuelle.
Exemple de code :
Cet exemple démontre comment Grift peut être utilisé pour packager (bundle) et minifier des fichiers JavaScript dans un projet frontend.
Structure du projet :
Voici les fichiers JavaScript :
file1.js et file2.js, se trouvent dans le répertoire src.
file1.js
// file1.js
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("John");
file2.js
// file2.js
function multiply(a, b) {
return a * b;
}
console.log(multiply(3, 4));
Tâche Grift
La tâche Grift package et minifie ces fichiers JavaScript en un seul fichier nommé bundle.js. La tâche est définie dans le fichier main.go du projet.
main.go
// main.go
package main
import (
"fmt"
"github.com/markbates/grift/grift"
"github.com/tdewolff/minify/v2"
"github.com/tdewolff/minify/v2/js"
"io/ioutil"
"os"
"path/filepath"
)
// BundleAndMinifyJS is a Grift task that bundles and minifies JavaScript files.
func BundleAndMinifyJS(c *grift.Context) error {
// ... (code omitted for brevity)
fmt.Printf("JavaScript files bundled and minified successfully. Output: %s\n", outputPath)
return nil
}
// main function registers the Grift task and runs it.
func main() {
grift.Desc("bundle-js", "Bundle and minify JavaScript files")
grift.Add("bundle-js", BundleAndMinifyJS)
taskName := "bundle-js"
context := &grift.Context{}
if err := grift.Run(taskName, context); err != nil {
if err.Error() == "task not found" {
fmt.Println("Task not found.")
os.Exit(1)
}
panic(err)
}
}
Exécution de la tâche Grift
Pour exécuter la tâche Grift, lancez la commande suivante dans votre terminal :
go run main.go bundle-js
Cette tâche Grift packagera et minifiera file1.js et file2.js en un seul fichier nommé bundle.js dans le répertoire dist.
Voici la sortie, montrant le nouveau répertoire et le fichier bundle.js créé, ainsi que le message affiché dans le terminal :
4. Gomponents : créer des composants UI web en Go
Gomponents est une bibliothèque pour générer des composants HTML en Go. Elle simplifie la création de composants UI pour les applications frontend.
Gomponents est particulièrement utile lorsque vous souhaitez générer des composants HTML dynamiquement dans votre code Go, offrant ainsi plus de flexibilité et d'abstraction dans la construction des interfaces utilisateur.
Exemple de code : Cette application web montre comment utiliser Gomponents et est inspirée de l'exemple Gomponents tailwindcss de Markus Wüstenberg.
Créez un fichier main.go et saisissez le code ci-dessous :
package main
import (
"fmt"
"net/http"
g "github.com/maragudk/gomponents"
c "github.com/maragudk/gomponents/components"
. "github.com/maragudk/gomponents/html"
)
func main() {
http.Handle("/", createHandler("Welcome!", simpleComponent("Hello, this is the main page!")))
http.Handle("/contact", createHandler("Contact", simpleComponent("Contact us!")))
http.Handle("/about", createHandler("About", simpleComponent("About this site!")))
// Print a message indicating that the server is running
fmt.Println("Server is running on http://localhost:8080")
_ = http.ListenAndServe("localhost:8080", nil)
}
func createHandler(title string, body g.Node) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
_ = Page(title, r.URL.Path, body).Render(w)
}
}
func simpleComponent(content string) g.Node {
return Div(
H1(g.Text(content)),
P(g.Text("This is a simple component.")),
)
}
func Page(title, path string, body g.Node) g.Node {
return c.HTML5(c.HTML5Props{
Title: title,
Language: "en",
Body: []g.Node{
Navbar(path),
Container(body),
},
})
}
func Navbar(currentPath string) g.Node {
return Nav(Class("navbar"),
Container(
NavbarLink("/", "Home", currentPath == "/"),
NavbarLink("/contact", "Contact", currentPath == "/contact"),
NavbarLink("/about", "About", currentPath == "/about"),
),
)
}
func NavbarLink(path, text string, active bool) g.Node {
return A(Href(path), g.Text(text),
c.Classes{
"active": active,
},
)
}
func Container(children ...g.Node) g.Node {
return Div(Class("container"), g.Group(children))
}
Exécutez le code avec cette commande pour démarrer le serveur :
go run main.go
Ensuite, saisissez cette URL dans votre navigateur pour voir les composants Go : http://localhost:8080 comme illustré ici :
Et nous avons les composants Home, About et Contact construits avec Gomponents.
5. Present : un outil de présentation basé sur Go
Present est un outil de l'écosystème Go utilisé pour créer des supports de présentation (slide decks). Il permet aux développeurs de générer des présentations techniques ou de la documentation directement en Go.
Present est bénéfique lorsque vous devez créer et partager des présentations techniques sur des sujets de développement frontend, des mises à jour de projet ou toute autre information pertinente.
Voici comment vous pouvez utiliser Present dans vos projets :
Tout d'abord, créez un fichier nommé presentation.slide dans votre éditeur de code et saisissez cet exemple de code :
# My Frontend Tech Talk
---
## Agenda
1. Introduction
2. Project Scope
3. Live Demo
4. Q&A
Ensuite, écrivez le contenu de votre présentation en utilisant CommonMark, un langage de balisage simple. Utilisez des titres (#) pour les diapositives et --- pour les séparer.
Installez l'outil Present comme ceci :
go get -u golang.org/x/tools/cmd/present
Ensuite, lancez l'outil Present dans le répertoire contenant votre fichier de présentation. Votre navigateur affichera alors la présentation.
present
Pourquoi utiliser les outils Go dans les projets frontend ?
Efficacité : Les outils Go sont conçus pour améliorer l'efficacité, automatiser les tâches répétitives et réduire l'intervention manuelle dans les workflows de développement frontend.
Performance : Des outils comme Fiber sont optimisés pour la performance, garantissant que votre communication frontend-backend est rapide et réactive.
Cohérence : Les conventions et la structure de projet de Buffalo favorisent la cohérence, permettant aux développeurs de se concentrer sur la création de fonctionnalités plutôt que sur le code boilerplate.
Flexibilité : La capacité de Gomponents à générer des composants HTML dynamiquement en Go offre une grande flexibilité dans la construction d'interfaces utilisateur au sein même du langage.
Documentation et Présentation : Present simplifie la création de présentations techniques et de documentation, gardant les informations et les mises à jour de votre projet organisées.
L'intégration fluide des outils Go non seulement rationalise le développement, mais s'aligne également sur la philosophie de simplicité et d'efficacité de Go.
Expérimentez avec ces outils, et vous verrez l'impact positif qu'ils peuvent avoir sur votre workflow.
Bon code ! 💜