INTRODUCTION TOINTRODUCTION TO
ASSET MANAGEMENTASSET MANAGEMENT
IN XOOPS CMS ENVIRONMENTIN XOOPS CMS ENVIRONMENT
XOOPS 2.6...
2
© 2014 XOOPS Foundation www.xoops.org
ASSETS
Most of the focus in XOOPS asset management
is on stylesheet and script ass...
3
© 2014 XOOPS Foundation www.xoops.org
Assets are a very
important part of the
user experience.
For today's rich, highly
...
4
© 2014 XOOPS Foundation www.xoops.org
ASSET PERFORMANCE FACTORS
Asset size
Number of files
Latency
● Network speed
 Con...
5
© 2014 XOOPS Foundation www.xoops.org
MANAGEMENT STRATEGIES
Minimize file sizes
Combine files to reduce network
connecti...
6
© 2014 XOOPS Foundation www.xoops.org
DEVELOPMENT VS. DEPLOYMENT
Develop / Debug
●Easy to read and
edit is essential
●Se...
7
© 2014 XOOPS Foundation www.xoops.org
SOLVED WITH ASSET MANAGEMENT
Develop / Debug
●Easy to read and
edit is essential
●...
8
© 2014 XOOPS Foundation www.xoops.org
THE BASICS
Specify a file or set of files as an asset
Specify filters to apply to ...
9
© 2014 XOOPS Foundation www.xoops.org
XOOPS Asset Management is built on
Assetic, by Kris Wallsmith. For a
deeper unders...
10
© 2014 XOOPS Foundation www.xoops.org
THE BASICS - FILES
An asset can be a set of script or
stylesheet files, not both
...
11
© 2014 XOOPS Foundation www.xoops.org
XOOPS Asset Management comes configured
with a subset of the possible Assetic fil...
12
© 2014 XOOPS Foundation www.xoops.org
THE BASICS–FILTERS-CONTINUED
Filter Name Assetic Filter Name Description
cssembed...
13
© 2014 XOOPS Foundation www.xoops.org
THE BASICS–FILTERS-CONTINUED
If no filters are specified, default
filters will be...
14
© 2014 XOOPS Foundation www.xoops.org
ASSETS LOCATION : CORE
● Managed assets are stored in the
“assets” directory in t...
15
© 2014 XOOPS Foundation www.xoops.org
ASSETS LOCATION : MODULES
● Module's Assets are
also placed in an
“assets” folder...
16
© 2014 XOOPS Foundation www.xoops.org
LAZY MANAGEMENT
● Each page load specifies the set of assets
it needs
● The lists...
17
© 2014 XOOPS Foundation www.xoops.org
EXISTING FUNCTIONS
XOOPS has historically provided two
methods in the XoopsTheme ...
18
© 2014 XOOPS Foundation www.xoops.org
NEW ASSET FUNCTION
The XoopsTheme class has been expanded
to better manage assets...
19
© 2014 XOOPS Foundation www.xoops.org
addScriptAssets &
addStylesheetAssets
● Accept an array of one or more
asset file...
20
© 2014 XOOPS Foundation www.xoops.org
addBaseScriptAssets &
addBaseStylesheetAssets
● Accept an array of one or more
as...
21
© 2014 XOOPS Foundation www.xoops.org
BASE ASSETS
● Core uses the base assets for common
system wide assets, such as jQ...
22
© 2014 XOOPS Foundation www.xoops.org
setNamedAsset
● Accepts a unique asset name
● Accepts an array of one or more
ass...
23
© 2014 XOOPS Foundation www.xoops.org
NAMED ASSETS
● Named assets allow symbolic reference
to commonly used assets (i.e...
24
© 2014 XOOPS Foundation www.xoops.org
SMARTY ASSETS TAG
The Smarty block plugin allows assets
to be defined in template...
25
© 2014 XOOPS Foundation www.xoops.org
ASSETS TAG ARGUMENT
● assets - comma separated list of assets
to process.
● outpu...
26
© 2014 XOOPS Foundation www.xoops.org
BEHIND THE SCENES
● XoopsCoreAssets.php handles
communication with the Assetic
li...
27
© 2014 XOOPS Foundation www.xoops.org
copyFileAssets()
To handle fonts and images in some special
circumstances, a file...
28
© 2014 XOOPS Foundation www.xoops.org
TURNING ON DEBUG
● Easiest way is to include ASSET_DEBUG=1
in the URL, i.e. index...
29
© 2014 XOOPS Foundation www.xoops.org
The best source of asset management
examples is in XOOPS 2.6.0 itself.
EXAMPLES
30
© 2014 XOOPS Foundation www.xoops.org
If you have any suggestions,
comments or questions, please make
them known.
You c...
Upcoming SlideShare
Loading in …5
×

XOOPS 2.6.0 Assets Management using Assetic

11,182 views

Published on

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.
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.
In XOOPS 2.6.0 we'll use Assetic, developed by Kris Wallsmith, to manage all the assets.

Published in: Software, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,182
On SlideShare
0
From Embeds
0
Number of Embeds
8,165
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XOOPS 2.6.0 Assets Management using Assetic

  1. 1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29 © 2014 XOOPS Foundation www.xoops.org The best source of asset management examples is in XOOPS 2.6.0 itself. EXAMPLES
  30. 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

×