https://github.com/hexresearch/reflex-material-bootstrap
GHCJS widgets for reflex-dom and material bootstrap
https://github.com/hexresearch/reflex-material-bootstrap
Last synced: about 1 month ago
JSON representation
GHCJS widgets for reflex-dom and material bootstrap
- Host: GitHub
- URL: https://github.com/hexresearch/reflex-material-bootstrap
- Owner: hexresearch
- License: mit
- Created: 2017-07-13T13:34:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-11T13:30:33.000Z (over 7 years ago)
- Last Synced: 2025-04-04T21:39:47.560Z (2 months ago)
- Language: Haskell
- Size: 406 KB
- Stars: 10
- Watchers: 15
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
reflex-material-bootstrap
=========================
This is factored out library of generic frontend widgets that are used in HexResearch projects. The library is built around
[reflex-dom](https://github.com/reflex-frp/reflex-dom) and [Bootstrap Material](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html).
GHCJS configuration
===================
Checked configuration for stack:
``` yaml
resolver: lts-8.11
compiler: ghcjs-0.2.1.9008011_ghc-8.0.2
compiler-check: match-exact
setup-info:
ghcjs:
source:
ghcjs-0.2.1.9008011_ghc-8.0.2:
url: https://github.com/hexresearch/ghcjs-stack-dist/raw/master/ghcjs-0.2.1.9008011.tar.gz
sha1: a72a5181124baf64bcd0e68a8726e65914473b3b
packages:
- '.'
- '../../reflex-material-bootstrap'
- '../reports-manager-api'
- location:
git: https://github.com/NCrashed/ghcjs-base
commit: 89c2d2fd9683fe31efac585c58d1cd909a65ba88
extra-dep: true
- location:
git: [email protected]:reflex-frp/reflex.git
commit: 50305c797c41a27660b74f543e204e902c086bbf
extra-dep: true
- location:
git: [email protected]:reflex-frp/reflex-dom.git
commit: 2bc47782128a9c71222816afca407997d47f043a
extra-dep: true
subdirs:
- reflex-dom
- reflex-dom-core
- location:
git: [email protected]:ghcjs/ghcjs-ffiqq.git
commit: b52338c2dcd3b0707bc8aff2e171411614d4aedb
extra-dep: true
extra-deps:
- aeson-1.2.1.0
- cabal-doctest-1.0.2
- dependent-sum-template-0.0.0.6
- ghcjs-dom-0.8.0.0
- ghcjs-dom-jsffi-0.8.0.0
- jsaddle-0.8.3.2
- prim-uniq-0.1.0.1
- ref-tf-0.4.0.1
- zenc-0.1.1
```
* Tip: use `ghc-options: -dedupe -O2` to reduce size of resulted JS blob.
* Tip: for production use Google Closure compiler with settings:
``` bash
# Copy application JS blob
cp $(stack path --local-install-root)/bin/.jsexe/{all.js,all.js.externs} .
# Copy all raw JS dependencies to not let optimizer to break your code
cp ../-server/static/jquery-1.9.1.js .
cp ../-server/static/bootstrap/js/bootstrap.min.js .
cp ../-server/static/bootstrap/js/material.min.js .
cp ../-server/static/bootstrap/js/ripples.min.js .
# Compile with aggressive optimizations and turned off duplicate/undefined errors
ccjs all.js --compilation_level=ADVANCED_OPTIMIZATIONS \
--externs=node \
--externs=all.js.externs \
--externs=bootstrap.min.js \
--externs=material.min.js \
--externs=ripples.min.js \
--jscomp_off=duplicate \
--jscomp_off=undefinedVars \
> all.min.js
```
This tears down 12 MB JS bundle to 1 MB and then you can transfer it with enabled gzip on server.
That leads to 600 KB transferred to customer instead of original 12 MB.
Index page that is checked to be operational:
``` HTML
My page
$(document).ready(function(){
$.material.init();
});
```