Grooscript in Action

Unless otherwise indicated, these sl ides are © 2013-2015 Pivotal Software, Inc. and l icensed under a Creat ive Commons Attr ibut ion-NonCommercial l icense: ht tp: / /creat ivecommons.org/ l icenses/by-nc/3.0/

SPRINGONE2GXWASHINGTON, DC

Grooscript in ActionBy Jorge Franco Leza

@jfrancoleza


About me

2

[email protected]

mailto:[email protected]


Thank you!

3

3 years since first commit


Agenda• Introduction to grooscript• Convert your groovy code to javascript• Support• PhantomJs and tools• Gradle plugin• Demo• Grails plugin• Working with javascript• Require.js• Future

4


Introduction to grooscript• Library (jar)• Groovy 2.0+ to javascript ECMA 5• Apache 2 license• Source code http://github.com/chiquitinxx/grooscript• Converted code needs grooscript.js to run• Tools around: gradle and grails plugins, npm and bower packages• Documentation http://grooscript.org/doc.html• Demos http://github.com/chiquitinxx/grooscript-demos• Try live! http://grooscript.org/conversions.html

5

http://github.com/chiquitinxx/grooscript

http://grooscript.org/doc.html

http://github.com/chiquitinxx/grooscript-demos

http://grooscript.org/conversions.html


Why grooscript?• You have all java / groovy tools to create code in the client side.• Javascript is fast.• Enjoy javascript! Create your own magic.• Don’t repeat code in two languages, isomorphic code.• Use groovy templates everywhere.• Single development environment.• Stop learning “to javascript” things.• Static type if you want to.• But… mainly… because it is…

6


Groovy

7

Readable

Concise

Expressive


ASTS

8

@Component class Counter implements Colorable { Integer number void init() { number = null } void render() { div(class: "widget bg-${randomColor()}") { if (number) { p 'Number of books' em number.toString() a(href:"#", class:"button", onclick: 'bookPresenter.showBooks()') { yield 'Show' } } else { p 'Counting books...' } } } }

AST’sGetter / Setters


List and maps

9

def start() { def countries = loadCountries(). findAll { it.population > 100000}. unique { it.alpha3Code } countries.each { country -> customSigma.addNode id: country.alpha3Code,

x: country.latlng[1], color: ‘purple’ } countries.each { country -> country.borders?.each { border -> this.&hello(border) } } updateNumberCountries countries.size() customSigma.refresh()}

Lists and maps


DSL's

10

server { get('/') { render Templates.applyTemplate('index.gtpl') } on('login') { data, socket -> if (data.name && !socket.login) { socket.login = data.name socket.emit 'loginok', [name: data.name] socket.broadcast.emit 'loginok', [name: data.name] } } on('msg') { data, socket -> if (data.msg && socket.login) { socket.broadcast.emit 'msg', [msg: data.msg] } } on('disconnect') { socket -> if (socket.login) { socket.broadcast.emit 'off', [name: socket.login] } }}.start()

Dsl’s


Metaprogramming

11

class Hello { def methodMissing(String name, args) { println "Hello ${name}!" }}

def hello = new Hello()hello.Groovy()hello.Javascript()hello.grooscript()

Metaprogramming


Functional

12

def plus2 = { it + 2 }def times3 = { it * 3 }

def times3plus2 = plus2 << times3

assert times3plus2(3) == 11

def plus2times3 = times3 << plus2

assert plus2times3.curry(5)() == 21

Functional


Convert your groovy code to javascript

13

@Grab('org.grooscript:grooscript:1.2.0')

import org.grooscript.GrooScript

String result = GrooScript.convert ''' def sayHello = { println "Hello ${it}!" } ['Groovy','JavaScript','GrooScript'].each sayHello'''

new File(‘out.js’) << result


Convert your groovy code to javascript

14

Let’s see it in action




Conversion options• classpath• customization { -> ast(TypeChecked)}• initialText, finalText• recursive• mainContextScope [''$'', ‘'window'', ''myFunction'']• addGsLib• requireJsModule• consoleInfo• includeDependencies

15


Support• Groovy core• Classes, numbers, lists, maps, sets, date, ranges, closures, (g)strings,

operators, groovy truth, Expando, categories, traits, beans, switch, metaprogramming, enum, equals, multiple assignment, optional params, default constructor, pointer methods, operator overload, regular expressions, @Delegate, @Category, …

• Dsl’s. (@DelegatesTo)• Ast’s at semantic analysis phase.• Packaging in js with require.js.• Be groovier!

16


Not supported• Not groovy-core (json, builders, I/O, …)• Java / Groovy Types (Thread, LinkedHashMap, Stack, Optional, …) • Super except constructors.• Methods with same name (overload), classes with same name.• Java 8 stuff not supported by groovy• Module extensions, complex metaprogramming, groovy AST’s after Semantic

Phase

17


Annotations

18

import org.grooscript.asts.GsNotConvert

@GsNotConvertclass ClassNotConvert { def a}

class A {@GsNotConvertdef methodNoConvert() {

‘No!’}

def hello() {println ‘Hello!’

}}

import org.grooscript.asts.GsNative

class Data {@GsNativevoid saySomething(String smt) {/*

console.log(smt);*/}

@GsNativedef five() {/*

return 5;*/ 1 + 1 + 3}

}


PhantomJs test

19

@GrabConfig(systemClassLoader = true)@Grab(‘org.grooscript:grooscript:1.2.0’)

import org.grooscript.asts.PhantomJsTest

//Need phantomjs installedSystem.setProperty(‘PHANTOMJS_HOME’, ‘path/to/phantomjs’)

@PhantomJsTest(url = 'http://beta.groovy-lang.org/') void testCountLinks() { def links = $('a') assert links.size() > 40, "Number of links: ${links.size()}" links.toArray().collect { it.toString() }.each { link -> println link }}

testCountLinks()


Javascript libs• grooscript.js (87 kb) (8 kb minified and gziped)• grooscript.min.js (33 kb)• grooscript-tools.js (14 kb) (GQuery, HtmlBuilder, Observable)

20


HtmlBuilder

21

given:def result = HtmlBuilder.build { body { ul(class: 'list', id: 'mainList') { 2.times { number -> li number + 'Hello!' } } }}

expect:result == "<body><ul class='list' id=‘mainList'><li>0Hello!</li><li>1Hello!</li></ul></body>"


GQuery

22

import org.grooscript.jquery.GQueryImpl

def result = new Result()def gQuery = new GQueryImpl()gQuery.onReady { gQuery.doRemoteCall(“${JSON_ADDRESS}”, 'GET', null, { res -> gQuery('.result').html('OK') result = res }, { result = 'FAIL!' }, Result)}

https://github.com/chiquitinxx/grooscript/blob/master/src/main/groovy/org/grooscript/jquery/GQuery.groovy

https://github.com/chiquitinxx/grooscript/blob/master/src/main/groovy/org/grooscript/jquery/GQuery.groovy


Observable

23

given:def result = []Observable.from([1, 5, 9, 12, 3, 8]). filter { it < 5 }. map { 'H' * it }. subscribe { event -> result << event }

expect:result == ['H', 'HHH']

https://github.com/chiquitinxx/grooscript/blob/master/src/test/groovy/org/grooscript/rx/ObservableSpec.groovy

https://github.com/chiquitinxx/grooscript/blob/master/src/test/groovy/org/grooscript/rx/ObservableSpec.groovy


Gradle plugin• Starting guide http://grooscript.org/starting_gradle.html• Listen to changes and does conversions in background.• Groovy templates in the client side.• Can use with your grails 3+ application.• Create require.js modules.• Notification of changes using websockets.• Thread tasks can block execution.• Info about tasks http://grooscript.org/gradle/tasks.html

24

http://grooscript.org/starting_gradle.html

http://grooscript.org/gradle/tasks.html


task convertConvert groovy files to javascript. Can add conversion options.

25

grooscript { source = ['src/main/groovy'] destination = 'js'}

Unless otherwise indicated, these sl ides are © 2013-2015 Pivotal Software, Inc. and l icensed under a Creat ive Commons Attr ibut ion-NonCommercial l icense: ht tp: / /creat ivecommons.org/ l icenses/by-nc/3.0/ 26

task convertThread

grooscript { source = [‘src/main/groovy/presenters'] destination = 'js' classpath = ['src/groovy'] initialText = '//Converted file' recursive = true

blockExecution = true}

Listen to changes in groovy files, and convert them to javascript when modified. Can block gradle execution.


task initStaticWeb

"## build.gradle$## src $## main "## groovy % $## Presenter.groovy $## webapp "## index.html $## js "## app $## lib "## grooscript-tools.js "## grooscript.min.js $## jquery.min.js

Creates a static web project to starting play with grooscript.


task templatesJs

class Templates {

static Map<String, Closure> templates

static String applyTemplate(String name, model = [:]) { Closure cl = templates[name] cl.delegate = model cl(model) }}

Convert groovy templates to a javascript file.


task templatesThread

templates { templatesPath = 'templates' templates = ['main.gtpl', 'little/small.tpl'] destinationFile = 'js/Templates.js' classpath = ['src/groovy'] customTypeChecker = 'aCustomTypeCheckerFile.groovy'}

Listen to changes in groovy templates and generate a new javascript template file when something changes. Can block gradle execution.


task spyChanges

spy { files = ['Templates.js'] onChanges = { list ->

springWebsocketTo 'http://localhost:8080/demo' data 'templates' onChannel '/app/reload'

}}

Listen to file changes and execute groovy code when files change. Can send a message using websockets.


task requireJs

requireJs { sourceFile = 'src/main/groovy/MyApp.groovy' destinationFolder = 'src/main/resources/web/js/app'}

Convert groovy file to require.js javascript module. Also all dependencies are converted.


task requireJsThread

32

requireJs { sourceFile = ‘starting/InitialFile.groovy' classpath = ['src/main/groovy'] destinationFolder = ‘js/app'

blockExecution = true}

Listen to changes in groovy file or any dependency file, and generate require.js javascript modules when files change. Also can block execution.


Demo gradle books

More action

https://github.com/chiquitinxx/books-demo

https://github.com/chiquitinxx/books-demo


Grails plugin• A grails 2 version, 0.8 https://grails.org/plugin/grooscript.• Grails 3 version, version 1.1.2, documentation http://grooscript.org/grails3-

plugin.• Adding tags for your gsp’s.• Converting files with gradle plugin in grails 3+.• Using your domain classes in your gsp’s. *experimental*• Uses asset pipeline and cache plugins, also jquery for some tags.• Requires <asset:javascript src="grooscript-grails.js"/>• Events in your gsp's with groovy.• Websockets support using spring websockets.• Templating in your gsp’s with HtmlBuilder.

34

https://grails.org/plugin/grooscript

http://grooscript.org/grails3-plugin


grooscript:code

35

<grooscript:code> [‘groovy’, ‘javascript’].each {

println “Hello $it” }</grooscript:code>

<asset:script>… js code …

</asset:script>


grooscript:template

36

<grooscript:template onLoad=“false" functionName=“refreshList"> ul { data.each { book -> li { p 'Id: ' + book.id + ' Name: ' + book.title } } }</grooscript:template>


websockets

37

<grooscript:initSpringWebsocket> println 'Connected! Websocket is up!’ GrooscriptGrails.sendWebsocketMessage("/app/hello", “Hello!")</grooscript:initSpringWebsocket><grooscript:onServerEvent path="/topic/books" type="Book"> data.each { book -> $("#helloDiv").append '<p>'+book.coolFormat()+'</p>' }</grooscript:onServerEvent>

Use spring websockets in your gsp’s. Have to include client libraries.


events

38

<grooscript:code> $(document).ready { def eventData = 'Application started.' gsEvents.sendMessage('newEvent', eventData) gsEvents.onEvent('delete', { book -> $('#deleteEvent').html 'Deleted ' + book.title }) }</grooscript:code><grooscript:onEvent name="newEvent"> console.log event</grooscript:onEvent>

Manage events in the client using groovy.


grooscript:remoteModel

39

<grooscript:remoteModel domainClass="Book"/><grooscript:code> import rest.Book

Book.list().then { list -> $('#bookList').html '' list.each addBook }</grooscript:code>

Use your domain classes from your gsp’s. Domain classes annotated with @Resource, using json.


Demo grails 3

40

Final action

https://github.com/chiquitinxx/circles

https://github.com/chiquitinxx/circles


Working with javascript

41

class MyClass {} function MyClass() { … }

var myClass = MyClass();// NO var myClass = new MyClass();var myClass = MyClass({prop1: ‘value’, prop2: 12 });myClass.method();// NO myClass.metaprogrammingMethod();myClass.method(numberOrStringOrList);// beware maps! myClass.method({ a: 1, b: 2 });


Combine both worlds

42

import static org.grooscript.GrooScript.toJavascriptimport static org.grooscript.GrooScript.toGroovy

def map = [x: 1, y: 2]

//point is a javascript objectpoint.init(map) //[BAD] Passing a groovy object to javascript, can failpoint.init(toJavascript(map)) //[GOOD] You now are passing {x: 1, y: 2}

//point has a method info() that returns a javascript objectdef badData = point.info() //[BAD] You will have a 'javascript' objectdef goodData = toGroovy(point.info()) //[GOOD] goodData as a 'groovy' object


Tips• Keep your groovy code tested.• If you use @GsNative, keep that code in isolated classes, that can be easy to

mock them.• Don’t abuse @GsNative, is untested code.• You can activate debug console info in javascript with gs.consoleInfo = true;• You can test dom manipulation with jsoup.• Try to stay functional, don’t abuse ‘this’ or variables from other contexts.• Curry functions to inject variables rather than expecting them to be available

after callbacks hell.

43


Require.js• Javascript file and module loader.• Can be used in browser, rhino and Node.js environments.• Optimization using google closure compiler.

44

requirejs.config({ baseUrl: 'jsModules', paths: { lib: 'js/lib' }});

requirejs(['lib/grooscript.min'], function() { requirejs(['Initial']);});


Require.js

45

import org.grooscript.GrooScript

Map conversionOptions = [classpath: 'src/main/groovy']GrooScript.convertRequireJs('src/main/groovy/Initial.groovy', 'jsModules', conversionOptions)

define(function() { function Initial() { … } return Initial;});

class Initial {}

src/main/groovy/Initial.groovy jsModules/Initial.js


Require.js

46

define(['lib/data'], function (data) {

function Require() { //.. gSobject.data = data; //..

return gSobject; };

return Require;});

package files

import org.grooscript.asts.RequireJsModule

class Require { @RequireJsModule(path = 'lib/data') def data}

src/main/groovy/files/Require.groovy jsModules/files/Require.js


Future

47

ECMAScript 2015


Q & A


Thank you!

49

Waiting for your feedback and questions from now to Thursday

Technology

Grooscript in Action