Get over the boundaries between client and server in web app development

Video in TIB AV-Portal: Get over the boundaries between client and server in web app development

Formal Metadata

Get over the boundaries between client and server in web app development
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
Get over the boundaries between client and server in web app development [EuroPython 2017 - Talk - 2017-07-11 - Anfiteatro 2] [Rimini, Italy] The practice in the development of advanced web applications is to break it into two main areas where the effort on the server, with the typical WSGI environments, focuses on data access configuration whereas the application logic is delegated mostly to the client through the use of JavaScript frameworks. The reason for this separation into two roles lies in the need to use JavaScript on the browser and the fact that the communication channel (HTTP) and the way in which the application state is handled on the server side is still that thought to serve full web pages. In this talk I'll show a framework and an application where the line between the two worlds is blurred and where it is possible to think of the application in terms of unity, with the two components that cooperate equally and communicate without thinking in terms of URLs or HTTP verbs . This is made possible by the asynchronous/reactive management of the processing from the database driver to the user interaction, the use of websocket for communication and the use of Python (optional) for the development of the client part. Some technologies used are: PostgreSQL, the ""asyncpg"" driver, the ""aiohttp"" web server, Crossbar ( for the websocket comms, pkg ""metapensiero.sphinx.patchdb"" for schema upgrades, the package ""metapensiero.reactive"" and ""metapensiero.signal"" for the management of reactive event streams,the package ""Javascripthon"" for Py3 to ES6 JS transpiling
Intel Hecke operator Code Multiplication sign Relational database Home page Database Neuroinformatik Formal language Web 2.0 Web service Cuboid Software framework Vulnerability (computing) Physical system Social class Scripting language Mapping Software developer Infinity Flow separation Element (mathematics) Intranet Type theory Web application Systems integrator Interface (computing) Software framework Right angle Quicksort Data structure Electric generator Thomas Bayes Web page Table (information) Link (knot theory) Software developer Menu (computing) Content (media) Login Sega Enterprises Ltd. Wave packet Number Revision control Cross-correlation Iteration Software Object-relational mapping Data structure World Wide Web Consortium Context awareness Mobile app Home page Pairwise comparison Standard deviation Key (cryptography) Server (computing) Interactive television Basis <Mathematik> Database Cartesian coordinate system Single-precision floating-point format Query language Logic Object-relational mapping Point cloud Social class Object (grammar) Musical ensemble Table (information) Library (computing) Renewal theory
Key (cryptography) Inheritance (object-oriented programming) Link (knot theory) Software developer Code Block (periodic table) Interface (computing) Formal language Category of being Type theory Subject indexing Arithmetic mean Blog Phase transition Interpreter (computing) Object (grammar) Information security Category of being Information security
Domain name Server (computing) Scripting language Server (computing) Software developer Multiplication sign Database Database Complete metric space Cartesian coordinate system Flow separation Web application Type theory Web service Process (computing) Root Logic Data structure Data structure Data type World Wide Web Consortium
Game controller Context awareness GUI widget Dependent and independent variables Codierung <Programmierung> Decision theory Patch (Unix) Multiplication sign Floating point Streaming media Client (computing) Content (media) Host Identity Protocol Web 2.0 Data model Web service Object (grammar) Software framework Damping Process (computing) Physical system Form (programming) Software development kit Social class World Wide Web Consortium Standard deviation Dependent and independent variables Kolmogorov complexity Server (computing) Interface (computing) Weight Interactive television Client (computing) Database Cartesian coordinate system Element (mathematics) Web application Query language Logic Different (Kate Ryan album) Software framework Schmelze <Betrieb> Normal (geometry)
Server (computing) Concurrency (computer science) State of matter Server (computing) Usability Client (computing) Client (computing) Cartesian coordinate system Software maintenance Element (mathematics) Event horizon Logic Theorem Quantum Physical system Physical system Modem
Server (computing) Device driver Database Client (computing) Mereology Event horizon Host Identity Protocol Query language Square number Energy level Remote procedure call Software framework Configuration space Object-relational mapping Implementation Communications protocol Digital rights management Error message Physical system Patch (Unix) Client (computing) Event horizon Query language String (computer science) Synchronization Object-relational mapping Physical system Router (computing) Genetic programming Directed graph Address space
Asynchronous Transfer Mode Source code Client (computing) Heat transfer Client (computing) Error message Event horizon String (computer science) Remote procedure call Arrow of time Configuration space Vertex (graph theory) Communications protocol Implementation Library (computing) Physical system Router (computing) Address space
Asynchronous Transfer Mode Mereology Cartesian coordinate system Connected space Web 2.0 Event horizon Bit rate Logic Telecommunication Network topology Core dump Energy level Vertex (graph theory) Object (grammar) Reading (process) Hydraulic jump Social class
Email Execution unit Maxima and minima Mass Line (geometry) Mereology Theory Event horizon Causality Forest Order (biology) IRIS-T Software testing Vertex (graph theory)
Code Multiplication sign Demo (music) Cursor (computers) Limit (category theory) Web browser Shape (magazine) Mereology Goodness of fit Web service Core dump Software framework Vertex (graph theory) Abstraction Address space Task (computing) Source code Computer virus Server (computing) Java applet Commutator Code Depth of field Line (geometry) Cartesian coordinate system Shape (magazine) Demoscene Annulus (mathematics) Raster graphics Thermal radiation Synchronization IRIS-T Software testing Electric generator Abstraction Reduction of order
Multiplication sign Representation (politics)
hello and so I'm a
battle and cofounder of was company that offers so development and and
system integration services and today I will present you I a framework and an application that we built to to bring back find in into the developmental were about women applications so that what they mean with with what applications usually the world were the kitchen today means many things but for world apart because of this it is OK I mean in those applications that are usually usually developed to date to replace the desktop application that is used to assist in correlation that the basis and the show some data to the user or let the user or uh feel dose of query sort of the usually all main data at once they usually offer advances the filtering sorting capabilities and so on and usually they had those application of uses for that by 3 and so what they show a very complex forms and and they show master at the tables and so on I think that such application have i and narrow where uh another where the use of Bayes them then public a web web and web pages publishing and so on and usually they are uh those a petition article that a single page of applications the it many times and they are a solid on-premise or their down we started on the cloud and then use the inside an infinite also so it did they did the framework we developed a laser its goal is to serve those this kind of uh applications is not to use so 10 thousand web pages to anonymous users usually in the user of our application is always unknown users so it the 1st the 1st thing it does it does is to enter a user credentials and log into the system so the to whom today how it it's built an application using Python tools usually uh was start with but that will open the database structure and so on and then we beaker off of a at the in several framework like Django here I mean the tunable gears and a flask and so on so maybe we developed with an an object-relational mapper on top of of our that the bases of but is not uh mental was needed an issue in usually we is poses Dozer died data using the using your arrest the services or get and also and to binds and so on in boxes but then because of and they are webapps and then we choose a would BKR JavaScript framework and we developed all the application of a logic 2 with would just correct so all the user interaction all the what did they flow all of the user inside application and so on is coded in yeah In all many of you do that for example is it fun is is the fun so I don't think that it's it's a firearm and there is yes dealing with JavaScript is inevitable because there is nothing else on the on the on the browser and but the stressful because it does many inconsistencies and many of the things that you know maybe a learner 1 time and then know you you forget to use something you know about its base types of not a number and so on in end every time you owe you approach to the development of a JavaScript web application and usually there and the should now you will as of Nov uh viable to keep ceased changes because of it changes we go very fast these and usually they just keep community in reinvent the wheel every time and there are In the now fancier more moral quick Kuwaiti and so on but the there for us with that we want to according to fight on right so it seems so not so good good to always and then manually JavaScript's framework of maybe the version 2 of the the Mandela script that we learn of some months ago that changes the languages from JavaScript types we then and so on and many times that the libraries of of JavaScript libraries of comparative and to those of us have fight and to the standard library do I have a very poor quality we you and that of value in bands of megabytes of hundreds of megabytes of javascript code to justice to to let your computer could work and so on and sometimes you don't understand why you have to run to the styles of all those things so many give you get Sega that that uh it's 6 is better because he's classes promises iterate generate those menu some of these these features come from Python then also they heat as mapped out and said to him that the clearly that the for the 1st time you can put to not just those training this into dictionary keys it but you can use a every any kind of logic object is key and these is surely an advantage it and the but then and for example when I learn about a week map the week set I I thought that they were compared with comparable to do to those of enabling in into into the Python standard library and so I said from past the uh very very and they were what whatever was was I was waiting for because uh than I can I can keep but I'm weak links to objects without warning when when that to to free those links and so it's very nice feature but then you learned that I discovered that for example uh no week to we maps and you cannot know what's inside the we just the if you will they even if you know what's inside a week mapping is is that just because you have put it there so is not possible to to ask and ask a week by week map 4 of its keys is not possible to we iterate over its its keys or values and so on it's just possible to check given and an object if you to check it if it's a keen that object and it seems incredibly wrong to me but uh the jealous pure there's just could community and found out that a feature instead so uh day in some of the more or 1 of the more prominent in JavaScript velopers said
that that that the eat that as the keys of a security feature something that you can that it's it's a really use for because you know you can have an object that no 1 can look into uh but uh but I think that it is uh a misunderstanding of what the weak matters should be should do you should 1st uh give you are
way to use a weak links to weak references to other objects and and then maybe it being very use of the security property of security just because you cannot to look into it so I I How JavaScript even the muskets it he seeks as many and many other things that seems wrong from our fight on of size yeah and the so we see if you will read the blogs and articles or some meaning being committed some of you suggest that you should use for example typescript which is really very good language you and that had its interfaces types but for example a few days ago I found these example in a more edits block actually well on the where the where explaining and why they chose the and you see that colder aware that an act fool ways declare that as an undirected that can can contain just birds and the and the neck index that a role day they had and an animal which is out there it to the superclass of birds and their and their the typescript the interpreter and checker is OK with that so why the while having pipes made an uh in maintaining the cold and so on is that the the language you know that has type thing it's name phase in check to very single simple the block of code so
again I would say what the roots had uh as you seen in the very very very strange to me and
that's that's because I know that that the idea that we have to deal with with JavaScript types create 2 coffees create tho what do you want to create but the moon I will put in a cage and control it from from very I would like to at least so uh it's enough for a of about talking about the diver's creates soon let's get back to them and that what's that the role of by tuning modern web applications usually when when you have a such a such a separation between application logic and that process logic to 1 the 1st developed and it was created and the 2nd developed in in in Python In the pipe turns the server that your development in 1 also to the application service that they told you before it is a user like about a half you expose of your data are some in some way and really for me and for us defined by of developing an application stops right when we developed in our our uh and database structure we we confront with the with the customer about the domain and the time and so on and really what's comes after uh ended up at the structure of of the exposing the creator resting PI create forget to Boston PI it's it's boring we we do really need that were when do we do we really need the erased DPI is and so on 88 we think that the we need the uh we need the rest API is just when when you your service as to your application as to
interface with other services uh by the way using standardized interfaces such race our as arrest and so on all if you give the yield of an API to
Europe users due to user and to interact with the foreign interaction with the your application instead of using you know did did you I this is the uh the normal way of follow John go I mean the flask and you name it's do they worker and more or less a a moral lesson they all and they are a weight for I am form uh request and then they will uh the request contains all the time the data and the context data that your application the Europe the controller your and that needs to needs to understand what he he the the issue that do and then I 2 retrieves the data from the that the database is it's a builds up for a response and stream meet back to the client maybe it saves some some they think the session that's usually is a user like a up or man dictionary and and then that your object of destroy that and your system is waiting for the next query next the get fosterer uh patches and so on they have all whether the things all other things because we believe that there are still a steel in those afraid to kiss are still used today to do that before cation all well thinks it would come we then always developing i an application with a desktop tool kits those of that where that are now supplemented by a by web of application and so on usually developing application went with by qt and budget decay is a general of of the decay or to keep an eye on and is they they there in the data interaction is much more 5 tiger fighters than then then with what web out something where Bob so we have a and then there the petitioner logic completely moved to the client but but instead the and norm of this topic fication we we have uh that the application logic the logic is completed even by by fight on with the Battle of of the classes and we will UI widgets that they've to toolkit provide us so uh and they are very different from today the Web application our uh we found ourselves in at the at the end of last year and the need of decide if you you where maintaining and not on an application developed with 1 of those that uh those the frameworks it's much much older and the date was developed within city names and so in the bora do we have me that the the the the decision instead of replacing it with a new out and we we wanted to to bring back the fine into into web so we we developed a a framework from scratch and they they they DO was used tool use
honest signal systems not just to achieve a better concurrency theorem but also to reason in the maintenance on the server of the state of the application we in with thought to have 2 equal system on the on the server and the client and 2 I have them in uh freely talk to each
other using modem a PC systems that can use each be as bad as that can protocol but but that that abstract you from the notion of heaven and HTTP and even the worker without the without it reached tool so the way in we didn't I we developed and these
framework a raccoon with the oscars and impostors that the at the bottom level all they're all day in the framework as to be uh a
synchronous and so we we chose a passing the G 2 driver to deduct access to the and there there that that the baby and the uh square like a need to construct the queries it crossed by the event chosen to the in as they intercommunication backbone between the 2 pieces on the client and the server and a H E a e you'll ITU-T P is used as an extra uh http publisher for of the stuff that cannot be transferred to the for the niece she's issue part and so on then we use the uh secure like me might not you I am because the object relation mapper can abuse with a sink cooled and and the Error PCA which shows crossbar because it allows a about allows in your system to interphase not just between by and and just it but between many many different languages and as both Teresa than the semen nesting
Kewell client and as source nice features like uh IRA or transfer between the the the caller and the Khalifa the Kony erases narrower these arrows go back to the the caller so it's really nice and as many features
so we designed the I'm not in EPI that for API
as a composed the Biot revealed Nolde's object that where they nasalization splits into parts because and beyond the reading it cannot be and synchronous met the so we have to split in the solicitation into parts and no this is unknown and dynamics in
class just deal with the communication part of the problem and the rest of the of the of the the object is supposed to do it's your application logic and so on what the node class gives you is a way to declare that the callable of things and the uh and seeking out cement levels of the at the class level with the the core rate and so on and it does that in a way that the seats possible to it's possible to win to construct your uh your object trees with the relative the references to each other and then attach them to and to the crossed by a connection machinery and add them published on the web of them published here you see some the in nodes and the methods and the signals I haven't that the that the nodes and allows you to to declare it to you it so the the is is and let's jump to 1 example of the of
the of a test and you see that uh at the Lyon 12 we have we have the 1st node which is just an older we that's that's used for structural and then we have to order other nodes the 2nd order and the 3rd with where we customize the where we could we customized however and and we added the SOM and there was some signals and then the signal and at the mn cause and and so on those who had their hand in all these automaticaly ultimate eagerly is automatically instrumented to expose those methods and you see that for for example the the line costs over the alignment 17 uh that uh that course we're this so that the theory all the with without with a relative there but the defense on where did those
nodes are are mounted into out to the is a Bayes part this is a test and then 1st that is bound to 2 basic last forests that we've become flip the best doctor 1st and then the 3rd reason is
bound to move Bayes DOFs over and then the the 1st maid node that's the 2nd as with the name 2nd and so it's it's a node part will become 1st task so this new adult 1st the 2nd and so you saw before that time that's the end of the line then 25 listen for a for the the the the signal on the 1st 2nd and all the abilities are relative and relative addresses that when they haven't we realized when the then
the node is connected to the machinery which is a line now I line 37 and 38 and so on in In this is a variable avaliable also in JavaScript using optional javascript code in the these and JavaScript code because we use in our and toward we made to to comply Python to demonstrate and uh put it yes it compiles it we use the same scene text the same of abstraction and then we combine them to to JavaScript to a JavaScript that also have very all the uh browser can compare 1 and that there is no more synchronous no from and on this is actually the anatomy of our last session of 4 on our application user our user session always it starts the user service that is the only thing is that this poses both like http and crossbar and connects to cross and then each other side that can be can talk to each other very bad very freely I have many more lights but I'm I'm out of time so if you are interested that we have developed the application is nearly complete I cannot show you the 2 now but uh if you are interested there we will in uh I can show you we can give you analysis and that their masters to to the application and we will learn probably and uh published these framework when and it's it's it's radiates in good shape who we need to separate completely separated from from the application but it's going very well at the time as more 4 thousand 400 commutes so if you need if you want to or see the the core just ask me or drop me a line thank you if
mn be takes over time representation questions over time yeah no thanks and the thanks