- Notifications
You must be signed in to change notification settings - Fork0
An experimental repository for developing libraries and web tools necessary to use pure Go to compile a PWA web app via WASM.
License
hollowaykeanho/ExperimentingGoWASM
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This is the principle repository for (Holloway) Chew, Kean Ho's experimentationto develop a pure Go web application supportingProgressive Web Application offlinemode alongside using pure Go to develop web application entirely.
The goal of unifying web application development for client-side rendering usinga proper programming language likeGo has been aspired butlow implementations due to little efforts. That's why the primary goal is to:
- Develop the foundational Go library so that the customers (Go web developer)to deploy web app.
- ☑️ - Power on with
ExperimentingGoWASMGo workspace withvendor/hestiaGoandvendor/presentoGopackages. - ☑️ - Develop Monteur's test, build, package, and releaserecipes for GoWASM.
- Develop baseline foundation for using GoWASM.
- ☑️ - Develop
<body>manipulations directly in GoWASM(output). - ☑️ - Develop
<body>manipulations directly in GoWASM (input). - ☑️ - Develop
<body>manipulations directly in GoWASM(event-driven). - ☑️ Explore and conclude the necessity of usingTinyGo.
- ☑️ - Power on with
- Develop client-side rendering capability usingHugo forcost reduction between the server sides and the end-user sides.
- ☑️ - Power on with Presento Theme with NoCSS but renderingcapabilities.
- ☑️ - Develop necessary partial functions to isolate Hugo's riskyfunctions and also to prevent supply-chain vendor locked-in wheneverpossible.
- ☑️ - Develop plain HTML+Javascript pages necessary to bring upGo-WASM.
- ☑️ - Power on Go-WASM+HTML+Javascript on Hugo.
- ☑️ - Deploy Gunzip against Go-WASM to reduce its size withMonteur.
- ☑ - Develop necessary foundation for Go-WASM client-side rendering.
- Develop the necessary CSS/Sass frontend rendering libraries to keep thefoundation reasonably and visually appealing at minimum.
- ☑️ - Analyize (1) and (2) to see exactly where to develop theCSS/Sass and why. Make sure it's documentable.
- ☑ - Develop the core component to render the page without devicescreen locking.
- Use scalable tools that can roll out updates for multiple technologiesmodularly and without much fears.
- ☑️ - deployed ZORALab's Monteur to manage the repositorysystematically, customizable at scale.
- ☑️ - deployed Hugo Themes module to manage Hugo specific andscalable setup.
Here are the list of 3rd-party dependencies used so far:
- ZORALab's Monteur -https://monteur.zoralab.com
- Go -https://go.dev
- Hugo -https://gohugo.io/
- GolangCI-Lint -https://golangci-lint.run/
- TinyGo -https://tinygo.org/docs/guides/webassembly/
After decent research, it was found that many network CDN and load balancerservice providers (e.g. CloudFlare) automatically serves the content incompressed mode with GZip or Brotil (seehttps://support.cloudflare.com/hc/en-us/articles/200168396-Does-Cloudflare-compress-resources-).
For self-hosting CDN servers like Nginx or Apache, they already are servingcompression executions when enabled(see:https://docs.nginx.com/nginx/admin-guide/web-server/compression/).
Hence, there is no need to worry about manual compression.
To determine where pure-Go WASM rendering to serve, a detailed scan throughof how consumption behavior affects the web technologies and how it serves.
Here, we look into what and how consumptions influences the web languages:
| Available Formats | Caused By | Content By | Designed By | Behavior By |
|---|---|---|---|---|
html,css,js | normal use | html | css | js |
html,css | js-block | html | css | css |
html,css | ad-block | html | css | css |
html,js | React-type | html | js | js |
html,js | Angular-type | html | js | js |
js | single-page | js | js | js |
html | baremetal | html |
Conclusion for Designing Pure-Go WASM Library
- The UI library must be capable of generating its necessary HTML content codes.
- The UI library must be capable of generating its necessary CSS styling codes.
- The CSS codes MUST be flexible for various deployments notably as:
- inline HTML
- as
cssfile (external) - inside
js - as inline
css(inside HTML) jsrendering codes.
- The CSS codes MUST be flexible for various deployments notably as:
- The content codes must be flexible enough to store in both
htmlandjsformats. - the behavior part is split into 2 parts:
- UI related behavior (e.g. bouncing, dancing, etc) shall be handled solelyby
css. - Data processing or routing (e.g. trigger loading screen, transmittingsubmission to server, etc) should be solely handled by
js.
- UI related behavior (e.g. bouncing, dancing, etc) shall be handled solelyby
- The UI library MUST leverage the compiler's unused code shedding capability forany of the user choice of output.
Here, we look into different UI tech availability for rendering the a display output:
Conclusion:
- The UI packageMUST leave room for horizontal scaling outside ofweb technologies alone.
- The packageMUST be a factory of similar design to generate thetechnology specific codes while allowing the compiler to shed unusedones seamlessly.
Here, we look into different devices rendering the same content page:
Conclusion:
- UI library web rendering SHALL NOT DEPENDS on device-orientedmedia query breakpoint.
- Any media querySHALL be oriented to the design module with itsown definitions of breakpoint indepnendent of device dimension.
- As the hardware industry rolls out odd screen sizes,there is aneed to develop a new approach to avoid breakpoint dimension wheneverpossible.
- All media tags (e.g. images, videos, etc) shall have pixel densityawareness.
Here are the tracking issues critical to the research success:
- Tinygo WASM Memory Leak (first detected after implementing Chain kernelexample) -tinygo-org/tinygo#1140
- Go WASI Implementation (first detected near experimentation conclusion)
The FIRST technology chosen wasZORALab's Monteurto manage the repository development continuously and controls with confidenceswhen deploying the repository in a decentralized manner.
The first step you need to do would be installing Monteur as per instructed intheir official website.
Once themonteur program is available, proceed to your own copy and perform:
$ monteur setup
Monteur shall setup all the repository's dependencies and configurationsseamlessly. Repeat thismonteur setup command whenever there is an update fromMonteur Setup Job recipes OR something went wrong with the current setup inyour repository.
The second step is to bring up your local development. Monteur setup localfilesystem inside the repository. Hence, whenever you open a new terminal towanting to develop this repository, simply do the following:
$source .monteurFS/config/mainOnce done, the terminal you're in is now configured to be repository specific.You're now ready to develop the repository. All instructions beyond this stepassumes you always this step.
NOTE
Whenever you find any software that is missing in action, you're likelyforgotten this step.
The SECOND technology selected washugo for simple static site generations.The repository is designed in a way that it can operate in offline or badconnectivity environments. To do that, execute:
.configs/hugo/server.cmdOnce done, please visit the URL site presented in the terminal. The defaultis:http://localhost:8080
If you need to work on something else, you need to setup a new terminal again.
The THIRD technologies selected werego andgolangci-lint for theirsimplicity and portability sake. In order to work on the Go project, you needto open a new terminal, perform the Step (2) for it, and then change directoryintowasmExpGo. That is the root location of the Go source codes and itsworkspace.
cd wasmExpGoWhile the workspace is for this repository, the file structures are arrangedinto 3 different Gomodules:wasmExpGo,hestiaGo, andpresentoGo. Theminimal file structure is as follows:
.├── app│ └── wasm│ └── main.go├── go.mod├── hestiaGo│ ├── go.mod│ └── version.go└── presentoGo ├── go.mod └── version.goEach module has its specific roles to prevent vendor locked-in threat whilemaintaining Go's quality in package modularlities. They key roles are:
wasmExpGo- the repository specific packages.hestiaGo- the common library packages that will be upstreamed to:https://github.com/ZORALab/HestiapresentoGo- the frontend UI rendering packages that will be upstreamed to:https://github.com/ZORALab/Presento
To prevent supply-chain nightmare from affecting any project,go.mod plays acritical role here to make sure all the source codes know where to find thepackages.
Generally speaking, all import statementsSHALL use thereplace clauseto denote its sourcing navigations. Here is a simple example:
// Copyright 2022 "Holloway" Chew, Kean Ho <hollowaykeanho@gmail.com>//// 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.package mainimport ("fmt""hestiaGo""presentoGo")func main() {fmt.Printf("Hello World\n")fmt.Printf("Hestia Version: %s\n", hestiaGo.VERSION)fmt.Printf("Presento Version: %s\n", presentoGo.VERSION)}Notice that bothhestiaGo andpresentoGo are not imported usinggithub.com/hollowaykeanho/.... Instead, they are using their navigator.
Then inwasmExpGo'sgo.mod, it has replace clauses as follows:
module github.com/hollowaykeanho/ExperimentingGoWASM/wasmExpGogo 1.18replace (github.com/hollowaykeanho/ExperimentingGoWASM/wasmExpGo => ./hestiaGo => ./hestiaGopresentoGo => ./presentoGowasmExpGo => ./)Themodule clause remains as default since we want to maintaingo getcapability. However, in source codes, we usewasmExpGo instead just like theother 2.
Then, in each 3rd-party libraries, their modules are in accordance to theirrespectivego.mod settings:
module https://github.com/ZORALab/Hestia/hestiaGogo 1.18replace (github.com/ZORALab/Hestia/hestiaGo => ./hestiaGo => ./)With Monteur Test CI Job made available, given the correct recipe, Monteurcan perform either pinpoint or recursive testing against Go packges. All theuser needs to do is:
$ monteur testAnd then all the necessary result data files are generated into the packagedirectory itself.
With Monteur Build CI Job made available, given the correct recipe, Monteurcan peform percise Go build in a reproducible manner. All the user needs to dois:
$ monteur buildWith Monteur Package CI Job made available, given the correct recipe, Monteurcan peform proper packaging in a reproducible manner. All the user needs to dois:
$ monteur packageWith Monteur Release CI Job made available, given the correct recipe, Monteurcan peform proper manage the Go WASM systematically. All the user needs to dois:
$ monteur releaseAt this point, Go development is considered completed.
With Monteur Compose CI Job made available, given the correct recipe, Monteurcan properly compose Hugo's website artifact for web publications. All the userneeds to do is:
$ monteur composeAt this point, Hugo development is considered completed.
With Monteur Publish CI Job made available, given the correct recipe, Monteurcan properly publish the composed website artifact to the public. All the userneeds to do is:
$ monteur publishAt this point, the development is considered deployed.
The repository is licensed under MIT License.