Kharkivpy#3: Javascript and Python backend

1. JavaScript and Python
back-end
Max Klymyshyn
oDesk PS
Twitter: @maxmaxmaxmax
Github: joymax
Sources:
goo.gl/zbtXH
Saturday, March 24, 12 1

2. The problem
JavaScript code grew up on the Project
Optimization of the Application become the pain in the ass
Hard to manage dependencies and test updates
Saturday, March 24, 12 2

3. The solution
Add Assets Management tools to the project
Define and follow conventions
Saturday, March 24, 12 3

4. TOC
Project Structure
Assets management
JavaScript Templates
Constants within JS files
Browser-specific assets
SCSS/LESS
Saturday, March 24, 12 4

5. Note
This presentation based on Flask but it's possible to
use Django or any other framework which
supported by Webassets
Saturday, March 24, 12 5

6. Project structure
• app.py
• assets.py
• templates
• base.html
• bundles
• browsers.py
• jstemplates.py
• scss_bundle.py
• vars.py
• static
• src
• js
• css
• js
• css
Saturday, March 24, 12 6

7. Assets management
core = Bundle(
"src/js/lib/core/*.js",
"src/js/lib/*.js",
output="core.js"
)
assets.register("js_core", core)
Saturday, March 24, 12 7

8. JavaScript Templates
var %(namespace)s = %(namespace)s || {};
%(namespace)s._assign = function (obj, keyPath, value) {
var lastKeyIndex = keyPath.length - 1;
for (var i = 0; i < lastKeyIndex; i++) {
key = keyPath[i];
if (typeof obj[key] === "undefined") { obj[key] = {}; }
obj = obj[key];
}
obj[keyPath[lastKeyIndex]] = value;
};
(function(){
// ... here should be templates definitions
})();
Saturday, March 24, 12 8

9. JavaScript templates
templates = (
'system/*.tpl',
'views/main/*.tpl',
'views/group/*.tpl',
'views/rate/*.tpl',
'views/search/*.tpl',
'views/sort/*.tpl',
'views/progress/*.tpl',
'views/sidebar/listings/*.tpl',
'views/sidebar/search/*.tpl',
)
Saturday, March 24, 12 9

10. Constants within JavaScript
def constants(app):
cfg = {}
with app.test_request_context():
cfg.update(dict(
API_URL=url_for("api", _external=True),
TITLE="Sample Widget"
))
return cfg
conf_app = JSVarsBundle("src/js/conf/main.js",
output="js/compiled/conf/conf.js",
vars=constants(app),
filters=[“yui_js”],
ignore_filters=assets.debug
)
Saturday, March 24, 12 10

11. Constants within JavaScript
Configuration file looks like:
...
_.defaults(config, {
'api_url': '$$API_URL',
'title': '$$TITLE'
});
window.KHARKIVPY.config = config;
Saturday, March 24, 12 11

12. Browser-specific assets
We need to load custom assets for different browsers
We don’t have ability to use conditional commends for IEs
(business requirement)
Saturday, March 24, 12 12

13. Browser-specific assets
chrome17 = BrowserBundle(
'src/css/browsers/chrome17.css',
browser='Chrome', browser_version='17',
output='css/chrome17.css'
)
...
browserspec_assets_loader = LoaderBrowserBundle(
'src/css/browsers/safari5.css', # dirty hack, we’ll change it
bundles=[chrome17, safari5],
filters='loader_browser',
output='js/compiled/assets-loader.js'
)
assets.register(
"browserspec_assets_loader",
browserspec_assets_loader)
Saturday, March 24, 12 13

14. Browser-specific assets
Below is generated snippet by webassets bundle:
(function (assets) {
BrowserAssets('/static/', assets);
})({
'Chrome': {
'17': ['src/css/browsers/chrome17.css']},
'Safari': {
'5.1': ['src/css/browsers/safari5.css']}
});
Saturday, March 24, 12 14

15. SCSS/LESS
It was painful to maintain raw CSS for complex public
widget
We declined to use LESS because we aren’t found good and
maintainable LESS compiler for Python
We decided to not use client-side LESS parser to avoid
possible conflicts with client’s code
Saturday, March 24, 12 15

16. SCSS/LESS
style_files = (
'reset.scss',
'base.scss',
)
register_scss_bundle(
style_files,
assets=assets,
name='css_core',
output='css/style.css',
prefix='src/css',
compile_to='css/compiled'
)
Saturday, March 24, 12 16

17. CDN (Amazon CloudFront)
Sometimes back-end server goes down
Clients and partners may experience really weird behavior
and look of the Widget when back-end not available
No one want to loose face in front of the client
Saturday, March 24, 12 17

18. CDN (Amazon CloudFront)
All of static related to the Widget hosted on Amazon
CloudFront
In case back-end goes down for maintenance or because of
failure JavaScript display nice error
Widget still looks like it should
Saturday, March 24, 12 18

19. CDN Pitfalls
Amazon CloudFront may update your files REALLY SLOW
It may take up to 24 hrs to spread updates to all CDN nodes
around the world
You may experience hard time with your product owner
CDN is for really patient clients
Saturday, March 24, 12 19

20. Questions?
Saturday, March 24, 12 20

21. Saturday, March 24, 12 21