jjst

Javascript and CSS Runtime Aggregation Compilation Web Filters

What does this do?

• Aggregates and delivers Javascript sources into a single file at runtime
• So your aggregation works the same way for dev, test, prod
• Compiles the aggregated file using clojure
• Caches the result if you want it to (if compiling - you want this)
• Injects information, such as variables and constants at runtime
• Does mostly the same stuff for CSS

Why would I want this?

Compiling and then caching aggregated content at runtime means you can

• Have exactly the same process run during development as you have in TEST and PROD
• Can inject information (such as variables and constants) at runtime in each environment
• Can dynamically enable or disable features using a pragma style profiles
• Using bare bones simple #includes you can aggregate all your dependencies javascript or css together
• Which is easy for anyone to understand
• Easily controls dependency and execution order
• Don't need any special "file system watcher" in your build system
• Everything works the same way in every environment
• Can cache the result for performance in PROD environments

Is there a working sample project that uses this?

on the way

How do I use this?

Add this dependency

 <dependency>
            <groupId>tech.rsqn</groupId>
            <artifactId>jjst</artifactId>
            <version>1.0.4</version>
 </dependency>

Add these servlets to your web xml.

    <servlet>
        <servlet-name>jjs</servlet-name>
        <servlet-class>tech.rsqn.utils.jjst.servlets.JavascriptAggregationServlet</servlet-class>
        <async-supported>false</async-supported>
        <init-param>
            <param-name>baseProfiles</param-name>
            <param-value>nocache,nocompile</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>jjs</servlet-name>
        <url-pattern>/js/*</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>cssAggregation</servlet-name>
        <servlet-class>tech.rsqn.utils.jjst.servlets.CssAggregationServlet</servlet-class>
        <async-supported>false</async-supported>
        <init-param>
            <param-name>baseProfiles</param-name>
            <param-value>nocache,nocompile</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>cssAggregation</servlet-name>
        <url-pattern>/css/*</url-pattern>
    </servlet-mapping>

Create a javascript file under /js/ in the root of your webapp

    console.log('hello');

Add your script tag relative to the root of your webapp

    <script src="/js/index.js?profiles=this_is_an_example"></script>

How do I?

Aggregate multiple javascript files ?

index.js ->

import {mylib} from 'libs/mylib.js'
import {myapp} from 'apps/myapp.js'

Use profiles ?

    <script src="/js/index.js?profiles=say_hello"></script>   

    console.log('one');
    #ifprofile sayhello
      console.log('hello');  // its better to actually do an #include here
    #endif
    console.log('two');

Prevent Caching and or Compilation ?

    <script src="/js/index.js?profiles=nocache,nocompile"></script>   

Include environment variables in the output ?

    var myConstant ='${SOME_ENV_VAR}';
    console.log('myVar is ' + myConstant );

Try the sample?

mvn tomcat7:run

Aggregate without compile

http://localhost:8080/ or http://localhost:8080/helloworld_nocomile.html

Aggregate with compile

http://localhost:8080/helloworld_comile.html