Bestand wählen
Merken

Data Loading Patterns with JSON API

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and so it's great to be here is my 3rd time period isn't and but my 1st time of the nite have tell you like this is the is a completely different perspective from this side of the state so many should cite next year to 3 OK so I'm going to talk about but the loading patterns the yeah thank but we just make the I know magical and
so this talk is going to be a series of use cases that I think there are very prevalent In number at and there's going to be a lot of Gold involved so not sitting on your and I hope that you and by the end of the presentation you will have an added sense of confidence in tackling these scenarios and I also hold that was 1st some discussion about some of these because I think that it's really important to to just engage in discussion it's not the
the trivial public so why do some API 1st but instead of going into the details explanation of all the advantages of is made that brings you have just tell you a story that happened about a month ago I started the previous project that did and so that they can develop breast so what kind of it yeah are going to use for this project I said let's use Jason API and then we agreed that we can start a project there's nothing more to discuss a yet
so of course line are going to be things cost to and agree on of course but I really think of Jason API as the light of comments over competition for AGI so in this sense I think it's really similar to amber because it does reduce the number of decisions that you have to make at and I think that's probably a semantic test so to to be able to make sense of the examples that follow I want to make sure that we understand a few things about 108 data and and works so that's covered this basic things
to somebody you have stored you mostly interface with you want to build they are and if the find you pass at the time and the and if this record is already in the store you get it back right away and then it up that's the effects of that record in the background and if it's not in the store and then you get a promise the that's potentially going to be resolved with that record yeah which all if there is at least long is that so that time that the passing in the store and then you get back all of them all of those of the word in the store and other rise again you received a promise that eventually going to be results with all the causal all everything the back and it turns the the peak Metazoa difference so with big records and of forcing outside and I did at will never do about a request to the back and so that's the main difference between peak and find that that's so if it's journalist or you get it back it is something the sort of you know and the call you get back all the records of heroin in the store of that I and again never to real so that's that's true by default I should say so because they're 2 fled that the fact these here they are so that under record and from better you all and so the actual by default somebody tell we'll make these background factors no I mentioned but you can send them and you can see most of them were time because they are configured on near that just something to keep in mind
the about member just want to make sure that you understand nested routs and the model the model so if you have these rounds the main thing to know is that they're always vote but down so the parent throughout is always fully resolved before entering the child out narrowing to leverage this in the examples and the other thing is
that the models look has this book behavior if you return a promise from the model that is not going to render the corresponding templates template until that from his results to and all these matters of his soul find occurred finally McCreery the origin promises so there are a natural fit to to put these 2 together you on this book behavior
and the at that I'm going to show these examples on is a music catalog
that some of you might already know it's so it's going to have a list of bands on the left and then the next level the Bensalem of men drought 3 just render that that litigation and then finally the songs Ralph we render everything else a list of songs knows about constant that's on the songs and the search box and also as below
so you but more about myself and I'm voluntarily onto the and the is the and I have a personal site and law at validated of com by workers members yes consultants and also the author of the archival remember G as books that's meant to meant for developers who want to conquer the amber learning curve OK so we get out of the
way let's see the actual case studies the 1st world category of the loading scenario that I'm going to show you are related to infection relationship there and so there are lots of ways to do that and some developers have their own preferred way of doing that so let's see some of these techniques and what the advantages and these sentences for each of them are the 1st ones like all these affection which is a before the
year in the so if you have a relationship between bands and songs of band has many songs and then you have the following in the band throughout the of course is like the classic member out under model you just grab that 1 band which is designated might say B and then in the in the songs than plate where you still have the model is still the band is a model that sounds so it's only in this moment and when amber and there's a template that this relationship is going to be went to the facts so at what that looks
like in practice you can see that if I click on 1 of the bands to see how the songs on then it's there is like a blank space and on the and then when all the songs are returned from the from the back and the lease is of course we ended with with that with the songs so I think that the entailment is is that it's very
simple and it just works and you never face that it only so you want fast the songs of abandoned has not visited on 1 downside of is that if you don't really comes for you to think about how this there is no so you can pull the trigger and requests in this case if band has and dance songs of 20 songs and you want to hear about 20 songs are like songs that's 1 sort songs such 2 and so and so on and there's also this disturbing figure that is not a real so let's see whether we can do something about
that know the models stay the same but what to do now in the in the songs out is that not only load the band was as grabbed the band but he also wrote The Lord of the related songs and by virtue of having a promise returned aggressively hash it has a promise you make sure that you are blocking the the rendering of the template until the data in so I
think said that again you will see that indeed many messages our so they i solving and then you see the full list so that Morrison no figure the so the
point here is that if you want the smoking behavior that 1 way to do that is you just move everything that you want to load before you enter something into the model so that's I think definitely about the user experience you still have that now the risk of triggering and requests however and also I I think it's a slight semantic of by some it's consider like an antique turning in model so let's see another of removing the figure and now we leverage Jason API so if people of this fact it says and point may also supporting Filippa's parameter to allow the client to customize related resources should be returned OK so we need to use
the parameter when make a request to the back end and number 2 has first-class support for that you can just pass and leading to lots and and and the name of the related name of the relationship so that's what we doing in the in the band round solid phase of and without the API to send also the
songs this is what it looks like victory across like the and what the
EPA times is that on the data you have the primary source but you can see that you have also included the and there you have the related resources this is right away cause compound documents in In the specification so we might think that
now we are removing the flicker inside Click less happening in the sums LOD but actually figure is not true you can see 1st against see the and the list and only after that the food correctly states and the so why is
that you might have found that my side learning the songs we again block the rendering of the template by attorneys from but it's not Y
turns of that if you remember to find records we return immediately is that that is already in the store and it is already because we have nested ransom and build all the bands on the list of events on the left so the fact that the passing the induced songs doesn't that that behavior so we need to tell Ambady that to real that a record already even it's already in the store and we do that by passing the relaunch equals to to find record
and with that amendment radiates working as we wanted to so
here will ever adjacent that's a positive thing and I think and other and it is here that was a developer have to think about sideloading thing so it's you have more access control over how you that however bypassing that's real true option read delayed the ending of the band and played it because if you didn't pass that it would have returned immediately now this is no longer the case so in this application this is not the beginning because we don't really remember anything in the band template but you are he was at his money they used as minor difference the I also want to mention the references API which is available on the number data since version 2 . 5 is another great way to to check whether relationship is all the to all these or commission uploaded so and that they can be from all of the scenarios of itself for but the relationship is I think the data loading set of this should be as much a part of the design process as much as for example designing your you I'm so it's an Indian after thought watching you shouldn't just say that it works OK let's leave relationships are behind us and then focus on searching on the back and so here the specification says the future career parameter is reserved for filtering servers and clients should use this key for filtering operations OK
so in searching is is a form of filtering data we'll use that so you can see that the modified that the model on a songs out now if there's a search from an online 13 I'm not going to query for songs and I'm passing in the search term I also red this in a in a future the and the model does the writing and just
serializes this to to the right because it you can see in the bottom but there is 1 problem though is that is not a global search led zeppelin doesn't have a song about the that's how I knew that something was wrong so we
have to modify this goes to restrain the
search through those related to the to the current events and I did this we can and this week by passing game that the band ID also and that in the the that the and composing the URL so that the the URL is the relationship throughout this queries so it's going to be something like a band slash 24 less songs and then the search term as a as a future and we
this it now works correctly so really just search is just for the band who some 0 Kenya if
so if you want to do some searching than user fees the parameter so the filter but yes no
use of it sorting is prevalent
thing I'm applications and Jason API something to say about these 2 and 1 may support requests sort the primary data with a sort of repair and the the value for sort must represent sort fields sort order free sort must be ascending prefix and a minus sign in which case it must be something
OK so we have to use the sort of green parameter sort so in the in the bonds are out I'm I didn't say support I'm going to tackle this in the adaptive layer in the in the sums of 0 I'm passing in the sort because I want to be able to modified the sorting criteria by clicking on 1 of these buttons and then in the template I'm just switching the the value of that sort by parameter that changes its and so in that earlier in the
case of the bands is just a study values I can specint sort equals name and then you end up for songs so indeed some it up and adding sort it was sort of to the URL so that sort of comes from that the query on the store you can see that in the 1st case and
setting them the value of this sort is minus rating slashed assert comic title so that's the 1st sort them in ascending order for in descending order of their rating and then if there's a tie with the title to break it up and this this works perfectly
usage is MPs sort parameter and you don't even have to transform into can just use it directly in your templates and controllers and as it as it is to the to the back and now now education and it did look at this fact server may choose to limit the number of resources returning a response to a subset of the whole set available this may be a agnostic about the strategy used by server that basically from Benatar can be used as a basis finally strategies so we are going to use the page parameter where specified a metal member can be using to non-standard that they form is on the value of each met member must be an object so we're going to use the metal objects to contain the information about how many records arrived in the collection
soul at an example of this is that if you're in the back and returns the song so it can also include in a metal objects saying how many pages and records there are altogether and
soul mind that there is growing larger and larger but now I can add page bayesian number and the size of these as a source and then in the same vein as before I'm from the out and pressing and the page number the base Eisenhower's a set to them and then in the it's easy to assemble our own PG-initial links because it's quite trivial to do has previous vision has next stage and then just use these in in the template to see whether the previous and the next stage to links need to be on the and I'm just guessing game for query in the page number of course just decrease or increase the page number they are now I added a few more
songs so we can see that there are at least 2 pages and massive education works correctly and in I can even for search
in the same time so the eurozone getting here and bigger but on we care about that and we are doing lots of things so sorting searching and presentational and lived in
now so use this maybe I speech parameters and the pagination methylated so that closes that section of the scenarios I want and I want to and we a scenario that intrigued me for quite a while so we know that if you want to indicate to the user so that some data is being loaded from the back and and this is done in the foreground so to speak then it's relatively easy to do that with the loading substate the corresponding owning template or the loading events depending on your needs but I think what is harder to do is to do the same thing member database fetching data in the background and I came across this uh was this problem sometime limited to
solve it so table to demonstrate this by adding 2 more outs the application for artist's an artist's the important thing about these is that the and not nested so it's possible to know just 1 artist this story about holding all of them which was not possible before re-nested so there's nothing fancy going on in the in the rout so it's I'm just searching all of the artist's an artist's JS and i'm fetching that the 1 artists which specifying the URL in artist Gs
and the template again nothing really special about that the only thing is that we I want to show a spinner when the loading artists flag is 2 so that's the flag that we should set correctly so
it looks like this thing analysts of artists on the left
and now if you click 1 of the In the page is taken over by that page the detailed information noticing single what so the following scenario
then becomes possible you start on the
the page and then you go back to the list of artists and what you see is just 1 single art is the 1 that the ability
of the of the AP on and I think that's
quite perplexing to the user well I mean they can be terrified where all the users where
all the artists have so that's where I want to improve
the user experience and show the spinor that they the fitting is going on so by the
way this is the case again because of the EEG return behavior final so we finally remember if find all find at least 1 record or in the store then it to return immediately and that's what we can see here because that 1 artist is on the and he
does have been a reflection of all the records so what I did is that in the model I 1st seaweed with people whether there are any artist in the store so this will not trigger a request to the back and either non then I can present more by a final because I know there's going to block the model and I can show them as near to user but if there is there is at least 1 then I return all of them online 9 and the same time schedule uh fetching or the artists for later and fetch more artists what it does is it now I concept that built elected true and I can then federal the artistic find all passing against real true because we know that there's a fleet the spartans so don't want an immediate return and was that's a that's back from the back end of response than concepts in the model to this new well to the full list of artists and I should of course for you to reset the all inflected force so let's see now so
we start with flee and then once
the role that the artist we now have this nice thing so the user is really so ideally know essentially
that I deconstructing the background around the fetching process just let more Council and be able to set up building facts and I wasn't quite satisfied with that so that gave me an opportunity to do something with it and the current concurrency that I have been meaning to do for for a while and just maybe 2 centers of of American currency it's a great and on up for managing asynchronous fast and you can do about you can really do something that would be very very complicated or outright impossible we'd with promises it does a lot
more but that's the important thing here so now we remember concurrency what I did is that I now return a simpler JavaScript object on them from the model the reason I'm doing that is just to have it returned immediately and then I said I defined that number Congress successful effects artist fast and so when you see it in 1 instance of the best of my calling performed on it but so after that so the controller will be executed and then again we the people and checking if there are any artist and I'm setting those artist already the artist that so I'm able to show to the user some artists orally and then I introduced like an artificial time out the French artist as some like 28 just to be able to see the standard and then I can now do the final call goal in that task so now in the controller what I'm doing is in the artist's property is going to be the most important part here I can check this ongoing online 10 whether that conquer and the compressive test has already finished if it has that I can return its value so its value is going to be whatever was returned from the French artist test and in the upper left which in this case is going to be the full at least of artists but if it's not finished yet that I already have my loaded artists and I can just and so that's what I'm iterating through in the template that's going to do the right thing and another added bonus if we was the concurrency is that it has all the state facts on the test so don't have to do that manual so I can just use the best that is running to be able to to know whether I such a setting
that's a superior solution because there is a need to manually load the flags to something you said the fact that there was no run scheduling involved and I don't even have to as a real is true option Due to final so 1 more thing before about is that I prepared a page on my site just for you it's it contains that the slides for this presentation but it also contains adult those event is a pointer to the tab repository which includes all of the scenarios and then some more didn't have time to to cover here and and of that there is also amenable that I assembled from from these examples if you like to the the more about these and check out that side and thank you very much for assessing attention how a land in the in the in the last name of
the and you the
Perspektive
Mustersprache
Frequenz
Drei
Aggregatzustand
Reihe
Bereichsschätzung
Front-End <Software>
Code
Reihe
Projektive Ebene
Kombinatorische Gruppentheorie
Resultante
Soundverarbeitung
Softwaretest
Subtraktion
Physikalischer Effekt
Zahlenbereich
Systemaufruf
Überlagerung <Mathematik>
Quick-Sort
Teilbarkeit
Entscheidungstheorie
Datensatz
Wort <Informatik>
Speicher <Informatik>
Default
Gerade
Resultante
Retrievalsprache
Formation <Mathematik>
Router
Vererbungshierarchie
Template
Datenmodell
Routing
Unrundheit
Überlagerung <Mathematik>
Homepage
Informationsmodellierung
Funktion <Mathematik>
Vererbungshierarchie
p-Block
Fitnessfunktion
Funktion <Mathematik>
Euler-Winkel
Quader
Gruppe <Mathematik>
Mailing-Liste
Online-Katalog
Übergang
Beobachtungsstudie
Autorisierung
Web Site
Kategorie <Mathematik>
EDV-Beratung
COM
Kurvenanpassung
Softwareentwickler
Gesetz <Physik>
Computeranimation
Eins
Formation <Mathematik>
Informationsmodellierung
Euler-Winkel
Gruppe <Mathematik>
Momentenproblem
Template
Gruppe <Mathematik>
ATM
Klassische Physik
Computeranimation
Informationsmodellierung
Hash-Algorithmus
Gruppe <Mathematik>
Rendering
Template
Gruppe <Mathematik>
Default
Relativitätstheorie
Datenmodell
Modelltheorie
Figurierte Zahl
Quick-Sort
Parametersystem
Punkt
Euler-Winkel
Datenmodell
Mailing-Liste
Rendering
Client
Informationsmodellierung
Parametersystem
Client
p-Block
Figurierte Zahl
Message-Passing
Caching
Quellcode
Formation <Mathematik>
Parametersystem
Front-End <Software>
Gruppe <Mathematik>
Default
Zahlenbereich
Unrundheit
Computeranimation
Cross-site scripting
Umwandlungsenthalpie
Gewichtete Summe
Euler-Winkel
Physikalischer Effekt
Mailing-Liste
Quellcode
Figurierte Zahl
URL
Datensatz
Rendering
Gruppe <Mathematik>
Template
Default
Mailing-Liste
Maßerweiterung
Speicher <Informatik>
Ereignishorizont
Normalvektor
Homepage
Retrievalsprache
Server
Subtraktion
Prozess <Physik>
Euler-Winkel
Kontrollstruktur
Versionsverwaltung
Zahlenbereich
Kartesische Koordinaten
Strategisches Spiel
Client
Reelle Zahl
Front-End <Software>
Gruppe <Mathematik>
Operations Research
Softwareentwickler
Umwandlungsenthalpie
Parametersystem
Nichtlinearer Operator
Prozess <Informatik>
Template
sinc-Funktion
Digitalfilter
Konfiguration <Informatik>
Menge
Parametersystem
Mereologie
Client
Server
Gamecontroller
Schlüsselverwaltung
Bildschirmmaske
Informationsmodellierung
Rechter Winkel
Default
Minimum
Schreiben <Datenverarbeitung>
Serielle Schnittstelle
Term
Spieltheorie
Gruppe <Mathematik>
URL
Term
Ereignishorizont
Retrievalsprache
Parametersystem
Euler-Winkel
Siedepunkt
Gruppe <Mathematik>
Digitalfilter
URL
Retrievalsprache
Datenfeld
Körper <Physik>
Freeware
Vorzeichen <Mathematik>
Parametersystem
Selbstrepräsentation
Kartesische Koordinaten
Ordnung <Mathematik>
Quick-Sort
Beobachtungsstudie
Parametersystem
Gewichtete Summe
Gruppe <Mathematik>
Green-Funktion
Gruppe <Mathematik>
Default
Abfrage
URL
Speicher <Informatik>
Quick-Sort
Computeranimation
Retrievalsprache
Server
Teilmenge
Zahlenbereich
Information
Homepage
Strategisches Spiel
Homepage
Datensatz
Endogene Variable
Integraloperator
Meta-Tag
Basisvektor
Schar <Mathematik>
Parametersystem
Template
Bitrate
Quick-Sort
Endogene Variable
Inverser Limes
Teilmenge
Objekt <Kategorie>
Menge
Parametersystem
Basisvektor
Strategisches Spiel
Server
Gamecontroller
Information
Ordnung <Mathematik>
Template
Zahlenbereich
Abfrage
Quellcode
Binder <Informatik>
Computeranimation
Homepage
Objekt <Kategorie>
Datensatz
Menge
Spieltheorie
Maschinelles Sehen
URL
Bayes-Netz
Euler-Winkel
Ruhmasse
Computeranimation
Homepage
Parametersystem
Multifunktion
Datenhaltung
Template
Default
Datenmodell
Sprachsynthese
Routing
Kartesische Koordinaten
Ereignishorizont
Computeranimation
Garbentheorie
Innerer Punkt
Tabelle <Informatik>
Euler-Winkel
Verschlingung
Template
Fahne <Mathematik>
MIDI <Musikelektronik>
Information
Computeranimation
Homepage
Euler-Winkel
Mailing-Liste
Computeranimation
Homepage
Euler-Winkel
Default
Datenmodell
Spinor
Speicher <Informatik>
Computeranimation
Fitnessfunktion
Scheduling
Datensatz
Informationsmodellierung
Spiegelung <Mathematik>
Forcing
Siedepunkt
Gamecontroller
Front-End <Software>
Default
Endogene Variable
Datenmodell
Mailing-Liste
Speicher <Informatik>
Menge
Prozess <Physik>
Prozess <Informatik>
Kontrollstruktur
Euler-Winkel
Datenparallelität
Datenparallelität
Gebäude <Mathematik>
Web Site
Konfiguration <Informatik>
Datenparallelität
Zahlenbereich
Kombinatorische Gruppentheorie
Computeranimation
Homepage
Task
Informationsmodellierung
Fahne <Mathematik>
Fahne <Mathematik>
Zeiger <Informatik>
Soundverarbeitung
Softwaretest
Dokumentenserver
Kategorie <Mathematik>
Default
Systemaufruf
Ereignishorizont
Konfiguration <Informatik>
Objekt <Kategorie>
Rechenschieber
Scheduling
Menge
Loop
Scheduling
Mereologie
Gamecontroller
Bildschirmsymbol
Standardabweichung
Aggregatzustand
Instantiierung
COM

Metadaten

Formale Metadaten

Titel Data Loading Patterns with JSON API
Serientitel Ember Conf 2017
Autor Erdi, Balint
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/33635
Herausgeber Confreaks, LLC
Erscheinungsjahr 2017
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Data communication with the API server is a principal design question in rich-client apps. The talk ponders the design angles and gives several examples of data communication between Ember (Data) and a JSON:API compliant backend.

Ähnliche Filme

Loading...
Feedback