Font End Development + Automation with Django
Download as PPTX, PDF20 likes1,924 views
The document provides tips and tricks for automating front end development tasks using Django tools and techniques. It discusses using django.contrib.staticfiles to deploy media files to a CDN, django_compressor to combine and minify CSS and JavaScript assets, and django_media_bundler to automatically generate sprite images and positioning CSS to reduce HTTP requests. The tools can help avoid manually performing repetitive tasks like file management, compression, and sprite generation during development.
![Compressor SettingsCompressor settings for offline / pre-grenerationimport osSTATICFILES_FINDERS += ( 'compressor.finders.CompressorFinder',)COMPRESS_OFFLINE = TrueCOMPRESS_STORAGE = "common.common_storages.CachedS3BotoStorage"COMPRESS_ROOT = os.path.join(os.path.dirname(__file__), 'media')COMPRESS_OUTPUT_DIR = "compress_cache"COMPRESS_OFFLINE_CONTEXT = {"STATIC_URL":STATIC_URL}COMPRESS_URL = STATIC_URL #post processing filtersCOMPRESS_CSS_FILTERS = ['compressor.filters.yui.YUICSSFilter‘]COMPRESS_JS_FILTERS = ['compressor.filters.jsmin.JSMinFilter']COMPRESS_YUI_BINARY = 'java -jar %s yuicompressor-2.4.6.jar'](https://image.slidesharecdn.com/frontenddevelopmenttrickswithdjangoevanreiser-110707112413-phpapp01/85/Font-End-Development-Automation-with-Django-21-320.jpg)
Font End Development + Automation with Django
- 1. Tips & Tricks for Front End Development AutomationEvan Reiser
- 2. Front End Automation?Tools / Tricks to speed up front end dev workWhy talk about this?Same reason we all like Django:More time solving our biz/eng problemsLess time doing the same repeatable patternsWe want to: Build web apps + add featuresNot: waste time deploying media, organizing assets, minifying js/css, making sprites etc.
- 3. django experienceCo-founder @ GamerNookSocial Network for Gamers100k+ MembersCo-founder @ BloomSpotLuxury Daily Deals3rd Largest Daily Deals siteCo-founder @ AdStackAlgorithmically Managed Facebook Advertising
- 4. OverviewPains with Front end DevelopmentDeploying Media FilesCompressing / Combine media filesGenerating SpritesAutomate all of this
- 5. Problems / PainsAnnoying parts of front end developmentDeploying media to media server / CDNCombining JS / CSS filesMinimizing JS / CSSCache-busting media files in prodBuilding sprite imagesReferencing sprites in CSSHaving to do this all manuallyThese are all common patternsWe shouldn’t have to waste time on them
- 7. django.contrib.staticfilesPulls media from various placesPlaces them in another placeDifferent folderMedia ServerOr any custom storage backendS3 / CloudFrontCDN
- 8. Media Files => CDN1) Set up static files to find #settings.pySTATICFILES_DIRS = (os.path.join(os.getcwd(),"media"), )STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder',)STATIC_ROOT = os.path.join(os.getcwd(),"static")
- 9. Media Files => CDN 2) Set Storage backend to be S3 / CloudFront#settings.pySTATICFILES_STORAGE = 'storages.backends.s3boto.S3BotoStorage 'boto
- 10. Is a python library for interacting with Amazon Web Services
- 11. django_storages
- 12. A series of storage backends including a S3Media Files => CDN2) Push media files to CDNpython manage.py collectstatic
- 13. Media Files => CDN 4) Reference media in your templates#settings.pyTEMPLATE_CONTEXT_PROCESSORS += ( 'django.core.context_processors.static',){# Some Template #}<link rel="stylesheet" href="{{STATIC_URL}}style.css" /><link rel="stylesheet" href=“http://cdn.adstack.com/style.css" />
- 14. Managing MediaManaging MediaCSS / JavaScript assetsWe want to:Reduce Http requestsReduce bandwidthWe don’t want to:Think about front-end performance while codingInterrupt our development
- 15. Managing Media1. We want to reduce the number of HTTP requests for serving JS + CSS<link rel="stylesheet" href="{{STATIC_URL}}css/admin/base.css" /><link rel="stylesheet" href="{{STATIC_URL}}css/admin/changelists.css" /><link rel="stylesheet" href="{{STATIC_URL}}css/icon_sprites.css"/><link rel="stylesheet" href="{{STATIC_URL}}css/common_10.css" /><link rel="stylesheet" href="{{STATIC_URL}}css/tablesorter.css" /><link rel="stylesheet" href="{{STATIC_URL}}css/multiselect.css" /><link rel="stylesheet" href="{{STATIC_URL}}css/superfish.css" /><link rel="stylesheet" href="{{STATIC_URL}}css/all.css" />
- 16. Managing Media2. We want to minify css / js content and only include what’s needed (reduce bandwidth)/* Make sure to rename this file before you deploy to break client caching!!!*//* Headers */H1 { font-weight:bold;}H2 {font-weight;bold;}H1,H2 {font-weight:bold}Obviously the same thing goes for JS
- 17. Managing Media3. Don’t want to have to change the asset names to prevent client side cachingStyle.cssStyle2.cssStyle3.cssStyle4.cssStyle5.css
- 18. Managing MediaOne way to do this is django_compressorConverts & combines linked or inline css/js into cacheable static filesCompression / minification support for: CSS Tidy, YUI CSS + JS, Google’s Closure Compiler, JSmin, cssminBuilds unique static file names to bust cacheNo need to heavily modify existing templatesPlus:Extendable for custom post processing / filtering via python
- 19. Managing MediaTemplate changes are minimal{% compress css %}<link href="{{STATIC_URL}}css/admin/base.css" /><link href="{{STATIC_URL}}css/admin/changelists.css" /><link href="{{STATIC_URL}}css/icon_sprites.css"/><link href="{{STATIC_URL}}css/common_10.css" /><link href="{{STATIC_URL}}css/tablesorter.css" /><link href="{{STATIC_URL}}css/multiselect.css" /><link href="{{STATIC_URL}}css/superfish.css" />{% endcompress %}{% compress js %}<script src="{{STATIC_URL}}js/jquery-1.5.1.min.js"></script><script src="{{ STATIC_URL }}js/jquery.hoverIntent.js"></script><script src="{{STATIC_URL}}js/common.js"></script><script src="{{STATIC_URL}}js/jquery.multiselect.min.js"></script><script src="{{STATIC_URL}}js/jquery.cluetip.min.js"></script><script src="{{STATIC_URL}}js/jquery.tablesorter.js"></script><script src="{{ STATIC_URL }}js/jquery.tooltip.pack.js"></script><script src="{{ STATIC_URL }}js/superfish.js"></script>{% endcompress %}
- 20. Compressor SettingsWe use a custom Storage Class to store the results on S3from django.core.files.storage import get_storage_classfrom storages.backends.s3boto import S3BotoStorage #A special Storage class that saves to S3 and Locallyclass CachedS3BotoStorage(S3BotoStorage): def __init__(self, *args, **kwargs): super(CachedS3BotoStorage, self).__init__(*args, **kwargs) self.local_storage = get_storage_class( "compressor.storage.CompressorFileStorage")() def save(self, name, content): name = super(CachedS3BotoStorage, self).save(name,content) self.local_storage._save(name, content) return name
- 21. Compressor SettingsCompressor settings for offline / pre-grenerationimport osSTATICFILES_FINDERS += ( 'compressor.finders.CompressorFinder',)COMPRESS_OFFLINE = TrueCOMPRESS_STORAGE = "common.common_storages.CachedS3BotoStorage"COMPRESS_ROOT = os.path.join(os.path.dirname(__file__), 'media')COMPRESS_OUTPUT_DIR = "compress_cache"COMPRESS_OFFLINE_CONTEXT = {"STATIC_URL":STATIC_URL}COMPRESS_URL = STATIC_URL #post processing filtersCOMPRESS_CSS_FILTERS = ['compressor.filters.yui.YUICSSFilter‘]COMPRESS_JS_FILTERS = ['compressor.filters.jsmin.JSMinFilter']COMPRESS_YUI_BINARY = 'java -jar %s yuicompressor-2.4.6.jar'
- 22. Managing Mediapython manage.py compresscombines static content
- 23. applies post processing filters
- 24. creates unique name from hash of content
- 25. pushes to S3/CDN Managing MediaWhen template rendersContent is hashed => hash value stored in cacheIndividual reference in template replaced{% compress css %}<link href="{{STATIC_URL}}css/admin/base.css" /><link href="{{STATIC_URL}}css/admin/changelists.css" /><link href="{{STATIC_URL}}css/icon_sprites.css"/><link href="{{STATIC_URL}}css/common_10.css" /><link href="{{STATIC_URL}}css/tablesorter.css" /><link href="{{STATIC_URL}}css/multiselect.css" /><link href="{{STATIC_URL}}css/superfish.css" />{% endcompress %}<link rel="stylesheet" href="http://cdn.adstack.com/compress_cache/css/32dd63bd423c.css" />
- 26. Automatic SpritesWhat are sprites?Sprites are composite images made up of other imagesWhy?Reduce # HTTP requestsHow?CSS is used to only show part of the composite image
- 27. Automatic SpritesHow do we use sprites?Set them as a css background on a fixed size elementPosition them so only part of the larger image showsCool.But this is really a painCreating imagesCustom css for positioning
- 29. can help build the sprite automatically
- 31. Uses python + PIL to generate the sprite
- 32. Uses pngcrush to optimize the final image size
- 33. Use Case:
- 34. We have a folder full of icons
- 36. We want to easily put these in templates
- 37. {% icon "email" %}Automatic SpritesSimple example: lots of icons*doing this can be a pain
- 38. Automatic Sprites1) Configure Media bundler settingsMEDIA_BUNDLES = ( {"type": "png-sprite", "name": "icon", "path": os.path.join(MEDIA_ROOT,"icons"), "url": "../icons/", "css_file": os.path.join(MEDIA_ROOT,"css","icon_sprites.css"), "files": [ “add.png”,“delete.png”,“user.png”,“delete.png”,“group.png”, ] },)
- 39. Automatic Sprites1) Configure Media bundler settingsMEDIA_BUNDLES = ( {"type": "png-sprite", "name": "icon", "path": os.path.join(MEDIA_ROOT,"icons"), "url": "../icons/", "css_file": os.path.join(MEDIA_ROOT,"css","icon_sprites.css"), "files": filter(lambda x: x[-4:]== '.png', os.listdir(os.path.join(MEDIA_ROOT,"icons"))) },)
- 40. Automatic Sprites2) Bundle our mediapython manage.py bundle_media3) This creates a sprite.png + sprite.css.icon {background-image: url('http://cdn.adstack.com/icons/sprites/icon110701154833.png?675d7dfaa1e1');}.icon_user {width: 16px;background-position: 0px 0px;height: 16px;}.icon_add {width: 16px;background-position: -16px 0px;height: 16px;}Etc…
- 41. <style>.icon {width: 16px;height: 16px;margin: 0;padding: 0;display: inline-block;position: relative;top: 2px;}</style><div><span class=“icon icon_user”></span> Hello Evan</div>Automatic Sprites4) We can then show icons using cssHello Evan
- 42. Automatic Sprites5) We can easily write template tags to make this easier#front_end_tags.pyfrom django import templateregister = template.Library()@register.inclusion_tag("common/front_end/icon.html")def icon(icon_name): return locals(){# common/front_end/icon.html #}<span class="icon icon_{{ icon_name }}"></span>6) Now it’s a bit easier to develop<div> {% icon "user" %} Hello Evan</div>
- 43. AutomationFabric Deploy Script from fabric.api import *defcdn_deploy():run('python manage.py bundle_media')run('python manage.py collectstatic --noinput')run('python manage.py compress')fab cdn_deploy
Editor's Notes
- #3: How does this relate to Continuous Integration?
- #4: I’ve worked on a broad range of startups and I’ve w
- #19: We need this custom storage backend so that it writes both locally and pushes it to S3. I think its local because it will then check to see if it exists on disk and if so it will assume it exists on the CDN
- #20: You can have your system compress these things on the fly, but I imagine in most cases you actually want it to compress all your media as part of your deploy process