Python and Angular, a perfect match?

Video in TIB AV-Portal: Python and Angular, a perfect match?

Formal Metadata

Python and Angular, a perfect match?
Title of Series
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Python and Angular, a perfect match? [EuroPython 2017 - Talk - 2017-07-14 - PyCharm Room] [Rimini, Italy] Python on mobile devices is still negligible mostly because of the GUI problems which arise. But Python on android devices is considered to be a solved problem since the module Python for Android is available. We have nowadays at least the possibility to develop for mobile devices with the GUI engine Kivy which is maybe the first choice for rapid prototyping on that platform. But as it comes to design work and mobile device look alike Kivy is still far behind the web development tools HTML/CSS. In our talk we present a conceptual work where we used Ionic - this is an mobile development framework based on Angular - to build the GUI part of an app and connected that to a Python back end. In our point of view our proposal is very general and will give Python a boost towards modern UX development and makes HTML/CSS/JavaScript a real option especially in combination with Angular. The main part of our solution that we show is the interoperation between JavaScript and Python such that asynchronous calls in both direction are possible. The advantage is to develop UX and back end code only once and use it literally on every platform where a Python interpreter and a browser runs
Point (geometry) Intel Context awareness Multiplication sign Decision theory View (database) Virtual machine Parameter (computer programming) Client (computing) Mereology Computer font Goodness of fit Software Electronic meeting system Software framework Endliche Modelltheorie Form (programming) Physical system Mobile Web Focus (optics) Matching (graph theory) Projective plane Software Video game Right angle Figurate number
Presentation of a group Inheritance (object-oriented programming) View (database) Decision theory View (database) Multiplication sign Event horizon Data model Graphical user interface Logic Logic Software framework Right angle File viewer Endliche Modelltheorie Set theory
Axiom of choice System call Digital electronics Multiplication sign Decision theory View (database) Direction (geometry) Data analysis Client (computing) Disk read-and-write head Mereology Formal language Front and back ends Web 2.0 Graphical user interface Cryptography Software framework Local ring Information security Service (economics) Mapping Moment (mathematics) Constructor (object-oriented programming) Data analysis Special unitary group Graphic design Flow separation Element (mathematics) Software framework Summierbarkeit Arithmetic progression Point (geometry) Server (computing) Mobile Web Branch (computer science) Web browser Element (mathematics) Architecture Regular graph Internetworking Directed set Task (computing) Context awareness Socket-Schnittstelle Standard deviation Axiom of choice Key (cryptography) Server (computing) Debugger Projective plane Android (robot) Client (computing) Computer network Cryptography System call Voting Software Personal digital assistant Query language Speech synthesis Musical ensemble Local ring
Injektivität Keyboard shortcut Service (economics) Scripting language Service (economics) Mapping Nuclear space Java applet Connectivity (graph theory) View (database) Keyboard shortcut Mereology Revision control Component-based software engineering Revision control Software framework Software framework Endliche Modelltheorie Data type
Dataflow System call View (database) Debugger Staff (military) Event horizon Field (computer science) Front and back ends Message passing Regular graph Loop (music) Event horizon Causality Network socket Pattern language output Pattern language output Message passing
Functional (mathematics) System call Digital electronics Euler angles Server (computing) Multiplication sign Parameter (computer programming) Connected space Event horizon Network socket Function (mathematics) Network socket Set theory Social class Computer worm
Standard deviation Group action Structural load Constructor (object-oriented programming) Code Decision theory Parameter (computer programming) Client (computing) Mereology Junction (traffic) Connected space Mathematics Logic Local ring Information security Video Genie Social class Scripting language Service (economics) Structural load Constructor (object-oriented programming) Menu (computing) Instance (computer science) Junction (traffic) Data stream Message passing Angle Physical system Functional (mathematics) Socket-Schnittstelle Game controller Module (mathematics) Service (economics) Pay television Event horizon Zugriffskontrolle Computer worm Software testing Message passing Task (computing) Default (computer science) Module (mathematics) Pay television Server (computing) Client (computing) Group action Component-based software engineering Event horizon Logic Function (mathematics) Network socket String (computer science)
Source code Chemical equation Mobile Web Computer program Online help Sphere Element (mathematics) Computer programming Power (physics) Revision control Graphical user interface Bootstrap aggregating Different (Kate Ryan album)
Module (mathematics) Standard deviation Server (computing) Module (mathematics) Server (computing) Online help Web browser Junction (traffic) Thread (computing) Web browser Demoscene Connected space Module (mathematics) Data structure Implementation Local ring Social class Task (computing)
Scripting language Point (geometry) Presentation of a group Matching (graph theory) View (database) Software developer View (database) Moment (mathematics) Mereology Product (business) Connected space Architecture Data model Graphical user interface Logic Logic Endliche Modelltheorie Arithmetic progression Computer architecture
Area Pairwise comparison Functional (mathematics) Server (computing) Service (economics) Digital electronics Length Multiplication sign Projective plane Bit Limit (category theory) Perspective (visual) Flow separation Front and back ends Number Personal digital assistant Network socket Speech synthesis Right angle Nichtlineares Gleichungssystem
good afternoon ladies and gentlemen hello everybody thanks
for attending the stock and I am going to speak about Python and angular and raise the question if this would be a perfect match my name is of a brown and I'm a cofounder of a small company and located in Stuttgart Germany and all main focus is had to connect to machines In the context of Industry 4 . 0 the OK so let's start this is the outline 1st uh 0 I would show you some kind of pre liminary here um arguments so what our thoughts to end up in what we have built here I would show you how we did it and I will go into some details of course at this and not we have not reinvented Davila but I want to in some detail so that you will and like I have a better start up if you want if you want to it's the same way we did it the and in the and at the end I would show you an example and if time maybe also a life examples way so that an introduction gooey is still a hard decision why is a Python lekking on mobile devices so much so and of course there are many many reasons and of course it's not native and so on but I I think I and get the on and draw and it should be possible the course it's a kind for Linux system so why is this so and this is an as uh here is the face figures which is kind of general but I have to stress at for us it would be better to rights um software in in Python when it fits so even on client side you would like to do this really a lot and so on so of course that this well established and for price in there there's still missing a standardized going from work on mobile devices so at least this and all point of view or at least this is 1 of the main reasons why it is not so much widespread at for example there's no you concept for Inc their incorporating Piketty 5 a which is quite common on desktop but on what form or by devices I mean that he's I haven't seen any practical projects doing this maybe there's and I would say the lucky to go and get to know this yeah and this is what we expect you would expect from a modern framework and so it's a really um I think well known safety 3 parts to the dual and did you model and which are
connected spy some they tell binding so every time you change the view model the viewer should be changed and every time the view is somehow and sending an event that you model has to be noticed about this and model on data on the right hand side is kind of loosely coupled to this set of parents in the model as the business logic of course I'm
not um that's kind of 1 up have you ever heard of key KB so key
is more is the only way to implement at the moment we on the mobile mobile devices connecting a Python kind of spec and yeah that's the only choice so sorry for missing this point
and but it's still it's still missing some standarized elements and it's hard to um do your own graphics on it because I mean it's kind of lacking uh documentation so maybe it is it has made progress in the last year which I haven't followed very well but at least at that time I that it was not so much stuff is a valid documented the ending the standard so if you for example to rapid prototyping it's really doing a good job but if you want me to deliver a role all it's um uh project very well designed it's hearts to do it in key the ants and of course this is 1 of 2 main uh and elects the head it's not common up to now and there's no specialist on the market and available and so is that it's it's really also a business kind of decision that you do not use this kind of thing if you are not the the graphics designer yourself so um modest fingers the HM frameworks and of course there these engines are the most advanced Cowie engines also on the mobile devices I mean there there are lots of reasons why this is so I think and it's because of its stand backbone of the Internet so uh the we engines are really well designed and they are few and and so on so they're really good and their specialists available on the market so that's very well known very nicely structured this respect to graphics definitions so you know this may be very well um graphics you do mostly in CSS or something related and it's kind of separated vote you really a separated branch with graphics but as a task by construction is not open for interacting Nate natively and directly with other languages and of course this is because of security issues and you do not want to do it is but in now in our point of view it's very sad because he dumb portunities order them the other 2 really nice engines are sitting there to speakings JavaScript and we would like to implement our Python back end on this OK I was so general concept and we combine angular in a general way with and by WebSockets the calls which we are doing from 1 side to another are synchronous in the sense and there's no direct return value I mean asyncronous we have heard a lot on this conference is that's all about us and I will and if you really want to do something like a synchronous you have to set up your Python back and in a special way but and with we think of it in right now as there is there are calls in both directions with no direct return value the the our concept works for all had clients as also mobile which used to have query on spec and on their own so what is the use case think of local data analysis concepts all cryptography or these things you would like to perform locally on your mobile phone or on your desktop even and you would look like to have a real well designed back and working directly with the front end yeah and the sun imitation of works also for a web client and if you have services ready in your network and this is simply because the map circuits this this so general that you can connect to the somewhere else not only local host and and now we have not taking care about security at the moment because we're using it at the moment just on the local host yeah you have to are 1 has to put more work on its to make it secure but I think there's no real problem with this and this is a kind of a different approach that then we have heard a lot of times on this conference I mean on the right-hand side you see uh and this is the typical set up which this proposed lot and as a sum of a tumor framework works as a front end and your Python web server acts as a back end it is a flask was rest 8 API whatsoever and it the problem here is a especially for our case use case and there's no need for HTTP server so why put something up which is totally oversized no need and so on on the other hand http server cannot act on its own twats declined so think about and something happens in the in the back and on the back end is performing uh um band coming from somewhere else is no possibility a tour and signal to the front end except with who may be at this kind of i and j and X but you really do not want to this day to do this because any it's it's on it's established parts and it's overhead so what is angular is
a map based framework fault you want you model binding and it was redesigned recently it has a nuclear concept for injection services and components and injections this kind of news services which um which provides a general way the daytime so there in Texas and services are on their view model side so in the middle the components are on the left hand side so the components are your more less the your view components and it's anybody has maybe somebody has maybe um experienced with without 1 or angular J. S what was this was the name and and yeah I've hurt some some part of opinions about this this is awful but I have gone through also Angular JS and that was not so awful but anger lot in fact it's really clear into science so it has happened something here it's based on typescript so it's a strongly typed version of some JavaScript and uh so um yeah it overcomes and some likings of Java itself what do I mean here is as
synchronous cause have told you uh um how and how would we perform these
the to the collection flow in our work we back and CWI pattern is the text input happens on an input fields of whatsoever and event is triggered as a message and the message is sent to the back and the back end is doing fences staff and creates a message triangular and last but these and restoring the view updated automatically so it's a closed loop here uh but of course the price back and can act on also totally by itself it can send messages and events toward the front end how do we do it is evident
that socket connection so it is not
really new but it works here we I redid directing he wins from about circuit to a Python function and a set of develops so on unpleasant inside here just and to and see how just some details I mean it's interesting um I think to see this if you ever have not experienced it before and if you know it appeared it's not to new and you can read and you can actually get that attitude back at the methods out of class by also by get at tribute and so here this and so let's go a little bit through it as an every time a payload comes in it kind all going this function this function isn't petting to chasing payload and if it is so Jason payload it looks up forward a name and arguments there in that
and it tries to invoke a method which is part of this class end and yeah just puts 2 arguments which uh where given to a this math and so nice thing URIs so there's some drawbacks we have no security so then you we assume that there's a name and and arguments and but nothing as we get full tries back if it fails so for example the function is not an uh written here are in this class it fails and you can for example push to trace back to the front and back in their connected Python modular must inherit from this junction which is doing this magic behind and then dead dead AveP sockets message should be constructed to like the following and this is what you will need to know and what you need to obey you so you have your message and justice and task script or typescript code and you have your message and test them it is constructed in a Jason like way if you have a name you have arguments and on top of if you want also action where you can kind of decides make some decisions in the back and but we have not needed a up to know mm it's just a placeholder and and here we see the message service their sense this message to the back and a client on angular side so let's see um we have WebSocket client which is used as a service in England it's a message sent a message service on top which can handle incoming messages unregistered complements
and this is also JavaScript of Tapscott code so um we see here that we can subscribe to adjust service and in the following way that we have in but we can tell the JavaScript what to do when this message comes in and here we have 2 miniature message uh method which kind of is doing something so it's not so elegant as on the Python but of course it's so script and the events in angle are our um handled in this way that we have our extraneous which is a concept which is um implemented or which is into connected to end without somehow so it's it's not angular itself but it's interconnected and you have or you access control of a data stream with in every part of 2 Apr that this concept so for example and here we have an update service and it's a class and it's also an injectable this means it's um a singular with our um it can act as a single a service in in Angola and so the court here is not so it's it's really a stand out so you you say OK this is a subject of you ends and you can make subscriptions to it and you can push something to it and you subscribe no logic so um this subject injected into detectable can be used wherever it's it's is put into the module set up so modules set up this really important for angular and so and it must be made at local in the constructors that way so if if if you want to use to service somewhere in your uh angular coat you have to know and loads it in then constructed this way and in the module said up there is also the same service says OK if this construct a wants to service it's the same as everywhere so it's not um a new instance of the service but it's the same and so you have a very good overview what what happens in your um angular coat so it's really nicely structured
it the an that program is a typical example of that and it's actually the detect program we had an mate maybe a year ago and so the thing is that the TED program works very well this is the concept but then we have also some different kind of approach acts on also based on this concept which can make really uh progress because of the power set up so we have made a good experience with it so let's
see them how can we use it as 0 this is so so uh we used tear your Naik and n and this set up I used infected and the older version of the on which is based in Mangalore 1 but there's no difference and in fact there's also a new young make have its unique you can um makes use of angular and also nowadays of staying new angular although uh chairman alignments are mobile so they're really a nicely that they have a really good concept of these out them elements so that they fit really nice together you can also start this on the desktop so it's it's really um the same on all devices it's fluent and so on and therefore the idea you did it the only problem you have to use all spheres that you have need a bootstrapping so you have to put it somehow them on your mobile device and usually you would do this also KDE with the help of TV pictures are closely interconnected tool um the the price of a present 400 a and
we are not as far as this but we would like to have some kind of a module is made out of this so that the structure is somehow the close together M. it should look like this and it's not nothing nothing special uh we have
just and the some imports the locus of disjunction thing and and so we just need to define a class which defines a back tasks and next we have to race and this class are instantiated ED instantiated server so which is a non blocking Sobel somehow and make a connection between the solver of our and back and tasks and then start to go you which is just open the browser they can do it move with the help of some Python commands and just takes your HTML and everything behind the scene is working well the so
let's wrap this up have angular for us is to missing part of productive CWI development was Python anger does the heavy lifting concerning Thomas script in its HTML connection that we think Python anger it's a perfect match so the
graphics looks like this in all point of view this is all preferred architecture and it works for 4 at the moment for a medium-size protect very well we make good progress in is an angular is on the side of too few and a few model and Python of courses on the side of demand but it and contains all business logic and data the thanks for your
attention and questions
please and fj
are there any questions the and all of that was LCA now my wondering if it wasn't it was it was cool but may mean my gum I come up with another kind of limitation like gatekeeping keeping gamble on the front and side on widening the back inside of exposing the functionalities that you want to expose exposing the back inside the areas they BI and to issue some magic so calls from the front and the back end so and it's totally possible and you have to ask yourself how much work you have to put into this and how much is used as so of course and if you have understood you correctly you will you you raised a question about the rejects calls yet it's possible I know it's uh it's fine if you if you want to totally kind of separated things has and that of course you need to put much more work in animal or at least I think so that many of you I texts explored its it's its like nothing for you but if you are new to this mn kind of subject you would kind of of avoid thank you some equation we have enough time the length the speech I you mentioned bloated HTTP servers could you please elaborate a little bit more on WebSockets versus HTTP servers in this case can you please repeat and as you mentioned below today's DB servers and then told us about WebSockets could you please tell us a little bit more about your perspective on the comparison between the HDP service and WebSockets solutions the a solar cells who um the thing is and vet socket is cheap it's it's kind of really honest no overhead and add in poses a thing but I have not measured at it's much faster it is known that the set up this much much easier as I as I have mentioned earlier and yeah I think it's what you what you need so you should focus on what you need and this is what we needed and it's fast I think I have I have to measure this the for more questions number then give a big bacon for what the our last question I I would like to know on the show it's possible to to connect to angular to the back-end z through the the rotor off Hungary or for example high issue he she is for example the angular for you have a warrant Kuroda available fast acutely duplication and you can connect to the right to the by the of light and food erased it the i I think that you told that at the beginning of the talk hound I don't understand the white the solution easily and less effective than you solutions the through circuits um I know that status rutile and we are using it to them and and all project also but now if you have set up if you if you want have set up this solution you if you would not at least me I am I'm kind of strict now I I would not like to have 2nd but so worldwide is not pose and there's no reason for this I mean you can do it it's it's of have had and it's actually really no problem you can do it but in my opinion why do you want to have to it should be service the OK it and you will be you know for the few months