Weitere ähnliche Inhalte Ähnlich wie XOOPS 2.6.0 Assets Management using Assetic (20) Kürzlich hochgeladen (20) XOOPS 2.6.0 Assets Management using Assetic1. 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. 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. 3
© 2014 XOOPS Foundation www.xoops.org
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. 4
© 2014 XOOPS Foundation www.xoops.org
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. 5
© 2014 XOOPS Foundation www.xoops.org
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. 6
© 2014 XOOPS Foundation www.xoops.org
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. 7
© 2014 XOOPS Foundation www.xoops.org
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. 8
© 2014 XOOPS Foundation www.xoops.org
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. 9
© 2014 XOOPS Foundation www.xoops.org
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. 10
© 2014 XOOPS Foundation www.xoops.org
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. 11
© 2014 XOOPS Foundation www.xoops.org
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. 12
© 2014 XOOPS Foundation www.xoops.org
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. 13
© 2014 XOOPS Foundation www.xoops.org
THE BASICS–FILTERS-CONTINUED
If no filters are specified, default
filters will be applied.
● Stylesheets
– 'cssimport,cssembed,?cssmin'
● Javascript
– '?jsmin'
14. 14
© 2014 XOOPS Foundation www.xoops.org
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. 15
© 2014 XOOPS Foundation www.xoops.org
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. 16
© 2014 XOOPS Foundation www.xoops.org
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. 17
© 2014 XOOPS Foundation www.xoops.org
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. 18
© 2014 XOOPS Foundation www.xoops.org
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. 19
© 2014 XOOPS Foundation www.xoops.org
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. 20
© 2014 XOOPS Foundation www.xoops.org
addBaseScriptAssets &
addBaseStylesheetAssets
● Accept an array of one or more
asset file specifications
● 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. 21
© 2014 XOOPS Foundation www.xoops.org
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. 22
© 2014 XOOPS Foundation www.xoops.org
setNamedAsset
● Accepts a unique asset name
● Accepts an array of one or more
asset file specifications
● 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. 23
© 2014 XOOPS Foundation www.xoops.org
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. 24
© 2014 XOOPS Foundation www.xoops.org
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. 25
© 2014 XOOPS Foundation www.xoops.org
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. 26
© 2014 XOOPS Foundation www.xoops.org
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. 27
© 2014 XOOPS Foundation www.xoops.org
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. 28
© 2014 XOOPS Foundation www.xoops.org
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. 29
© 2014 XOOPS Foundation www.xoops.org
The best source of asset management
examples is in XOOPS 2.6.0 itself.
EXAMPLES
30. 30
© 2014 XOOPS Foundation www.xoops.org
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