Add to Watchlist

Turbolinks 5: I Can’t Believe It’s Not Native!


Citation of segment
Embed Code
Purchasing a DVD Cite video

Formal Metadata

Title Turbolinks 5: I Can’t Believe It’s Not Native!
Title of Series RailsConf 2016
Part Number 61
Number of Parts 89
Author Stephenson, Sam
License CC Attribution - 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/31583
Publisher Confreaks, LLC
Release Date 2016
Language English

Content Metadata

Subject Area Computer Science
Abstract Learn how Turbolinks 5 enables small teams to deliver lightning-fast Rails applications in the browser, plus high-fidelity hybrid apps for iOS and Android, all using a shared set of web views.
and this is all the the the the the the the the and then there will be a area the hi 9 sentences you might know me from some open source contributions of work on lot of projects that are being power and tricks most recently as 1 of the original rails core members back and they go I think that nearly all my clothes and deleted leased by now I hope I work for based on and last year we launched an all new version of a statistical base 3 we created in 18 months from initial concept through dozens of designs and iterations changes then it's a it's a big gap has over 200 streams and we shifted in 18 months on 5 different platforms simultaneously so desktop web browser mobile web browser an Android Native Client and Iowa State of client and e-mail and we did all this for the tiny team the base and we have 6 rails developers to injury developers and 2 I O spouses and we also built 3
open source frameworks during that time period tricks which is our rich text editor action cable which ensure your was In real size and also turbulence 5 In this all sounds kind of unbelievable on its head and we managed to all those but really to rulings 5 is a secret weapon there and it's entirely new version of Turbo its and it's the banner features of real Spider-Man's what I'm here to talk about today so how many of you are familiar with Symbolics anyone right is that new this they will read only
certain what no but seriously it's it's
something that brings Lanjigarh appointments
that to releases misunderstood and so understand you need some contexts and this way to give you today because I think it represents a philosophy what development that deserves our attention at the base camp for 10 and a half years
now which means a small eternity can take years and they the same place for a decade has been really interesting and then the opportunity to go deep on a lot of interesting problems and see the effects play out over many years every once in a while on ICT can help to take a step back and then look at where you're going to worry about and things are really different when I started do is remember what web development was like before rails and the only way to make real software was with j 2 EE the
I found this this diagram of 2004 era best practices this is due to JET it's beautiful in its simplicity really and it and of course in the end of the spectrum
PHP and but rails came along and changed all of us for the JCE developers at
throughout all that ceremony said hey look this can be a lot simpler and for the PHQ folks it said here some structure that makes sense and helps you avoid writing the same thing over and over again in slightly different ways and I think in some ways this period
was the golden age of wealth involvement if you ignore the browser situation time because we could embrace the statelessness of http and we can deliver a fully rendered you UI on each request and response cycle so this is the full request-response cycle I think it's but 1 of the best with the best features of rails and what that's going where orientations we were
happy with the performance of the you I built on a full page loads so we started building single-page apps the and it's at each request returning a foliation no response now we started building apps within the age the age at some jobs for justice JavaScript's mean that JASigning API requests so in the server-side except in return J we use the traditional responsibilities of rendering you I completely into the client and everybody agrees this is a good idea right look at rails 5 with rails API and and you need an API anyway in your application so 1 I consume it yourself hostility couple presentation from data and the coupling is good point but eventually we weren't happy with a performance clients had in the sea so we introduce a virtual down to minimize number down operations and make which is a great idea that on the slope so we should make as few changes to the dance possible but you know what all the JavaScript and all those API requests really make initial page will take a long time and the content on pages inaccessible assertions so we decided to get rid of the group page and render each announced that which means now we need a job as the runtime on server need Amiga client-side code run on both sides need the virtual down there to is on a real Don and now come full circle and we've written reinvented what we had in 2004 but the complexity is increased exponentially and introduce literally hundreds of new dependencies for applications in the whole system is now too much for any single person a reasonably keep in their had it once you need entire teams dedicated to managing subsystems I which obviously is not a surprise and if you're familiar with convex loss Conway's Law says that the structure
of the software system necessarily near nearest the structure of the organization that created yeah and these client-side patterns and frameworks that were using now making
from Google and Facebook are huge companies with thousands of developers across dozens of kids
well guess what year team probably doesn't have the same problems as Google and Facebook data we
get to this point well we were chasing performance and each 1 of these changes that I went over makes sense incrementally each 1 made sense at the time but looking back into the compound effects we traded small performance benefits from massive regression in developer ergonomics and the further we go down the rabbit hole the more we constrain our future choices in 2016 this only tells part of the picture because you need it needed apps on Android and IOS and so you can multiply the complexity on that slide by 3 and you'll be reimplemented each 1 of your app screens natively of course because you want the best performance seriatim multilayer headcount by 3 2 the thought that if
but if we accept that we need performance web and mobile apps How do we reconcile this complexity with the rails philosophy which says you know we wanted power small teams stupid things well what if I told you don't have to be so complex then we can return to the golden
era of the requested full response model to rendering HTML views from rails without an intermediate API layer and then we can use the same age channelview released as a baseline figure IOS Andrea acts in a way that still feels native this winter permalinks 5 right turns year traditional Web applications into a single page at a high level of it intercepts link clicks on a page and turns and Ajax requests the server renders a foliation or spots internal links loads that response pulls up the head of mergers and with the current dataset balls of the body and how right replaces it and from a service perspective nothing changes but the client adopts a single process model which means that it doesn't incur the expense of reloading reprocessing assets on each page or re-establishing WebSocket actions which are very expensive In this case a significant performance boost so how
significant this is a side-by-side comparison reported last nite on the hotel Wi-Fi instruments on the left and full page will load on the right and and how groups and so
the the the the yes from
the the thing
so this is what little that of performance you can transition from a click to the next screen and about 300 ms period proceeded as instantaneous anything longer feel slow but anything shorter is nearly imperceptible for full-page changes the chasing like and performance requires an inordinate amount of effort and resources 0 my highly scientific graph but I think it's an big it's mostly act right the we know from experience that it takes a lot of work to get unless i'm the graph but 300 ms actually the getting your your Rails request to complete and say 100 also seconds is totally achievable and there's a wide array of tools and strategies up to get the like Russian ball catching the tags lazy loading content after page loads no that's for different topics but the point I wanna make here is in most cases getting faster than 3 at MS just as a matter and when you gain with Turbo links
approaches dramatically since the model if you understand this line of code you understand the core for the sponsor it's understandable because it's just each
you know itional senior generate rails to cash designers party on work with it it they can work directly with your views instead of making photoshop counts 4 instead of waiting the key team to expose the data that they need and when you combine this approach with responsive design techniques your design team can create a single set of views that power desktop web mobile web and hybrid native apps this is incredibly powerful and the Stirling sigh we made an incredibly easy we've created these I wasn't angry frameworks that let you build native hybrid out surrounded her boats and the designed for what we call the hybrid sweet spot which means that nearly about here your content is mostly HTML but the surrounding navigation controls are native and when you wanna go fully native you can do so on a per URL basis you get to decide and you get all the performance benefits of turbo-like controlling hybrid at but it's even more efficient because in in about we use a single shared web view that we automatically move around from screen screen so not only do you avoid reloading assets re-establishing WebSocket connections and so on every page change you also lose use less memory the and by the way the native animation transition from 1 view controller to another is about 350 miles it's so I'd like to show you how easy it is to build I was at the center of things and so that you alive but actually some real life the recorded videos the beside it so
this is based on 3 certainly development machine so it's not as fast as it would be in production
by using click around for bed of see no prevailing snatching here in as an engine before we use we have fully responsive genes in this country so when I resize the window in you see what eventually becomes the following yeah this is a share all of our views across all of our methods so nodes of an external to the
In will create a new project the surrealism using
to really take everything out this file server that totally bare bones I was the only thing will happen here is the
application did finish watching back so really set up as a UI navigation control that and look for those of you unfamiliar with building I steps and UI navigation controller is basically a the the stack of use that you are probably familiar with from Indianapolis right the mimicry create 1 and assign it to the Windows were in control in and going to build and run the app distinction that works so i'm gonna look like much of anything there is the right so we need to change settings now you
and that's because I was 9 6 the feature called application transport security this is the setting it's on by default prevents you from accessing any non each taking us now websites basically so for development of food that off so run this command that the in we obviously don't want their production and now I'm going to go and just drop the turtles framework in the In real happy problem and warnings coca for Carthage or similar package manager to get to the links in there but for no this is the simplest way and finally how important the turbulence framework talking begin will compile and run looking still
works the
no we point 2 rulings tour cation and so to do that we can create a session the session is material is session comes from the links framework and it orchestrates moving up working around for controller to control really define a function called visit that accepts the URL the and what this is going to do is create a game controller it's going to push it onto the navigation controller stack and and
instant alter links to physical which means the webpage and now
we need to make an initial visit when we start the act the still something to begin with so many grounded the base camp development all and what is it that I
had a thorough
there when the truth who at the end of that and here we go thank You can see and controls and the wedding but not having a link doesn't do anything and that's because we need to handle this proposal so the to do that yeah we need to set ourselves as the turbulent session delicate and we need to implement In this method just tells the application what to do when 2 receives a link like event so we implement method now session did propose visit URL and we're just gonna talk to call art is a method that we were here then and then compile and run the but before destined to implement our variant of the method this is very important but is
constructed out the tapping link
so in so it transition we have to be actual needed you controllers looks and behaves like in a real but the content of the new controllers organizational I think this is a very fast navigating backwards the you can even perform the interactive pop gesture here the scene the Web you on front in the screen shot back all about 40 you get people to refresh but you can see that this doesn't quite look likely we really wanted to write and we've got all that administrative debris left over from the 1 that but we want to navigation and the so what we do a base camp is we check now we check for custom user region in the Web out and we use that to selectively disable no some UI elements it's very easy to so I'm just gonna go no and imported WebKit framework here make a change the way we create a session mimicry configuration Object and
assign this property on the the passage of the what's at this session initializes you now running out and I see is looking more native we've lost the navigation bar at the top partial so patterns when I now when analogous to so these means look like they could be RealTravel thing controllers of course are doing this much often and so this is the core of our strategy thank it is both a
fully functioning Iowa wrapper for base in under 10 minutes as needed navigation indeed the most impressive part of this is that I have full coverage of the at all 200 + creature accessible From this wrapper in 30 lines of code and when we roll out a new feature in the Web that in many cases we don't have to make any changes to the native apps In the only an absolute approval because when we make a hybrid out with her moments where essentially making custom breast we get baseline coverage for all the ups function the then we can progressively enhance the native control surrounding the web right this is how the Web is build progressive hence now extending out from the browser to me that's what that means is we can spend our time building high-fidelity UI where it's most valuable instead of going through the groundwork of recreating screen native on every platform we do know fully native on a per strain bases and and this is what we do in the in the official based can buy us at as as a native home schooling so you
here instead of taking in directly to the activity age we have a native jumping off point and this is just using API requests populate but as soon as you click something then you take into intervals of Everything persist and you can see also we have made navigation controls the title bar we've implemented we extract some metadata from the page in order to generate this title how we have customer navigation buttons so all this is native but the actual applications in each of I'm very fast I mean and support 3 D touch is internal links yeah so yes you can do all those things you expect and we have made of menus and again we extract this content from metadata on the edge so the reason you the so that's a look at what to rulings
5 gives you new rails 5 projects have enabled by default and it's also now available in him as a standalone JavaScript library so if you're not using the asset pipelining 1 uses its available to there and then it has no dependencies and it's not for real not just for real that's anymore and it's open everyone we have all new documentation get a project page which were very proud of the IOS and adapters are exhaustively documented as well the and so the in speaks to you I encourage you to check out and is 1 final note i wanna make for a girl then it's important to note that Turbo links is not about avoiding having to write any JavaScript OK your application will need to have a script nor is it about having to avoid learning native development anymore then Active Record is about avoiding hutterites equal here so that I have to know into these things owing to release does it gives you a baseline for good performance with minimal effort which lets you spend your time choosing what to optimize instead of going all recreating everything that's if you if you take home 1 point from the stock that's why I open this now choose what you optimize figure coming thank
and Questions ones and local terms and be and the guy was so we we decided to have call it to release 5 because the core idea is still the same but it's a pretty massive shift and we want to sink the version numbers of the world so the I believe your question is is this compatible with query UGS techniques yes it's and this only this only found in the subsequent clicks that would otherwise fall through to the browser as standard conditions the question was does this support off-line applications and have to release does not have support for offline but this should be possible to build with service workers on top of 2 books at the the question was could you do this in moving motion and yes you could and you could probably also reacts native and because it's links web use just as a standard cocoa components of see you can orchestrate with anything that we can talk about the the question was is the what the rap WK what you yes and us inspectable you can go enter safari inspect the web application as a developing time whether the whether you have a phone connected to your computer or whether you're the simulator and then you get all the performance benefits of the became what you so if the the full and shit JavaScript engine the the question is do you still need to write g query load event handlers and and you need to you need to re architects your uh the way you initialise Javascript on page so we provide a series of events and there's a exploded and it fires and everything changed and then in the inner documentation we have some further recommendations for an approach that but what I really recommend is using MutationObserver or custom elements these original 580 eyes immediately callbacks when elements are attached and detached From the dark end user if you use these RTP eyes to install and remove I just for being here the it will work transparently whether using Turbo not in I think it's it's a much better approach the question is there is there an API for our rendering just section age rather than the whole page and the there is a version of Turbo links called version 3 which is in development for a year and a half and never officially ship and in an added a feature called partial updates and it's expanded the term in CPI in not in a in a way that didn't seem proportional to the amount of value provided and of I also just think partial page updates in in many ways are orthogonal to navigation so my recommendation for now is to use and are techniques that just a creator like NGS that here the response and combined with the UGS remotely to updated the parts of the pages as necessary as well as for handling forms missions of like but in the future we might explore an official partial page updates API that and the question was if I can summarize the rendering hundreds of partials in a single response system police had that wall and of the answers can handle it as well as a browser when really found it here so if you're sending out over a full response but my suggestion would be 1 don't return so many results at a time is infinite pagination techniques like that to load on the continent demand and to be to and consider writing that incline site MAC it's it's totally fine to do that and we do that in a lot of cases and I think that the difference is doing that in a component based way versus saying neuron right your entire application that way right it's much easier to to optimize something by just with unit is a component than it is to throw everything out and write the whole thing twice on both sides the have the question was added it what's the upgrade path like from older versions of Turbo links and now we don't we we don't have a good guide for that right now and so the the all the all the event is changed and there's some some events that when they have the will be touching the thing that before the final rules 5 release yes the way people of any plans to support Windows have I don't have any plans but uh if someone wants to look into that and you can take a look at the way we built I was inter-rater adapters so there's is just a component that's bundled with each 1 that basically communicates with the 1 D over a bridge so you could take the same approach on other platforms look to see that happen the question was can be found in the used going sexist GPS camera and so on and the answer is yes of course because you're you're still writing a made about effect I know and if you want to get that over the the weather you you have to use it when the bridge that's provided by the operating system but it's it's not really worth art orthogonal to 2 rulings it would both the native UI yourself and then you would use this platform specific weapons bridge to get your application if you wanted or you could consider using it for example and J. Sun key I to communicate with the application that support all these things are possible now the question was if you want access sequel light how would you do that from a web page local sequel life and he would do not overdo jealous for bridge it's provided by the operating system so that's now it's on any different than using a normal the question was how does a pattern of the native adapters handle request failures and the there are all of all requests failures go through a single method handler so you choose that implement that in your application so my recommendation is to show a native you that gives you are basically reload but a retrial that's a in this case the area is different thank this ball and the way you do that you have 1


  531 ms - page object


AV-Portal 3.8.2 (0bb840d79881f4e1b2f2d6f66c37060441d4bb2e)