scala.bythebay.io: Joe Barnes, The Client-Side Apocalypse
Recording: scala.bythebay.io: Joe Barnes, The Client-Side Apocalypse
all right I got 20 minutes so we got to go really fast but yes I work at AOL now um and it actually turns out that like we do cool stuff and you're like what really lots of scholar developers there's lots of teenss are doing scholar so um check for job if you're uh interested and I've been there since May very happy with that move um anyway this is uh the client side apocalypse and a little bit about me to get why I would talk about such a thing um I started scol in 2012 after Martin ersi graciously offered a free course on his wonderful language um I help build Park quest.com at Mentor Graphics U roughly in this time frame and we used lift on the backend um and I developed liftting G kind of in parallel which is a nice little way you can put angular on top of a lift app um became a lift committer in 2015 so I help with the project nowadays but now I'm now I'm working on the go90 project um uh app you know streaming app at AOL and that's all lot I want I'm going to talk about today is nothing to do with I'm doing AOL that's what happened in my last job and and some of the things I learned there so when you see apocalypse actually you know I put that like destruction of everything that's actually not what I'm talking about so this is what apocalypse is it's just kind of like unveiling like it's here it's just the in our culture at least in Western culture the unveiling where most familiar with is the Book of Revelation and you know the end times and things so they kind of got coupled together but really what it means is like well I'm just telling you some stuff and so really every Talk Is Us telling you some stuff and uh but depending on what you hear it might be the end of client side of rendering for you so I mean how many people are writing web apps that clients side render good a good handful so when when I chose angular here the the reason we chose LIF and angular was because it it was very good for designer friendly development like you could get temp from a designer put in lift tags put in angular tags bring it to life and designer has no idea how to do JavaScript right so that was that was why we went that route and um but eventually I'm kind you know I didn't really think about this but this is what happens right so you got to your web web you know uh browser open you go into your your address you go off to the internet I'm not going to talk DNS and stuff right but you end up at your at your server right and goes okay great well here's your template um you know display none or something right there's a bunch of stuff that's not content and the important crap is here at the bottom called JavaScript and so you send it to them you've got nothing there's still nothing to show but we got to go back to the server and find that important crap JavaScript and then your servers like oh hey you're here again here's your JavaScript then it comes back it's got some stuff in it and but there's still actual important crap you have to get later so because you come to the browser and now you have JavaScript but you have no actual important crap so you go back to the internet and look for actual important crap your server is like Hey Oh welcome back um here's your crap and then you send it to them and then hey yay crap here's some crap and it shows up on the browser that that's clients side rendering and and you know I mean it is is not right and keep them entertained with a spinner uhoh uh oh who we going to pick on our very own scolar by the bay when you go to the schedule they give you a spinner right here you know it's like that'll trick them I mean it really like next year just run a Cron job that that fetches a schedule like once a day and make it static I mean how often does it change so anyway but it's not a big deal right it's 2016 this is what the internet looks like this this is every everywhere you live right actually um no this is false not everybody has Google fiber or MacBook probably in real life this is something you might see and um you know blackberries old phones crappy whatever that is infrastructure um this was this was really ey opening for me on on this project we hired some folks down in Santiago Chile right and um one of my junior guys there uh super sharp loved him to death was rocking an iPhone 3GS and I'm like you know his his like experience sucks probably on everything and I want him as a user you know and it's just it was just kind of mind opening to finally like not be in a CD in the US with a Macbook right and kind of think about that and it still happens look this what happened on my way over here did anybody use the Wi-Fi on the airplane over here okay do any of you use AWS go to the AWS con on a plane it's hilarious like like you'll like Bitcoin yourself it it just doesn't work you know it's just it's complete garbage because it's doing so much stuff in the client things are failing and it doesn't know how to tell you things are failing and um so it ends up being you know pretty rough but even if it was really fast and rival this is what the inter you know this is what your web apps look like we got this I stole this from a guy on Twitter 2004 it was like well here's your HTML you know that that's that's a web app and you're done this stuff on the right is not probably anybody in this room is going to familiar with but this is kind of the common practice in the node.js world which is they're going to you know they give you this fullblown client side rendered app but they do render it pre-render on the server because they're addressing some of the problems I'm talking about I don't think is anybody pre-rendering in this room yeah see I I we're not there yet that no JS is a littleit ahead of us and that's we shouldn't say words like that but they are um but it's insanely complex and then this line is the internet and there's more arrows going across the line of that's the internet and you you should avoid doing that as much as possible cuz it it's it's flaky it's not reliable you really don't want to pretend that it is and U I mean but seriously here loves JS anyway right quit trolling man no nobody does a matter of fact we did this because we hate it so much thank you Sebastian right I mean seriously this is a scholar conference and and the thing is though let's face it now it's blow to JS right I mean we use the closure compiler and stuff to do the best we can but there's going to be a lot more stuff you're shipping than if you wrote pure Js it's just like when we started using C code to generate assembly right it's bigger and it's not a compiled language still it's still got to get parsed and just in time compiled and all that stuff in the browser and you know it's we're and we're sending it everywhere right just like let's just send a shitty code everywhere and then it's on these like inefficient terrible devices like just heating up the CPU trying to turn on it and then eventually end up with this like global warming problem and like I know it feels great here in California but I'm from Alabama and and this is I'm dying stop it like quit quit rendering the client no it's uh that's a joke obviously but there's a lot of opportunities or failure when you um when you when you Pro when you develop an app in this style you like if any of those round trips fail your app is busted right especially those first three and um who who has heard of progressive enhancement like people talk about this right this is my definition of it because it's the the real definitions are like better and and but I like this one basically the HTML just works that's how it works and then if you happen to grab some JavaScript it's going to work better or if you happen to grab some CSS it's going to work better but from the very get-go it works it might be crappier but it works and because there's some really fun facts like did you know you can redirect browser without doing onclick window.location equals somewhere else like the browser does that natively you can do this it's okay here's another one that people have completely forgotten HTML alone can send data to the server have you seen a form before for it's like we just like I mean it's like we completely forgot how e2l works and lost their minds and started writing angular you know that's that's kind of where we're at today so let's let's talk kind of like this is a functional programming crowd let's let's talk some kind of kind of big picture stuff now too you can Define your application with these three different assets right you know you can Define it with HTML you can Define it with JavaScript even CSS like I saw somebody and this has been a while somebody wrote a timer in CSS I I'm like what yeah I mean apparently it's a little bit more turning complete than I knew than I realized um no it's not true but um you can do some really good stuff with it but in terms of power which is the most powerful here and what the least right like HTML doesn't have loops in it neither does CSS that's why we use SATs and and and things like that I mean JavaScript is the language here right that's that's a you know turn complete has all the loops and side effects you want in it whereas HTML is just data and CSS is no understand it but it's just data so right JavaScript is the most powerful right so that's the one we should be using right so like let's go to JavaScript let's get the most power possible right and she that's exactly what what you do and I said no God no please stop doing these things right so who has seen the the best talk on Scola that has happened in my lifetime any might have seen this talk really you should stop listening to me right now and pull this talk up because um and I had the pleasure of being there in person I was like I mean remember I just like so many things make sense now when when he went through this talk 100% recommend this talk go home and watch it and um he's talking about the rule of least power and you want to choose the least powerful language for a suit uh is suitable for given purpose now he he gives lots of great examples we'll talk about HTML in particular as another example of this principle so um oh sorry because if otherwise the if you doing the JavaScript this is what happens right it's your client side render apps only us it for human with a powerful heat producing device and reliable Network right like nothing else can consume it right you can't you can't scrape it or something right like now I know um like Google is adding JavaScript to their search engine but now you're just making everybody have a really pain in the ass experience to get your content and really you're you're back to here let's just face it I mean the JavaScript client rendered is is like is applet and Flash all over again the only difference is it's doesn't have the security problems you know and and cuz like you you can't take a flash app and go search it you know there's nothing you can do it's just this blob that only a person with a browser in some device can take advantage of and so you end up you know search engines blog readers I don't if you have a Blog but you ever se you know you might get hits from pocket io's you know someone takes your blog and just Bo throws it in there you know I I maybe it has a JavaScript engine now to get around this too but I'm just saying it's you're just making the the web suck more you know that's that's my point and also if you're doing JavaScript and even if you're even you're doing scholar JS whatever you're you're throwing JavaScript over here now you got State on the client this is something I'm really curious about who thinks that's a good idea I mean really like you're putting State over there and like now you got to like cross the Internet and try to sync it up because I mean you got to distribute a system now and half of it's in JavaScript on some browser and some device that you have no control over at all right you just like well it conforms to the standard I hope and you know let me just pull out a quote from someone smarter than us CU we all agree probably that you know distributive systems is hard and if you're on Eighth light you're probably you know at least respected you might not know what you're talking about but everybody listens eighth light right I'm I'm I'm appealing to Authority here is that not like valid logic you might do this you might go update the um update the view and then go tell the server in the background is that the way you do it honestly is that what you do you do that I know you do we've all done that you say okay thanks for the D plunk look we did it hey server um they want that yo server again I said um oh God server's not talking this is awkward how do we tell the user this didn't happen oh they refreshed the page it's over because if it fails that's what happens right let's go through a nice you know little example um user application here let's say we're not techsavvy that's another thing when we see something fail this room we get it right like ah client server refresh try again we're all comfortable with that I I love my mom but but she's not like you show it to her it's there and now you you took it away and we're confused and if you and dla a lot of people still are I don't know if I I mean like we AOL still makes money off of this like not everybody has High-Speed Internet available I mean you're laughing but not everyone that's in the city you know um so it's still there and oh my God they're ordering a gun cleaning kit um I'm from Alabama and I know Firearms probably have a very different connotation here but look I I have children in Alabama I have like my mom has chickens and cows and and then there's these other animals like cootes and bears that eat the children chickens and cows and we need to shoot them I mean like it's really simple um we're not shooting people for the most part but I I can't and you insist it goes in the cart though right she clicks it boom it's in the cart and something fails and oh my God empty now what's this us going to think you know not tech savvy buying gun stuff she thinking she's at Walmart and took it out of my buggy on Black Friday she ain't happy and they have firearms so now you've made someone with a firearm very upset don't do this to your users now maybe you're application is fine let me back up a second like the the thing I built at M Graphics I'm still happy with client side rendering was the right thing um but because there were Tech AV users had you know had Hardware requirements and you know blah blah blah didn't have to work about this but a lot of us are doing this is because we don't think there's any other way to build the web anymore but instead of depending on Facebook to teach the world not to trust apps cuz actually the world is getting kind of good at going you know I have to do this a bunch until it really happens you know and I stole that from Tim parrot who might have stole it from someone else but that the Facebook is you know training the world on failure in software and when we just build trustworthy apps instead like we just don't show it to them unless it really happened you know so this is um and you can do this and actually enjoy writing it cuz I mean obviously if you're doing client rendering you can just make a conscious decision like I'm going to you know you know sling it there get the promise or whatever and then when it's done actually show it maybe put a spinner I mean you can you can design your app that way um it's not impossible but let's just take a review of these problems you got multi trips the app can fail it can be slow to render when even if it's not failing because you know you just have a low slow internet connection you got State you got to synchronize and you can confuse users and eroding uh user trust and so um lift actually avoids L of these problems so this is kind of where we talk about lift a little bit um and lift is old anybody here not heard of lift so it's interesting that that group is growing because Lyft is like a 10year old almost 10 years old Scala web framework that's still actively developed like way older than play I play is pretty old too but it's a couple years older than play and it's still around and for the most part it's a complete project so if you like um want to build something for the web that that it's not going to have a lot of weird bugs I mean nothing's bug free but we just don't have many left at this point and um anyway it renders fully functional HTML you can do Progressive enhancement um some of the work I've been doing is to make it uh the happy path like it's very easy to do the progressive enhancement and uh if you have the JavaScript or css available um and state belongs on a server not on uncontrolled client now this is why this is a big part of what Made lift kind of fall out of favor um there's a lot of things we can talk about that's not what this talk is about but people like well I there State on the server that ain't cool like well there there is state where do you want it on the client or at home where you got it and um so uh a lot of people don't want to use lift because you have to use sticky sessions and things like that in order to load balance among multiple and they think oh that must be terrible for scaling I scaled fine um but and and and also by Design it's really easy to do the right thing as far as user trust and only update after you make the server round trip now obviously you could still have like some eventual consist right I mean I'm not saying this is only for MySQL or you know postest and it's committed but I'm just saying like cuz eventual consistency if I'm not mistaken does not mean it could fail it just means it's not there yet but when you have the internet that can fail that's not eventual inconsistency so if you say well updated the client and we just flew it over there's eventual consistency it could fail that's different that's a very different idea and so lift kind of makes it easy to do the right thing that way um but cing updates for never funding lift because you you you the way it works in the nutshells you you got HTML that's your templating language HTML we don't need a templating language that's crap and then you just put in the functions you want to call say hey lift call this function and then call that function and call that function inside the Dom and all it it'll take that little chunk of HTML give it to you as a Scala XML node seek you can do whatever and we get a lot of nice little functions that help you do whatever really easily and then you return what you really want so everything's just pure functions it's just data pure functions sent to the clients wonderful and but the problem is if something changed you know you kind of have to handle it on your own like we have really nice Ajax support really good comment support that's right old school um one of the features we're talking about doing is is progressively enhancing to uh websocket when available so it be it's just more performing but it's just a performance enhancement but um it works and but you have to manipulate your dime yourself uh that's why you know my team built liftting G because it was like we had so much going on in the client well let's just use angular and um because lift doesn't have lift is very agnostic about how you handle the front end changes is is a way to look at that so I speaking with Brian P who's the creator of Pacquiao and I had this idea like so uh just Pacquiao's sorry is a ruby framework that no one has heard of here probably because do you know it's just not likely because it's a small little Ruby framework but I I love talking to Brown because he always has completely different ideas on how stuff works and so he's one that gave me this user trust idea and so forth and so I said this is what I will do service side VD y'all this will work and we tried it so if the Dom manipulation you're doing on the client is just a sort of reconcile state that if you just refresh the page it would be the same then why does the end user sorry the end developer have to write JavaScript to go fix that might do it all magically so we got you know got a shot so like reactjs you just write you convert application state to Dom right and then anytime something changes it doesn't matter where it change you just call this side- effecting function it says hey boom go update it right so we reender the page do a diff uh of that Dom XML tree against your other XML tree push a little small Json representation up to the client and just update the Dom in place with JavaScript that you didn't have to write and it's not a very big library and uh the whole Progressive enhancement some of that stuff just works like uh you can write a post such that if the JavaScript doesn't show up it's still a post and if it does show up it'll go oh no it'll wipe that off and say do Ajax so you don't have to reload so you get progressive and very easily and um and it just cuz lift really wants to make the happy path wonderful and it's not ready yet um Britney is actually the one who put the cfp in for this talk but uh she wasn't able to make it so I kind of filled it in for her but we're going to try to get in for 3-1 if if anybody cares if no one thinks this is going to day we'll quit um but we have so far we're using HTML so we actually test the JavaScript gener a property test we just don't handle multiple mutations for live youlette because we've we we just kind of just get some stuff working as if it worked in principle and but now we actually need to to get further so I'm talking about it now because I'd like if if you to contribute know like you can contribute to lift or whatever you want to do um here are ways to help just holl at me on Twitter discuss this the idea these are all links so when you get to S you can get the links um play with the code look at the sample app and um but the main thing is the biggest thing I'd like to know at this point is is this something interesting to the crowd um as I promised here are all the credits we have like 15 seconds for questions good no seriously Qui question how does performance Cent I have not tested performance differently yet I have no idea yeah oh sorry he asked how does performance compare if you're ding on the server vers is different on the client I would have think I mean because depends on the client right you know so um the main thing is you got to decide do you like this whole round trip idea that's the really big thing you got to think about do you like that um but before uses but yeah we're time's up just catch me off we'll we'll talk about I mean I'll stand around we'll talk this stuff all you want to sound good all right thanks [Applause]