Yet another JS/CSS workflow

A friday presentation to show the different tools we use to compile our CSS and JS files and how we work every day at @botify

- Source Code: https://github.com/pleasedontbelong/botify_prez
- Boilerplate: https://github.com/pleasedontbelong/django-boilerplate

Transcript

1. Managing your statics … yet another JS/CSS workflow
2. Let’s get dirty ❖ How to manage environments ❖ Manage third party JS libs and packages ❖ Automatically compile files on dev ❖ “Deploy” (Compress)
3. Boooooring Let’s create a simple test site!!!
4. What do you need to know? ❖ What is JS? ❖ What is CSS? ❖ What is Compass? ❖ What is Git? ❖ What is Django? (not really)
5. Our test
6. Our test WHY BOTHER? I CAN DO IT IN 15 MINS IN PLAIN JS/CSS
7. Our test Let’s overkill this
8. 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
9. Our test
10. 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 <gem> <params>
11. How to manage gems in environments WHY BOTHER? JUST INSTALL GEMS GLOBALLY
12. How to manage gems in environments - Manage dependencies - Automatization - Manage gem versions
13. Our test
14. 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 <name>=<package>#<version> - Almost all packages (you can add your own) http://bower.io/search/
15. Manage third party libs and packages WHY BOTHER? Just DOWNLOAD the files, it’s not that hard
16. Manage third party libs and packages - Manage dependencies - Automatization - Keeps your repository clean! (especially for the brave ones that are still using SVN)
17. Our test YOU CAN DO IT
18. 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
19. Automatically compile files on dev WHY BOTHER? JUST REFRESH!! YOU LAZZYASS
20. 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 …..
21. Automatically compile files on dev
22. Our test YOU CAN DO IT
23. “Deploy” (Compress) Introducing require.js http://requirejs.org/ - Optimization tool - Combine scripts together - … I’d need another presentation and another presentator.
24. “Deploy” (Compress) WHY BOTHER? APP WORKFLOWS ALREADY EXISTS
25. She’s right Lineman.js … or just google “JS workflow”
26. 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
27. For Deploying Botify SAAS? We’re still working on it
28. Donny Don’t Don’t trust me Google it! Download it! Test it! ..and RTFD! YOU CAN DO IT!
29. WE DID IT!
30. QUESTIONS?