Single Page JavaScript WebApps... A Gradle Story

2,647 views
2,489 views

Published on

From MelbJVM July 2014
This presentation covers building single page web applications with Gradle, including why we chose to use Gradle instead of a more commonly used JS based build tool, and the benefits by integrating a JS webapp into the JVM environment.

Published in: Software, Technology, Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,647
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • Initially app was only JavaScript client talking directly to the datasource. Users auth’d with BigQuery directly
  • So people usually ask when I tell them we used Gradle to make a single page web app , why not Grunt or Gulp, or whatever else is fancy and in vogue?

    Dream of being a JS hipster aka Instant Gratification Monkey
    Now the chance to learn all the cool stuff
    Angular
    Grunt
    Bower

    I took this picture from a site
    There is a project called JHipster that combines Maven, Grunt & Spring MVC, AngularJS with Yeoman. A few weeks ago it had a minor release that added Gradle support.
    JHipster is a Yeoman generator, used to create a Maven + Spring + AngularJS project, with full hot reload of Java and JavaScript code.

    Yeoman needs npm, so does grunt so still a fail for us. But going in the right direction.
  • JavaScript has been climbing the tree of software development tools, then reaching the top and falling, taking every branch on the tree down.
  • So far we’ve just got some cookie cutter setup for the first version
    You can see pretty simply, the html, js and css driving the show
    But we’ve got this libs folder…
  • Our dependencies bring in their own things into the mix.
    Bootstrap has 3 resources folders, css, js and fonts directories
    Holder and Jquery bring in their js libs.
    Most libraries provide both minified and regular versions of their libs
    Some have map files that we may want to deploy with the minified versions so we can debug in chrome/firefox
    And just for the fun of it, bootstrap decides to include fonts
    And this build.gradle file just seems out of place in the web folder
  • GASP SHOCK HORROR! Find Sound Effects and Clip art (eg 1950’s woman with hands around mouth). Sound effects of screams, shrieks

    In todays talk we’ll build from the ground up an application to interact with a RESTful API
    To start with, we’ll use Twitter Bootstrap’s dashboard theme
  • For learning Gradle using another language is a great experience
  • For learning Gradle using another language is a great experience
  • For learning Gradle using another language is a great experience
  • Notice the gz is only 438 bytes
  • And proof
  • show build-tomcat.gradle
  • build-webserver.gradle
  • ScriptRunnerServlet
  • Single Page JavaScript WebApps... A Gradle Story

    1. 1. Single Page JavaScript WebApps A Gradle Story Kon Soulianidis MelbJVM July 2014
    2. 2. This talk is about Our App Why we picked Gradle Gradle Plugins for JS / CSS Organising your Build Taking advantage of Java Features
    3. 3. They Who Built The Proof of Concept that Grew
    4. 4. 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
    5. 5. Libraries JQuery Bootstrap Google API’s JS libraries Google Charts & Visualisations API
    6. 6. 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
    7. 7. Image Source: JHipster.github.io
    8. 8. 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…
    9. 9. 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:
    10. 10. 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.
    11. 11. So much for being a hipster Image Source Photobucket
    12. 12. JS - Climbing the development tools tree, Taking each branch on the fall down
    13. 13. 1984
    14. 14. 1984
    15. 15. The Big G
    16. 16. Gradle CSS & JS Plugins Eric Wendelin Gradle JS Plugin Gradle Css Plugin Google Closure Compiler Yahoo UI Compressor
    17. 17. Getting Started apply plugin: 'js' apply plugin: 'css' // then add some dependency and build script dependencies
    18. 18. 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' } }
    19. 19. 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' } }
    20. 20. plugins.gradle.org
    21. 21. plugins.gradle.org
    22. 22. If something doesn't work take a look at issues and pull requests in Github Support
    23. 23. 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
    24. 24. Ok we are setup, now what? Combination, Minification GZipping
    25. 25. Project Layout
    26. 26. Old Fashioned Download dependencies From the internet Manually!
    27. 27. CSS Lets combine and minify our CSS
    28. 28. CSS // Declare your sources css.source { dev { css { srcDir "app/styles" include "*.css" exclude "*.min.css" } } }
    29. 29. 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" }
    30. 30. CSS minifyCss { source = combineCss dest = "${buildDir}/all-min.css" yuicompressor { // Optional lineBreakPos = -1 } }
    31. 31. CSS gzipCss { source = minifyCss dest = "${buildDir}/all.min.css.gz" }
    32. 32. 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
    33. 33. 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
    34. 34. 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
    35. 35. 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}
    36. 36. 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
    37. 37. 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
    38. 38. 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 $
    39. 39. 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") }
    40. 40. Configuring Sources
    41. 41. 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] } }
    42. 42. 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
    43. 43. 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;
    44. 44. if (MY_DBUG_FLAG) { $('.dashboard').append( '&lt;p&gt;Here's some dev info you wouldn't normally see&lt;/p&gt;' ); }
    45. 45. Gzip gzipJs { source = minifyJs.dest dest = file(“${buildDir}/all.min.js.gz”) }
    46. 46. Chain Together tasks.minifyJs.dependsOn tasks.combineJs tasks.gzipJs.dependsOn tasks.minifyJs
    47. 47. Break It Down Multiple Project Builds
    48. 48. Break It Down
    49. 49. Referenced from build.gradle
    50. 50. Deploy to a Container
    51. 51. Use Tomcat Plugin
    52. 52. Run Tomcat PrintGCTimeStampsPrint
    53. 53. Your Own Tasks Write your own tasks to change code
    54. 54. Head.js or direct script include in different environments
    55. 55. –Johnny Appleseed “Type a quote here.”PrintGCTimeStampsPrint
    56. 56. Bringing Java Back
    57. 57. Servlet Security Demo
    58. 58. –Johnny Appleseed “Type a quote here.”PrintGCTimeStampsPrint
    59. 59. Grunt
    60. 60. Remember! Gradle works for building HTML/ JS / CSS assets Embedded Server from Checkout End 2 End Visibility Proxies
    61. 61. 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

    ×