Single Page JavaScript WebApps... A Gradle Story

Single Page JavaScript
WebApps
A Gradle Story
Kon Soulianidis
MelbJVM July 2014

This talk is about
Our App
Why we picked Gradle
Gradle Plugins for JS / CSS
Organising your Build
Taking advantage of Java Features

They Who Built
The Proof of Concept that Grew

Our App
Single page app
Choose reports to run, filter by an order or client
Query the endpoint, Google BigQuery Datastore
with language specific APIs for Java + JavaScript
Return interactive charts

Libraries
JQuery
Bootstrap
Google API’s JS libraries
Google Charts & Visualisations API

The PoC that Grew
Proof of Concept Successful
At this stage a couple of monolithic JS files held
together by a static html page
Time to think about some proper JS tooling

Image Source: JHipster.github.io

To market, to market, to become a JS-
Hipster
Set proxy
$ npm config set https-
proxy="https://NTLMREALMuser:pword@proxy.corp.com:8080/"
$ npm config set
proxy=“http://NTLMREALMuser:pword@proxy.corp.com:8080/"
Run Npm…
$ npm install npm
npm http GET https://registry.npmjs.org/npm
… Looks Promising…

Victory Snatched by the Jaws of
Defeat
But alas, our clients site hit a problem
npm ERR! Error: tunneling socket could not be
established,
cause=140230033848128:error:140770FC:SSL
routines:SSL23_GET_SERVER_HELLO:unknown
protocol:../deps/openssl/openssl/ssl/s23_clnt.c:766:

SSL23_GET_SERVER_HELLO:unkno
wn protocol
Stack overflow features many casualties across all
kinds of staple unix tools that use HTTPS
Solutions say configure tool or proxy to not verify
SSL (you like man in the middle vulnerabilities?)
In corporate IT at client site we can’t & wont do
this.

So much for being a hipster
Image Source Photobucket

JS - Climbing the
development tools
tree,
Taking each branch on the fall down

Gradle CSS & JS Plugins
Eric Wendelin
Gradle JS Plugin
Gradle Css Plugin
Google Closure Compiler
Yahoo UI Compressor

Getting Started
apply plugin: 'js'
apply plugin: 'css'
// then add some dependency and build script
dependencies

plugins.gradle.org
apply plugin: 'js'
apply plugin: 'css'
// define the dependencies gradle buildscript will use to build the app (not the app
itself)
buildscript {
repositories {
mavenLocal()
mavenCentral()
}
dependencies {
classpath 'com.eriwen:gradle-css-plugin:1.11.1'
classpath 'com.eriwen:gradle-js-plugin:1.11.1'
}
}

If something doesn't work take a look at issues and
pull requests in Github
Support

Gradle Tasks
Build tasks
-----------
combineCss - Combine many CSS files into one
combineJs - Combine many JavaScript files into one
gzipCss - GZip a given CSS file
gzipJs - GZip a given JavaScript file
lesscss - Compiles LESS files into CSS
minifyCss - Minify CSS using YUI Minifier
minifyJs - Minify JavaScript using Closure Compiler
props2js - Convert Java properties files for use with
JavaScript
requireJs - Run the r.js Optimizer to produce Require.js
output

Ok we are setup, now what?
Combination,
Minification
GZipping

Old Fashioned
Download dependencies
From the internet
Manually!

CSS
Lets combine and minify our CSS

CSS
// Declare your sources
css.source {
dev {
css {
srcDir "app/styles"
include "*.css"
exclude "*.min.css"
}
}
}

CSS
// Specify a collection of files to be combined, then
minified and finally GZip compressed.
combineCss {
source = css.source.dev.css.files
dest = "${buildDir}/all.css"
}

CSS
minifyCss {
source = combineCss
dest = "${buildDir}/all-min.css"
yuicompressor { // Optional
lineBreakPos = -1
}
}

CSS
gzipCss {
source = minifyCss
dest = "${buildDir}/all.min.css.gz"
}

Combine
kon@Kostas-MBP ~/Projects/gradle-summit-
presentation $ gradle combineCss
:combineCss
BUILD SUCCESSFUL
Total time: 5.812 secs
presentation $ ls build/
./ ../ all.css

CSS Minify In Action
presentation $ gradle minifyCss
:combineCss UP-TO-DATE
:minifyCss
BUILD SUCCESSFUL

presentation $ gradle minifyCss
:minifyCss
BUILD SUCCESSFUL
presentation $ ls build
./ ../ all-min.css all.css

kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ gradle minifyCss
:minifyCss
BUILD SUCCESSFUL
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ ls build
./ ../ all-min.css all.css
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ cat build/all-min.css
body{padding-top:50px}.sub-header{padding-bottom:10px;border-bottom:1px solid
#eee}.sidebar{display:none}@media(min-
width:768px){.sidebar{position:fixed;top:51px;bottom:0;left:0;z-
index:1000;display:block;padding:20px;overflow-x:hidden;overflow-y:auto;background-
color:#f5f5f5;border-right:1px solid #eee}}.nav-sidebar{margin-right:-21px;margin-bottom:20px;margin-
left:-20px}.nav-sidebar>li>a{padding-right:20px;padding-left:20px}.nav-
sidebar>.active>a{color:#fff;background-color:#428bca}.main{padding:20px}@media(min-
width:768px){.main{padding-right:40px;padding-left:40px}}.main .page-header{margin-
top:0}.placeholders{margin-bottom:30px;text-align:center}.placeholders h4{margin-
bottom:0}.placeholder{margin-bottom:20px}.placeholder img{display:inline-block;border-
radius:50%}.navbar{background-image:url('../images/gradle_small.png');background-position-
x:30%;background-repeat:no-repeat;background-size:contain}

gzipCss
presentation $ gradle gzipCss
:minifyCss UP-TO-DATE
:gzipCss
BUILD SUCCESSFUL

gzipCss
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ gradle gzipCss
:gzipCss
BUILD SUCCESSFUL
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ ls -la build
total 24
drwxr-xr-x 5 kon wheel 170 10 Jun 19:05 ./
drwxr-xr-x 12 kon wheel 408 10 Jun 18:51 ../
-rw-r--r-- 1 kon wheel 917 10 Jun 18:55 all-min.css
-rw-r--r-- 1 kon wheel 1539 10 Jun 18:51 all.css
-rw-r--r-- 1 kon wheel 438 10 Jun 19:04 all.min.css.gz

gzipCss
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ gradle gzipCss
:gzipCss
BUILD SUCCESSFUL
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ ls -la build
total 24
drwxr-xr-x 5 kon wheel 170 10 Jun 19:05 ./
drwxr-xr-x 12 kon wheel 408 10 Jun 18:51 ../
-rw-r--r-- 1 kon wheel 917 10 Jun 18:55 all-min.css
-rw-r--r-- 1 kon wheel 1539 10 Jun 18:51 all.css
-rw-r--r-- 1 kon wheel 438 10 Jun 19:04 all.min.css.gz
And Proof
kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ cat build/all.min.css.gz
pnK?i?Cċ?%?g?(?D2?C?X‫?5??]-??++-ڦ‬XvN???3Ci?q?Ԓc?Sn????$
(????i?a|oA ?mQ?/?a/ϯ????x
h4??Q$-?tI^(?C??&??QH???2?g1Ke?I?9????"=k??*Gƻ`??W?ҙN
Re????g??P6?j~ ??;?N?‫ݤ‬w.Ͳ????
?]
x??M?c>?J???x?4ʫ???E}]???~?ZV|?-G=l?{$ۣ ??????2??f?r???n??#?㩠1*"~8??q???+??U??sJ????{?q???r]D?
u?!??뜺???>???2r|??+E??7w?‫ؗ‬=?{??_ox??????<~??1???C???kon@Kostas-MBP ~/Projects/gradle-summit-presentation $

combine, minify, gzip JS
combineJs {
// pull together the source from string & file lists
// eg. def core = ["$webAppDirName/init.js",...]
source = core + application + devmode + bigquery +
javascript.source.externalLibs.js.files +
dfpFilters + chartdef + uxFilters
// show the resolved files when gradle is run with -d
source.each{ logger.debug ("$it") }
dest = file("${buildDir}/all.js")
}

MinifyJS
minifyJs {
source = combineJs
dest = file("${buildDir}/all.min.js")
sourceMap = file("${buildDir}/all.sourcemap.json")
closure {
warningLevel = 'QUIET'
compilerOptions.defineReplacements =
['MY_DEBUG_FLAG':false]
}
}

Closure Compiler Options
A bit hard to find them all. You can find them in a
source file in the Closure compiler project.
https://github.com/google/closure-
compiler/blob/master/src/com/google/javascript/jsc
omp/CompilerOptions.java

defineReplacements
// config.js
/**
* Flag to indicate console and extra logging
throughout the app
* @define {boolean} allow the value of this bool to be
* overwritten at closure compiler / minification
time
* @const
* @type {boolean}
*/
var MY_DBUG_FLAG = true;

if (MY_DBUG_FLAG) {
$('.dashboard').append(
'<p>Here's some dev info you wouldn't
normally see</p>'
);
}

Gzip
gzipJs {
source = minifyJs.dest
dest = file(“${buildDir}/all.min.js.gz”)
}

Chain Together
tasks.minifyJs.dependsOn tasks.combineJs
tasks.gzipJs.dependsOn tasks.minifyJs

Break It Down
Multiple Project Builds

Run Tomcat
PrintGCTimeStampsPrint

Your Own Tasks
Write your own tasks to change code

Head.js or direct script include in different
environments

–Johnny Appleseed
“Type a quote here.”PrintGCTimeStampsPrint

Remember!
Gradle works for building HTML/ JS / CSS assets
Embedded Server from Checkout
End 2 End Visibility
Proxies

Thanks
Blog goes into more detail
http://blog.shinetech.com/2014/03/19/javascript-webapps-
with-gradle/
Photos
Tom Botton - MelbJVM September
Brigitte Schuckert - Gradleware Keynote
Kon Soulianidis - Pisa & Monkey looking in lens
Climbing the Tree - Mary Evans. Licensed
Shipping Containers - Jim Bahn. Flickr. CC License
Animated Gifs - Photobucket
Duke, Grunt, Gradle logos, respective owners

Single Page JavaScript WebApps... A Gradle Story

Recommended

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Single Page JavaScript WebApps... A Gradle Story (20)

Recently uploaded (20)

Single Page JavaScript WebApps... A Gradle Story

Editor's Notes