Jigna: a seamless Python-JS bridge to create rich HTML UIs for Python apps


Formal Metadata

Jigna: a seamless Python-JS bridge to create rich HTML UIs for Python apps
Title of Series
Part Number
Number of Parts
Agrawal, Prashant
CC Attribution 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 purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Production Place

Content Metadata

Subject Area
Prashant Agrawal - Jigna: a seamless Python-JS bridge to create rich HTML UIs for Python apps Jigna aims to provide an easy way to create rich user interfaces for Python applications using web technologies like HTML, CSS and Javascript, as opposed to widget based toolkits like Qt/wx or native toolkits. It provides a seamless two-way data binding between the Python model and the HTML view by creating a Python-JS communication bridge. This ensures that the view is always live as it can automatically update itself when the model changes, and update the model when user actions take place on the UI. The Jigna view can be rendered in an in-process Qt widget or over the web in a browser.
EuroPython Conference
EP 2014
EuroPython 2014
User interface Computer animation Quicksort Cartesian coordinate system Route of administration Surjective function
State of matter Direction (geometry) Scientific modelling Function (mathematics) Data model Medical imaging Fluid statics Mathematics Videoconferencing Software framework Pixel Software developer GUI widget Element (mathematics) Bridging (networking) output User interface Quicksort Electric current Web page Ocean current Domain name Software developer Distribution (mathematics) Tape drive Division (mathematics) Wave packet Template (C++) Attribute grammar Latent heat Bridging (networking) Divergence Energy level Newton's law of universal gravitation User interface State of matter Content (media) Interactive television Code Set (mathematics) Cartesian coordinate system Estimator Computer animation Visualization (computer graphics) Personal digital assistant Iteration Vacuum Domain name Library (computing)
Keyboard shortcut Dot product Scientific modelling View (database) Division (mathematics) Complete metric space RAID Regular graph Template (C++) Data model Mathematics Velocity Automation Software framework Extension (kinesiology) Information security Subtraction Library (computing) World Wide Web Consortium View (database) GUI widget Interior (topology) Code Core dump Bit Instance (computer science) Prediction Process (computing) Computer animation Software framework Right angle HTTP cookie Identical particles Vacuum Domain name Library (computing) Separation axiom
Domain name Context awareness Proxy server Euler angles Java applet State of matter Scientific modelling Letterpress printing Web browser Event horizon Template (C++) Data model Mixture model Social class Mathematics String (computer science) Single-precision floating-point format Scripting language Software framework Proxy server Hydraulic jump Mathematical optimization Covering space Metropolitan area network Bit Template (C++) Estimator Arithmetic mean Computer animation Computer cluster Object (grammar) Vacuum Domain name
Mobile app Mobile app System call Scientific modelling Real number Forcing (mathematics) Demo (music) Electronic mailing list Primitive (album) Electronic mailing list Instance (computer science) Cartesian coordinate system System call Variable (mathematics) Number Error message Event horizon Computer animation Synchronization Right angle Object (grammar) Proxy server Vacuum Condition number
Mobile app Greatest element System call Demo (music) Source code Electronic mailing list Mereology Food energy Computer icon Variable (mathematics) Stiff equation Template (C++) Medical imaging Pointer (computer programming) Bit rate Dedekind cut Internetworking Communications protocol Theory of everything Proxy server Window Mobile app Mapping Suite (music) Primitive (album) Loop (music) Error message Event horizon Computer animation Integrated development environment Data storage device Order (biology) Synchronization Object (grammar) Units of measurement Data management Laptop
Point (geometry) Group action Installation art Observational study Dot product Programmable read-only memory Division (mathematics) 8 (number) Disk read-and-write head Pointer (computer programming) Web service Causality Motion blur Integer Theory of everything Communications protocol Arc (geometry) Chi-squared distribution Scalable Coherent Interface Computer icon Mobile app Moment (mathematics) Interior (topology) Inclusion map Computer animation Data storage device Order (biology) Dependent and independent variables User interface Units of measurement Arithmetic progression Computer-assisted translation
Computer icon Mobile app Scripting language Dot product Scientific modelling Multiplication sign Attribute grammar Inclusion map CAN bus Error message Computer animation Bit rate Uniform resource name Right angle Natural language Object (grammar) Normal (geometry) Data management Proxy server Vacuum Physical system Chi-squared distribution Newton's law of universal gravitation Scalable Coherent Interface
Proxy server Cellular automaton Point (geometry) GUI widget Demo (music) Discrete element method Template (C++) Data model Computer animation Personal digital assistant Convex set Module (mathematics) Domain name
Computer icon Dot product Scientific modelling GUI widget Interior (topology) MIDI Embedding Attribute grammar Maxima and minima Error message Computer animation Object (grammar) System on a chip Factory (trading post) Object (grammar) Sinc function Scalable Coherent Interface
Computer icon Mobile app Dot product Software developer Demo (music) GUI widget Interior (topology) Primitive (album) Embedding Electronic mailing list Variable (mathematics) Medical imaging Error message Event horizon Computer animation Object (grammar) Synchronization
Revision control Computer animation Presentation of a group GUI widget Demo (music) Revision control Web browser
Context awareness Divisor Dot product Scientific modelling Demo (music) Parameter (computer programming) Total S.A. Event horizon Attribute grammar Template (C++) Web 2.0 Chaining Goodness of fit Electronic visual display Software testing Computer icon Graph (mathematics) Scaling (geometry) GUI widget Projective plane Interior (topology) Embedding Functional (mathematics) Web browser Plot (narrative) Computer animation Revision control Object (grammar) Digitizing Vacuum Laptop
Hooking Computer animation Scientific modelling Videoconferencing Figurate number Active contour model Laptop Number
Covering space Computer animation GUI widget Source code Laptop
Multiplication sign
again so a very good afternoon and will be heard in instruments so today I'm going to doubled just that there's a lot of it to create rich HTML user interfaces for but and applications so candidate in on of hands how many people have done any sort of user
interface development and by 10 the but they so has started in with purpose and direction and developer it and put in only for the last 2 years and encourages is the company which has a bacon distribution according to input can be and so I have been working on and that can be and and sort genome undermined which is the 1 in training when Britain training and have been mostly working on the front development for that and before this I completed my masters investors this engineering provided on the but this endearing do you later that maintain you know how it happened in the set of foraging on that go to to do some research privileges and he's also a lot of my every images is a 3 D visualization library and he is a professor at edible was also 1 of the expression page and my dangerous who is sort of usage of planning this framework so so what is you basically it is a bridge which lets you very the user interfaces in HTML 4 . models but I don't know why it's the so if you look at the current state of UN development inviting you basically have the duty the flights and by taking and the most of them look 1 of the that there you
have the dates for the common dust the buttons and menus and everything which is nice for you to get started and going to have you can get a reasonable user interface main fairly in fairly easy but if you want to have to choose interactions then and you're kind of limited by the Piaget said that is provided with the toolkit and then the output is mainly procedural so fluid level the deteriorated and she wanted to add rejected disposition which is not really helpful in because they're trying to design something you want to see it and how it will look so can declare difficulties usually British for and again to its specific development of community of designers is limited and to and combating this that and the that given so if you consider the the applications that you depend benefits richness you haven't of applications you have videos here hexagonal from the humans there can reverse the synergies and all the good things that everyone is working on so and on on you have a very rich user interaction and that its is not limited by Vogiatzis so it gives it reduces the power of C. assessing jealous could so that the designer can and good design and the divergence just told you wanted not extended buttons for the so each episode can have its unique in a few do and the most important thing is that it's much much easier to find this team and this and this if you want to go to a woman shall coming estimate of the person you have a lot of sense of the last how many do developers magic that and again the court is declarative so very easy for non-programmers where designers to and it started and its tenets of so you have a really nice breach of its chairman and technologies were the only limited to the vet technologies and the desktop using this of of editions lag behind now you don't have the benefits as for the just about what the good bridge that gap and that is very generic content so and let's say you have been domain model and a simple thus employee that to name and and this is made of a and and countries so it has some nice features automatic notification of in the and attribute changes and the 2nd iteration of the tapes and all that but I'm so you can interference with the notable traits and so what I'm going to that you have this domain model and what if you would have this sort of HTML interface now let's say you have an entry don't name within the priest says this is a complete but this is not a case static template so in that sense it is bound to that name attribute of employees to any other candidate name changes now the end it's embedded in you can call methods here but you can call the plate and methods directly and from the instrument so as to the small new it's
easier than learning in this job which is then the instance here instead of these because then you click on a bit salary and it will cause the material on the right hand side of the the attribute and since the template is bound to the and very 78 to build it for the government to be good so far the thing
to notice here is that the modern view binding is automatic you don't have to operate in a special award for binding them and particulars template to the model tribute and that's the ladies which means the and and then in the morning changes the estimate and and and that's Gemini can cause intense in the model and the court is declared of course because it's it's GMM and annotated it can develop was trained the velocities and differences and so and this has its identity and this I can be handed off to invest in the design of the discourse because there is a a nice model separation and it's not just for traits so in if you have a regular plate and model it will just as good for them just that the automated growth model change attributes you have to buy it now to to a bigger extent so we have an example from and before when Fidel what it is not it is not under the label in the like to it is it still has so you don't have to learn new ways of creating the jets and stock of reject libraries and it's not in the framework leads and when us and maybe that was as pure reasons 1 them and ended Jan wants us to give you a study complete that here the template is dynamic is all this ladies other that is the and I bring them so a lot of things that general fast can elect security because the prediction and cookies and all that we don't handle and this is purely distort the use so
how does it work you have the
right and domain model on the left and the stimulated stimulate you regulated Rodolfo binding called mixture kind of creates an apple with this template and a distant they ever give a note of it in this context so that string employees by 2 would be a quite an object employee here so aluminum then about this simply top changes in this template automatically updates and under the covers you have a delisted proxy for the model so basically if you have an employee object that you have a single object in java script so between Dallas could then HTML and there is an villages in the framework and this is basically that it makes sure that whenever the object in and the telescope object changes it updates the HTML and so forth and connection between justice to bite and the use of cuties Q review you live you is basically just a browser which allows you to it's bit another the quite and modeled by coming to execute some JavaScript and that for jealous script to the all methods the plate and then excess attitudes and the plate and jump here using just that's not good for the ball as should that's you want to what we did what imploded name is China dynasty us the jealous what is employed at and and tell that name is of objective function Vichy this in ask from the patent domain model what is embedded and that by the model in basically the this and the mean and dividing it in the estimate and little bit data and that's it and then what changes on the plate state and so traits has this began as awful how to handle change handlers so eventually every changes traits so fast and event country change and and this is another the model a bit jealous print and the accordingly have and I ended up a bit and so you have a nice and there is the amount of played the stocks directly to the
right is so I have a small and ammonia in ecology and some of these things in the demand and force in real applications you need to combine you need to have proxies for lists instances of objects that you need to coordinate efforts on the right model you need to coordinate instead of slow so when you can't afford to have the UN number way there and it is executing and I need to and as some success call that the of have I should and its scientists and conditions
how this it was not get something and nothing much to realistically there to apps and the leader of the course in
here so we have a simple that
object that name you had like on the internet and and that managers just started so that so in order to show these
2 apps and and there is this is an angular just construct and you repeat it is perform look for indigenous it loops through the at manager that installed apps not of installed apps is ah and actually would all that out of the quite an object which is listed so each ad is a proxy to the widening have objects and the need for this you rate and energy is so serious that is the source of the image that is after the kinetochores that's the icon that for this and and that the name that and you can define that behavior on the part the bottom plate which is called the start amplitude of that that so we basically have these environmental template stocks directly to the patented object so if a here it was this idea that this is an over there and you so and if you the you can also install some maps so and you go to the store
that he ironically done good distorted new sided and order right so then it could stand where to store it cause on the head connect here which has some so I have a here with this that would be conducted some that services but you cannot afford to not the user interface so the point of tool going to call this method asynchronously so that you don't have the and mean the you order and then
the absolute the in this story will appear you can click stores the to show you a nice from this dialog now this from his dialog is also and semantically installed this is also an asynchronous cause you have if action and which is the update the progress and progress is progress is an integer so in order to show that an an isotope of response and the court is like this so you have an idea of and there was a study of its is very is bound to the progress percentage of the and what so remove whatever the promises around the vehicle from that and locked in green but there has to be updated accordingly so and this happens in story and then the moment if you want to FIL adventurous there is you can go to the you can work depends
on and see that there that that manages the object is here whenever there is a generative model is still want at managers and so and genetic models is that the same was the model that proxies and this object is just of the leading proxy for this right an object so you have respectively 11 that's installed that's interval on that ended up all of these attributes that define the lazy so and you if you have a deep nested object we don't see laser to all at once so you really only ladies what is needed the system so you get an answer have 0 are you going to gym 2 it is a tool 1 that is for and managers not the this stored in the to live that 0 but to 1st step and then you can simply say from the terminology used an manager don't start at the last said yeah so we have a stake in a time and delisted Triplify item and its it is called don't and Newton and that's you know sucks that that successful
that's so in when you saw the so method called now which 1 the quality you will the rate in genetic trade the 2 quantities still maintaining that so that you you like does not that then and then you have you and so you can
address such as the convex set of solution even handling him the for for that and Of course you I know here it's hard to report everything inside the cell and that has to be good and efficient with existing you do it it's so there have been many of it shows how deeply embedded in qt rejects the juvenile so let's say you have an existing region in this case I have on my having a lot here which is acutely reject and that you can embed it within Japan
saying Dean object which factory he would do seen creates techniques factory which have given the to generate the you and it really embedded inside the object and so on
and so basically sensibilities and material is and attribute and the model you change it extroverted automatically updates since everything is you get
imaging evidence that the UV which is that they must have it so did not it said just make to give it its so dividend behave the development executive
it yeah so this is a duty in and have developed intuitive the and if you click on this button it really embedded in that and she did not move esteem and you hear and everything you broke as before there
a version then so 48 and this presentation is running the sending did not so bad that I gave an example I have an example so mistakes a pool of examples from the people and that the examples you
have here is basically it just friends that example from and the repository and and so you can
directly apply this method so I can show you and that's still going on in there and those illegitimate in the lab of 10 rather skip to the next step in which we think is when there is a late button so test you can do it on the web as well but we don't have a great day they get event and you a development because of the made you you will you will not solve all the problems that the avoidance because it's on the web so but only you can have with things that I've written on the projects so if you have seen either the non display HTML display JavaScript functions this is similar to what you can do with this you can have a nice interactive rejects Pakistan digits which had ladies so here I have a person or object that and I displayed i . understated not this context in this template now this shows this you this would be an fancy UI and if I say nanosphere and I want to print it and then Freddy here so this modified any it since the you was of data so in the user and you can have richer stories of attribute set him expressive can graphically let's say you change through for going to anybody updates the value here we have another example which it is from matplotlib . example so you have a lot and you have a model that good scaling factor and the chain the scaling factor the plot argument in dates so no and the scaling factor is updated according to the new menus and that's you need and I button on the use of a scaling factor is equal to the 115 it will update the graph and the mean value of it and so you have returned by looks is in this 1 last example is my heavy on November and this is an experiment of so you see here is that a 1 year 1 went to from so some is that
you have it's videos that g is changing of my have
the object and and you have a model at to the quality and quantity and if you change the value of the contour in the in the figure dates and they don't have a greater number of infants who couldn't feed it updates the the
they the concept no this is not a direct planted out and going to the middle of the day here so you can have picture stories which have the here I've written on looks this and
that's all for today the court is on the cover everything sometimes source the lot of examples you can try and I think you need to thanks a lot for your talk
unfortunately we are very late prevent that will be and time for questions and and stuff but I'd suggest if you have any questions you can come to that later should couldn't thanks a lot


  631 ms - page object


AV-Portal 3.9.1 (0da88e96ae8dbbf323d1005dc12c7aa41dfc5a31)