<commit_before># Seamless Integration in sprocketjs

Two images are worth a thousand words.

**Development**

![2014-06-17 11 14 11](https://cloud.githubusercontent.com/assets/922234/3295916/8ce5484c-f5cd-11e3-98d9-9c9535c1c0d6.png)

**Production**

![2014-06-17 11 16 44](https://cloud.githubusercontent.com/assets/922234/3295928/d6ae0eaa-f5cd-11e3-8f28-5e39dcdb90de.png)


## What does sprocketjs do in development?

First, it resolves dependencies of all files that are passed in to sprocketjs stream. Since we can build a dependency graph based on this, it's easy to generated a ordered list of files based on the triversal of the graph.

The ordered list then later outputted to the html, generating `script/style` tags. The resulting html looks just like you're writting `script/style` tags yourself. But by declaring your dependencies explicitly, you and your team would never have to bother on this anymore.

Just require it, and it works.


## What does sprocketjs do in production?

For production, sprocketjs will automatically do these for your assets:

1. minification (uglifyjs, csso)
2. concation
3. versioning and renaming

**Minification** will apply best practices in [MinifyResources @ Google PageSpeed](https://developers.google.com/speed/docs/insights/MinifyResources). This will dramitically reduce the size of code but don't affect any functionality. And you never and should't write the code with ugly naming like `a, b, c` just to reduce size. Let sprocketjs handles that.


**Concation** of assets files would remove many small HTTP calls, saving the precious time of your consumer.

**Versioning and renaming** is applying best practices in [LeverageBrowserCaching @ Google PageSpeed](https://developers.google.com/speed/docs/insights/LeverageBrowserCaching). We're using MD5 hash from the file content, and postfixed it to the end of the filename. By doing this, you can set a maximun expiration date of your assets and leverage the best of browser cache.
<commit_msg>docs(Seamless Integration): update imgs and add headers<commit_after># Seamless Integration in sprocketjs

Two images are worth a thousand words.

**Development**

![2014-06-27 12 33 04](https://cloud.githubusercontent.com/assets/922234/3401423/3c719200-fd50-11e3-96b8-52af187f7006.png)

**Production**

![2014-06-27 12 34 11](https://cloud.githubusercontent.com/assets/922234/3401425/3de9f6e0-fd50-11e3-8452-f6661c556eed.png)


## What does sprocketjs do in development?

First, it resolves dependencies of all files that are passed in to sprocketjs stream. Since we can build a dependency graph based on this, it's easy to generated a ordered list of files based on the triversal of the graph.

The ordered list then later outputted to the html, generating `script/style` tags. The resulting html looks just like you're writting `script/style` tags yourself. But by declaring your dependencies explicitly, you and your team would never have to bother on this anymore.

Just require it, and it works.


## What does sprocketjs do in production?

For production, sprocketjs will automatically do these for your assets:

1. minification (uglifyjs, csso)
2. concation
3. versioning and renaming

### Minification
Minification will apply best practices in [MinifyResources @ Google PageSpeed](https://developers.google.com/speed/docs/insights/MinifyResources). This will dramitically reduce the size of code but don't affect any functionality. And you never and should't write the code with ugly naming like `a, b, c` just to reduce size. Let sprocketjs handles that.


### Concation
Concation of assets files would remove many small HTTP calls, saving the precious time of your consumer.

### Versioning and renaming
Versioning and renaming is applying best practices in [LeverageBrowserCaching @ Google PageSpeed](https://developers.google.com/speed/docs/insights/LeverageBrowserCaching). We're using MD5 hash from the file content, and postfixed it to the end of the filename. By doing this, you can set a maximun expiration date of your assets and leverage the best of browser cache.

{'fraction_non_alphanumeric': 0.07155109041901495, 'fraction_numerical': 0.047537368292085276, 'mean_word_length': 4.890331890331891, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 8, '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': '6787241', 'n_tokens_mistral': 1280, 'n_tokens_neox': 1141, 'n_words': 513}