Your Front End Framework is Overkill - Server Side Javascript w/ Rails

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Erkannte Entitäten
time to time and and the and thanks for the common the like top yet really appreciate it my name is Jim Jones I work as a real in generic consultant currently at One Kings Lane in a modern services scope for the past 5 years has recently moved back to Nebraska who is my wife and I had a baby i in I Love everything this carrier key and beer in a loving and than in a really the city of synthesis go on the other slightly Side Story 1 of the 1st experiences I had 1 of the same Francisco was I went to the Taco Bell in I struggle a conversation this is the outer mission excelsior like 1 you tackle bells and the city set set up a conversation with the cashier and she started complaining about the rendering differences between her Windows Phone an Android phone them pretty sure she said the word render and I myself I O or set of in another plan case that age we put that in there that had a 2nd is rare and so we went to well spiral opening joint account right for my wife and I got married In the bank graphing said it would you do for a living area and suffer engineers its eyes Icelanders hey what language means were no Ruby has only gonna run a few scripts can automate some the balance venue now at the end of the day like we've with the 2nd where the fuck you might have and then at that and say I really really miss those sorts and actions and sometimes but not yet so it is with the whole new world a new is that is right after new lots of the people that are really well respected over the years the set and the great experience and so when I got there and I went to a company Benson we eventually got acquired by step of and then after that and developed some checking out my own doing consulting and so has had these whirlwind of experiences on december cisco of atomic and children about going to an acquisition being out on my own learning a male and so process a little bit of a background about me so today would you decide about dynamic site and dynamic sites rails so we have few options here we is rod of a script was actually becoming a little bit more in favor now that people non-implementation there's kind assign a match up with the modern browsers in fact it's probably not as far-fetched as a lot of people in the bleeding we have J. query which obviously so it's going to take care of a lot of the browser idiosyncrasies and differences in such so that's always would go to on a lot of projects it was set to get these these higher structuralism abstractions I we have backbone that's going give us a more suffers from a friend and I have an image a hassle where we're getting and further with that all it's nice conventions and and then we have the directives with angular and that it really really powerful because you more structured perhaps and then this standard this little stepchild that no 1 ever really talks about and not even sure most tube or really aware of what the capabilities on current real staff and so the point is like that everything has its place in that the final framework certainly have their advantages and then I will also have the the server side of surrendering which is gonna were in a show where it's advantages are and where it shines sobering go through a few parallel implementations here of the exact same out I am going to attempt to do some like coding commit presentation suicide a N will go from there so but 1st off let's qualify this right them for anybody who like with rails for a long time but I'm not talking about largesse in I think a lot of people still call RJS and this is probably maybe a problem with the evangelism of this particular of this particular subset but you guys remember Adam that depend on how far back you go with with rails in the history but I this functionality call Ruby jobless script in you probably remember very explicit method naming conventions like this we have linked to remote light is really cool URL has explicitly telling the controller and action in such a man we have we have a page that replace HTML and so we get these jobs that request then we get this page objects in and we were able to either replace the particular assume that all elements where we were able to update in HTML element and I think that this was other rails we're trying to solve for the the sweet spots of with the dynamic sites were doing back then of which were just like just basic updating and such but then the there was very constraining and it ended up getting ripped out a real score in fact I was trying to figure out when the transitions went from just RGS responses to rod step responses is another grammar agile books and I think the adult to still was citing RJ us and so I assume around so it was real story that we started to see just to standard just a suicide requests but so what else can correct me but 7 we started to kind of take the kid gloves off of I'm a jobs that requests in acting as the RLC that we start to allow for free-form JavaScript responses and so I I think this is going to be that better demonstrated with some coke and so let's
0 1 0 of similar to do here then at so I have this
application it's just this is just a standard rails new the remaining OK I'm not relevancy In end we just have a user model with 7 name on it I've already done like the DB my on it but that's about it that's all at right at this point and so what I would like to do is currently we have a this
functionality is listening to users of a new user 1 add a user and we would like it to dynamically update OK so the added the about like but so that that but this is just the playing scaffolding coming right out of the box so now how can we get this was a dynamic where we would just start adding users to a table in without going in any sort of external jobs frame so I will be back to our sources
n for kind walking theory on how we're going to go ahead and in the sources can vary and so this is where you have to laugh at me because like coding areas right so but saying let's see if we can create some magic the ships
you this the in that's the 1st understand apply
an ID to our own the 2 body of a table in a minute but then render out all the users and so that's a scan iterate over user collection and it's going to call the user partial on so really bad and while creating our user partial the for those of accessing this in action you probably pretty board but I think this bears repeating that I consulted at a lot of companies in in might be people who attended be newer to the rails community tend to reach for their before the front and framework right away they say all Ajax dynamic updates had a midpoint and framework for this and so the whole point of this exercises that you can see it built up and you can see that there's a lot that comes in the box or else in a simple dynamic updates may already be taking care of you may not have to add in 1 dependencies so I just want to drive home the point by going through this to FIL let's said a yeah will stick sure
Sin note that our are sweet
partial a at school here
where researchers still rendering nice but note
that as a partial set up again now I wouldn't allow her name to be entered right from the
from the and that so whenever
there get rid of and she said where you have a nice little for extracted out of his rails it is good to us for that so let's make sure that you knowing a moon
of Saturn needs a user object will come over to our user controller so here we're just
instead of users and that meaning
I know that perform Austin greater so if we had a name where it OK were so the HTTP request great so now we alter this is although
we're looking at 1 In just 7
it will get into the magic behind this flag a little bit later I want to look at the implementation behind it but just just now from going forward that this is what enables the asynchronous emission of 4 no so that there the scan in we
French 10 but method so we have anything so in C but see
the of is going on the back and yeah the
then we can see we posted the users was sitting users controller
create as j us uh so now researcher from sentences CPT HTTP-Post to JIS requests but then about that's that's a good
sign the means of well lease posting up our data to the server and if we were actually
to Henry fast on this we see the like Tim was posted it so no
matter how do we get that data and we get it back to rendering the homeowner here were
in adult and remember how we apply that idea of users to both the T body where the guy had been the do little J. chromatic that's included of the box along this will say that pen n here's nice thing is that this particular templating this can be called create that Js that you're B and so that implies that the R. B. is going to pass on this same plate before it serves up the the raw JavaScript so this is just another action template and and so that empowers us to go ahead and render out all of our partials out the the very views that we've already built and so we're going to get a lotta reusability out this so you're going to find that for a lot of simple dynamic updating be a lot more productive with the so I just wanted to this scaling journalists yeah animal random users because we already have a user partial right now is the 1 that that that constituted a row in our table being on the single currency is no screen so the saying it uses a pen when render out so now I will call
this creating that Js that you're being so that in that the Jets requests In is going to be a process led by URI
but now let's see OK care the 2 this 0 no nothing happens so maybe there's something went wrong with my Scotland take and who
FIL them and see the shame His control created shape answer assuming that is controllers by
so if we have 1 thing in the users
controller on the creative the we wanna make sure that it's going to render the default just place and so is that guy pop and that the format that Js here the now was said this
again tha so now if we take a look at that the life cycle of
this we have With posted the uses the process uses control creators JIS and then you can see right here that are rendered users create that J . the be sent a client side and the default behavior for j query is to go ahead and evaluate jobs for class and will dig more into the internals of that in a little bit but is I think it was really it's can be really beneficial for you to see the full implementation of that you know a little crude so
but the so this really does not RJS this is way more free-form this is just rod of a script with the ERB processing and that Rodime scriptures is going said clients so just it's getting that template ogre process where template processor processor it could be handle could be our year being and since this is actually we get that the full reuse of partials we get our normal helpers we get all that included is just another type of templates but so I mentioned a look at some parallel implementations last set out is where and take a look at that there's a there's a cycle to do in the city that has the to do was implemented in various front and framework gently every day after and you're just implementations there's also the plane all the Wells Johnson response implementation as well so I wanna knock the sum of the specifics of that kind so you can start to get a feel for a real world application uh do slides Florida what
Mrs. Hagler care what and the number request the so if we take this thing 2 slides retire will take a look at this response and this is just going back to the raw jobs script response for the create method you can see that the Spartans is basically just assume back Roger java script and and so that the to do list here were pending on our list item you see the escape jobs that method has properly skipped all of our quotes this is reinitializing are entry for the to do back to blank M. or something a few properties and so that's a if we take a look at the the form the
form code for that we just have a form for the where this initializing do Edwards a setting in the remote true flag on a similar to that initial implementation that we walk through you His our model pretty trivial model just have a couple different scopes word completed in an active the any other view 1 thing to note is J is as baseline alias for xk script so that can lead to LDA shortened code within your home you Jess templates but the the most relevant portion is just to do less were just appending were rendering out to do and they were just gonna go ahead and reinitialise value and we would just see this K digest right with our views for that particular for that particular resource his control then tha now when I map through but some of these helpers expand to so you have a little bit more background so that when things are going wrong you are drawing a blank space and saying what of this guy recommend this as an alternative insert cursing remain on the food look at that form for help a call and see it expanded with the the action is set to to views and the most important portion is Baron true and that being senator data promote equal and we're gonna see him on a little bit but this is something that J query UGS is actually looking for In order to do that asynchronous of the asynchronous submission they did he said the integer j query you query you has is is the portion that is actually in charge of during the asynchronous submission under the rails JIS for Hindu document delegate for this 1 forms emits selected in data that method at that remote flight isn't that true which is going to go ahead and do a reels that handle remote further down and we'll look at these events later on but you can see on the handle remote implementation and you'll see a bunch of different firing of events in there's going to be a series of events that you can actually listen to the quite beneficial in terms of like for disabling controls re enabling controls doing proper air display set is the control action the you could see the Jews control create was as a JS request that's important part it is important to note that we rendered out just using a standard partial wake scape that in that this is also available using him all as well is still a real sharing that prides interpolation right there's can so that the effect JavaScript render n still do that and that's a minor output under him all here is the final portion when J queries when a request a message as request and it comes back there's is going to be a global about on that a particular question actually becomes important when we start going over a hundred about these things because involves are pretty well in the code is is incorrectly and so I'll give you a few tips on on the dividing coming up after we go on these other implementations so it's important organ encourages gloss over this front and implementations really quick but it's important to kind a note some the differences here so come that will that so appreciate that the without looking but another
views on the singular implementation and some of the obviously some of the more important parts of the to do out and then we have other into some the directive I for an add to become come over here will connect controller and this is taken directly from the to do in the C implementation we have had to do for saving I have a couple promises here in so that set out depending on what story of its API local storage His services that provides that answer function for the for the storage posting to the API to do it's important to note that this is this is obviously you have full control over that so that action becomes important when we're discussing managers of so the client-side framework the which flickr that's definitely on the to sometimes that no that the the that with our Amber deaths
implementation with that are in line in a bias in In the line in by places script so those are about 18 with with jobs that client side and that's important we have our control were off-screen reckon saving it you in some very simple model to represent this so a client-side advantages we have a immediate rendering right where because we use the simpler to implement of script we can immediately rendered to Spain regardless of a whether with the result is we can take that chance of we wanted to and so that that's certainly an advantage where it's hard to do so is hard to compare that you into like of filet 50 millisecond response and server side that you certainly get that immediacy with with that if that's how you go designer item the asynchronous persistence also on the speed side where you can go ahead and delicate that persistence out you can still display things and in the meantime in you'll get that immediacy that that that quick update to the user interface that will delight users and then there's also a graceful error retries right since you are controlling this persistence loop that you can also do some nice graceful retrying if we lost in a connected via a lost 1 of the servers and such and this could be totally transparent to the end user so you have that level granularity of the clients and you know that little control but so there is a few gotchas for the job scriptures sigh response is that I think once you're aware of our model make it a little bit more pleasurable experiences you come into a deep dive into them on debugging is definitely a big time gotcha in I'm going to
go ahead and use jump over here so you guys can consumers firsthand so
when they said when the job step response gets sent back it actually is going to do about it all that In the big problem is in the valve fail silently so if you happen to have a problem with the job script in you just have this little typo in there we don't have an answer tried
history user 0 no it just spells and there's nothing and there's and there's no guidance so that there's no server-side responsive obviously words just evaluating the temple a at that point server-side and client-side to velvet just that hands up don't do anything so that's that where 1 of the frustrating components that new users basically have to of figure out how to get around and there's a couple different ways that you can that you can
attack that think this is kind of a primer for where I'm going for the the dividing but we talked about all the different UGS callbacks and wanted having that how the trigger drop the life cycle of the asynchronous requests and there is here to some large table of the different states from within asynchronous requests that are available to you in is probably don't get utilize enough or people are aware of but the 1 that we are concerned about is the Ajax error and so actually get their own this get called when I there is an evil air and this is really helpful you can stop this a liking application JIS somewhere else but on if that is an error would scanning with the about we can at least go ahead and do a consul logs In our public that air text is and so that you're not totally in the dark I remember there is be all large has but this is the only IDS would actually wrap the code in a try catch block and so I'll show something else going those lines but this is site the I actually pull request of else 5 the does just that will take the code rapid and try catch block and sends a series of metadata for where I 4 where the error occurs with that but got to the skin I have a clearly class out that tracks where JavaScript's is generated whether it's within a partial within a template sends appendicular metadata metadata over the jobs that request wraps the executioner try catch block and then depending upon where the areas that it'll say they know script error in it actually occurred in the user about is Shimell that year the partial user . js that you're being complaint In such China do some mapping back to where these were the subscript was actually produced in all give a little more a little more insight into the context in which the subscript was generated on the server side but display in the context which people use to debugging on the client side so on it's slated for 5 5 . 0 I don't know from given but it's been tagged so I was when they got news if you are starting to do some replacements of HTML elements on your jobs that responses you're going to have to go ahead and by noting that say if you you have a quick can something on uncertain development she went hand in replace those that particular handle is going to be lost so you have to read by those when you can certainly do that you could start to trigger callback like on a cart summary of him trigger an update that and then within that data that we can discuss Henry binders was very and so we had set up 1st some of the advantages for Jess responses I were an action do we get reuse of partials so you can see in these 2 different examples of that are created yes are being where users that attend and where rendering out our user partial and then with then that's person resource on our update we're doing an asynchronous envenom but they would just 2 of them users with the user ID which is then replaced when and where render out this user which would call the exact same partial so you get all the advantages of of action right there with the new you just someplace along with that you have access to all your different view hoppers right so that's an include caching so you could the heart these Jess responses in some get really lightning quick responses n potentially less gesloten that were just summing over the pieces that need to be executed at that particular time so it's it's certainly on could constitute a reduction of jazz depending on what you're doing then is also slightly depending on the gas and easier execution flow that because the the template they fall in line with the way the rest of the flow rails that generally goes and so you would know OK about a Jess request and it's going to look for this particular corresponding complaint In edges will follow same sorts a convention so there there's no deviation from that sort of mental model it's going but by the same and when do they make sense I think they tend to make sense when it's something when it's an interaction with the user except expect some sort of level persistent something that's stored something that like a comment or you've added a car item you want to update clock-out students to update state taxes they were total than the 1 in another column something where the user is expecting some level persistent I think this is where they can really shine and they can certainly help to simplify codebase just for the fact that you get so much reusability on and of urges the spinal marrow on this was this was a an article posted to online medium from their McKinley use of a principal engineer at he just as consider how you solve your media problem without adding anything new and so when you start to look at the dynamic updates when you start to look at the pieces that you want to do so you want to make dynamic really really give it a 2nd thought as to whether you would want to adopt a full-fledged framework and that's the overhead or whether the responses of would be sufficient in updating the individual pieces of the things you guys are really of research here at the time of some some some some


Formale Metadaten

Titel Your Front End Framework is Overkill - Server Side Javascript w/ Rails
Serientitel RailsConf 2015
Teil 73
Anzahl der Teile 94
Autor Jones, Jim
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/30726
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract For dynamic apps, Rails has taken a backseat to client side frameworks such as AngularJS, Ember and Backbone. Learn how to use server side javascript effectively to greatly simplify your code base and reuse your view logic. We'll implement parallel apps with vanilla Rails js responses, AngularJS and Ember.js so that we can contrast the implementations and evaluate the tradeoffs.

Ähnliche Filme