assetic in the real world

Web performance is getting more important as mobile usage increases. Combining and minifying assets is one way to speed up page load. PHP offers the assetic library which takes care of most asset processing needs through filters. This talk gives an introduction into assetics, the benefits and challenges you'll encounter and finishes with some ideas on how to make asset processing better.

Transcript

1. 15.05.2013
   assetic in the real world
   @Sgoettschkes
   #viennaphp
   15.05.2013
   

   View Slide

2. 15.05.2013
   Assets?
   css
   javascript
   images
   sass
   less
   coffeescript
   sprites
   compression
   

   View Slide

3. 15.05.2013
   What to do?
   ✔
   Remove comments / unneeded code
   ✔
   compress code (remove newlines)
   ✔
   combine files (one css, one js)
   ✔
   Sprite images
   

   View Slide

4. 15.05.2013
   Why?
   Performance!
   (and ease of development)
   

   View Slide

5. 15.05.2013
   kriswallsmith/assetic
   {
   "require": {
   "kriswallsmith/assetic": "1.0.4"
   }
   }
   

   View Slide

6. 15.05.2013
   kriswallsmith/assetic
   Two usage ways:
   „Dynamic asset server“ (development)
   „Static asset generator“ (production)
   

   View Slide

7. 15.05.2013
   Some example code
   https://github.com/viennaphp/assetic-real-world
   

   View Slide

8. 15.05.2013
   Problems?
   dev prod
   easy debugging performance
   changing fast „static“
   vs.
   

   View Slide

9. 15.05.2013
   Debugging vs. Performance
   Best approach: Serve uncombined in dev,
   combined in staging & prod
   

   View Slide

10. 15.05.2013
    Changing vs. static
    ✔
    Watch/regenerate static assets...
    ✔
    ...or generate on every request (asset server)
    

    View Slide

11. 15.05.2013
    symfony/assetic-bundle
    ✔
    Configuration through config.yml
    ✔
    twig integration
    ✔
    dev/prod mode
    ✗
    Unexpected behaviour / buggy(?)
    ✗
    asset generation on the fly very slow
    

    View Slide

12. 15.05.2013
    Some more example code
    

    View Slide

13. 15.05.2013
    My wishlist
    ✔
    Easier setup
    ✔
    Faster on-the-fly
    ✔
    Integration of javascript framework
    

    View Slide

14. 15.05.2013
    Thanks
    @Sgoettschkes
    http://sebastian.goettschkes.de
    

    View Slide