Serve jQuery & Angular via CDN, fix compression

Use Google's CDN to serve these incredibly common libraries, falling back to our local minified versions if needed. Yuglify can't compress the standard jQuery library (as noted on yui/yuglify#19). As a workaround, we can pass the minified version to Yuglify, as the minified version lacks comments that are triggering the error. Also, move the last bit of JavaScript into the minified project source.
DavidCain · May 28, 2016 · 01ab81a · 01ab81a
1 parent ce7b693
commit 01ab81a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 38 deletions.
diff --git a/ws/settings.py b/ws/settings.py
@@ -159,36 +159,32 @@
 # Project-specific settings
 MUST_UPDATE_AFTER_DAYS = 180
 
-PIPELINE = {
-    # Yuglify isn't installing properly in playbook, so just disable for now
-    'JS_COMPRESSOR': None,
-    'CSS_COMPRESSOR': None,
+# Break packages up based on how they'll be served
+cdn_libs = ['jquery/dist/jquery.min.js', 'angular/angular.js']
+other_libs = ['lodash/dist/lodash.js',
+              'bootstrap/dist/js/bootstrap.min.js',
+              'footable/js/footable.js',
+              'footable/js/footable.sort.js',
+              'jquery-ui/ui/core.js',
+              'jquery-ui/ui/widget.js',
+              'jquery-ui/ui/mouse.js',
+              'jquery-ui/ui/sortable.js',
+              'jquery-ui/jquery-ui.js',
+              'djng/js/django-angular.js',
+              'angular-ui-select/dist/select.js',
+              'angular-sanitize/angular-sanitize.js',
+              'angular-ui-sortable/sortable.js',
+              'js/ui-bootstrap-tpls-0.14.3.js',
+              ]
+local_js = ['js/application.js', 'js/footable_breakpoints.js']
 
+PIPELINE = {
     'JAVASCRIPT': {
+        # With jQuery and Angular served via CDN, this is everything
         'app': {
-            'source_filenames': (
-                'lodash/dist/lodash.js',
-                'jquery/dist/jquery.js',
-                'angular/angular.js',
-                'footable/js/footable.js',
-                'footable/js/footable.sort.js',
-                'js/ui-bootstrap-tpls-0.14.3.js',
-                'jquery-ui/ui/core.js',
-                'jquery-ui/ui/widget.js',
-                'jquery-ui/ui/mouse.js',
-                'jquery-ui/ui/sortable.js',
-                'jquery-ui/jquery-ui.js',
-                'djng/js/django-angular.js',
-                'angular-ui-select/dist/select.js',
-                'angular-sanitize/angular-sanitize.js',
-                'angular-ui-sortable/sortable.js',
-
-                'bootstrap/dist/js/bootstrap.min.js',  # Can go after footer
-
-                'js/application.js',
-            ),
+            'source_filenames': other_libs + local_js,
             'output_filename': 'js/app.js',
-        }
+        },
     },
     'STYLESHEETS': {
         'app': {

diff --git a/ws/static/js/footable_breakpoints.js b/ws/static/js/footable_breakpoints.js
@@ -0,0 +1,8 @@
+$(function () {
+  $('.footable').footable({
+    breakpoints: {
+      phone: 480,
+      tablet: 900 // Content column is 940 before resizing
+    }
+  });
+});
diff --git a/ws/templates/base.html b/ws/templates/base.html
@@ -1,4 +1,5 @@
-{% load pipeline%}
+{% load pipeline %}
+{% load staticfiles %}
 {% load gravatar %}
 {% load perm_tags %}
 <!DOCTYPE html>
@@ -16,18 +17,12 @@
     {% endblock css %}
 
     {% block js %}
-    {% javascript 'app' %}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+    <script>window.jQuery || document.write("<script src='{% static "jquery/dist/jquery.min.js" %}'><\/script>")</script>
 
-    <script type="text/javascript">
-        $(function () {
-            $('.footable').footable({
-                breakpoints: {
-                    phone: 480,
-                    tablet: 900, {# Content column is 940 before resizing #}
-                }
-            });
-        });
-    </script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>
+    <script>window.angular || document.write("<script src='{% static "angular/angular.min.js" %}'><\/script>")</script>
+    {% javascript 'app' %}
     {% endblock js %}
 {% endblock head %}
 </head>