 Still ugly Hi, I'll let me welcome Matias Runge He's a software engineer at Red Hat and he will tell us a bit about web applications using Django and AngularJS Thank you very much In the next few minutes First of all welcome to my talk I'm glad I see all of you here on a Sunday afternoon after a long Week and so on so This is just to be Intended as a introduction touching many many many talk topics or many many buzzwords. I Guess naming all those buzzwords is the reason why I was selected to be presenting here It's not to be manned as a deep dive into anything So if if you would like to see something like that I would suggest to save your time and leave So first of all I would Introduce like to introduce you to the terminology and just describe where we are What we are talking about and What's the problem description? So First of all Does any one of you have experience with something like OpenStack? Awesome And any one of you have experience with Django One tooth. Oh great anyone experience with Angular great as well so OpenStack is a project to Provide you infrastructure as a service like you're able to Click on a button and get a virtual machine somewhere running Horizon is the project. I'm working on is the Web front and for OpenStack so you could click in your horizon onto that button and get a instance I'm also a Fedora contributor RDO contributor and maintainer on Redhead OpenStack packages and so on So Most of you should be knowing We are talking about browsers. We are talking about web servers We are talking about whiskey with which is the interface binding your jam Django in your web server And we are talking about client-side scripting This in OpenStack Horizon this somehow change we we've been a Django only project and OpenStack is very very Python centric. I'd say welcome Take a seat so As you all have heard already about Django, I'll just throw the slides in it's still a Fastly evolving project with some interesting changes in for the for the next few versions Doing a bit deep a short detour I already Mentioned OpenStack Horizon It is a whiskey application running in Mostly Apache HTTP it is implemented in Python as it uses Django and Originally we were or more something like two projects First one was a It's not interesting No worries you want to scarf So I'm sorry I cannot sell them um Horizon is Being made of two Python applications one is named Horizon and it's currently the framework to implement a dashboard to It's it's the Framework to implement a dashboard for OpenStack dashboard and OpenStack dashboard itself. It's it's the implementation It has been part of OpenStack since Probably ever it's it's not entirely true, but it's it's been integrated in OpenStack for a long long time And as I mentioned before it's the end user interface for OpenStack dashboard unlike other Django applications it is completely stateless and it doesn't use a database so it everything is stored Somewhere else and it's exclusively talks to Underlying services using a RESTful API I Mentioned before Horizon is The dashboard for OpenStack and you could do something like launch instances manipulate your System images you could Attach create volumes like Comparable to a hard disk you could manipulate network configurations and so on or Even launch Databases if you're using the database project in OpenStack So Django provides you a whole bunch of tools useful for creating something like a Dashboard or a web web application like like it takes care of Authenticating your users. It's even pluggable as we will see in the next slide You have features like a built-in admin site, which is not used at all in OpenStack As you don't in Come on As we don't use a database adapter in OpenStack, we don't need the Function in Django for this We'll have a short look at the template agent engine afterwards And as I mentioned, it's extendable and I'll explain you how so you could plug in your user user authentication by re-implementing specific methods and The way OpenStack use it is as It provides you a user object and that user object is authenticated against OpenStack Keystone, which is the authentication on authorization Project within OpenStack and the User object is created at log-in time and destroyed afterwards You just get a token from Keystone, which is used to get all the data and It's also used for permission checks like is my user Allow to do this or that what is the role of my user? And so on as I'm lucky and you all are familiar with templates in Django. I Don't need to explain this It briefly describes how to interact with templates or how to provide templates you just Submit or provide a template in Something like an HTML template and Django will fill in values and fill in variables in there AngularJS is front and only so We talked Until now about server side now we are talking about front and side and Angular is just One pick there are many many other frameworks even more popular frameworks than Angular but at at the Time we were talking about integrating something like as client-side scripting It seemed to be the most obvious thing to integrate Angular so it's a Something like a application framework maintained by Google We basically have to somehow competing versions like 1.x is in production and It's a pure JavaScript implementation Version 2 is in beta since well at least since we are talking about this and it uses Something named type script, which is a super set of a JavaScript. So nobody No browser can understand it directly and you need to compile this And not being sure about how smart this is so a implement application and Angular could look like this one pretty ugly source code So How does it work? since it's Sunday afternoon It looks like this one here and you could type in something like give a talk and It directly adds even if you can't read this it directly adds it and it's pure client side You could even strike it through well Okay, previously I just showed you the Template in HTML and If you're spotting a bit nearer you could see the double curlies and the double curlies are also used by Django So if you're going to mix both angular and Django, this will hurt you The JavaScript for this Just for completeness is I Shouldn't So As I mentioned before the templates both share double curlies you could redefine the template text for angular With this kind of ugly hack I mentioned on the bottom of the slide if you're doing this and using additional plugins or additional Packages for angular this will going to hurt you as well because those plugins are or Additional libraries will expect the double curlies and not something else you defined So either you are going to change that source code as well, or you should be smart and do something else so We had Django and we had angular and how to mix both together There are some useful libraries producing or creating directly rest APIs from your Django models The first three of them are just to be mentioned. I have a demo for the first one The last library is not For creating something like a Restful API it it's like something like a proof of concept or something which is currently evolving quite fast To add something like asynchronous features to Django It currently does not provide something like this. It adds something like HTTP to to Django It's currently agnostic of that so I Just thought I should I'm sorry a short blogging application it will Give you something like a Short title a summary and something like a full text or whatever. It's nothing really Estonishing so you you're basically putting this To your models in in your Django app if you're mixing in the rest framework there's a bit of code to write in in the in your URL specification and You're basically describing how to serialize your models into something consumable by by a rest or how to describe a And you could even so basically what I'm specifying here is Which model to serialize and which fields to display in that Jason And at the rest I'm just Describing What to view and where to view this so back to the demo if you're just using this in Django, it's nothing really. I Just did it did a quick demo and Just put out the Subjects so if Looking at what we get from Rest API, this is just what the code Nobody can read it. This is something be you could just easily pull in we are in API in in this case we are rest and You get even the url to access the objects stored in the database You could even use this to Pull pull the contents of that data out and Finally if you're put putting in the Angular, no, sorry the Django admin interface You could add something like a new object Something like fill in the title summary and so on so nothing really interesting so get getting back and Pulling the data out with angular provides you most basically the same we had with a with Django before It's quite compact code and nothing really Interesting so going going back This is how your Implementation would look like if you're using pure angular or pure Django so in Open stack horizon Just to set the terms straight We have something do I have it? We have something oh like a dashboard and this is the project Stuff we We were hitting here hiding here This is something we we are named a dashboard a dashboard The hierarchy below this what do you see a compute our network overview and so on those are named panels I Already outlined how horizon and open stack dashboard fit together so as I mentioned open stack uses Lots of API's so this is just a Small window of every API you have an open stack So it's it seemed to be reasonable to directly talk to those API's via Some kind of JavaScript since we already have some code we Created a way how to to extend horizon something like you could plug in a Python module or even a Angular no Something like a Python model and and if you're using a Python module you could even Ship static files like a like an Angular code within that so we Separated the Python module and the Python module and the configuration into Various bits the idea is you could even package it up for like RPM So you're just putting in somewhere your Python module like a pure Python package and you just drop in that Here in a named enabled file in a specific or specified directory and horizon will put pull up this automatically Specified here is the name of the panel would be my panel it would be put in into the dashboard named identity and and The section at panel. There's also the Python module named in there and If you're requiring to add something like to your Django Applications that would be my plug-in in this case and The way how static files like Images javascript and so on are handled in horizon are they are just directly placed in the Folder where you have your Python package and Django will discover those files automatically and copy them to a specific specified place There's even a undocumented feature with your Running this Command now named collect files if you're appending the Parameter dash L it will create links instead of a copy of the files Which is quite neat so if you're going to create something like a Plug-in for horizon You will end up in Creating something like this In this case the plug-in would be named user and you would probably have something like forms a panel HTML files somewhere located in templates If you would be distributing some static files you would be placing them in a folder named a static and so on So it's not that different from what you would expect from a pure Django implementation As I stated earlier We We are using the framework named horizon to implement all that stuff. So we are Inheriting much of their function of that functionality already so to describe something like a panel It does not take more than those five lines of code if you're Just doing this Even your routing is going to be pluggable in this case and Just to put out something like a HTML file you would inherit a view and Direct your template to whatever you want. So it might look like in this case It's just taken from the Horizon upstream documentation So you're basically extending blocks and Yes the docs are predefined in the base HTML file described in the OpenStack dashboard templates Directory if you're adding something like JavaScript content be sure to run collect static Otherwise you get interesting results. I say Since That angular stuff within horizon is still quite in flux I just put in here some links to Example implementations it Somehow tends to change upstream how to implement and where to put files So they differ a bit and We are still Some how undecided how to do it best So we are we are implementing something and trying to learn from from this But we'll see so Quite quick one What we did not cover yet is how to test what you implemented upstream we've seen there are several ways to break everything and And Tests tend not to be what you think they are testing Especially if you're talking to APIs defined somewhere else If you're testing something and You're is expecting those URLs not to change. Well, you have a problem As if you're integrating this kind of stuff You might see something changed so we also don't cover how to check for consistency if you're Adding content to horizon You could put in Something like a plug-in There are no consistency checks to see if this fits to the upstream style There are no naming checks, of course and Currently, there's no way for Upstream horizon to check if your plug-in is does what it's supposed to do We also did not cover how to Package something like a plug-in it's just a Python package, but I didn't cover it here and Since JavaScript frameworks are evolving that fast If I would start a new project, I would probably be looking at something else or Or at least do some more research about that kind of frameworks and That's it, okay, I guess I saved you 20 minutes of your lifetime Thank you, do you have any questions who wants a scarf Good question I'd say it's a bit historic Since horizon was primarily a Django project we have that Meetup upstream Where some guys approached us and said well either we are going to re-implement everything else or we are going to fork you Or You are going to adopt So and those guys were doing stuff in Angular. So what do you do? Are you splitting the community? Are you? This is why it was taken so Other than that no real reason I know there are other frameworks doing a great job as well So are you sure you don't want a scarf anything else? Yes So the question is how do I deal with Authentication or other database Excesses in OpenStack Horizon And the answer is I'm creating all objects Needed at runtime. So if I I'm creating something like a user, I'm Creating this by integrating into the authentication stack I'm directly talking to OpenStack Keystone, which does the authentication and I'm creating a user object object when I need it and the same is true so and Keystone provides me a list of other API endpoints. I'm allowed to talk to so I am basically in my case, I'm Keeping sessions somewhere else like in memcash d a redis or whatever This is why I don't need to care about database migrations for example. Do you want to scarf? So Hey Yes, please So the question is how angular j s and and j query relate to each other so Basically both are client side scripts and I would expect I would I would just use angular instead of that j query Yeah, so For example angular has neat features like it does Form validation at client side so you get directly a feedback On the other side you need to implement those checks twice Depends what you like Do you want a scarf? Who wants another scarf? so The Implementation or Implementation of everything client side kept us busy for the last one one and a half years and Over that time we also Discovered we were doing a quite bad job in Matching other projects in open stack we just talked about managing virtual machines Managing volumes managing network, but open stack has much more like Managing DNS managing containers Managing databases actually we we have something like Support for databases as a service in horizon, but it's very Very basic we we also have something like support for Hadoop But we don't really match Everything we have in open stack and since we are doing such a bad job. We were Extending or moving to that plug-in model To enable other projects to implement their own dashboards, of course so it's just adding something like a Enabled file and adding that or pointing horizon to your Python module Just plugs in your Dashboard we still need to Support something like domain scope tokens in Horizon we currently do I don't do so I need to Make a bigger detour about this so maybe we should discuss it afterwards So well, so if you're going to Keystone and getting a token Seriously and Your token is currently scoped to your project and You could re-scope your token to use a different Project, but if you're using a back-end or Hierarchical tenants like Or multiple domains in your Keystone it's a keystone setting we currently Match that in horizon at all Horizon just uses a project scope token Unlike all other projects in OpenStack So this will be Something we need to address in the near future We we cannot manage So the the way projects are set up are You are a user and you have a project, but that project cannot it actually in OpenStack It can but in horizon it cannot have a super lying project or Something like in a in a hierarchy So we have no real Q currently how to display this to the end user it somehow falls down to how to do inheritance of roles and so on of Course this is defined from Keystone But still we need to display the user what you can do. Okay. Yes I Would probably look for example at something like Polymer Which seems to be the new pick in the yeah, but so currently we Until angular 2 is not stable. We have some kind of grace period, but If we are going to rewrite everything It it makes sense to look at something else maybe but I'm just one single guy in the project and it's a project project decision anything else. Okay. Thank you very much To be honest Thank you so much Last year So why should I do you that they were right now Actually, there is a photo from 2013 I believe that you are photobombing our photo Oh Okay, I can it's turned on