In your Flamingo project, run:
mkdir frontend
cd frontend
npm init
npm i flamingo-carotene-core
npm i flamingo-carotene-pug
mkdir -p src/page
echo "h1 hello world" > src/page/index.pug
npx flamingo-carotene buildAdd the index route in config/routes.yml:
- path: /
name: home
controller: flamingo.render(tpl="index")See the folder example for this example.
Pug is a JavaScript template rendering engine.
The Flamingo flamingo.me/pugtemplate package is a flamingo template module to use Pug templates.
Pug.js is by default compiled to JavaScript, and executed as HTML. This mechanism is used to render static prototypes for the templates, so the usual HTML prototype is just a natural artifact of this templating, instead of an extra workflow step or custom tool.
This allows frontend developers to start templating very early with very few backend support, and without the need to rewrite chunks or even learn a new template language.
The static prototype can be used to test/analyze the UI in early project phases, when the backend might not be ready yet.
The way pug.js works is essentially the following:
template -[tokenizer]-> tokens -[parser]-> AST -[compiler]-> JavaScript -[runtime]-> HTML
To integrate it in Flamingo, we save the AST (abstract syntax tree) in a JSON representations. Pugtemplate will use a parser to build an in-memory tree of the concrete building blocks. It then will use a renderer to transform these blocks into HTML Go templates as follows:
AST -[parser]-> Block tree -[render]-> go template -[go-template-runtime]-> HTML
It is possible to view the intermediate result by https://your_flamingo_url/_pugtpl/debug?tpl=home/home
One feature of pug.js is the possibility to use arbitrary JavaScript in cases where the template syntax does not provide the some functionality. For example, loops can be written as below:
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + valIn this example the term ['zero', 'one', 'two'] is in JavaScript. Developers will be able to use more advanced code:
- var prefix = 'foo_'
ul
each val, index in [prefix+'zero', prefix+'one', prefix+'two']
li= index + ': ' + valThe pug_template module takes this JavaScript and uses the Go-based JS engine, otto, to parse the JavaScript and transpile it into Go code. While this works for most standard statements and language constructs (default data types such as maps, list, etc), it does not support certain things such as Object Oriented Programming or the JavaScript standard library. Only snippets of JavaScript code can be run.
However, it is possible to recreate such functionalities in a third-party module via Flamingo's template functions.
For example pug_template itself has a substitute for the JavaScript Math library with the min, max and ceil
functions. Please note that these function have to use reflection and it's up to the implementation to properly reflect
the functionality and handle different inputs correctly.
Nevertheless, extensive usage of JavaScript is not advised.
The Pug Template engine compiles a subset of JavaScript (ES2015) to Go templates. This allows frontend developers to use known a syntax and techniques, instead of learning a complete new template engine.
To make this possible Flamingo rewrites the JavaScript to Go, on the fly.
- var object = {"key": "value"}
- var array = [1, 2, 3, 4, 5]
- var concat_string = "string" + "another string"
- var add = 1 + 2
- var multiply = 15 * 8Those types have been reflected in Go in a form structs as Pugjs.Object, Pugjs.Map, Pugjs.Array, Pugjs.String and Pugjs.Number.
The technical documentation of the array struct can be found on GoDoc. As a short summary, the following functions are publicly available:
- var myArray = [1,2,3,4,5]
- myArray.indexOf(3) // returns 2
- myArray.length // return 5
- myArray.join(', ') // joins the values of the array by the given separator: "1, 2, 3, 4, 5"
- myArray.push(6) // returns [1,2,3,4,5,6]
- myArray.pop() // returns 6 and myArray equals [1,2,3,4,5]
- myArray.splice(4) // return [5] and myArray equals [1,2,3,4]
- myArray.slice(2) // returns [1,2]
- myArray.sort() // sorts alphabetically or numerically the arrayNote that the splice and slice functions only have a start index.
Javascript Object have been transcribed as Go Maps. The technical documentation of the objects/Pugjs.Maps struct can be found on GoDoc. As a short summary, the following functions are publicly available:
- var myObject = {"a": 1, "b": 2}
- myObject.keys() // returns an array of keys ["a","b"]
- myObject.assign("c", 3) // assigns a new property by key myObject equals {"a": 1, "b": 2, "c":3}
- myObject.hasMember(a) // True
- myObject.hasMember(z) // FalseThe technical documentation of the string struct can be found on GoDoc. As a short summary, the following functions are publicly available:
- var myString = "This is a nice string"
- myString.length // returns 21
- myString.indexOf("h") // returns 1
- myString.charAt(4) // returns "s"
- myString.toUpperCase() // returns "THIS IS A NICE STRING"
- myString.toLowerCase() // returns "this is a nice string"
- myString.replace("is", "was") // returns "this was a nice string"
- myString.split(" ") // returns ["this","was","a","nice","string"]
- myString.slice(1, 4) // returns "his"TODO
- var a = "this"
p Text #{a} something #{1 + 2}- var user = { description: 'foo bar baz' }
- var authorised = false
if user.description
p {user.description}
else if authorised
p Authorised
else
p Not authorisedeach value, index in ["a", "b", "c"]
p value #{value} at #{index}mixin mymixin(arg1, arg2="default")
p.something(id=arg2)= arg1
+mymixing("foo")
+mymixin("foo", "bar")include /mixin/mymixin
+mymixing("foo")Templates can be debugged via /_pugtpl/debug?tpl=pages/product/view
The template engine supports rendering of partials. The idea of partials is to support progressive enhancement by being able to request just a chunk of content from the browser. The partial will still be rendered server side and should be requested by an ajax call from the browser.
Partials are requested by setting the HTTP Header X-Partial
The requested partials are searched in a subfolder "{templatename}.partials"
So if you have a response that will normally render like this:
return cc.responder.Render("folder/template")
And you request that page with the Header X-Partial: foo,bar
The engine will search for partials in folder/template.partials/foo.pug and folder/template.partials/bar.pug and
just render them and return them wrapped in a JSON response:
{
"partials": {
"foo": "content rendered",
"bar": "content rendered"
}
}
If you call the template function setPartialData in this templates, you can add additional data to the json response.
For example:
setPartialData("cartamount", 4)
Will result in this response:
{
"partials": {
"foo": "content rendered",
"bar": "content rendered"
},
"data" : {
"key": 4
}
}
In production mode, all templates are loaded at once on application startup. Incoming requests are blocked until the loading process has finished.
This module registers a route /pugjs/ready on
the systemendpoint
which gives an HTTP 200 response only if the template loading has finished. This endpoint can for example be used as
kubernetes Startup probe.
In Flamingo's debug mode (flamingo.debug.mode: true), all templates are loaded on demand on each render request.
This setting should be used when working on templates locally.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent