Django Static Stuff

Handling the Un-Django Parts of Your Django App

Transcript

1. STATIC STUFF
   Handling the Un-Django Parts of Your Django App
   Matthew Tretter
   @matthewwithanm
   m@tthewwithanm.com
   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
    m@tthewwithanm.com
    github.com/matthewwithanm
    

    View Slide