$30 off During Our Annual Pro Sale. View Details »

Django Static Stuff

Django Static Stuff

Handling the Un-Django Parts of Your Django App

Matthew Dapena-Tretter

July 10, 2013
Tweet

More Decks by Matthew Dapena-Tretter

Other Decks in Programming

Transcript

  1. STATIC STUFF
    Handling the Un-Django Parts of Your Django App
    Matthew Tretter
    @matthewwithanm
    [email protected]
    github.com/matthewwithanm
    http://speakerdeck.com/matthewwithanm/django-static-stuff

    View Slide

  2. Photo by Jeff Prouse http://www.flickr.com/photos/prousefamily/426140767/
    Static files used to be a small
    problem for Django devs

    View Slide

  3. Photo by John R. Southern http://www.flickr.com/photos/krunkwerke/267608325
    Now, they’re a much
    larger problem

    View Slide

  4. View Slide


  5. View Slide

  6. View Slide


  7. View Slide

  8. View Slide

  9. Photo by Brin F http://thumbsandammo.blogspot.com/2013/03/blog-post_4297.html

    View Slide


  10. {% load static %}

    View Slide

  11. def static(path):
    return settings.STATIC_URL + path

    View Slide

  12. {% load staticfiles %}

    View Slide

  13. {% load static from staticfiles %}

    View Slide

  14. {% load static from staticfiles %}
    Delegates to
    STATICFILES_STORAGE

    View Slide

  15. main.css
    main.af42991c673a.css
    Wow, this slide is boring.
    CachedStaticFilesStorage
    CachedFilesMixin

    View Slide

  16. You can’t tell your users to
    clear their cache
    Far-future FTW
    Safer deployments
    Photo by patriziasoliani http://www.flickr.com/photos/55524309@N05/5378314720/

    View Slide

  17. Why not
    django-compressor?

    View Slide

  18. input defined in templates
    doesn’t know about
    dependency graphs
    only for js & css

    View Slide

  19. Embrace the build step
    Photo by Phyllis Buchanan http://www.flickr.com/photos/pgautier/2598157781/

    View Slide

  20. 1.Collect the static files
    from all apps into
    temporary location
    2.Perform the build
    3.Collect the built files
    Photo by Spencer Garness http://www.flickr.com/photos/njorthr/4030750472/

    View Slide

  21. View Slide

  22. sass/lessc
    coffee
    uglify.js
    csso
    Photo by Toni http://www.flickr.com/photos/toniandmatthew/5212240990/

    View Slide

  23. sass/lessc
    coffee
    uglify.js
    csso
    Photo by Toni http://www.flickr.com/photos/toniandmatthew/5212240990/
    r.js
    jpegtran
    pngcrush
    svgo

    View Slide

  24. sass/lessc
    coffee
    uglify.js
    csso
    r.js
    jpegtran
    pngcrush
    svgo
    ANYTHING
    It’s still the same photo

    View Slide

  25. Can we do better?
    Yeah, still. Sorry.

    View Slide

  26. Embrace Django

    View Slide

  27. Photo by Brin F. But it’s slightly different than before! No it’s not. http://thumbsandammo.blogspot.com/2013/03/blog-post_4297.html

    View Slide

  28. generate & consume
    static file manifests
    tweak post-processing
    improve collection

    View Slide

  29. TL;DL

    View Slide

  30. {% load staticfiles %}

    View Slide

  31. Hashes in Filenames

    View Slide

  32. Embrace the build step

    View Slide

  33. Build on staticfiles app

    View Slide

  34. Thanks
    http://speakerdeck.com/matthewwithanm/django-static-stuff
    https://gist.github.com/matthewwithanm/5969795
    Matthew Tretter
    @matthewwithanm
    [email protected]
    github.com/matthewwithanm

    View Slide