The new static resources framework

The new static
resources framework

About me
Marc Palmer
Paid to develop Weceem
Founder at NoticeLocal and Spotty Mushroom

Old skool Grails user since 0.4

Plugin writing maniac

Resource management

Web performance

Eternal caching
Minifying
Zipping
Bundling
Load order

Old Problems
Ant
Java
Boilerplate code
Spring MVC conﬁg
Code verbosity

New Problems

Download performance

Complex UI from plugins

Your application

Admin UI
Custom CSS Security UI

Custom JS Scaffolding

CSS JS JS +CSS
Blueprint jQuery jQuery UI

Optimization hell
Who includes resources & when?
Is the resource already optimized?
Load order
Performance: I want control

Plugin version conventions help:

grails-blueprint-0.9
grails-jquery-1.4.3
grails-jquery-ui-1.8.2

Resources plugin
Resource declaration DSL
Dependency resolution
Resource tags
Mapping pipeline
Modular and extensible
Processed at runtime

Only at startup!

Works in any environment

Can be bypassed

Supports reloading

Tiny trade-oﬀ

Installing it
marcmacbook:AwesomeApp marc$ grails install-plugin resources
Welcome to Grails 1.3.1 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: /usr/local/grails-1.3.1

Base Directory: /Users/marc/Projects/AwesomeApp
Resolving dependencies...
Dependencies resolved in 1172ms.
Running script /usr/local/grails-1.3.1/scripts/InstallPlugin.groovy
Environment set to development
Installing zip ../checkout/Resources/grails-resources-1.0-RC1.zip... ...
[mkdir] Created dir: /Users/marc/.grails/1.3.1/projects/AwesomeApp/plugins/
resources-1.0-RC1
[unzip] Expanding: /Users/marc/Projects/checkout/Resources/grails-resources-1.0-
RC1.zip into /Users/marc/.grails/1.3.1/projects/AwesomeApp/plugins/resources-1.0-RC1
Installed plugin resources-1.0-RC1 to location /Users/marc/.grails/1.3.1/projects/
AwesomeApp/plugins/resources-1.0-RC1. ...
Resolving plugin JAR dependencies ...
Executing resources-1.0-RC1 plugin post-install script ...
Plugin resources-1.0-RC1 installed
marcmacbook:AwesomeApp marc$

So far so...?
Before After

Resource DSL
File: grails-app/conﬁg/AwesomeResources.groovy

modules = {
grailsDefaults {
resource url:[dir:'css', file:'main.css']
resource url:[dir:'js', file:'application.js'],
disposition:'head'
resource url:[dir:'js/prototype', file:'prototype.js']
}

myStuff {
dependsOn 'grailsDefaults'
resource url:[dir:'css', file:'branding.css']
resource url:[dir:'js', file:'ui-logic.js']
}
}

Changes to GSP
File: grails-app/views/index.gsp

<html>
<head>
<title>Welcome to Grails</title>
<meta name="layout" content="main" />
<r:use modules="myStuff"/>
</head>
<body>

</body>
</html>

What does this page do?

What does it need to do it?

Explicit resource tags are wrong

Changes to layout
File: grails-app/views/layouts/main.gsp
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<r:layoutResources />
<link rel="shortcut icon" href="${r.resource(dir:'images',file:'favicon.ico')}"
type="image/x-icon" />
<g:layoutHead />
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
<img src="${r.resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<div id="grailsLogo" class="logo"><a href="http://grails.org">
<img src="${r.resource(dir:'images',file:'grails_logo.png')}"
alt="Grails" border="0" /></a>
</div>
<g:layoutBody />

<r:layoutResources />

<script type="text/javascript">
oneLineAmazingUI();
</script>
</body>
</html>

Link disposition

<head>
<r:layoutResources/> 
</head>
<body>
...
<r:layoutResources/> 
</body>

The basic tags
<script src="...">
<script src="..."> <r:use modules="myStuff"/>
<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

<g:resource .../> <r:resource .../>

<img .../> <r:img .../>

Disposition in DSL
File: grails-app/conﬁg/AwesomeResources.groovy

modules = {
grailsDefaults {
disposition:'head'
resource url:[dir:'js/prototype', file:'prototype.js']
}

myStuff {
}
}

Better...
Before After

Bundling
modules = {
grailsDefaults {
disposition:'head'
resource url:[dir:'js/prototype', file:'prototype.js'],
bundle: 'core'
}

myStuff { Cross-module bundle!
defaultBundle 'core'

}
}

Dependency overrides
modules = {
grailsDefaults {
}
myStuff {
dependsOn 'grailsDefaults, blueprint'
Text
}
overrides {
jquery {
}
'jquery-ui' {
resource id:'js', bundle: 'core'
resource id:'theme', bundle: 'core'
}
'blueprint' {
resource id:'main', bundle: 'core'
}
}
}

Deferred inline JS

<r:script>
initUIThatDoesNotSuck();
</r:script>

We love the debug
Development reloads

Turn it all oﬀ: add ?_debugResources=y

Cache defeat: add ?_refreshResources=y

X-Grails-Resources-Original-Src:
/bundle-grailsDefaults.js, /js/application.js, /
js/prototype/prototype.js

What just happened?
Declarative resources
Single tag mechanism
Optimal, smart ordering
Resource de-deduping
Bundling

Mapping pipeline
Copy to work dir

Apply mappers

Modify resource

Add response handler

Update URI

Mapper Artefacts
class TestResourceMapper {

def priority = Integer.MAX_VALUE

def map(resource, config) {
Text
def file = new File(resource.processedFile.parentFile,
"_${resource.processedFile.name}")

assert resource.processedFile.renameTo(file)

resource.processedFile = file
resource.updateActualUrlFromProcessedFile()
}
}

Bundling Mapper
/js/jquery-ui/jquery-ui.css

/css/blueprint/screen.css

/css/main.css

/bundle_main.css

CSS rewriting
Before
/css/main.css:

body {

Both CSS and image background-image:
url(../images/bg.png);
may be renamed }

and/or moved After
/bundle_main.css:

body {
background-image:
url(../changed.png);
}

Zipped Resources
grails install-plugin zipped-resources

Compresses ﬁles to xxx.css.gz
Keeps URI the same
Sets Content-Encoding: gzip

Cached Resources
grails install-plugin cached-resources

Renames to SHA256 digest of contents
Shortens name to base62 encoding
Flattens directory structure
Sets Expires to 1 year

/js/some-bloated-lib/plugin/foo.js

/b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9.js

/UpLdvv429fMac6FhEx5FMU2F3Cg1yj4HwUGmihFvjYR.js

Conﬁg conventions
grails.resources.<mapper>.excludes = [...]
grails.resources.modules = { ... }
grails.resources.debug = true
grails.resources.work.dir = ...
grails.resources.uri.preﬁx = 'static'
grails.resources.adhoc.patterns = ...

Integration into core
DSL
Grails Core Dependency resolution
Tags

Mapping pipeline
grails-resources 2.0 Bundling
CSS Rewriting

Mapper plugins
grails-xxxx-resources e.g. zipped-resources

Future
Minify
CSS Sprites
Smart image links with auto w & h
E.S.P. - externalising inline JS
Flavours (content variants)
CDN up loaders

Special thanks...
Peter Ledbrook
Luke Daley
Stéphane Maldini
Robert Fletcher
Burt Beckwith

Q & A and links
Sample app:
http://bit.ly/awesomeapp1
http://bit.ly/awesomeapp2

http://grails.org/plugin/resources
http://grails.org/plugin/zipped-resources
http://grails.org/plugin/cached-resources
http://noticelocal.com
http://www.experienceoz.com.au
http://www.icescrum.org

Also check out some unsung plugins:
taxonomy, invitation-only, cache-headers,
one-time-data, email-conﬁrmation

The new static resources framework

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie The new static resources framework

Ähnlich wie The new static resources framework (20)

The new static resources framework