ClojureScript and multi-page website

[J David Eisenberg]

I'm working on a web site which, for various reasons, achieves its purpose best with multiple pages rather than as a single-page app. All the pages will need to share some code in common.

In a plain vanilla JS environment, I could do something like this on page1.html:

<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="page1.js"></script>

and something similar on page2.html (with <script> tags for common.js and page2.js)

I want to achieve a similar effect using ClojureScript. I'm pretty sure I could make a ClojureScript project for the common code and do a "lein install", thus enabling me to put [com.langintro/common-code "0.0.1"] in my dependencies.

If I make separate projects for page1 and page2, they will each have their own copy of the common code.

If I have a single project "all-pages" with files page1.cljs and page2.cljs and corresponding namespaces (ns all-pages.page1) and (ns all-pages.page2), then I'll have only one copy of the common code. However, each <script> element at the end of page1.html and page2.html has to act like the <script> at the end of a typical page that references the JavaScript generated by core.cljs (the "main" function), and I'm not sure how to achieve that effect.

This: http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html looks as if it has the answer, but I'm just not making the correct connection.

[Francis Avila]

I think what you want are multiple Google Closure modules: http://swannodette.github.io/2015/02/23/hello-google-closure-modules/

Make a single project for all pages, place each page's entry point into a separate namespace and an independent module, and then on each html page include the common module followed by the page-specific module. The Closure (not cloJure!) compiler will work out the js dependency graph and move code among the files optimally so you only have as much javascript per page as you need.

This technique also works great with websockets: have browser-thread entrypoints in their own module and websocket entry points in another module. If you make sure the websocket entry points can't reach code that uses browser objects (like document or window) everything will Just Work.

[J David Eisenberg]

On Friday, February 26, 2016 at 2:52:28 PM UTC-8, Francis Avila wrote:
> I think what you want are multiple Google Closure modules: http://swannodette.github.io/2015/02/23/hello-google-closure-modules/
>
> Make a single project for all pages, place each page's entry point into a separate namespace and an independent module, and then on each html page include the common module followed by the page-specific module. The Closure (not cloJure!) compiler will work out the js dependency graph and move code among the files optimally so you only have as much javascript per page as you need.
>
> This technique also works great with websockets: have browser-thread entrypoints in their own module and websocket entry points in another module. If you make sure the websocket entry points can't reach code that uses browser objects (like document or window) everything will Just Work.

Thank you; it seems that this will do what I want, and the article about it arrived JIT. :)

[Francis Avila]

Don't forget the reference documentation: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to a topic in the Google Groups "ClojureScript" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/clojurescript/7OnI9IsORio/unsubscribe.
To unsubscribe from this group and all its topics, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[Francis Avila]

And obviously when I said "websockets" above I meant "webworkers"!

[J David Eisenberg]

On Friday, February 26, 2016 at 5:30:45 PM UTC-8, Francis Avila wrote:
> And obviously when I said "websockets" above I meant "webworkers"!

It works just great; thanks. Sadly, it doesn't seem to be compatible with figwheel, as figwheel requires :optimizations :none, but :modules requires :optimizations :simple

[Thomas Heller]

If you want you can try shadow-build. It supports modules all the way (ie. :none). It has some figwheel-ish features (REPL, live-reload) but basically no documentation, so a little patience is required. It is pretty simple, just very different from other build tools.

See:
https://github.com/thheller/shadow-build
https://github.com/thheller/shadow-build-example

Happy to help if you have any questions.

Cheers,
/thomas