Kharkivpy#3: Javascript and Python backend

2,920 views

Published on

Kharkivpy#3: Javascript and Python backend

Published in: Technology

Kharkivpy#3: Javascript and Python backend

  1. 1. JavaScript and Python back-end Max Klymyshyn oDesk PS Twitter: @maxmaxmaxmax Github: joymax Sources: goo.gl/zbtXHSaturday, March 24, 12 1
  2. 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 updatesSaturday, March 24, 12 2
  3. 3. The solution Add Assets Management tools to the project Define and follow conventionsSaturday, March 24, 12 3
  4. 4. TOC Project Structure Assets management JavaScript Templates Constants within JS files Browser-specific assets SCSS/LESSSaturday, March 24, 12 4
  5. 5. Note This presentation based on Flask but its possible to use Django or any other framework which supported by WebassetsSaturday, March 24, 12 5
  6. 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 • cssSaturday, March 24, 12 6
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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 codeSaturday, March 24, 12 15
  16. 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. 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 clientSaturday, March 24, 12 17
  18. 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 shouldSaturday, March 24, 12 18
  19. 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 clientsSaturday, March 24, 12 19
  20. 20. Questions?Saturday, March 24, 12 20
  21. 21. Saturday, March 24, 12 21

×