Reactathon 2019 Lightning Talks - Livestream Recording!

hello how's everybody doing cool awesome my name is Brian I go by be dougie on the Internet and welcome to github so short hands who's never heard of github ok have about half of us ok which is awesome I get to do my pitch so github where small incubate the company inside of Microsoft yeah yeah we're get centric solution for asynchronous developing across the globe I'm just kidding up no I don't write down the marketing pitch but anyway half of us know what it is I think most of us were just too shy or holding a drink and then hold our hand cool so housekeeping we do have bathrooms back there if you have not found it bar is open the entire time we do have non-alcoholic drinks too and options if those who were we're concerned that did not work out at the bar so we do have stuff for you as well in the in the fridge a little bit of food left and so you guys ready to a github is I know you guys were probably too shy though he raise your hand github well we do have one speaker here this weekend we love react we love everything open source for obvious reasons we're also hiring like crazy so if you have questions about get up find me find them to github t-shirt because they probably know more about github than I do and they probably own even work here because we just have t-shirts for some reason so definitely check us out ask me questions and I am gonna go ahead and get off the stage and introduce our host ie Porcello thank you so much Brian welcome to react Athan I'm super excited to be here as he said my name is Yves Porcello we have a really great we have a really great evening of a talks plan for you and Brian who is this I'm pretty sure that's your husband Eve yeah but you asked me to host what is he doing here pretty sure you said you would not host unless he joined you I did yes this is a pretty technical conference though I think he might be in a little over his head yeah but that was like 10 years ago it's not all document dot get element by ID anymore the second argument that you sit into the render function is literally document dot get element by ID it's all JavaScript yeah but there's so much new stuff now we got hooks we got suspense we got all sorts of new stuff this is different though this is hosting are you funny are you ready to be onstage yeah but are we funny if we're so funny why are we writing books about JavaScript that's a good point no but we can read cards yeah and I'd like to welcome you to reactive on night one night one we have some very special people that we would like to think so this conference has been organized by a real world react we'd like to give them a round of applause for thanks we'd also like to think our presenting sponsor github thank you for having us here today awesome and finally we want to thank our platinum sponsor flex port thank you guys alright so tonight we have six ten minute lightning talks followed by topic tables socializing hanging out having fun so you're ready to get started should we good into it yeah all right let's bring out our first speaker our first speaker is a UI developer and he's working on the core architecture team at yeah he doesn't want you to know where he works okay so he's a he's a core architecture team at secret company he is also the author of the slick carousel the web pack dashboard and spectacle can you please give your most dank welcome to ken wheeler hey everybody this on now it's on okay then a good font size alright this is my first talk without slides so bear with me it's also my first talk at Microsoft I'm really excited about that um yes it's just really gonna be like doing react music with hooks but it's not really do what is this feedback Microsoft said okay never break it here okay um yeah but this is gonna be about the the render loose component pattern yeah we're gonna do some music and some other fun things but I got like 10 minutes so let's get to it I see you show hands who's heard of this dumbass library called react music what am I feeling back um yeah so what it was is so you can use react components to actually make music to make a song it doesn't actually render anything but by using those components what you're putting together is the equivalent of making a beat right so here right we have the song tied with a tempo whether it's playing or not then we have a sequencer tag um if you're familiar at all with making electronic music then step sequencer that's essentially what this is and then you have things like samplers and since you know that's pretty difficult to do but you can totally make music you're gonna cradle her things and you're gonna pass functions down through context to each one of these individual things and their parent right so I'm gonna show you what that looks like with hooks and hopefully you can understand what I'm talking about here so you would create a context then the new-school way right and then say we have our route here here's the route props right let's say we're just collecting the children you want to know without Ranieri any children what children we have and collect them open the parent right so we have children South changeling children from you state then we have three methods here register child up a child and remove child right and each one of these you know gets cold and then sets that state open the parent component normally here you would do side effects right and this is a way for you to make comparative api is declarative down here you return a provider and the value is the methods that are in that parent component you're passing it down of the children then let's say this one is a sample child component here what that's all created the UUID or i'll do it as a ref so it's accessible in here will use use context to grab these rascals off of the contacts and then here with our new use effect folks you know previously they've been done in like a component amount or something like that here you're right you register the child with the UUID and the props when you unmount you remove it if the props change you know update the state of it and what that lets you do is kind of put a nice wrapper around all this shenanigans so you could just do something like route and then have sample child and then up in this route you're gonna know that that one exists and um so it turns out writing music like that kind of sucks it's it's cool if you know how to do it but if you don't know how to do it if you're not super familiar music it's kind of hard so i built a couple of new things and that were UI based rather than running it with code a lot of the concepts there still carry over right passing things down with contacts but there's also some new patterns that i've been using with hooks that hooks enable that i think you're pretty fun for that sort of thing so the first thing that I built was a drum machine I call it that - the trap Lord 9000 yeah um so here right these are 16 steps each one of them is a step and you know beep say you would have like let's say we put a snare there so the steps here and these contexts their corresponding step right which then has consented to zero one or two zeros off one is on two is so so that gets past that with context but there's there's two things I think a pretty cool that the start and the BPM and it's this pattern that I really enjoy here where you create a hook right we're gonna call it you start and it returns you can return whatever you want it returns the value and then it returns the component to change that value right so this just kind of is all encapsulated in here so if we went back to the drum machine right I'm saying um you know import use BPM you start right here alright we have start in BPM start booking start BPM selector these just get rendered down here like the rascals that they are and then really you just do an effect here and you can set an imperative property using that right um that's a loose to it I use that same kind of pattern for another thing I thought you know drums are cool I also think since they're cool dubstep machine [Music] [Music] [Music] well that's weird that's super weird this entire things rendered in canvas how does that work so that render list pattern while not been super intuitive to do for music um it turns out it's pretty good for you I so I built this thing that I call reacts blazing yeah so right now I only have a couple of primitives right of the route I have you text and scroll view and it's essentially react native syntax and what it does is renders to canvas so this is a whole canvas it's a little silly goose stuff so here right we have a canvas rear we have a scroll view ready takes object styles and just to just to prove that you know I didn't like render a picture of it right let's just like change the header color all right fun stuff right so we have a whole this you know view in tags and it uses that exact same pattern that I show in the beginning don't because because canvas is imperative API and if you just wrap it the right way it'll work I'll just explain very briefly how this works when it registers these it takes each one of these with an ID and the type of it and then it takes this this style Propst on style and there's two different kind of style properties that I work with here well one is like lay out specific the other one is cosmetic the lay out specific stuff gets sent to a web worker that uses yoga which is the same layout engine for react native to calculate the layout of all the stuff on the page then the cosmetics up gets past the canvas and then canvas does its own way of making like background colors or radiuses or what-have-you and yeah and then it also draws on an off-screen canvas on another worker quick little demo here how you can use it with existing stuff so here is a just like a regular type deal that one didn't have events as part of the job but this actually does have events I'm not sure I every act spraying and it works pretty interoperable a with this can we head over here you know we have hovers and then if you click this okay this is all canvas but it's all animating with react spring so when accessibility api's are far along enough for me to do it I'll release this but uh not yet but uh that's all I have you should check that pattern out it's fun [Applause] hey you give Kim wheeler browser woodsy do traps a touch trap in that browser out and also saying rascal more times than you would think yeah our next speaker is a lead engineer at formidable labs a podcast host a member of the rxjs learning team and really in my opinion a straight-up angel please put your hands together for the Queen Jen lucre thank you ken front hugging all of the things all right so I didn't write that intro just so everyone knows okay so accessibility myths and I am doing this because we didn't like the sound feedback okay so one of the accessibility myths that I have heard a lot is this app is internal and therefore we don't need to think about accessibility how many of you have heard or given that excuse okay most of you are liars alright so 25 percent of US adults 61 million people and 40 percent aged 65 or older have a disability this does not include circumstantial temporary disabilities or disabilities that come and go over time all right so if you're looking at this let's take a real world example how many of you are color blind I see one hand anyone else so in this room if you look around we have at least one person that's color blind how big is your company what are the chances that someone to that company is color blind and that doesn't include any other disabilities accessibility is for people with vision impairments most of the time when we talk about accessibility we're talking about the ability to use a screen we user or to navigate with a keyboard however there are lots and lots and lots and lots and lots of reasons why you'd use a keyboard for instance my favorite example is the time where I had a sleeping baby and if I moved she'd make up and she's sleeping in my mouse hand you know or someone who breaks an arm that's a good one or the fact that Apple decided to put the plug in the bottom of the mouse so lots of reasons to use a keyboard only all right however that doesn't include all of the others like hearing disabilities the inability to move around cognitive which also includes it's that speaker all right so it also includes being a child or being someone who's older and has a little bit more difficult time learning there's also language disabilities for instance speaking English in Japan it can get a little dicey or the other way around so accessibility doesn't have everything to do with just visually impaired people it has a lot of other things that it covers automated testing is enough to be compliant so things like lighthouse or the acts plugins they only cover about 30 to 50 percent of accessibility problems and those are only for the times when you did it right and you didn't include a whole bunch of other bugs in your code so everything is supposed to looks a certain way and if you follow those patterns then it still only gets about thirty to fifty percent of those everything after that has to do with other problems like this entire list and this is only a very small portion of this list because I didn't want to add 30 more slides okay things like the ability to have closed captioning or for someone who is blind the ability to explain what's happening on the screen the ability to have you know controls like start/stop pause with something other than a mouse affective focused management making sure that when you open up a modal that focus goes to the modal specifically towards the button of the modal or the first formfield not all of these things are testable with just tools you need to be able to have someone look at them the other half of this is that testing them yourself unless you are very experienced with using accessibility features like screen readers or navigating with a keyboard all the time you're going to be frustrated no matter how much you feel their pain so people that use them on a regular basis are going to be a much better test it's better to watch someone who uses them than it is to try to test it by yourself as a gauge of what's easy to use because something that may be difficult for you may actually be a bug that turns into a feature because they depend on it in order for something to work and you won't know that until you watch someone do it an accessible website is boring and or ugly this has a lot more to do with your imagination than it does with the tools you know with the exception of some color contrast restrictions you have a lot of features available to you one of the things that I love and don't love is the phrase that the first rule of Aria is don't use Aria alright but there's a problem with that I mean last time I checked a tab was not a default option to you like a select box you don't have a tab component you know so when you're trying to develop a something that looks nice those are your rules are there for you to use specifically in situations where there is no semantic HTML available use them if you need them use them even if it's a stopgap until you can rewrite it into something more semantic those rules are there use them if you need them because I'd rather you use them and people be able to use your website then for you to say well I'm not gonna use Aria and I don't have time to switch over to semantic HTML and besides of what I need doesn't exist in semantic HTML anyway web accessible web accessibility is expensive okay this happens when you've not been thinking about accessibility you have a big app and someone runs ax or light house and you realize you have like a 29% reading and someone is tasked with going in and putting a whole bunch of stories to fix issues okay this has happened likely to most of us because not every app is a greenfield app that we're just starting out with all right so there are a few things that you can do to help this one get a linter okay we have a great linter we have the JSX plug-in accessibility something are there any way it exists ah yes lint plugin JSX a living way that's what it's called all right so get the lint you're entering everything - warning and then turn one thing to an error and everyone will fix it because they can't push otherwise and then turn the next one to an error and then the next one to an error and then the next one to an error and by the time you're done you've covered most of your bases you've covered the stuff that devs have prevented and broken themselves after that you start including into your testing things like XCore or maybe running through it with a keyboard real fast maybe turning on the screen reader and learning how to use it you know just a few extra steps can go a really long way to making something accessible alright so the other thing with expensive it's the fact that although that kind of takes time right here's the other side of it okay one in 10 websites are like have no accessibility whatsoever it's more like 97 out of a hundred are not accessible which means that if you make your website accessible you're cornering that market and we're talking about cornering the market on at least this if you are a 10 million dollar company and you can corner the market on twenty five percent of the people that are disabled that turns you into a twelve and a half million dollar company the world the ROI the return on investment clearly pays for itself right there and it continues to pay for itself and the other benefit is the fact that any time you had accessibility you're also making things more SEO friendly marketing tends to like that you're also making things more usable you're making the funnel easier to go through sales is gonna be really happy about that you know there's quite a few other things that you're making things easier for people to use ramps are great for people with wheelchairs but they're also great for people with strollers or delivery people that are trying to use a dolly or you train with a giant couch web accessibility makes it easier for everyone which increases revenue even further so above all I want to say be kind for everyone you meet is fighting JavaScript and every single thing you do one little step that one morning into an error makes it more accessible for everyone thank you let's keep it going for Jen lucre whoo yeah thank you we'll just keep this thing going the next up we have a reactive programming nut he's crazy about it a compiler enthusiast a hero of open source a web assembly connoisseur you know this guy let's all here for J Phelps Oh ignore that so fYI for me a desktop doesn't exist that's why I don't care about that because I don't even look at a desktop so there is no such thing as this time right alright so thanks for having me 10 things about 10 things I'm Jay Phelps that's not one of the 10 things but number one what is webassembly obviously you need to know this so what would his memo sembly well the quick elevator pitch is that it's an efficient and safe low-level byte code for the web right and what that really means is that you're gonna take code like this this is C++ or C I'm gonna take that and you're gonna be able to compile that to this binary representation that you see on the right that's binary and hexadecimal so it's a low-level machine code that's for a virtualized machine it's not the actual machine because when you're running a browser you don't want to have to know what their actual underlying architecture is so it abstracts that completely away it's a compilation target you compile to it that's the the quick pitch of what a assembly actually is number two is is we're simply going to kill a JavaScript you if you post anything on Hacker News this is the first question you're gonna get asked is it gonna queires do you I hate JavaScript JavaScript going away or whatever you know everyone has their own opinions and the answer this is absolutely not javascript is not going anywhere it's not the goal to kill it and javascript is a phenomenal language it has issues all programming languages do but that's not the goal whether javascript is not going anywhere number three people talk a lot about the performance benefits of web assembly and so it's very very natural and understanding to say will I compile JavaScript to web assembly or can I to take advantage of some of those benefits and this one is really really complicated you have to really know a lot about underlying compilers and how machines work and stuff but the the answer is no you're not gonna be compiling your any arbitrary JavaScript to webassembly because javascript is an extremely dynamic language if you just look at the entire specification if you want if you want to say any JavaScript compile that to web assembly it's gonna be slower if you wanted to do it so fully spec compliant JavaScript if you were wanting to compile that to web assembly it would be slower now you could theoretically take a subset of JavaScript and compile that to webassembly and have it be fast and there's some experiments doing that but that's not javascript to me javascript is I can input any arbitrary JavaScript and that then compiles to web assembly and that would be slower so the answer that is no number for this one so the MVP or the v1 of web assembly is best suited for languages like C++ rust these are fairly there compared to JavaScript fairly low-level languages right if you actually curious how many people here have actually written C C++ or rust ever awesome actually that's sweet most of the people in this room have so it's as you know it's fairly low level compared to what JavaScript can do right it's JavaScript super dynamic so it limits what you can do with web assembly in an efficient fashion today but there's still a lot of really great use cases but I really want to stress I don't think this gets talked about enough that this is the v1 of web assembly it is a stated goal of web assembly to support more higher level languages languages like go or Java or the various dotnet languages or even these new for the web languages like elm dart reason or even some brand new language that doesn't even exist today those languages will eventually I think target web assembly it's just not yet because there's some features that are missing and the standards body we've been working on those proposals and it'll be a couple of years but I think it's an end goal that we're gonna get to number five this is another question that I get asked a lot when should I use web assembly right now I mean I could sit up here and talk about the benefits of web assembly 10 years from now but right now when should I be using web assembly and you know there's a bunch of things that anybody you can kind of categorize things mostly as you know games are obvious great use cases doing anything with video audio and images anything where you're dealing with pixels of any kind is in audio waves and stuff like that our super great use case is doing layout and compositing where you do you need to calculate where positions are and how to how to stack things on top of each other and anything with encryption really anything algorithmic if you can break it down to a pure function it's probably phenomenal performance wise and a great opportunity for webassembly to really shine in your app but there is a little known fact that you're probably already using webassembly and you don't even know it there's a project called source map on NPM that's maintained by the Mozilla folks it is used by Firefox it's used by babel used by web pack less basically if it's a compiler in the JavaScript community whether even if it's not compiling JavaScript if it's a compiler and any kind of compiler in the JavaScript community it's using source map and it was originally written in JavaScript but when web assembly came out they ported it to idiomatic rust like they actually preferred the new version that they ported it to in rust and they saw an 11x improvement in performance without doing tricks like they didn't do like convoluted you know weird tricks and stuff like that just wrote normal idiomatic rust and they saw a huge improvement in performance and to be clear though that doesn't mean that everything you do in web assembly is gonna be 11x in fact some things can be a thousand x some things can be list a little bit negative X you know it is a little early and it depends on what exactly what you're doing now you won't be writing your entire application and compiling back to web assembly today probably unless it's a game or something like that something graphical but I think it's really exciting that already it's so early and already we're seeing huge winners this is a huge win for I know for me cuz source map compilation during my bundles is super slow or Hasbun I mean so these other use cases don't in the future you'll be able to even write your entire app in Elm or something like that and compile that to web assembly and see benefits number 6 what projects are actually using web assembly today well there's a number of project that are using it and have been talking about using it and even working on it and somewhat in secret but what projects are actually released something in example AutoCAD for web they ported their existing massive C++ code base which is a huge undertaking and you can run it in the browser now it's not the full-featured AutoCAD but you can sure do a lot of stuff and it's very impressive for how early we are there zoom for web the web client it uses web assembly there's squish which is a Google app that they made that actually it's actually made using pre-act and web assembly which is a really cool example because it's open-source you can go take a look at like a really great use case for combining react patterns and web assembly to get the best of both worlds it uses does image compression you can compare and switching contrast between different image compression ratios and algorithms and stuff like that so it's a pretty cool app there's Sketchup which does three modeling and then there's react native Dom which allows you to use react native on the web it also uses web assemblies number seven how do I actually consume a web assembly library if you download it or install it from NPM or something like that if I only use that in my JavaScript app how can I consume that well there's the ideal way that we want to work but this unfortunately does not work and under any tooling today it doesn't work natively in the browser and adults that does not work under web pack which is just imported as a normal ES module right that's the goal we're gonna get there there's complications around that today though you can use webpack and use the async version of that you can use their their intrinsic import function which returns a promise and so you can use async await if you want to to import that web assembly module and it will just work just like how you just see it here if it exports that function you can call it but since we're at a react conference I wanted to kind of point out if you're using reaction there's a really cool hook that someone released for making this even easier so use wasum here's a very simple component the example component where I use wasum with the URL add and it gives me a loading and air state because it's gonna load that asynchronously so I can render different things and then I can add two numbers together which is obviously contrived but simple our simple example to see the result they're using hooks really cool number eight how do I compile to web assembly if I'm gonna write some code how can I actually get that to be web assembly well web assembly is a compilation target so it depends right it depends on what language you want to use what tooling you're using so I really recommend a resource called awesome blossom and you can just google awesome laws them you don't have to write the URL down and you'll find it and it has basically an exhaustive resource of of pretty much anything you could you could you could want as links to all the different languages that compile to a toolchains documentation tutorials videos all sorts of really great stuff but let's take a look at c++ a lot of people here said they've written c or c++ before you're gonna use a tool chain called m script in which is basically a wrapper around clang the decline compiler so if we have this very simple hello world example in C or C++ it is the same in both hello world we're just printf great we would use MCC which is the command line for M scripted we'd output index dot HTML and if we popped open Chrome and ran that we if we pulled up the console we would see hello world it's as simple as that now that's a very contrived example so if you want to do graphics and all that stuff you're gonna have to check out the docs but I think it's really cool and a testament to how quickly we've been able to go from A to B with tooling and I think tooling is gonna play a major role in the future number 9 obviously web assembly is useless if you can't actually use it in the browser so what does browser support look like well across the board all supported in modern browsers except the one outlier ie 11 unfortunately you'll never be supported by that but there's some things you can do if you're using em scripting it can also target a JavaScript version called a s azzam J S or a s MJ s that will work in I 11 as well so it's kind of a polyfill like a thing so there are options for that older browser if you do need to have to support it and the final thing number 10 I kind of want to take a step back and look at that original definition I gave you I said it was an efficient and safe low-level byte code for the web and that's that last part that actually it kind of lied to you a little bit because I wanted to kind of easy into the topic it's that last part for the web that's actually problematic if we pull up the specification real quick for web assembly if we did a search trying to find anything related to web besides the name web assembly or browser or anything like that we're gonna find one spot and it's here it says platform into independent it can be embedded in browsers but it can also be run as a standalone virtual machine or integrated into other environments and that's because the people who first started working on web assemblies saw very quickly that web assembly is unprecedented there has never been a time where all the major tech corporations came together and said let's make a machine instruction set like when does that happen it hasn't right you've got x86 propriety mostly proprietary you've got you know JVM you've got all these things that were developed by a single entity and then maybe shared and then collaborated later but web assembly from the ground up was designed by all these by Microsoft Apple Google Mozilla Sony herbs gives me Intel a bunch of companies all came together and designed it so unprecedent so they saw the opportunity that this is important not just for the web other use cases could take advantage of that and in fact even though it's early this is just a small sample set of outside of the browser these have nothing to do with the browser whatsoever but these platforms can all run webassembly some of them are runtimes like standalone you could integrate them into your apps or you could just run them on command some command line some of them are services CloudFlare workers can run web assembly natively and there's you know there's even nebula it's a microkernel so basically an operating system that only runs web assembly how wild is that right so there's a very exciting future ahead of us for outside of the browser so exciting by the way if you're talking about this we'll talk your ear off about it but if you don't believe me I bet everyone here knows what docker is right i'm solomon hikes one of the co-founders of docker just recently tweeted this and so i had to include it he said if web assembly and huazi which is web assembly system interface existed in 2008 we wouldn't have needed to create docker that's how important it is web assembly on the server is the future of computing that's like a huge I mean I wouldn't even go so far as to say that but the the co-founder of docker said that he wouldn't have needed to create it if it exists if it is they said back then so I'm very excited for the prospect of that future of web assembly not just in the browser and with react but also outside of it as well so efficient low-level bytecode for the web strike that last part out and I wanted to thank you all right let's hear it for JWoww yeah I'd like to same all right our next speaker he's a web developer at Khan Academy a co-host of the reason town podcast a builder of reason developer tools and he's going to talk to us today about reason it's Jared Forsyth put your hands together for Jared all right yes I will be talking about reason so once this comes on perfect yeah so talking about reason I work at Khan Academy we are making a free world-class education for anyone anywhere if that sounds interesting to you you're we are hiring now we've got an office in Mountain View and then I work remotely along with a bunch of other engineers and I am the co-host of Reason Town it's a podcast about reason and the community so if this gets you excited about reason check out the podcast we've got a lot of intro content some advanced things and then also interviews with people that are using reason in production right now so the the premise of this talk so what if I told you that you could write basically react code what you get is native UI elements and a very small binary and memory footprint now this is this is a hype talk this is very bleeding edge stuff I'm gonna tell you about the things that are coming in the reason community that will be available to you but first of all let's talk about electron how many people have used electron as a developer right okay how many people have used an app that's built an electron you can tell when when your fan goes on right and I mean maybe that's a cheap shot but so when an electron that came out five years ago um desktop apps were kind of going out right maybe maybe for a game or for like video processing something like that then yeah you'll use a desktop app but for everything else use the web um and if you really wanted to make a desktop app then like good luck learning Objective C right or maybe Python and then like there are weird UI libraries for that um but these days any JavaScript developer can make a desktop out we've really changed the game like since electron has come out there have been a lot of really well used apps that are written in electron and so you you get started you you want to make a desktop app and you you fire it up do the hello world and then comes a sticker shock when literally just this text in a white box it's a hundred and forty megabytes on disk and 75 megabytes of RAM now to its credit it is the full WebKit you know it it has a lot of capacity but a lot of times that's way more than you need and way more than you want is especially for small utilities that kind of thing and you know when when you've got slack up and it's taking two gigabytes of RAM you get a little bit um a little bit antsy but again two electrons credit electron has enabled a lot of apps to be built that wouldn't have otherwise um the the thing that got me excited about reason is the possibility to write code that looks and feels like JavaScript but can compile to actual native you don't need to ship WebKit and it can target a bunch of different platforms so reason is well I guess question here who who has tried out reason at all played with it okay that's pretty good who knows what it is would be able to explain in two sentences okay so reason is a thin layer on top of oh camel o camel is a language that you've probably seen on list of five languages that you should learn before you die it's been around for 20 years so rock-solid type system really battle-tested runtime but it's been more in academia kind of in the we love monads and you know kind of low level stuff but reason is a an initiative to bring it out of the darkness and into the mainstream right it puts a layer of syntax over it that looks a lot like JavaScript there's a compiler that will turn it into a readable JavaScript and have really tight NPM integration and soon hopefully we will get native react for desktop apps um the the reason I wanted to give this talk is there's been a lot of really cool developments in the past six months or so where things have been coming together and actually several different people have said now it's time let's actually make this happen so the first one I should talk about is reverie this is an implementation in native reason that targets OpenGL so rewriting UI components but that gives you the opportunity to have the exact same render on window on Mac on Linux and on the web because it'll it'll compile to WebGL as well and reverie is being used to make a text editor right now called Oni with neo VM on the back end it's a really cool project reverie uses brisk which is the implementation of react it's it's a reimplementation of react for the native context and they also have some bindings for mac OS UI elements and then again about six months ago I got the itch and I had to make my own UI framework for a lot of weird reasons but what I ended up with was the ability to make really small really fast desktop apps and reason so I'm gonna give you the zoom demo here and this this is what it looks like here we go let's start this hello let's actually change this right hot reloading by the way yeah ask your Swift friends to do that let's see we can load load images little tweet there we've got of course you know all your native text fields and stuff so you can get the little emoji picker there we all know and love actually the the first demo app that I made with this new framework was because I was annoyed it's emoji picker that it takes like a second to animate in and so this is my emoji picker right here and you know great scroll performance you can insert any emojis you want that is actually used by more than me which surprises me so if you want to go Q moji you can download it again small small binary small memory usage what else have we got oh yeah we've got hugs so here's here's a used state hook right here also use reducer but I probably not have time to go into that and yeah so this is this is kind of the the demo as it is it's in an open-source project but no documentation of course and this is this is kind of a a peek at the future um in in summary it's still react right so it uses components composition hooks all of all of the wonderful kind of paradigms that have made react so popular but you get native UI components and tiny bundle memory usage and of course very bleeding edge so if this interests you um I would suggest check out reverie they're a lot further along in terms of documentation in terms of the the community that they're building if you want to get involved with reason the the discord channel is very active we're happy to answer your questions and check out reason town thank you very much [Laughter] all right Thank You Jared all right so up next we have an infinite Builder working on developer experience at net Liffe I he helps people learn in public on egghead I oh he's iconic like Prince or Cher he only needs one name Swick's please put your hands together for the engineer formerly known as Shawn when okay that's that's the last slide you get inclusion of hooks I'm gonna assume everyone kind of sort of knows what hooks are they're real they're announced in October of last year and released only last month so actually a fairly recent with hooks they're supposed to solve some pain points around class components and and moving them to function components a lot of people feel that we exchanged the issues that we had with class components with new problems to do with closures and hooks so I thought it might be a good idea to spend this talk talking about a little bit more closures refreshing people if you've been a bit stale that's a joke so and the answer is the closure is a combination of the function and the lexical environment within which that function was declared that's super obvious right and if you look at if you look around it's very hard to find an accessible explanation and what closures are and really the best one for this for the purposes of this talk comes from w3schools which I thought I would never say closure makes it possible for a function to have private variables thank you w3schools close tab so so so so what we'll just do a little quick example to refresh everyone's mind if you if you're familiar with JavaScript you you will have run into something like this where we have a global a counter variable on the global scope we have the function that modifies that global variable and every time we call that function that modifies that global variable this is all well and good as long as you have control of every part of your code but the moment something is modifying that global variable in the in the middle it starts to become unpredictable what the output of your function calls are right so it's not scope that the variables just go away anyone can touch it so we can just move that variable inside of the function inside the scope of this add function that I'm writing and and now it's not I can't be touched by anyone else because it's it's just contained within the function but unfortunately you also can't edit it that's just it's just it's just gonna run and return the same result every single time so the way to solve this is to wrap that function in another function your dog I heard your life functions so and that's left and that internal and when you return that function you close over that function that's the counter variable that's contained in that function and so now every time I call this add function it increments and it has state within that function but also it's not it can't be touched by anyone else and that's the kind of encapsulation that you want and that's what closure gives you so to really sort of tighten up the code you can also move that move that bracket kind of in there and it's calling if he this is also called the module pattern and all these are is a nice primer for what we're about to do we just talked about react hooks now a lot of times like people are presented with react hooks as though it's like a big big shift in how idiomatic react goes from class components to function components and that's largely true but they're not just new ways to do the same old things I've actually had me talk called reacts new defaults where we talked a little bit about what what the defaults are doing and changing and reacts including with concurrent react I don't have time to cover that but ask me about it later and really there's a lot of complaints when it comes to thinking and talking about hooks they're two magic they run into problems and still closures people make fun of JavaScript developers because we have problem with the dis keyword and paper allows that I call order and so I want to I think I think it's best to have a good mental model because it it's it's really not that magic and the way to do it is to write hoaxes from scratch this seems like it have really like being worked on this word for months and months like this seems like a monumental task but it's actually not and that's why I can present it to you in ten minutes so previously if you remember the counter function that we that we did this is exactly what we what we ended with and this kind of looks like said state you states that state so if we if we move that code around and store the internal value as that as a state and then we return to functions a getter function and it's that state function and we'll call those functions while state instead state and then and now we can use that inside of our code so for example I can say au state zero here and the value of that is zero I can set foo there I can set that state to one and when I call together again it's called one so the the the state is contained within the closure of that of that function if but this is not exactly in reacts API we don't have a getter function we just have the variable right we just can somehow use it like it's like it's just current every single time so how do we achieve that the way to do it is to wrap it inside of the module similar to what we just did earlier and we'll just call this react it's not react but you know and we'll just say we're returning an object an object the object has a method called you state it has exactly what we what we just went through just now but now we don't have to put in a getter function we can just return the underlying value because every time we call it it's going to be a sign from the stored underscore Val function that we have in Reax scope so so then the other thing that we need to do is we need to turn over invert control conversion of control of rendering from the component level to react we need to hand it over so this is the analogy of react on that render and so with these two functions we can do a lot with that and we can we can actually write a component already let's say this is a counter component and instead of rendering through the Dom I'm just logging stuff out to the console and and and I also return a handler so here I returned a handler called click and every time I run that handler it increments the state by one and so now here I can I can say app equals reactant render counter and that renders zero because that's the initial state and I can click it and then when I rerender it increments by 1 and it's kind of relaxed API yeah if you squint and so that's you state but there are more hooks and the other one my favorite hook is to use effect because that gives you so much power and so and so you can use it you can implement use effect in much the same way so use effect takes a callback in the dependency array if there's no if it if they use effect has no dependencies or if it has changed dependencies we're gonna call the callback and that's about it and that's that's the entirety of use effect obviously it's not because you have to do the unsubscribe and so in something now we can write components that have you state reactor you state over here as well as use effect and and I don't have time to show you this but you know you can run a write a full test with with that effect actually yeah so here you can you can render in a counter you can you can see you can see that effect is run on the first try in real reacts in real react effect this actually run after render you can click and change the state and now when you render again you're running the effects if you run a no op and do not change the state so count is still one here no effect is run because the dependency is depending on the account and if you click it again the effect is rerun and so that's a very fun a solid way to understand how these hooks interact with each other and so now the problem with with this model is that we've implemented everything as Singleton's androoni early actually wrote this awesome medium post saying stating that hooks and not magic and just erase and you can model hooks in components as just arrays of effects whether they modify your internal state or some external state so so the old structure is this is what we set up in the original slides earlier we had one variable for internal valium one available for the dependencies that they use effect was on so what if we just generalize that to just an array and then what if we just had a pointer to be carnally that we're working on and so now so now we can take that and just rewrite bits of each of the code that you've already seen I'm not gonna walk you through that I don't have time but that's the entire line this is 20 lines of code for the entire implementation of the mini react hooks clone you can I just want you to focus on these particular lines and that's nauseous an array of hooks every time you render reset it to zero every time we run a hook we increment that counter by one and we access that the hook that's that lives at that counter and so what that does for us is that we are now able to write components with multiple hooks and that's reactor so here's a component with two u States and to use effects and that's and that's pretty that's pretty close to what we what we have with react and so that's a lot that we covered so who wants to write the code for custom hooks do we have another two minutes no it's it's fine because we already did it we get custom hooks for free and that comes out of the design of hooks which is just function composition so here I have a custom hook called you split URL I just do some modification on the string but I can use that custom hook I just wrote in my in my sort of demo little hooks model and it just works and and that's and that's a really good way to understand like what the magic is where the magic starts in reacts with when it comes to house and so you know you also can use this model to study the rules of hooks so what's the first rule of hooks you have to call things unconditionally or consistent call order and if you think this model of react where we're iterating through a whole array every single time we render and you take this kind of component where you have an if statement around around a hook you can start to see that there's some uncertainty around what the index of the hook is when you call hooks that are after that conditional hook right so that's a that's a that's a really good way to think about this I'm not saying that this is exactly what they do but it's a good mental model the second one is well it's kind of similar it's if you can only call hooks inside of components and in other hooks so if you try to call it outside what is the index of this hook 0 1 I don't know and then what Ana kicked right if you try if you have that externally what is the index of this hook if it's called within the component and it renders a few times so like the call owner starts to get out of sync and you start to get errors and so and so that's the mental model that is is I think what I want to establish today there are other exercises that I really want people to take to take home because it's not that hard for example you can write use ref in one line but just as a function of you state you can write user user in three lines again as the function you say it or the other way around you state has a flush Genosha use reducer and so you know I hope to help to moderate the are slash we actually a separate it there's a hundred thousand of us reactive over is discussing this stuff we have we ran a hooks contest and you can see all the creativity that comes out of it so my my uh my recommendation is also to have that that you also check out use hooks these are like the community contributed hooks that had helped me think through edge cases that you may not think about when implementing these things and you really learn how to write your own custom hooks my custom hook though is a little more ambitious so I wrote one called use create class and that just like you take the you if you're old school react you have the create class API where you had an object so I took that including mix-ins and I just cloned it all over to hooks and I went through every single lifecycle method and implemented them with hooks and that is an exercise that it's an awesome exercise to to really understand the mapping right of component life cycles to hooks and also I just really liked the idea of using mix ins inside classes inside hooks right yeah all right this is the only crowd that that works and so the last question I want to leave you with is if I can write a hook sepia Conan 20 lines of code then why am i what what does react do I have an answer I think you have yours let's talk about it my name is Sean I you can find links to this talk vi at i/o as well as the notify blog thank you [Applause] whoo-hoo Thank You Shawn I don't think we should stop clapping for Shawn that was great yeah thanks Shawn if I understand Shawn correctly we don't need to import react anymore we can just write our own yeah I think we get it ah are you ready for her frontal speaker yeah he is the co-founder of Asura he's an open source creator he's also a teacher who taught one of the largest courses in India to over 250,000 students that's wild please welcome to the stage ten my Gopal so I'm going to talk a little bit about redox tile backends we're going to use the Redux metric model to see how we can use that to be the backend and we're going to use graphical and service functions for doing that because why not I am tonight I am one of the creators of the open source project cauã and the company behind it now which is a surprise all right cool so Redux is awesome and we're going to use that meant to model builder back-end how many of you don't like Redux cool you can just like go out Redux is super cool because the mental model is that if something happens in the UI will dispatch an action that action will go and call some app logic which is a reducer and then that will you serve it will do will update the state and connected components to the state that are listening to that component can go in and update their you guys because as soon as the state updates the UI updates this is a very clean mental model you have to write a bunch of code to do this and make this possible but the mental model is super nice right what if we could extend that pattern to building or back-end as well right so you have a UI the UI does something and so you do a dispatch like a graphical mutation which goes in and triggers business logic which is the service function instead of being a reducer which then goes in an update state and then UI components are connected to that state through graphical subscriptions or live queries right and that update should happen right so instead of doing this whole thing on the front end what if we extend that and do it on the back end as well right um all right so the application that we're gonna try to build um then I've already built I'm just going to uncomment code is that we're gonna type in some like Nautique words and then those naughty words are going to be sent raw and then the ml in the AI to the red X is going to remove those bad words and is going to convert that into sanitized text and then the UI or UI components which care about that sanitized text are going to see cleaned up content right okay cool so I'm going to use husana and Postgres as the state as the redox a kind of peace in this system I'm going to use glitch for writing the server dysfunction and then I'm going to send that back to the subscription to be y-component all right so nothing all right cool okay so in the interest of time I did not deploy this from scratch but I have Postgres database and house row which is a graph QL layer on top of Postgres that's running on Heroku right so that's reactor thundered hello Capcom and first went to model state like we do in redux so I'm going to go create a table which is the state object I'm gonna call that tweets because we're cleaning up tweets so ID which is au UID and and then I'm going to have the raw which is a text type and then I'm gonna have sanitized which is also text and which is going to be null initially and later on when the reducer runs if the service function runs it's going to have a value let's set the primary key to ID now as soon as I do this I have a graph cure mutation so I can go in and run a mutation to insert or tweet that has let's say raw which is some data here and then let's capture the ID the raw content and the content all right so it's null by default and that's the tweet that got inserted so state is captured somehow now we're going to write this mutation in our app to do the first portion right so I have a UI here the UI has a box and it is dangerously tweet right so I go here and I've copied the mutation here I'm not even bothered to comment it so that I can comment it but here's the mutation here right and that's the same mutation that I showed you and so now I'm going to go in and say something dangerous right alright so the dispatch has happened and hopefully this should be on our back end now alright something dangerous is here good so next next let's go in and use this to dispatch the serverless function so I have a serverless function here on glitch let me just grab the URL here alright so I'm going to configure a trigger which is the equivalent of a dispatch so I'm gonna say I'm gonna call this trigger sanitized so this is the redux dispatch so I'm gonna say sanitized tweets whenever there's an insert and deliver that to this reducer which is the serverless function and then what I'm gonna do is I'm gonna insert something else here so let's say this and what should happen is that we should see that something gets delivered right so that that just got delivered right now and that's the content that we just inserted right so something's it's being delivered to a reducer a reducer isn't written yet let's go in and write the reducer um this is what the reducer looks like it's an express service function this can get neater but just for the purpose of a demo so I'm gonna take state I'm gonna grab the raw data from the state so state dot raw and then going to sanitize this so I'm gonna say sanitized sanitized is clean right um and then I'm gonna save the sanitized stuff back right so that's like a pure function it's modifying State and updating State back again you can add wrappers around this to make this more convenient but I'm actually just doing a mutation back and saving this back right but an ideal thing would be to take the respond and then just have the response go in and update state again right so as soon as I do that let's go in and see if if it gets analyzed so this MLA library that I use for detecting bad words I can't use bad words that start with a because of a conference or B or C or D or F and so the only list that I found in that that is okay for a conference is going to be held so I'm going to say hell is heavy right alright so I'm gonna pee this out and a dispatch should have triggered something on the database and so this should be on a database and if you look at Hell is heavy it got saved and if you look at the sanitized content it contains the information back right so cool reducer is running state has been updated last portion of this we need to get this back on the UI are we good on time local time um okay so I'm going to comment this out which is the dispatched portion and I have but which status component I mean gee this alright and I have a subscription the subscription is actually a live query so I'm just running a live query that subscribes to that entire object if it changes I want to know what it is and this is like the connect of redux right um so let me just save that and let's run this again right all right cleaning my mouse and there we go so I have it's cleaned up now now this is this no demos real without checking if this can really deal with like heavy content and so we gonna go to Ken wheelers timeline and see what content we have there um I scrolled through a lot of stuff before I could find something usable and so I found this tweet of when he was getting off the plane which is I think okay photo conference anything anything let's try this and see if it works alright stepping off this airplane or properly alright cleaning his mouth and now he's an angel look at that alright so so that's that's kind of how this works we have a little more time so I'm going to show you something a little more complicated that I previously built entirely without even commenting so if you can take out your phones and QR code this [Music] this is a food ordering app built entirely in this Redux e style where all of the business logic happens inside reducer type several dysfunctions alright so hopefully you have that so I'm going to go to this URL alright so I'm gonna zoom that up alright so this is a I'm sure that so this is a redux tile app again all of the business logic inside service functions which kind of happen as reducers when states when state updates so I'm gonna place a new order I'm going to order a mango and haggis haggis that's anyone know what haggis is cool good good luck and so and so I'm gonna order that now what's happening is that this created the order the reducer for validation ran saved updated out state anybody subscribe to that order updates anywhere in the world however many of them however many of them exist um I have a payment which works in the same way the payment is a dispatch called the service function service function goes an update state um this UI subscribe to the state so it works right um this is also nice because it exploits the fact that service functions can really scale so if we go to the analytics app we'll see a bunch of you placing orders if you if you are placing orders right so if you look at the red line that's somebody placing an order if you look at the brown line that's when the order goes through the validation so this is also a UI component that's subscribing to the same state but I'm rendering I'm looking at that state and then I'm rendering that differently right so you are placing orders they're getting validated notice how a lot of you are not paying right because that the green line is for like paying VC money can take you only so far and then and then once you pay for your food you see that the delivery assignment are like finding the delivery person who is actually gonna go deliver that's the next reducer that kicks in and so on and so forth what is also really nice about this style apart from the fact that it exploits that server assumptions can scale and so when I don't do this demo I pay close to zero and when I do this demo even if ten thousand a few and place orders it doesn't really matter everything we work but what's also really nice apart from this kind of a pattern helping your scale because if you think about it you know Redux sounds really nice but sometimes it's just too concrete no it's not I have a little demo here showing all right good so I'm trying to show how how this is also resilient so I place a thousand orders right in one shot and and now those are going through validations right which is fine which which which works okay and and then it's kind of block on payment and then I pay for a thousand of them together and then that starts going through series of state changes which is also fine right so you look at the payment that state has changed but what I'm gonna do now is simulate a failure where somehow are the dispatching thing because all this is happening on the network right the dispatching thing has failed and so you can see that it's throttling so the dispatch mechanism that's calling your reducer because did like Redux is really nice because it runs on an app this entire thing is running like all over the cloud right and so what's happened is that the dispatch mechanism is failed because the LAN cable has come out between like two AWS servers right and you're like oh what happens now so you call somebody up and you're like what's happening what's happening let's find the LAN cables and let's plug the LAN cables back in and and then plug the LAN cables back in queue for them it's a recorded video so I am plugging the LAN cables back in that was me going to AWS and saying remove the throttle and then as soon as I remove the throttle and click on save right um it picks up exactly from where it left off because all of these actions this is kind of like the replay Redux time thing but like the other way around happening on a event system because I have all of these events that are just waiting to be dispatched and delivered whenever the network comes back dispatch dispatch dispatch you only write JavaScript you do full stack you do scalable you do resilient you take over Google you become a billionaire you buy a house that's the all right that's that's it from my side just yeah I'm tan my I'm time I go on Twitter how I radio is the open source project and that's the open source project and the company that I run please check us out and feel free to grab me and talk to me about graph QL serverless Postgres just being unnecessarily hipster whatever alright thank you thank you so much that was awesome live demo not a bad thing cool let's hear it again for 10 my and all of our speakers are really fun thanks again to real world react github and flex port and all of our sponsors let's play a little game does anybody you just shake your head no okay we're going to anyway uh does anybody have a 13-inch MacBook Pro anybody does anyone have one that isn't yours cuz it our organizer lost his laptop so if you see a 13-inch Space Gray MacBook Pro with Benjamin Dunphy right really open it up his name we found ourselves a laptop ladies and gentlemen nice awesome nice work we'll get you a prize for that we have an excellent evening ahead still more fun to be had topic tables more drinks more hanging out more talking more having fun but thank you for being here we'll see you over at the topic tables you

Channel: Real World React

Views: 2,281

Rating: 5 out of 5

Keywords:

Id: Wt4kuspJIxY

Length: 80min 42sec (4842 seconds)

Published: Tue Apr 02 2019

Reddit Comments

[u/swyx]

4:31 - Ken Wheeler - Renderless components, Now with 9000% more hooks 17:52 - Jen Luker - A11Y & Accessibility 29:31 - Jay Phelps - 10 Things About WebAssembly You Need To Know 44:05 - Jared Forsyth - Move over Electron - Native-compiled React for the Desktop with ReasonML 53:55 - Shawn Swyx Wang - Getting Closure on Hooks 1:06:13 - Tanmai Gopal - Redux-style backends with GraphQL & Serverless Functions