XOOPS 2.6.0 Assets Management using Assetic

INTRODUCTION TOINTRODUCTION TO
ASSET MANAGEMENTASSET MANAGEMENT
IN XOOPS CMS ENVIRONMENTIN XOOPS CMS ENVIRONMENT
XOOPS 2.6.0XOOPS 2.6.0
Education SeriesEducation Series
Richard Griffith
XOOPS Core Team Leader
April 2014© 2014 XOOPS Foundation www.xoops.org

2
© 2014 XOOPS Foundation www.xoops.org
ASSETS
Most of the focus in XOOPS asset management
is on stylesheet and script assets.
Most of the focus in XOOPS asset management
is on stylesheet and script assets.
A web page
consists of a base
HTML document
and any additional
files it may include,
such as
stylesheets,
scripts, images and
fonts. We will refer
to these additional
files as assets.
HTML
Text
Images
Media
HTML
Text
Images
Media
CSS
Page
layout
Text styles
CSS
Page
layout
Text styles
JS, PHP,etc
Scripts
Database
Interraction
JS, PHP,etc
Scripts
Database
Interraction
Content FunctionsStyles
+ +

3
Assets are a very
important part of the
user experience.
For today's rich, highly
interactive web
applications, the asset
performance may be
more significant than the
backend application and
database performance.
ASSETS ARE VALUABLE
Source: http://www.stevesouders.com/

4
ASSET PERFORMANCE FACTORS
Asset size
Number of files
Latency
● Network speed
 Connection set up an tear down
 Transfer rate
 Currency limits
● Client capacity
 Processing power/load
 Memory
 Cache speed

5
MANAGEMENT STRATEGIES
Minimize file sizes
Combine files to reduce network
connections
Serve assets as static files to
maximize caching
Avoid concurrency bottlenecks
●Assets that include other assets when
loaded

6
DEVELOPMENT VS. DEPLOYMENT
Develop / Debug
●Easy to read and
edit is essential
●Separate files are
easier to work with
and my come from
different sources
Deployment Focus
●Eliminate formatting
and whitespace
●Combine files to
eliminate latency

7
SOLVED WITH ASSET MANAGEMENT
Develop / Debug
●Easy to read and
edit is essential
●Separate files are
easier to work with
Asset management solves the
development vs. deployment
dilemma by using the exact same
sources for both needs.
Asset management solves the
development vs. deployment
dilemma by using the exact same
sources for both needs.
Deployment Focus
●Eliminate formatting
and whitespace
●Combine files to
eliminate latency

8
THE BASICS
Specify a file or set of files as an asset
Specify filters to apply to that asset
Create a static file from the asset for
the browser to load which :
●Contains the content of all the specified files
●Has all the specified filters applied
●Is transferred as a single unit
Asset Management allows you to:

9
XOOPS Asset Management is built on
Assetic, by Kris Wallsmith. For a
deeper understanding of some of the
concepts, review the documentation
available at:
https://github.com/kriswallsmith/assetic
THE BASICS - CONTINUED

10
THE BASICS - FILES
An asset can be a set of script or
stylesheet files, not both
An asset is defined by an array of file
specifications
A file can be specified by a fully
qualified filesystem name, or by a
path resolvable by the XOOPS path()
function
A file specification can also be a
wildcard pattern

11
XOOPS Asset Management comes configured
with a subset of the possible Assetic filters.
One major criteria for the selection of these
filters is they are all implemented in PHP and
require no additional binary packages to be
installed on the server. These filters are
portable and will be available for use where
ever XOOPS is installed.
Filters are specified as a string of comma
separated filter names. A filter name can be
preceded with a question mark (“?”) to turn it
off during debugging.
THE BASICS - FILTERS

12
THE BASICS–FILTERS-CONTINUED
Filter Name Assetic Filter Name Description
cssembed PhpCssEmbedFilter embeds image data in your
stylesheets
cssimport CssImportFilter inlines imported stylesheets
cssmin CssMinFilter minifies CSS
cssrewrite CssRewriteFilter fixes relative URLs in CSS
lessphp LessphpFilter Complile LESS to CSS
scssphp ScssphpFilter Compile SCSS to CSS
jsmin JSMinFilter minifies Javascript
These are the available filters :

13
THE BASICS–FILTERS-CONTINUED
If no filters are specified, default
filters will be applied.
● Stylesheets
– 'cssimport,cssembed,?cssmin'
● Javascript
– '?jsmin'

14
ASSETS LOCATION : CORE
● Managed assets are stored in the
“assets” directory in the XOOPS web
root
– stylesheets in css sub-directory
– scripts in js sub-directory
● These managed directories can be
cleared, and contents will be
recreated as needed
● Other subdirectories, such as fonts,
are managed differently

15
ASSETS LOCATION : MODULES
● Module's Assets are
also placed in an
“assets” folder, similar
to Core
● In order to take
advantage of Assetic,
current modules should
convert to this folder
structure

16
LAZY MANAGEMENT
● Each page load specifies the set of assets
it needs
● The lists of files, modification times, and
filters to apply are used to build unique
asset names
● If the static file with that name does not
exist, the asset files are processed and
filtered, and the static file is created
● There are no separate formula extraction
or preprocessing steps needed

17
EXISTING FUNCTIONS
XOOPS has historically provided two
methods in the XoopsTheme class to
deal with assets:
● addScript($url)
● addStylesheet($url)
* Note that these methods expect
URLs, not filesystem paths.

18
NEW ASSET FUNCTION
The XoopsTheme class has been expanded
to better manage assets. The following
methods are available:
● addScriptAssets($assets, $filters)
● addStylesheetAssets($assets, $filters)
● addBaseScriptAssets($assets)
● addBaseStylesheetAssets($assets)
● setNamedAsset($name, $assets, $filters)

19
addScriptAssets &
addStylesheetAssets
● Accept an array of one or more
asset file specifications
● Optionally accept a string of comma
separated filter names
● Result in combining and filtering
the assets, then adding the URL for
the created static asset file to the
same lists used by addScript() and
addStylesheet()

20
addBaseScriptAssets &
addBaseStylesheetAssets
● Accept an array of one or more
● Accumulate asset files in separate
lists, similar to addScript() and
addStylesheet()
● Assets are processed using default
filters and the resulting static file
URL is added to the top of
respective list in the page headers:
<{$xoops_module_header}>

21
BASE ASSETS
● Core uses the base assets for common
system wide assets, such as jQuery,
jQueryUI, locale and Bootstrap assets
● Themes can add to the base assets using
theme_onload.php
● Modules may want to add their common
assets to the base asset
● Browser cache use is improved if the same
base asset definition is used for many
pages

22
setNamedAsset
● Accepts a unique asset name
● Accepts an array of one or more
● Optionally accepts a string of
comma separated filter names
● Results in creating an asset
reference that can be specified in
asset arrays in place of a file
specification

23
NAMED ASSETS
● Named assets allow symbolic reference
to commonly used assets (i.e. “jquery”)
● Named assets can be given additional
filters
● Using setNamedAsset does not create the
asset, it just records the name and
definition
● To use an asset named “jquery” include
an asset name of “@jquery” in an asset
list

24
SMARTY ASSETS TAG
The Smarty block plugin allows assets
to be defined in templates. Full
syntax:
<{assets
assets="(file specifications, comma separated)”
output="(css or js)"
debug=(true or false)
filters="(filter list, comma separated)"
asset_url=(smarty variable for asset url)
}>
<link rel="stylesheet" href="<{$asset_url}>">
<{/assets}>

25
ASSETS TAG ARGUMENT
● assets - comma separated list of assets
to process.
● output - type of output, “css” or “js”
● debug - true to enable debug mode,
default is false
● filters - list of filters to apply, if not
specifed will use default filters for output
type
● asset_url - smarty variable to assign
asset path, defaults to “asset_url”

26
BEHIND THE SCENES
● XoopsCoreAssets.php handles
communication with the Assetic
library
● Xoops object establishes a single
instance of Assets class, and
XoopsTheme references it
● Configuration of Assets class is in
xoops_path/configs/system_assets_p
refs.yml, but it normally should not
need to be changed

27
copyFileAssets()
To handle fonts and images in some special
circumstances, a file copy function is
provided.
XoopsCoreAssets::copyFileAssets()
This method copies files to the asset
directory. Copying is normally only needed
for fonts or images when they are
referenced by a relative URL in a stylesheet,
or are located outside of the web root, as
might be the case of a file asset located in a
vendor package.

28
TURNING ON DEBUG
● Easiest way is to include ASSET_DEBUG=1
in the URL, i.e. index.php?
ASSET_DEBUG=1
● Add this call to your code:
Xoops::getInstance()->assets()->setDebug(true);
● Add debug=true to a Smarty assets tag
● Any of these will turn off any filters
prefixed with a question mark (by default
cssmin and jsmin)

29
The best source of asset management
examples is in XOOPS 2.6.0 itself.
EXAMPLES

30
If you have any suggestions,
comments or questions, please make
them known.
You can contact the author here :
richard@geekwright.com
IDEAS ? QUESTIONS ?
www.xoops.org

XOOPS 2.6.0 Assets Management using Assetic

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à XOOPS 2.6.0 Assets Management using Assetic

Similaire à XOOPS 2.6.0 Assets Management using Assetic (20)

Dernier

Dernier (20)

XOOPS 2.6.0 Assets Management using Assetic