SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
Grails' Resource Plugin
whoami
Colin Harrington
Senior Consultant
colin.harrington@objectpartners.com
@ColinHarrington
Intro
● Resources plugin
– http://grails.org/plugin/resources
● Installed by default in Grails 2.0
– Available in 1.3.x branches
● Written by Marc Palmer & Luke Daley
Why?
Performance ~ Perception
Performance impacts cost
- less traffic
- less load
- better scalability
14 rules
http://stevesouders.com/hpws/rules.php
Good performance tips from Yahoo!
Firefox ySlow plugin
Google Page Speed
- Chrome
- Firefox
- mod_pagespeed for apache
Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable
Example
Example optimized with resources
Modular development
History
● D.I.Y.
● 2008 - UI Performance
● 2009 - Static Resources Plugin
● December 2011 – Resources Plugin included by
default in Grails 2.0 release
DIY
● pre-optimized bundles
● custom filters
● build time jobs
UI Performance plugin
● http://grails.org/plugin/ui-performance/
● minification of CSS and JS
● compression
● css sprites
● bundling of CSS and JS
● build time
Resources Plugin
● Pluggable framework for handling static resources
● runtime ":resources:1.2-RC1"
● “This plugin represents a new way of declaring and
linking to static resources in your application and
plugins. Resource dependencies can be declared
(e.g. jQuery UI requires jQuery) and pages simply
indicate which resource modules they require. The
plugin does the rest, and provides a processing
pipeline for advanced optimisations.”
Using Resources in your Layout
<html>
<head>
<g:layoutTitle/>
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
GSP view
<html>
<head>
<meta name="layout" content="main"/>
<r:require modules="jquery-ui, blueprint"/>
<r:script>
$(function() {
$('#form').dialog('open');
});
</r:script>
</head>
<body>
<div id="form">
Hello World
</div>
</body>
</html>
Runtime
● Redirects on legacy URLs to a
/static/<resource URI>
● Uses the ProcessingFilter to Process the
Resource
Resources
● MyApplicationResources.groovy contains
modules, bundles, etc.
● ResourcesArtefactType
– *Resources.groovy
● Definable in Config.groovy
grails.resources.modules = { … }
Resource DSL
modules = {
core {
dependsOn 'jquery, utils'
defaultBundle 'ui'
resource url:'/js/core.js', disposition: 'head'
resource url:'/js/ui.js'
resource url:'/css/main.css',
resource url:'/css/branding.css'
resource url:'/css/print.css', attrs:
[media:'print']
}
…
}
dependsOn
modules = {
core {
dependsOn 'jquery, utils'
dependsOn 'other'
dependsOn(['heavy', 'metal'])
}
}
resource method
modules = {
ui {
resource '/css/forms.css'
resource '/js/forms.js'
}
}
resource attributes
● url * required
● exclude (exclude:'minify')
● bundle
● disposition
● attrs
● id
● linkOverride
● wrapper
– (wrapper: { s -> "<!--if lt IE 8>$s<!endif-->" } )
defaultBundle method
modules = {
core {
defaultBundle 'core-ui'
...
}
ui {
defaultBundle 'core-ui' …
}
}
TagLib
● <r:resource>
● <r:img>
● <r:renderModule>
● <r:script>
● <r:layoutResources>
● <r:require>
● <r:external>
CSS
● Bundling
● Rewriting
● Minification
yui-minification for css and js
● runtime ":yui-minify-resources:0.1.5"
● http://grails.org/plugin/yui-minify-resources
● Confgurable:
– grails.resources.mappers.yuicssminify.includes =
['**/*.css']
– grails.resources.mappers.yuijsminify.includes =
['**/*.js']
– grails.resources.mappers.yuicssminify.excludes =
['**/*.min.css']
– grails.resources.mappers.yuijsminify.excludes =
['**/*.min.js']
– More...
less.css
● Variables
● Mixins
● Nested Rules
● Functions & Operations
● Client side
● Server side
● Command Line
● compile ":lesscss-resources:1.3.0.3"
● http://lesscss.org/
Smart Sprites Resources
● compile ":smart-sprites-resources:0.2"
● http://grails.org/plugin/smart-sprites-resources
● Uses Smart Sprites
● http://csssprites.org/
● Used in UI Performance
Javascript
● jQuery
● Bootstrap (out of date?)
● Handlebars
● dustjs
● gsp
disposition
● link disposition (head vs defer)
● Successive calls to <r:layoutResources>
– Once in the <head/>
– Once before the closing </body> tag
● Blocking the UI!! Don't do it!
● <r:layoutResources disposition='defer'/>
Asset pipeline
● Pluggable pipeline of ResourceMappers
● Include/exclude logic
● Phases
● Configurable map() method
class TestResourceMapper {
def phase = MapperPhase.MUTATION
static defaultExcludes = [
'**/*.png',
'**/*.gif',
'**/*.jpg',
'**/*.jpeg',
'**/*.gz',
'**/*.zip'
]
static defaultIncludes = [ '/images/**' ]
def map(resource, config) {
…
}
}
enum MapperPhase {
GENERATION,
MUTATION,
COMPRESSION,
LINKNORMALISATION,
AGGREGATION,
RENAMING,
LINKREALISATION,
ALTERNATEREPRESENTATION,
DISTRIBUTION,
ABSOLUTISATION,
NOTIFICATION
}
Mapper Phase
● GENERATION
– create new assets = compile less files
● MUTATION
– alter/improve assets (may mean creating new/deleting aggregated
resources) = spriting
● COMPRESSION
– reducing the file size but maintaining semantics = minify
● LINKNORMALISATION
– convert all inter asset references into a normal form = css links
● AGGREGATION
– combining multiple assets into one = bundling
Mapper Phase
● RENAMING
– moving of physical assets = hashing
● LINKREALISATION
– convert normalised inter asset references into real form = css links
● ALTERNATEREPRESENTATION
– attach different representations of the asset = gzipping
● DISTRIBUTION
– moving assets to their hosting environment = s3, cdn
● ABSOLUTISATION
– update inter asset references to their distributed equivalent
● NOTIFICATION
– let the world know about the new resources = cache invalidation
cached-resources
● runtime ":cached-resources:1.0"
● http://grails.org/plugin/cached-resources
● Files/resources use a SHA-256 hash
● Delegates to the cache-headers plugin
– ETag header
– Last-Modified header
zipped-resources
● runtime ":zipped-resources:1.0"
● http://grails.org/plugin/zipped-resources
● Gzip applied to files
● Sends the .gz contents
● Sets the Transfer-Encoding header to 'gzip'
cdn-resources
● compile ":cdn-resources:0.2.1"
● http://grails.org/plugin/cdn-resources
● grails.resources.cdn.enabled = true
● grails.resources.cdn.url = "
http://static.mydomain.com/”
● Configurable URL per modules...
Configuration
● Change the /static/ URI prefix:
grails.resources.uri.prefix = 'other'
● grails.resources.work.dir
● grails.resources.debug = true
● grails.resources.processing.enabled = false
● grails.resources.rewrite.css
More Config
● grails.resources.adhoc.patterns = ["/images/*", "*.css",
"*.js"]
● grails.resources.mappers.cssrewriter.includes = ['**/*.css',
'**/*.less']
● grails.resources.mappers.csspreprocessor.includes =
['**/*.css', '**/*.less']
● grails.resources.mappers.cssrewriter.excludes = ['unsafe/**']
● grails.resources.mappers.csspreprocessor.excludes =
['unsafe/**']
● grails.resources.mappers.bundle.excludes = ['unsafe/**/*.css']
Debugging
● Reloading in development
● Debug with ?_debugResources=y
● anti-cache: ?_refreshResources=y
● log4j:
● debug "org.grails.plugin.resource"
● println grailsResourceProcessor.dumpResources()
Write your own plugin?
● Dart?
● Sass?
● Javascript templating du jour?
Issues
● Load balancing bugs
● non-DRY elements in Deep hierarchies
● Others?
Questions?
Thank you

Contenu connexe

Tendances

Hortonworks HBase Meetup Presentation
Hortonworks HBase Meetup PresentationHortonworks HBase Meetup Presentation
Hortonworks HBase Meetup Presentation
Hortonworks
 
MongoDB Roadmap
MongoDB RoadmapMongoDB Roadmap
MongoDB Roadmap
MongoDB
 
Python-CouchDB Training at PyCon PL 2012
Python-CouchDB Training at PyCon PL 2012Python-CouchDB Training at PyCon PL 2012
Python-CouchDB Training at PyCon PL 2012
Stefan Kögl
 

Tendances (20)

Drupal as a web framework
Drupal as a web frameworkDrupal as a web framework
Drupal as a web framework
 
Hortonworks HBase Meetup Presentation
Hortonworks HBase Meetup PresentationHortonworks HBase Meetup Presentation
Hortonworks HBase Meetup Presentation
 
ACADGILD:: HADOOP LESSON
ACADGILD:: HADOOP LESSON ACADGILD:: HADOOP LESSON
ACADGILD:: HADOOP LESSON
 
Karine bosch caching-spsbe14
Karine bosch caching-spsbe14Karine bosch caching-spsbe14
Karine bosch caching-spsbe14
 
Device Synchronization with Javascript and PouchDB
Device Synchronization with Javascript and PouchDBDevice Synchronization with Javascript and PouchDB
Device Synchronization with Javascript and PouchDB
 
Create a Varnish cluster in Kubernetes for Drupal caching - DrupalCon North A...
Create a Varnish cluster in Kubernetes for Drupal caching - DrupalCon North A...Create a Varnish cluster in Kubernetes for Drupal caching - DrupalCon North A...
Create a Varnish cluster in Kubernetes for Drupal caching - DrupalCon North A...
 
Whirr dev-up-puppetconf2011
Whirr dev-up-puppetconf2011Whirr dev-up-puppetconf2011
Whirr dev-up-puppetconf2011
 
Hosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRHosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCR
 
Intro To Couch Db
Intro To Couch DbIntro To Couch Db
Intro To Couch Db
 
Drupal 8 Cache: Under the hood
Drupal 8 Cache: Under the hoodDrupal 8 Cache: Under the hood
Drupal 8 Cache: Under the hood
 
Introduction to Apache Tajo: Data Warehouse for Big Data
Introduction to Apache Tajo: Data Warehouse for Big DataIntroduction to Apache Tajo: Data Warehouse for Big Data
Introduction to Apache Tajo: Data Warehouse for Big Data
 
Hadoop security
Hadoop securityHadoop security
Hadoop security
 
MongoDB Roadmap
MongoDB RoadmapMongoDB Roadmap
MongoDB Roadmap
 
H cat berlinbuzzwords2012
H cat berlinbuzzwords2012H cat berlinbuzzwords2012
H cat berlinbuzzwords2012
 
Python-CouchDB Training at PyCon PL 2012
Python-CouchDB Training at PyCon PL 2012Python-CouchDB Training at PyCon PL 2012
Python-CouchDB Training at PyCon PL 2012
 
Document validation in MongoDB 3.2
Document validation in MongoDB 3.2Document validation in MongoDB 3.2
Document validation in MongoDB 3.2
 
Spring Data MongoDB 介紹
Spring Data MongoDB 介紹Spring Data MongoDB 介紹
Spring Data MongoDB 介紹
 
Configuration Management in Drupal 8: A preview (DrupalCamp Alpe Adria 2014)
Configuration Management in Drupal 8: A preview (DrupalCamp Alpe Adria 2014)Configuration Management in Drupal 8: A preview (DrupalCamp Alpe Adria 2014)
Configuration Management in Drupal 8: A preview (DrupalCamp Alpe Adria 2014)
 
Indexing and Query Optimisation
Indexing and Query OptimisationIndexing and Query Optimisation
Indexing and Query Optimisation
 
8b. Column Oriented Databases Lab
8b. Column Oriented Databases Lab8b. Column Oriented Databases Lab
8b. Column Oriented Databases Lab
 

Similaire à Grails resources

Web applications with Catalyst
Web applications with CatalystWeb applications with Catalyst
Web applications with Catalyst
svilen.ivanov
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
Doris Chen
 

Similaire à Grails resources (20)

Droidcon Paris 2015
Droidcon Paris 2015Droidcon Paris 2015
Droidcon Paris 2015
 
How to develop Big Data Pipelines for Hadoop, by Costin Leau
How to develop Big Data Pipelines for Hadoop, by Costin LeauHow to develop Big Data Pipelines for Hadoop, by Costin Leau
How to develop Big Data Pipelines for Hadoop, by Costin Leau
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Resources plugin
Resources pluginResources plugin
Resources plugin
 
Web applications with Catalyst
Web applications with CatalystWeb applications with Catalyst
Web applications with Catalyst
 
Grails Asset Pipeline Plugin
Grails Asset Pipeline PluginGrails Asset Pipeline Plugin
Grails Asset Pipeline Plugin
 
Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2
 
WordPress + NGINX Best Practices with EasyEngine
WordPress + NGINX Best Practices with EasyEngineWordPress + NGINX Best Practices with EasyEngine
WordPress + NGINX Best Practices with EasyEngine
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.
 
Taking your site from Drupal 6 to Drupal 7
Taking your site from Drupal 6 to Drupal 7Taking your site from Drupal 6 to Drupal 7
Taking your site from Drupal 6 to Drupal 7
 
03 pig intro
03 pig intro03 pig intro
03 pig intro
 
Pure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talkPure Speed Drupal 4 Gov talk
Pure Speed Drupal 4 Gov talk
 
Make Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speedMake Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speed
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
 
Drupal performance and scalability
Drupal performance and scalabilityDrupal performance and scalability
Drupal performance and scalability
 
Dok Talks #124 - Intro to Druid on Kubernetes
Dok Talks #124 - Intro to Druid on KubernetesDok Talks #124 - Intro to Druid on Kubernetes
Dok Talks #124 - Intro to Druid on Kubernetes
 
Magento Performance Optimization 101
Magento Performance Optimization 101Magento Performance Optimization 101
Magento Performance Optimization 101
 
High Availability Content Caching with NGINX
High Availability Content Caching with NGINXHigh Availability Content Caching with NGINX
High Availability Content Caching with NGINX
 
Drupal performance optimization Best Practices
Drupal performance optimization Best PracticesDrupal performance optimization Best Practices
Drupal performance optimization Best Practices
 

Dernier

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Dernier (20)

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 

Grails resources