<commit_before><!--- .slide data-background="images/clojure-logo.png" -->

# Server-Side Rendering
<!-- <img src="images/clojure-logo.png" class="no-style"/> -->

Note:
- prepare trello board
- make sure JS is not deactivated on the picsou page

-----

### Some context: Single page application (SPA)

Offers more interactivity than static pages

Dynamically fetch and display content

Manipulates its own **routes/URLs**

Note:
The back button works in good SPAs!

-----

### The tradeoffs

First rendering is slow:  
download JS -> interpret JS (-> fetch data) -> render

SEO is really tricky for dynamic content

-----

### Even worst for Clojurescript

Generated JS payloads get big real fast (even with advanced optimizations and dead code elimination).

<svg style="vertical-align: middle" height="60" version="1.1" viewBox="0 0 12 16" width="45"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
[chpill/cljs-weight](https://github.com/chpill/cljs-weight)


-----

|                          | JS   | GZIP |
|--------------------------|------|------|
| (js/alert "hello world") | 5K   | 2K   |
| 1 core.async channel     | 105K | 24K  |
| 1 clojure.spec spec      | 116K | 26K  |
| client routing           | 157K | 37K  |
| 1 Rum view               | 270K | 72K  |
| core async + websockets  | 480K | 116K |
|--------------------------|------|------|
| all together             | 680K | 175K |


-----

### Extreme case: web front-end of CircleCI

Project stats:  <commit_msg>WIP adding content on DCE issues<commit_after><!--- .slide data-background="images/clojure-logo.png" -->

# Server-Side Rendering
<!-- <img src="images/clojure-logo.png" class="no-style"/> -->

Note:
- prepare trello board
- make sure JS is not deactivated on the picsou page

-----

### Some context: Single page application (SPA)

Offers more interactivity than static pages

Dynamically fetch and display content

Manipulates its own **routes/URLs**

Note:
The back button works in good SPAs!

-----

### The tradeoffs

First rendering is slow:  
download JS -> interpret JS (-> fetch data) -> render

SEO is really tricky for dynamic content

-----

### Even worst for Clojurescript

Generated JS payloads get big real fast

<svg style="vertical-align: middle" height="60" version="1.1" viewBox="0 0 12 16" width="45"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
[chpill/cljs-weight](https://github.com/chpill/cljs-weight)


-----

|                          | JS   | GZIP |
|--------------------------|------|------|
| (js/alert "hello world") | 5K   | 2K   |
| 1 core.async channel     | 105K | 24K  |
| 1 clojure.spec spec      | 116K | 26K  |
| client routing           | 157K | 37K  |
| 1 Rum view               | 270K | 72K  |
| core async + websockets  | 480K | 116K |
|--------------------------|------|------|
| all together             | 680K | 175K |

-----

### A parenthesis about "Dead Code Elimination"

Did you know that a map literal with more than 8 keys cannot be DCE?

```
(def unused-big-literal-map
  {:1 "I am not used anywhere. SEARCH ME!!"
   :2 2
   :3 3
   :4 4
   :5 5
   :6 6
   :7 7
   :8 8
   :9 9})
```

-----

![Ouch...](images/SEARCH-ME.png)

-----

### More details about the pitfalls of DCE

<svg style="vertical-align: middle" height="60" version="1.1" viewBox="0 0 12 16" width="45"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
[binaryage/cljs-devtools issue #37](https://github.com/binaryage/cljs-devtools/issues/37)


-----

-----

### Extreme case: web front-end of CircleCI

Project stats:  
{'fraction_non_alphanumeric': 0.18684274883834678, 'fraction_numerical': 0.09977989728539985, 'mean_word_length': 2.436974789915966, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1107453', 'n_tokens_mistral': 1799, 'n_tokens_neox': 1596, 'n_words': 399}