Managing your statics
… yet another JS/CSS workflow
Slide 2
Slide 2 text
Let’s get dirty
❖ How to manage environments
❖ Manage third party JS libs and packages
❖ Automatically compile files on dev
❖ “Deploy” (Compress)
Slide 3
Slide 3 text
Boooooring
Let’s create a simple test site!!!
Slide 4
Slide 4 text
What do you need to know?
❖ What is JS?
❖ What is CSS?
❖ What is Compass?
❖ What is Git?
❖ What is Django? (not really)
Slide 5
Slide 5 text
Our test
Slide 6
Slide 6 text
Our test
WHY BOTHER?
I CAN DO IT IN 15 MINS IN PLAIN JS/CSS
Slide 7
Slide 7 text
Our test
Let’s overkill this
Slide 8
Slide 8 text
From scratch
Introducing yet another Django Boilerplate
github.com/pleasedontbelong/django-boilerplate/
Lock and loaded in 15 mins (too much):
❖ Django
❖ Pipeline
❖ South
❖ etc.
Need some work
Slide 9
Slide 9 text
Our test
Slide 10
Slide 10 text
How to manage gems in environments
Introducing Bundler
http://bundler.io/
- Consistent environment for ruby applications
- Track the rubygems your application needs
- Install gems from a Gemfile with:
$ bundle install
- Run gems with
$ bundle exec
Slide 11
Slide 11 text
How to manage gems in environments
WHY BOTHER?
JUST INSTALL GEMS GLOBALLY
Slide 12
Slide 12 text
How to manage gems in environments
- Manage dependencies
- Automatization
- Manage gem versions
Slide 13
Slide 13 text
Our test
Slide 14
Slide 14 text
Manage third party libs and packages
Introducing Bower
http://bower.io/
- A package manager for the web
- Works with Git
- From command line
$ bower install =#
- Almost all packages (you can add your own)
http://bower.io/search/
Slide 15
Slide 15 text
Manage third party libs and packages
WHY BOTHER?
Just DOWNLOAD the files, it’s not that hard
Slide 16
Slide 16 text
Manage third party libs and packages
- Manage dependencies
- Automatization
- Keeps your repository clean!
(especially for the brave ones that
are still using SVN)
Slide 17
Slide 17 text
Our test
YOU CAN DO IT
Slide 18
Slide 18 text
Automatically compile files on dev
Introducing Guard
https://github.com/guard/guard
- Handle events on file system
modifications
- Plugins for compass, sass, etc
- Run shell scripts
- Live Reload
Slide 19
Slide 19 text
Automatically compile files on dev
WHY BOTHER?
JUST REFRESH!! YOU LAZZYASS
Slide 20
Slide 20 text
Automatically compile files on dev
(save) CTRL+S
(goto console) ALT+TAB
(compile) Up => ENTER
(goto browser) ALT+TAB 2x
(refresh) CTRL+F5
(goto IDE) ALT+TAB 2x
CODE CODE
(save) CTRL+S
(goto console) ALT+TAB
(compile) Up => ENTER
…..
Slide 21
Slide 21 text
Automatically compile files on dev
Slide 22
Slide 22 text
Our test
YOU CAN DO IT
Slide 23
Slide 23 text
“Deploy” (Compress)
Introducing require.js
http://requirejs.org/
- Optimization tool
- Combine scripts together
- … I’d need another presentation
and another presentator.
She’s right
Lineman.js
… or just google “JS workflow”
Slide 26
Slide 26 text
Why we didn’t use them?
- Glue (python) for generating
sprites
- Pipeline (django) for integrating
and compressing JS/CSS, versioning
and deploying to S3
- A dev/staging/prod environments
Slide 27
Slide 27 text
For Deploying Botify SAAS?
We’re still working on it
Slide 28
Slide 28 text
Donny Don’t
Don’t trust me
Google it!
Download it!
Test it!
..and RTFD!
YOU CAN DO IT!