Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CDN proposal using CORS #680

Closed
juliandescottes opened this issue Aug 21, 2013 · 7 comments
Closed

CDN proposal using CORS #680

juliandescottes opened this issue Aug 21, 2013 · 7 comments
Labels
Milestone

Comments

@juliandescottes
Copy link
Contributor

@juliandescottes juliandescottes commented Aug 21, 2013

Hi,

I think I got an Aria Templates "CDN" working.
You can see it in action here : http://plnkr.co/edit/BtIHoo

Instead of relying on the old XDR + crossdomain.xml approach, I am using CORS. With XDR, I managed to have something "working", but it was really unreliable.

The CDN itself is running on Google APP Engine (http://ariatemplatestcdn.appspot.com/). More details about that below.

How to use it

Load aria templates from the CDN :

<script src="http://ariatemplatestcdn.appspot.com/cdn/1.4.4/min/aria/ariatemplates-1.4.4.js"></script>

Load the skin from the CDN (if you want to use widgets) :

<script src="http://ariatemplatestcdn.appspot.com/cdn/1.4.4/min/aria/css/atskin-1.4.4.js"></script>

Declare a root map :

aria.core.DownloadMgr.updateRootMap({
    "aria" : "http://ariatemplatestcdn.appspot.com/cdn/1.4.4/min/",
    "*" : ""
});

Then you can load both aria templates classes and your own classes.
(you can refer to the plunker for a live example).

Aria Templates impacts

On aria templates side, I am serving a slightly custom version, which is using aria.core.transport.XHR instead of aria.core.transport.XDR, even for cross-domain requests.

In aria.core.IO, line 215 was changed to :
this.__crossDomain = "aria.core.transport.XHR";

CDN

Other than that the CDN itself is a simple google appengine application, which allows GET and OPTIONS requests from any origin. (code below)

import os, mimetypes, logging

from google.appengine.ext import webapp
from google.appengine.ext.webapp import util

mimetypes.init()

class MainHandler(webapp.RequestHandler):
  def options(self, path):
    self.response.headers['Access-Control-Allow-Origin'] = '*'
    self.response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    self.response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'
    self.response.headers['Content-Type'] = mimetypes.guess_type(path)[0]
  def get(self, path):
    path = os.path.normcase(os.path.join(os.path.split(__file__)[0], "cdn/", path))
    self.response.headers['Access-Control-Allow-Origin'] = '*'
    self.response.headers['Content-Type'] = mimetypes.guess_type(path)[0]
    self.response.out.write(open(path, 'r').read())

def main():
  application = webapp.WSGIApplication([
      ('/cdn/(.*)', MainHandler)
  ], debug=True)
  util.run_wsgi_app(application)

if __name__ == '__main__':
    main()
@benouat

This comment has been minimized.

Copy link
Member

@benouat benouat commented Aug 22, 2013

Good game !! Well done.
Let's do the same on cdn.ariatemplates.com

@piuccio

This comment has been minimized.

Copy link
Contributor

@piuccio piuccio commented Aug 23, 2013

👍

btw this.__crossDomain can be set with aria.core.IO.updateTransport, no need to change anything in the code.

@juliandescottes

This comment has been minimized.

Copy link
Contributor Author

@juliandescottes juliandescottes commented Aug 23, 2013

Cool, I'll try using updateTransport.

@juliandescottes

This comment has been minimized.

Copy link
Contributor Author

@juliandescottes juliandescottes commented Sep 4, 2013

updateTransports works fine, thanks !

I just tried an alternative : https://github.com/jpillora/xdomain . Purely client side, no need to set anything on the server. You only have to drop a simple html file on your CDN and that's it.

I did this on my atcdn repository (https://github.com/juliandescottes/atcdn/tree/gh-pages) , and it's working !
That's cheaper to implement than CORS and apparently more supported.

Below is the basic HTML file you need to use this new approach :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AT CDN bootstrap</title>
    <script src="http://jpillora.com/xdomain/dist/xdomain.min.js" slave="http://juliandescottes.github.io/atcdn/proxy.html"></script>
    <script src="http://juliandescottes.github.io/atcdn/1.4.4/min/aria/ariatemplates-1.4.4.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        aria.core.IO.updateTransports({
            'crossDomain' : 'aria.core.transport.XHR'
        });
        aria.core.DownloadMgr.updateRootMap({
          "aria" : "http://juliandescottes.github.io/atcdn/1.4.4/min/",
          "*" : ""
        });
    </script>
    </body>
</html>
@juliandescottes

This comment has been minimized.

Copy link
Contributor Author

@juliandescottes juliandescottes commented Sep 4, 2013

And here it is running on plunker : http://plnkr.co/edit/Hs7Q7mqBm6148Yb4Cewa?p=preview

@benouat

This comment has been minimized.

Copy link
Member

@benouat benouat commented Sep 5, 2013

I just tried an alternative : https://github.com/jpillora/xdomain . Purely client side, no need to set anything on the server. You only have to drop a simple html file on your CDN and that's it.

This lib is just pure awesomeness! Super simple, but what a clever trick !!

@jakub-g

This comment has been minimized.

Copy link
Collaborator

@jakub-g jakub-g commented Nov 6, 2013

The CDN is there on http://cdn.ariatemplates.com/
Let's continue the discussions on http://ariatemplates.com/forum/showthread.php?tid=94
Closing this item for now. @juliandescottes thanks for inspiration :)

@jakub-g jakub-g closed this Nov 6, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.