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 npm http GET https://registry.npmjs.org/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 kon@Kostas-MBP ~/Projects/gradle-summit- presentation $ ls build/ ./ ../ all.css

CSS Minify In Action kon@Kostas-MBP ~/Projects/gradle-summit- presentation $ gradle minifyCss :combineCss UP-TO-DATE :minifyCss BUILD SUCCESSFUL Total time: 3.545 secs

CSS Minify In Action kon@Kostas-MBP ~/Projects/gradle-summit- presentation $ gradle minifyCss :combineCss UP-TO-DATE :minifyCss BUILD SUCCESSFUL Total time: 3.545 secs kon@Kostas-MBP ~/Projects/gradle-summit- presentation $ ls build ./ ../ all-min.css all.css

CSS Minify In Action kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ gradle minifyCss :combineCss UP-TO-DATE :minifyCss BUILD SUCCESSFUL Total time: 3.545 secs 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 kon@Kostas-MBP ~/Projects/gradle-summit- presentation $ gradle gzipCss :combineCss UP-TO-DATE :minifyCss UP-TO-DATE :gzipCss BUILD SUCCESSFUL Total time: 4.881 secs

gzipCss kon@Kostas-MBP ~/Projects/gradle-summit-presentation $ gradle gzipCss :combineCss UP-TO-DATE :minifyCss UP-TO-DATE :gzipCss BUILD SUCCESSFUL Total time: 4.881 secs 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 :combineCss UP-TO-DATE :minifyCss UP-TO-DATE :gzipCss BUILD SUCCESSFUL Total time: 4.881 secs 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

More Related Content

What's hot

Viewers also liked

Similar to Single Page JavaScript WebApps... A Gradle Story

Recently uploaded

Single Page JavaScript WebApps... A Gradle Story

Editor's Notes