Placeholder Image

字幕列表 影片播放

  • Hello, everyone.

  • I can see that people are still having a coffee out there, so hopefully you can rush on coming so that we'll lose much time with this presentation.

  • Okay, so we started my name in general service us.

  • They were mentioning.

  • And from Argentina, Very living.

  • Kale.

  • Ah, on I came to talk about AP eyes.

  • Ah, the presentation Slice already in line so you can actually check it out.

  • Slice the com slash leo.

  • So slash component based AP I Ah, you can actually take a picture of that.

  • If you want to check it out later, I'll give Ah, quite some stuff.

  • 25 minutes Is kindof hard to fit everything in.

  • So if you want to find out more later, I mean, maybe we can go in more detail on my tutor.

  • Hundley's no service say must my surname.

  • Okay, so we start.

  • So you were talking about a p ice?

  • We must talk about the current host stuff, which is what graft cured.

  • Right?

  • So Graff girl is increasingly popular.

  • This is this.

  • That's from the state of just grew from last year that he say that 20% of people who have used it They have, They have likely.

  • So they won't talk.

  • Should use it again on 62% They have heard off it on would like to learn, so I mean, this is certainly gaining ground on.

  • We can expect graphic.

  • You're to be the new normal healthy.

  • And maybe it is time out for rest.

  • The lot off rest ap eyes, which are still out there, of course.

  • But like, if you had to start a new project, quite likely you might actually want to live in graphic detail.

  • How does the situation right now?

  • So why is it so?

  • They one characteristic from Graff kill that everyone talks about?

  • You know, you can actually get exactly the data.

  • You need to feel your layouts, your components.

  • So so you have this layout, okay?

  • So easy.

  • Like a witch, it with a feature director.

  • We have there showing a couple of teams on each film showing some off its actors.

  • So they were you actually fetch the later through.

  • Okay.

  • Well, actually, you need to get data.

  • And so, in the case of the director, we need to get the name the country on the avatar, Then for each other things.

  • We have the Terminator on the time.

  • And then for the actors, we have the avatar on the name so graphic you really very straightforward.

  • You can define a scheme on the unifying equity that lets you get the data.

  • Us united will you actually get from This is a response with the data in the structure as you needed.

  • So this is actually quite cold, right?

  • You get exactly what you need.

  • So this is improvement of arrest on why is taking over from Brest on this plays very nicely with components.

  • So if you're actually guys calling with react on view, Jess, I guess that's the situation.

  • You will actually love Dracula because it goes once one with with the concept of components.

  • So in this situation we have on outer component called feature Director, which has a film it race over the little films on each film component has codes on after component.

  • Okay.

  • And if you actually pay attention to, this is exactly the same structure.

  • So he very practical for these, So, so far so good graphic.

  • You're awesome.

  • But it is not perfect.

  • Unlikely.

  • So it comes with a few limitations or trade offs.

  • We can actually say so.

  • One of the trade off is that it did not catch up on the back in.

  • You can still cash the aquarium, but it has to be on the client side on this.

  • A penalty for that because you're adding called to the front end.

  • You had to part the JavaScript had to execute.

  • The transcripts were not ideal.

  • Okay?

  • Another problem is that this is acceptable to the nail of service attacks.

  • Because now you're giving a little power to the client to fetch whatever they do they want.

  • So if any evil person they want actually ah, take your database down, they can actually execute a very complex story that maybe you're Sarah.

  • We like, take one second to process.

  • It doesn't seem so much, but actually doing that for many, many thousands off course can actually take the target down on your service on.

  • So once again, we can be mitigated.

  • They're like strategies for dealing with the with the the always attacks.

  • But it's so starting complexity to application.

  • Now you have to actually think about the complexity of the glory.

  • You have to think about the nest of the depth of the quarry.

  • You can limit that.

  • You can actually think our time out.

  • So once again, they say not ideal.

  • So let me present you a project that I've been working on that it's called the Component based a P I Andi.

  • Before anything I need to say it's a work in progress on it will be released in a few months.

  • So I'm kind of sorry about this.

  • I wanted to finish it for Jase.

  • Come be here.

  • Saying, OK, we're releasing it today, you know?

  • I mean, a planning time management of time in one of the most complex thing seen software development.

  • So he hasn't happened.

  • Having like, two months away from being ready for like, six months now on is still a few months away.

  • So yeah, I'm sorry, Audis, but everything that I'm going to show you now it's working all the fundamental having implemented and I also have it running on a couple of production sites.

  • Uh, so whatever you will actually see here is pretty much there.

  • Okay?

  • I'm not talking.

  • I'm not bluffing.

  • Everything I will show it's actually working.

  • I will try toe do these.

  • Following the example by graft, urine off having an open specification.

  • So then you can implement it for different technologies.

  • How different systems interact with each other independently of the underlying implementation.

  • That's pretty cool.

  • What it is, I'm Finally, it's a recognition that not everything is bad about rest.

  • So graphic your lease actually taking over from breast No pick of rest a spell.

  • Both have advantages and disadvantages.

  • And actually, they may even complement each other in the sense that rest has advantages that draft Bill does not have on the other way around.

  • So I was actually thinking it's actually pretty cool from Dressner into this car That on would actually try to do is to get the best from both approaches, which is what I'm going to show, you know, so mostly concerning fishing data.

  • Basically, the good thing about graft yours is that it allows you to fetch the data, the union Exactly that.

  • And that was a big problem with rest.

  • So I actually took this.

  • It allows you to fetch exactly the writer you need, like rough girl.

  • But he has a new interface like rest.

  • So if in graphical, you have a Korean off this type.

  • You have a future addict or a well, if your properties then film with a few properties under an actor.

  • They were.

  • I translate these through the Ural is First I get the properties for the director and I bought it through a field.

  • Ah, but I mean, they're only your own.

  • Then I get the property for the film on.

  • I also pass it through the fields perimeter in a kind of dot notation.

  • So it now feels the title and then a pipe thumbnail to say the property or that probably actually differently on that property.

  • And finally, once again for the actors starting from the route, it seems that actors that name pipe water So having the syntax, I can actually carry the the service from the Ural.

  • So we have sold the catch ability issue.

  • Because now my Ural is my identify, Ronde.

  • I can actually cash these in the bucket.

  • So does the first thing that it's actually sold a combination from Reston graphical now concerning the the shape off the data that were actually fetching.

  • So in graphic you and what you have is that the shape of the later mirrors 1 to 1.

  • They're query, right?

  • You say give me a future director.

  • And in the future, Director House the film.

  • And if you have a new doctor on your actually returning exactly that same ship, But I decide so use the structure as the data has been defined on the database.

  • Assuming that it's an SQL database, maybe this doesn't make much sense.

  • We didn't know SQL Database, but you haven't SQL database that you have, like, tables and you're thinking of rows and columns, okay?

  • And then you have relationships among the entities that you have an i d point internal check on another table.

  • So that was my modern, on which I actually, uh um, implement titties.

  • So once again, disease craft, you will see how you get the response and what we have in these other bottling ese databases.

  • And then you have this You could call it the table.

  • Sort off.

  • I call it people with the idea of the entity.

  • Okay, Now he has the name the country, about her on things, and the films is of being nested toe get their entity of the film because a reference to their i d entity.

  • So then we go to there?

  • Films don't.

  • Here, here we have the entity with that idea.

  • So they want has its own property style thumbnail.

  • And then he has the property actors, which is an idea pointing to the actor entity bug again on people.

  • So it is, You know, as you can see, these actually ah, replicating.

  • Sort off the structure of the dates of it.

  • You have it on the back in like like bringing into the front end.

  • The source did the night off off service attacks.

  • Now, why is that?

  • I will actually have a different quarry to explain better.

  • This is it.

  • Anybody except your idea.

  • I don't think I would actually have a party like this, but it makes the point much that you have this query that recording for posts on all the post.

  • You bring the tile on the author, then the author.

  • We have the name on followers.

  • The followers have the name on the recommended post, which has a title author.

  • Whatever.

  • Okay, so if you actually pay attention to these, you're given different names to the same two entities which are the post on the user's.

  • Okay, so if you actually think about this in terms of graft, you will.

  • You have a nest of relationship upon all of the entities on you have a quarry executed after critics are getting after the critics after acquiring right.

  • So everything is is compounding Andi.

  • I've read in the paper that the complexity off this island, if it's right or not because I didn't see any evaluation of the paper, I can share the urine with you.

  • But he says that the complexity is exponential toe refrigerator on its polynomial to find out the complexity off the query so that if he goes over the threshold of your security limitations, you cannot execute it.

  • But at least it's explainable time.

  • But if you're thinking about this structure in terms off data vase that you have in there like escalate service, this is simply to tables like post and users with relationships among them on.

  • You have actually made it flat now on because it's flood, and I know that entity that I will have you seen that I really have loaded in advance.

  • I just get the aquarium.

  • So I got these from the for the executions on, and then I compelled everything together.

  • The time complexity is linear.

  • So because it's linear, you can actually have 200 nested.

  • Ah, let the relationship among anything coming like 200 levels down.

  • Okay, Andi still be performs.

  • Well, I don't know if that's okay with graphical.

  • I don't think that you will have a use case toe have, like, 200 levels deep down.

  • But if you ever had so the performs better because it's flat.

  • So let's I'll show you a tiny bit more about the AP response where we actually get so the idea is that you have the data awakens back.

  • How do you use the data, right?

  • I mean, how do I know which is the data that I need so show in my component.

  • So we said that we have another component called feature director getting its fields named country now water.

  • Then you have on inner component the film and then you haven't any your component, the actor, right?

  • So the way that I actually sold the problem is that you have the idea off the off the entity that is growing for the data.

  • In this case, they won't.

  • Recording for the letter is a feature director is saying I need the feature director, OK?

  • And then the sub components will be asking for properties from this retrieved entity.

  • So this guy in his he says here, the future director, the result is entity with Ivy One okay, from which dates of a sort.

  • Which database?

  • Taylor, Uh, it appears under the key idea, which is people.

  • So when you go to people here, he says people entity with anyone name, country, are better on them feelings on.

  • Then he gives me Di di off their themes from this guy.

  • So end it is wanting to Where do we retreated?

  • Data from Harry says from their key under films, which is called films also.

  • So now we come to films and he gives me the entire team.

  • Okay, Tyler Tom.

  • Real actors on a toasted kiss me.

  • They're actors with ideas to 13 once again.

  • What do I get them from?

  • From films that actors.

  • And he says you have to get these from the database table called people.

  • Okay, so now in people, So on three, we have these entities on.

  • You can see that the data that I'm actually retreating from from each.

  • It's exactly what they need.

  • So these number one is George Lucas is the director.

  • I need to display the letter from him on the country.

  • Ok?

  • Ah, they want MacGregor.

  • He's only an actor, so I'm not.

  • I'm not sure in the the country from him, and it doesn't even display this.

  • Okay, so doesn't bring it.

  • So it's pretty much like fuel, but the data is arranged on a different structure.

  • Where is the cool thing about this one thing that they take normalized.

  • So you can see an example.

  • We have the same actor twice.

  • Natalie Portman.

  • So, in graft here, you actually bring this little choice here, you bring it only ones.

  • Then they say unique database containing all the dates and the client.

  • So you can actually merge all of it, because now it's flat.

  • You know how, like nest levels with renaming or the same entity.

  • Now, you know a party supports the user is a user.

  • It's flat.

  • You can actually marriage it when you bring it from there from your culture rapier you murdered on the client.

  • Are you having cash?

  • So if you know that, you will need to fetch this data later on and you really have retreated.

  • You have it there.

  • You don't even need to make that that car.

  • So this is awesome for performance because their most performing ah, application is the one that need so make that it's typical.

  • Every redundant don't make it on this makes it possible.

  • And finally, another cool property.

  • Is that because they have Izzy share among all of the components if one component of fetching data Okay, Andi Zeta has bean updated in the time in between.

  • On another component.

  • Also what's using the same data, then both components computer render Europe.

  • You can observe on the dates of ace basically.

  • So he still building community an object on the fly and then officer the subject, You can actually have a navy off being completely off serving the date of its Andi layout can be can react two days later inside the date.

  • Or is this not implemented, by the way?

  • Ah, but the architecture supports is on.

  • That's hopefully one of the upcoming things that will implement some.

  • So concerning DP respons.

  • I don't have enough time so I can assure to you, But if you are going to check out the presentation and thrown.

  • You can click on these two wings on this is deployed on a production server so you can actually see it working already.

  • So having this everything that comes that I would actually explain in the next lights is working.

  • So let's see how this works.

  • So the important thing here and I'm sorry about this is that the components are implemented partly in the front end.

  • I'm partly in the back in, so I know that you're not ah, that you don't trust back in developers.

  • Yeah, Andi, this is something that believe me, makes sense.

  • And I would try to convince you so that maybe you could have a tiny bit more off esteem for us.

  • But the thing out, these is that they're not back in or front in the component actually leaves between the back in on the front and one in the implements part of your responsibilities, where he makes most sense.

  • So what I'm talking about here is the following.

  • I have detonated four layers.

  • Okay, That make it up as a progressively enhanced service from a P I to application on the very first lady.

  • You had a date.

  • A layer.

  • Okay, so this is basically you're a p I.

  • You define what data the component needs.

  • Having that alone.

  • You really have the FBI.

  • You can actually stop it there.

  • Okay, But you can also continue.

  • You can.

  • On top of the data layer, you cannot configuration layer.

  • Okay, on the back in.

  • So I'm talking about defining classes and styles and extremes that you need to be playing in your view that you actually set it up on the Buchan.

  • Then we go to different in the view layers in different and and, of course, reactivity also will happen on the front end.

  • So what?

  • Basically, I'm saying with all of this, is that the application, your own application we have for your own site come being model as an extension off You're a p I.

  • So you had to provide an AP for your clients to retrieve your letter.

  • Well, your application can actually continue from there on, and yeah, and demonstrate the AP.

  • I deprecation becomes a p I.

  • On the other thing.

  • Is that the example that I surely about quarrying specific feels the urine, which is they?

  • Basically the graphic you like functionality.

  • It's simply a specific use case off this architecture, because what I do is to basically on runs.

  • I'm create the hierarchy, the off components that I need to much those fields, and I give it back to you.

  • So that's just one use case on Well, you can she do with this is actually much more so I found out actually pretty critical.

  • How does this work?

  • So on the back in, we have complaining hierarchy, which is how a component relates to each other like I own.

  • Or like, I'm dropping this component of that company, dropping that component.

  • You have groups, you had data fears and you had a configuration.

  • So I have called it the same page Pedes page.

  • Because so you have functions, get some values which first defined the hierarchy or how component rate to each other.

  • They have, innit?

  • Props on in it?

  • Probably very interesting.

  • I mean, it receives a model on the object props toe initialize, a component considered properties for itself, off course on also for his Children component, like all the way down right on.

  • Every ancestor has higher priority or its Children.

  • So the top most component at the very top.

  • Come for intensive properties off writing all the properties from its Children.

  • Okay, that's one thing.

  • But second, Tina, this is on the back in.

  • So it was very easy to set properties horizontally, not vertically.

  • So you can actually, in just one line of cold, Say all these many components inject this property, and it just works our units deploy any javascript file.

  • You know, when you change one string, you know, like I mean one description or one class name.

  • Okay?

  • It used you touching his in the book in and he said really live.

  • No need to deploy anything only for weapons or anything.

  • Then you have the data feels I will explain this 10 year later on the configuration.

  • Andi, this is the the how it looks on the view.

  • Having primitive 100 bars.

  • So this is an example off a drug down on you can see.

  • Basically do, then daisy button.

  • Then they say a u l on it, it rates all of it.

  • Some boulders on for each of them, like a prince on a lie.

  • And it says each of the Somalia's render yourself so what's so cool about this.

  • Is that the component?

  • The view in this case is completely the couple from his Children.

  • This drop down doesn't know who its Children is going to be.

  • You actually settled that on the on the back end through configuration.

  • So then you're really playing like Lego like this is on steroids because you have only one implementation of the off the view that you can actually add inject everywhere.

  • Yesterday when we had that talk by issue on, she were mentioning about this apocalypse, right?

  • This complexity of props because you don't wantto separate the component into another component because the function it is kind of the same money you don't want to replicate cold, right?

  • You want to stick to dry, and then you end up having a monster and you're saying it's okay.

  • You got a bit cold.

  • You make sense, okay.

  • With this architecture, they no need for that.

  • Because this is how the component looks right in different end.

  • Okay, is extremely the couple from all of its Children.

  • So then they know apocalypse.

  • It just cannot happen.

  • So every component creates its context on the back in, and he receives its context on the front end and only its context.

  • Conde on the view You just don't care about having to it.

  • Read the letter.

  • You get it.

  • The view doesn't know, doesn't care about it is sub components on props can be set vertically, horizontally.

  • So this is the companion architectural.

  • Let's say that we actually have a page in this case slash post slash lovely tangle at the very top of the other page.

  • My components called post and it will contain some other components.

  • Right.

  • So in this case, I have a some component called postal one called a thumbnail on one called post content.

  • So this is the way to represent is a very simple okay, just like that.

  • This is an oversimplification.

  • I mean, you can see there like a big which it there on the widget contains other components in the component contents, other components.

  • This is just simply to simplify.

  • Okay.

  • I mean, it makes the case on the way that he works in the back end is that you defined the relationship among all of the components with that function for retrieving data.

  • Each component modifying what data fits in is from the database just for itself.

  • We don't include the data fears for its sub components.

  • So you can think what they like.

  • Fragments in graphic you'il but on steroids.

  • Because once again, each level off the component defines this is my data that I need no on my cell components.

  • So great girl.

  • Right now you have the possibility of a component getting late and also for its sub components.

  • Okay, But in this case, each component at each letter says this is a little Rania at every single level.

  • And the cool thing about these, either by having this architecture the end point, Ural, from which to fetch the later on Also, the quarry to execute against the database can be automatically generated from the component hierarchy itself.

  • So what does this mean?

  • So we have these components architecture, right?

  • So the original did the top most component.

  • Says I need to fetch data from this post.

  • Okay.

  • The one corresponding to the Ural.

  • And from that moment on, all the components inside of this guy, whenever they fetch a property, it will be referencing this entity.

  • This poster so postal will actually little property style.

  • The postal mail, willow probably family.

  • An ambush, constant.

  • Well, actually lowered property content.

  • So it rating from the top.

  • Most component all the way down.

  • You get the property from each and you can construct the Ural.

  • So now this end point, you're ill.

  • Okay, That I was showing you how he can fetch the data.

  • You need it.

  • Like Graf, Jewel like sorts.

  • I don't even need to call it anymore because it's automatically generated from the structure off the components.

  • It itself.

  • That's amazing.

  • It actually changed one component of your another component.

  • It is.

  • Yeah, really works.

  • But not only that, because now this is on living on the back in.

  • I have the box.

  • It's also create the quarry.

  • Okay.

  • So you can also decide to execute the data he merely on the server on retreat and return the daytime.

  • Merely no need to actually have that round trip.

  • So give toe low the client, and then the crying needs to fetch the data from the servant and the several returns a little.

  • Then you render that you can just return the data directly.

  • That's another should understand that you have to do this.

  • But now you have the facility you can actually choose.

  • So if you actually want to have, like, relationships among entities, this also works.

  • When we're actually loading this post author component, he will actually change the entity from the Post.

  • So the post offer.

  • Okay.

  • And from that moment on, all the components from this guy will be loading properties on this entity on the user or offer in this case, the user name lost property name on the use of order loads property about one second, then put urine on the date of escorting are automatically generated how they look on the on the on the front end.

  • So ah, we had the view for the outer most ah component, which is basically a simple few lines saying, OK, now inject this entity into the context on then it's right over all, my sam, all yours off have components on for each of them.

  • Run there yourself using this entity on your context.

  • So when these sub components received the data in disguise, the tile, it just prints itself Okay, have the object of having loaded on its context.

  • And he says, I want to show my property tile that you have specified on the bucket.

  • Okay.

  • Property tile.

  • But now also, because we can look configuration.

  • We could even do something like this.

  • We can actually say, OK, I want to stop seeing each one straight on the view.

  • You can actually say each one through configuration are a class.

  • Also, you can change through configuration.

  • That's pretty powerful.

  • What is it?

  • Yeah, um, so on when he reaches the post, author is the same.

  • So if this guy will actually change from the current post, tow the post author into the context until all off, it's some components.

  • Render yourself using the new entity.

  • No, I had to rub up.

  • So I'm going to be pretty quick now with this.

  • But I want to enumerate on the menu the bandages off this architecture.

  • 1st 1 is isil dwarfism, which is basically the capability off running your call on the on the server side or on the front.

  • And you're thinking of a chair, a script, this another approach.

  • So on one side, the 100 are temperance.

  • The complete compile to run a speech p they say wonderful.

  • Every call light in Canada that that any runs like like native peach pickle is very fast, Awesome.

  • On under the side of poetry configuration can be exported as adjacent file because basically, this component hierarchy is a big arrange off components, listing all of their properties and then saying these are myself components.

  • Listen, their properties and these are my cell components.

  • So this is not right.

  • You just execute Jason and gold on these and you're getting a Jason.

  • So that means that you have on one side the possibility to run this on the server and execute service side rendering.

  • Okay, I don't really say you can export these for their front end and you have a civilised application.

  • It's up to you on Nicole is the same and he works.

  • It works on both back, and I'm from them.

  • Then you can also target specific components.

  • So in this case, we have a post on the post house, a component called postal.

  • I can through the Urals saying I want the data just for this component and also for these other ah, component.

  • Okay, on what you get is the equivalent of getting little just for these two guys on nothing else on that I find wonderful, because what it means is that the component is it's only pee.

  • I imagine we have a component that is like a infinite scroll.

  • You reach the bottom of the page, you need to get more data.

  • Now the component can just talkto itself.

  • Say I need more data.

  • So you construct the Ural, the current Ural, on the path to this component starting from the top.

  • And it will only process a little for this guy.

  • I once again because the hierarchy is such that at the top you have one component at the very top.

  • Then the worse it is, it's only people.

  • So they know different between a P A and website anymore.

  • Dizzy both on a p A on dhe, a website at the same time.

  • So you're gonna see implement single page applications and you cannot secret button libraries.

  • Very silly because you render a component on gives you the the visual identity component also knows which is success that has to roll on each of a sacrifice.

  • It just that's it.

  • You don't need to call it somewhere else.

  • Finally, you can implement cope, which means great once published everywhere.

  • So you have a single source of truth for multiple problems.

  • Web email ups so you can actually have a Jace component that extends it symbolises the component on estimates is a component that extends from your absolute component.

  • So you can actually layer the generational off the other layout in this Can we have a website?

  • And then you have the email, every patient, the worse, that can be sent by email for no extra cost.

  • So I'm finishing.

  • Yeah.

  • Three.

  • In a nutshell.

  • Advantages of this architecture.

  • You have the plans I cash.

  • Is it changing behavior off the application?

  • Is I soporific?

  • Their component on the weather is his own FBI employment.

  • Single pressure obligations is a general generated delivery.

  • You can implement cope.

  • So in summary in from all of these you have a lot of reduced complexity.

  • Because if you want to do all of these other things anyway, you had to go to 34 different technologies here with one with just one architecture.

  • You solve everything, Mara.

  • I'll put in less time with few resources.

  • So finishing, finishing.

  • So, uh, these ace open source, Of course, a mighty license the euro is could have the com slash low, so slash pop.

  • Okay, so check it out.

  • It's not ready yet, Okay, I'm a few months away from finishing.

  • Okay?

  • So if you can await, Come talk to me.

  • They know much documentation by some the commendation.

  • So you have to talk to me.

  • Okay, but check it out, OK?

  • On one second.

  • If you want to check the presentations come specially Lohse slash component recipe I You can click on the recent state working Thanks so much.

Hello, everyone.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

基於組件的API介紹,由Leonardo Losoviz主講|JSConf.Asia 2019。 (Introduction to the Component-based API by Leonardo Losoviz | JSConf.Asia 2019)

  • 0 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字