Add to Watchlist

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

3 views

Citation of segment
Embed Code
Granting licences Cite video

Formal Metadata

Title Get over the boundaries between client and server in web app development
Title of Series EuroPython 2017
Author Berti, Alberto
License 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.
DOI 10.5446/33821
Publisher EuroPython
Release Date 2017
Language English

Content Metadata

Subject Area Computer Science
Abstract 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 (http://crossbar.io) 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
Series
Annotations
Transcript
Loading...
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
Intel
Musical ensemble
Hecke operator
Code
Multiplication sign
Relational database
Home page
Interface (computing)
Table (information)
Formal language
Web 2.0
Web service
Linker (computing)
Single-precision floating-point format
Cuboid
Software framework
Physical system
Vulnerability (computing)
Social class
Mapping
Software developer
Keyboard shortcut
Basis (linear algebra)
Infinity
Element (mathematics)
Flow separation
Intranet
Web application
Content (media)
Systems integrator
Database
Software framework
Right angle
Quicksort
Data type
Data structure
Electric generator
Thomas Bayes
Web page
Software developer
Point cloud
Login
Computer
Sega Enterprises Ltd.
Wave packet
Number
Revision control
Social class
Cross-correlation
Iteration
Database
Software
Scripting language
Data structure
Object-relational mapping
World Wide Web Consortium
Context awareness
Mobile app
Pairwise comparison
Standard deviation
Key (cryptography)
Server (computing)
Interactive television
Cartesian coordinate system
Table (information)
Single-precision floating-point format
Logic
Query language
Object-relational mapping
Element (mathematics)
Object (grammar)
Library (computing)
Renewal theory
Key (cryptography)
Inheritance (object-oriented programming)
Software developer
Code
Block (periodic table)
Interface (computing)
Formal language
Category of being
Subject indexing
Arithmetic mean
Linker (computing)
Blog
Phase transition
Interpreter (computing)
Object (grammar)
Information security
Category of being
Information security
Data type
Domain name
Server (computing)
Process (computing)
Scripting language
Server (computing)
Multiplication sign
Software developer
Complete metric space
Cartesian coordinate system
Web application
Web service
Root
Database
Logic
Database
Data structure
Data type
Data structure
Separation axiom
Data type
World Wide Web Consortium
Game controller
Context awareness
GUI widget
Patch (Unix)
Decision theory
Multiplication sign
Floating point
Streaming media
Client (computing)
Weight
Host Identity Protocol
Web 2.0
Data model
Web service
Object (grammar)
Database
Dependent and independent variables
Software framework
Damping
Process (computing)
Software development kit
Social class
Physical system
Form (programming)
World Wide Web Consortium
Melting
Standard deviation
Server (computing)
Interactive television
Interface (computing)
Client (computing)
Cartesian coordinate system
Element (mathematics)
Web application
Content (media)
Logic
Query language
Software framework
Normal (geometry)
Dependent and independent variables
Kolmogorov complexity
Code
Server (computing)
Concurrency (computer science)
State of matter
Server (computing)
Usability
Client (computing)
Client (computing)
Software maintenance
Cartesian coordinate system
Element (mathematics)
Event horizon
Logic
Theorem
Quantum
Physical system
Physical system
Modem
Query language
Server (computing)
Client (computing)
Mereology
Event horizon
Host Identity Protocol
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
Database
Query language
String (computer science)
Device driver
Synchronization
Object-relational mapping
Genetic programming
Physical system
Router (computing)
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)
Implementation
Communications protocol
Library (computing)
Physical system
Router (computing)
Address space
Asynchronous Transfer Mode
Mereology
Cartesian coordinate system
Connected space
Web 2.0
Event horizon
Bit rate
Network topology
Logic
Telecommunication
Core dump
Vertex (graph theory)
Energy level
Vertex (graph theory)
Object (grammar)
Reading (process)
Hydraulic jump
Social class
Email
Mass
Line (geometry)
Mereology
Theory
Maxima and minima
Event horizon
Causality
Forest
Order (biology)
IRIS-T
Vertex (graph theory)
Software testing
Vertex (graph theory)
Units of measurement
Code
Multiplication sign
Demo (music)
Cursor (computers)
Limit (category theory)
Shape (magazine)
Web browser
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
Code
Depth of field
Line (geometry)
Cartesian coordinate system
Shape (magazine)
Demoscene
Annulus (mathematics)
Commutator
Raster graphics
Thermal radiation
Synchronization
IRIS-T
Vertex (graph theory)
Software testing
Electric generator
Abstraction
Reduction of order
Multiplication sign
Representation (politics)
Loading...
Feedback

Timings

  450 ms - page object

Version

AV-Portal 3.8.2 (0bb840d79881f4e1b2f2d6f66c37060441d4bb2e)