[music playing] jake archibald: hi, welcometo google developers live. this is mobile web thursday. but actually, we're not live. we're pre-recording this. and i guess it's not reallygoogle developers, either, because you're notone of the gang. so i guess it's just developersnot live in a google studio.
so it's not gdl it's dnliags,din-a-lags, dnliags. that's cool. it kind of sounds a bitlike dinner ladies. we could go with that. remy sharp: din ladies. jake archibald: yeah. anyway the studio today, we'vegot remy sharp from off of the internet, from downin brighton. and i certainly hope he's goingto brighten the studio.
remy sharp: [drum roll] this is the third one that i'vedone of this, so i can teach you some tvproducing tips. so whenever you do a completezinger like that, it's good to kind of look at the camera andjust smile and nod a bit, because you want to give peopletime to recover from their kind of gut-wrenchinglaughter, or else they'll start missing the importantfacts and stuff. so you're the big bossof left logic, right?
remy sharp: that's right. i run my own littlejavascript-based development agency thingamajiggyin brighton. jake archibald: cool. so let's see what you hovegot in store for us. it kind of works, becausebrighton and hove, right? no, it doesn't work. remy sharp: separate place. jake archibald: so you built agame for google i/o, right?
remy sharp: yeah, that's right. if i-- well, we can demoit now, right? it's called-- whatis it called? face balls, ball faces? remy sharp: well, i'll show youthe game, and then i'll give you some back story. so-- jake archibald: livedemos never fail.
remy sharp: the game's called"head shots." you don't see that bit where we didit earlier, and the whole machine crashed. jake archibald: oh yeah. if we seem a little bitdepressed, it's because we've done a whole half anhour recording. it went really well. and then paul kinlan, who's ourresident dj today, just kind of started crying.
a little tear ran down hisface, and he said, the machine's crashed, dude. machine's crashed. so this is our secondgo at all of this. but it's going to bebetter, right? remy sharp: yes. jake archibald: we shouldpositive about it rather than depressed. remy sharp: it's goingto be amazing.
so this amazing game is called"head shots," and i'm going to amazingly hit new game. and it's going to giveme a pin number. and that pin number, jake isgoing to put into his phone. jake archibald: i am. it's a good feeling,by the way. remy sharp: thanks. jake archibald: thisis excellent. i really like-- because i'm onthe pin screen now, and it's
nice that when i go into the-- i don't know if thisis going to work. when i go into the screen toenter the pin, it comes up, and it's only got the numbers,the digits on there, which it's just putting them-- remy sharp: no, it's not. it's a pattern. so i think i mightnot have mobile connectivity, which is--
yes i do. jake archibald: we could put anawkward transition in here where we just put like a screenand some hold music until we're ready. [humming music] remy sharp: let'stry that again. jake archibald: andwe're back. and we had a massive networkfailure, right? because you're using a dataroaming sim card.
you didn't realize youwere doing that. and you've run out of credit,which is probably costing you quite a lot of money. but we'll take you for abeer to make up for it. that'll be ok. remy sharp: beer equals data. jake archibald: thiscould be the moment where remy became bankrupt. but we're going to soldier on.
what we're going to do is you'vegot a pre-recorded video of the game working. we're going to look at that. there was a great moment wherepaul was going to have the whole camera running through usfumbling and trying to make the stream work and failing. but remy, you came up witha good solution, though, didn't you? you just fired out a string ofobscene words, and that means
we can't put it out. so i might use thattrick next time. remy sharp: so yeah, that prettymuch guaranteed it could never make itto the public. jake archibald: exactly,exactly. so yeah, let's go throughthe video. remy sharp: yeah, i'll walk youthrough "head shots," the pre-recorded version ofthe interactive game. so you're presented witha welcome screen.
you tap on new gameor join game. so in this case, i'm goingto join a game. i'm given a pin number by theother player, which actually is going to be me. so get prepared for yourminds to be blown. and then when it prompts you, itasks you if you want access to the camera or not. i say yes. and you can see my facebeing streamed
directly into the camera. so here i get to throw aball at my own face. and boom, in my face. one down. and then the other player kindof flicks back, and you'll see him throw the ball towardsme like that. awful shot, remy, terrible. and again. ah.
see now, i look like i hitmyself in the face with my ball, but i didn't. jake archibald: so it's actuallya live stream there? remy sharp: it'sa live stream. it's udp data, peer to peer. in this case, i was at homeusing my own local network, which means that theconnectivity should be superb, because it's basically pointto point, almost. there is one part that sitson the server, the
discoverability of the game. so knowing what pin number, thepin number is what joins us together in thefirst place. so there's a web-- oh, i hit myself again. the server is running awebsockets server, which we use to basically go up to andsay, what is the webrtc library, tell me what i need toknow to be able to connect to this person.
it then sends down this data,this magical data about where the person's located, i guess. and then it starts using thingslike stun, straight out of "star wars," "star trek,"in fact, turn servers, ice. because we like a bit of iceas well, some cool words. jake archibald: so this is allpart of webrtc, right? remy sharp: yeah. and that then penetrates all thefirewalls and proxies and gets us to hold hands and sharedata and eventually be
able to get a peerto peer point. hopefully. it's still new technology,that's the thing. jake archibald: it's good. i deliberately made a decisionnot to learn any webrtc because it would makethis interview flow a lot better, right? it's not just because i'mslightly incompetent, and there's a big part of webtechnology that i haven't even
looked at yet. this is a deliberate interviewtechnique. it's quite good. remy sharp: sound, sound. jake archibald: shall we havea look at some of the code that you're using to actuallymake this connection happen? so like you, i'm not thatwell versed with webrtc. i should say as a caveat thati'm a developer with the approached that basicallybash away at
something until it fits. and i watched my son puttingsome blocks into a wall. and basically, the way he wasgetting the blocks through the wall was the sameway as i code. i basically just keep turning itand turning it, and once it works, it works,and i move on. jake archibald: even if it's notthe right shape, it fits. remy sharp: yeah, if you cantake a circle and turn it so it looks like a square and pushit through a square hole,
then superb. jake archibald: so we shouldsay the webrtc stuff that you're using there requires abeta version of chrome for android at the moment. remy sharp: yes, sorry. jake archibald: but it's inthe full stable version of chrome desktop. and it's also in the betaversion of firefox as well. jake archibald: but even thoughit's in the beta,
you're having to turn onsome flags before that. so it might be worthjust looking at the phone briefly, producer. so down here, oh gosh,somewhere. so you probably have to do likefind in page, webrtc. and there we go. so we've got the webrtc flaghas been enabled manually. and then you get the goodnessof the webrtc technology. which i should, before ishow you some code, is
three sets of apis. so webrtc is firstly,getusermedia, which is the api that gets you the webcam andbasic video and audio. and we've seen lots of demoswhere people are mashing it up with webgl and so on. the second part is thedatachannel api, so rtcdatachannel, which is likewebsockets but gives you that peer to peer connection. jake archibald: so you're notjust restricted to sending
video and audio. it's normal data as well. remy sharp: yeah, yeah. and with that, there's a flagthat allows you to set whether it's reliable or not. and reliable, true orfalse, means switch between udp or tcp. so you can use this for firstperson shooter type games, where it doesn't matter how manybullets you fire, maybe.
i don't know. i'm not the best gamesdeveloper, which is why i wrote a game. jake archibald: i don'tcall it udp. i call it upd. remy sharp: because we'vedone this four times, i now know that joke. i'm trying to recreate all thespontaneous jokes we did in the first record.
i don't think that onewas actually-- remy sharp: on the second. jake archibald: on thesecond record. yeah, we're having a difficulttime trying to do-- remy sharp: technology. and the third part isthe datachannel api. so the datachannel is whatallows me to stream video into your device or stream videoout to multiple devices peer to peer.
so it's those three technologiesput together that gives you all of webrtc. jake archibald: so when we wereseeing the video there and the game logic being sent,that was just direct from device to device. it wasn't all going througha central circle. jake archibald: ok. so if you were making a gamethat was player to player, you don't need to have a huge serverthat could control 100
games at once, because you cansort of pass it off to individuals. remy sharp: which does alsokind of bring its own problems, like where doesthe game logic belong? how do you protect your gamefrom being hacked? the way that i cleverly gotaround that problem was to not put any protection in there. so if you want to hackthe game, you can do. if i'm playing jake and throwingmy balls at his face,
then i could just cheat. and i could say, every singleone of them hit. and i would win. but obviously, i've cheatedyou, and that would make us both sad. jake archibald: it's for fun. it's not a competitive-- remy sharp: yeah, there'sno leader board or anything like that.
so if i show you some of thecode, a lot of it's kind of-- there's events flying back andforth inside of the game. so when the game actuallystarts-- let me scroll up justa little bit. i was actually on the rightline of code, pinchange. i have this event that sayspinchange, which the server will give me a new pinto start the game. and when you enter a pin intoyour phone to start the "head shots" game, it will triggerthis event called pinchange,
which tells the entireapplication, right, go and connect to the websocketon the server and send it the pin. and that's the roomi'm joining. because we need to be ina room to be able to communicate-- to discover each otherin the first place. once we've gotten intothat room, it then fires a bunch of events.
jake archibald: so this dollaron you've got there is just-- remy sharp: yeah, so ishould say this is not jquery or prototype. this is i've written my ownlittle library that's min.js, this tiny library just togive me a few bits of-- a few shortcuts. so on is an event listener. and dollar on is just hittinga dummy element. so i've got this one, it's likea simple pub/sub system.
and dollar is justqueryselectorall with a smiley face because it needsa value, basically. jake archibald: i completelyunderstand doing that. because i kind of worry aboutthe amount of finger skin that i've lost to typingaddeventlistener and queryselectorall when it--yeah, on and dollar. remy sharp: so i've got thisglobal event, pinchange, which then tells the code togo ahead and connect. and this line above, rtc.onconnect, rtc is the webrtc.io
library's global object. so there are a bunch ofdifferent webrtc libraries. i settled on webrtc.io, mostlybecause the demo was there in the first place. the demo is very hackable. it meant that i had my prototypeup and running really quickly. it took me a couple of hours toget my prototype working, just based on that code.
there are a few bugs in it. i should send pull requeststo fix the bugs. there's some others, peer.js,simplewebrtc.js. i've got a feeling there'sanother word in there somewhere, but maybe not. these are two libraries. i think peer.js only did data,and simplewebrtc only did video and audio, but thathave changed by now. this was a month ago or twomonths ago i was working on
the project. so webrtc.io is the one isettled on just because i needed to kind of hit the groundrunning with webrtc. jake archibald: i think thisis the real domain of libraries in the future. we used to use libraries justto fix all the cross-browser issues with the dom. but i think if you're dealingwith just modern browsers, the need to do something likethat is less and less.
like you have there just a tinymicro-library to save yourself some typing. but we've got all of these newweb apis, and a lot of them are really low-level,like webgl especially, web audio, webrtc. so i think this is wherelibraries can really guide the standards to show, theseare the common actions people are doing. and then that'll feed back intothe spec and hopefully
make it simpler. remy sharp: so like in thewebrtc.io library, there's code that looks for the opuscodec or way of sending video, which has to do with firefox andgetting interoperability between firefox and chrome. i wouldn't know howto do that. and they're taking the messageand doing some kind of rewriting magic stuff. so magic.
that's what i'm looking for outof my library is magic. so when i get this connectevent, i then connect the video, which is basically iwant to take your face and stream it straightinto my phone. and that connect videolooks like this. pretty straightforward. i check that i can dopeerconnection api. i set up these options,which says video should be 320 by 180.
i'll come onto thatin a second. and then webrtc has thishelper, createstream. and it fires this callback,which i then trigger a custom event that says the localstream is ready. and if i'm in debug mode, iactually want to see it. and the way that i've got mygame set up is that the local feed is ready. the remote feed is ready. when they're both ready, we'reready to play the game and
actually throw the balls. just going onto this bit, thevideo mandatory maxwidth. this is to say, basically, sendthe video at 320 by 180. and that's because my game onlyhas a very small kind of icon for the video. i had this kind of assumptionthat, because it's with peer to peer, that latency wouldn'tbe a problem. but realistically, if we'replaying a game, i could be playing someone in theus from the uk.
i'm still going over the wire,still a lot of data. this isn't a skypeapplication. it doesn't need all that datato be going over the wire. so i might as well makeit as small as i need it in the game. jake archibald: would it makesense to have a similar option for frames per second? is it something that youcould bring down? i think that there's stuffto do with aspect ratio
that you can set. there might be stuff to dowith frames per second. not all of it's implemented. that's the thing. and i, in fact, found that thiswasn't doing anything for my code, because there's a bugin webrtc.io where it's just ignoring this value, whichcould be fixed already. but it's really new,this technology. so there's some parts that youread about, like there's
mandatory and optional. and i don't know if there'sframes per second. there could well be. it makes sense that youwould have that. jake archibald: soif the device-- i assume there's equivalentsfor minimum width and minimum height? remy sharp: yeah, i think so. jake archibald: so i guess thatwould be somewhere where
if the device was incapable ofdoing that, it would kind of announce that. i don't know what happens ifit can't make it smaller. right. so now, in this code, we'vemade a connection to the websockets server, discoveredthe room, shared what room we're joining. we've got your faceinto the game. so this rtc.createstream isbehind the scenes basically
going to send it down thepeerconnection api. and this piece of code exposesthis init method. and the init method initsthe connection. and what that does is basicallylisten for remote streams, which is basicallyme joining your game. and when i join your game, itattaches the stream, which is the getusermedia stream,typically, to an element that has an id of remote. and then i have this extracheck, which is where i've
found problems with not thisparticular line of code. but this is the line of codethat blocks the game from actually running. so when we were testingearlier, we were having some problems. there's some kind of weirdnetwork situation where the data channel wouldn't open. and if the data channel doesn'topen, the game's not ready to play.
and only when the data channelis open does it trigger the remote is ready orreadyremote. and when the readyremotetriggers, the game has a full connection, bothvideo and data. as in video and kindof arbitrary data. jake archibald: is thisthe point where the race condition happens? remy sharp: right. ok, so the first version of thiscode, i really wanted to
embrace the web in terms ofhaving urls to access different pages. so i had a welcome page. you hit join, you goto the join page. and you have to putin a pin code. and when you hit go, it wouldtake you to a waiting page, and it would have this hangingxhr request that would sit, asking the server, isthe game ready? and the game would say, no,i'm in waiting stage.
i'm going to leave thisxhr connection open. now you would have your phone,or i'd do it, whichever way round i started. and you would start a game, andyou would get a pin code. i've done this the wrong wayaround, but you're still with me anyways. jake archibald: yeah,yeah, i'm following. remy sharp: you get a pin code,and it has the same hanging xhr requestto the server.
and the game's one,two, three. and the server says, right,we now have two players in the game. change the state fromwaiting to ready, which closes the xhr. the hanging xhr request comesback to both of us. it refreshes the page onboth of our devices. and we're immediately then bothasked at the same time, do you want to give accessto the audio and video?
do you want to open up a datastream to the other person? and what i've found was it wouldgo, yep, they are, then oh, it's broken. jake archibald: so you tried toexplain this to me before we started recording. and it wasn't quitegoing on ahead. so we decided, and i'm veryexcited about the props, you were going to try andexplain this. remy sharp: i have an analogy.
jake archibald: so we have-- what do we have? what is this? remy sharp: so thisis my analogy for trying to make a call. so i'm trying to makea call to you. and i have my webrtcpaper cup phone. and the thing is, you're tryingto make a call to me, and you have your webrtcpaper cup phone.
so if i put my phone up to myear, and i try and make a call to you, you want todo the same thing. so we're both trying to makea call to each other. jake archibald: i canhear the ocean. remy sharp: and i'm going to-- concentrate. jake archibald: sorry. remy sharp: i'm going to tryand make a call to you. so i'm going to give you thisside, and you're going to put
it up to your ear. and you're going to giveme your phone. jake archibald: yeah, becauseyou need to make a call to me. and then i'm going to listen. and see now, we're dangling. we have dangly bits. and this is why there'slike a flash of-- the moment i had the phonestill, there was a flash of connectivity.
and the moment i kind oflet go, it just goes. so that was with the help ofpaul kinlan that i needed to rewrite all my code intoa single-page app. and by rewriting the code-- jake archibald: are we done? sorry. remy sharp: by rewriting thecode into a single-page app, what happens is you start thegame, and you get your phone, and you make your connection,and you tell me what
the pin number is. and instead of me trying todial you, i already know you're there. and you give me the cup. so then we can talkto each other. jake archibald: that'snot-- oh yes, that's how phones work. remy sharp: it shouldbe ear to ear. jake archibald: i guess it's--
remy sharp: streamingconsciousness. jake archibald: i thinkif webrtc is-- because the model we've builthere is you're either talking or listening. but webrtc can do both, right? so you would have-- remy sharp: i would havea second one for data. jake archibald: no,other way around. so my ear to your mouth.
remy sharp: this is why-- jake archibald: there we go. so that's webrtc, right? remy sharp: this isthe data-- yeah. jake archibald: this is twodevelopers who don't know how basic telephony works. ok. that helps. i think that actually,everyone would really
understand there, especiallywith the cups. remy sharp: the thing is, idon't know if there's a bug in my code, there's a bug in thewebrtc.io library, or if there's just a bug generallyin the workflow of webrtc. and it was on paul kinlan'sadvice to move to a single-page app so thatyou don't have that race condition anymore. and it solved the problem, andi just wanted to move on and work on the restof the problem.
but one day i'll revisit thatand try and work out where the problem is. and the thing is it's such newtechnology that we need to be making these mistakes. and maybe that's the waythat you have to do it. you need the single-pageapp for persistence. the example i was giving youbefore, when we were talking earlier, is if jsbin had avideo stream, if you were teaching using jsbin, and youhad webrtc in a video down in
the corner, if you wanted tocreate a new bin, and you had everyone kind of followingalong, you couldn't refresh the page, because when yourefresh, it will lose the webrtc connection. you'll kill it. so you'll need a single-pageapp to say, right, new bin, and it keeps the video, and ican tell the people in my class that here's the urlvia the chat window. so someone should buildme that feature, too.
but yeah. anyway. jake archibald: so theother part of it was the graphics, right? you had things movingin multiple layers. how did you go about drawingwhat we were seeing on the screen? remy sharp: so i started offwith just dom nodes. and the idea wasi'd just make--
i'd use a scale, translatescale, transform scale. i know how to code it. i don't know how to say it. and that would work, right? so i thought i'd sit down withseb lee-delisle and just borrow some advice off him. and he kind of went, no. you need to use three.js. so i kind of put aside my lameattempts at doing 3d with just
scaling a dom, whichyou can do. it's more that i wouldn'thave managed to do it. it would have looked crap. and he pointed out that by usingthree.js, we're able to create a camera and a point ofview, and there's a real 3d scene there in thefirst place. and the character that you'rethrowing the ball at would look the right size andthe right perspective. and the ball as itwent through 3d
space would scale correctly. not your dodgy algorithmto scale it. jake archibald: i had the sameproblem because i haven't done a lot of 3d programming. so when it came to doingsomething where something was going to go away from thecamera, my first reaction was, well, i've got thescale value. i can just move fromone to the other. and you start to realize thatit doesn't quite move in the
same way, because it doesn'thave the perspective. it's scaling linearly, whereaswhen something moves further away from you, it doesn'tscale linearly. and i hacked it by using asine wave or something. and it has that uncannyvalley of, it doesn't look quite right. so that's-- three.jswould solve that. remy sharp: yeah, that's whathe was pointing out, that by using three.js to do thisproperly, it will feel right
and will look right. so i spent a couple of hourswith him and created this new kind of scene with the floor,and this object, it would throw into the scene andbounce off the floor. great. took that back to the office,loaded it on the android, had a beautiful 60 frames persecond on the desktop. got a beautiful four framesper second on the android. pretty much wept into my lap.
jake archibald: what rendererwere you using in three.js, though? remy sharp: so that's justthe canvas renderer. jake archibald: normal2d canvas, yeah? remy sharp: the 2dcanvas, yeah. and it's only post-projecti was like, oh, maybe i should've had thewebgl renderer. because i was allowed to chooseany technology i want. but, you know, hindsight.
so i actually realized that theproblem that i was facing was i was rendering a massivescene, or a massive scene for the device, at least. and i found that by putting-- so i originally had both videofeeds going into the doms. both streams of videowere fueling these two video dom nodes. and then i had this big canvasthat was being repainted all the time, the entire background,the whole thing.
so i changed thecode to being-- i created two three.js scenes. one is the background, whichis the background, the 3d floor, and the character whois mostly stationary. and then the second frontlayer is the ball that bounces, kind of comes down,bounces, and then goes off and reacts to the user flicking,basically. and instead of having two videosin there, i got rid of the second video, the video ofme, because i wouldn't need to
see myself when i'mplaying you. and i just have yourface in there. and that got the frames persecond back up to-- i think on nexus 4, i was seeing50 frames per second. that isn't the endof the project. it kept on dipping upand down, and i would change something. and suddenly it'd be 50frames per second. i'd change something else,and suddenly it was
20 frames per second. and i could have just beenmashing my keys, and that would have kept changing,basically. jake archibald: so by having theball in its own layer, it means you can move thatindependently without having to redraw this wholebackground. remy sharp: that layerwasn't even moving. it's just that there was less todraw, less pixels to commit to that canvas.
jake archibald: yeah, and thencomposite, it does the rest. remy sharp: yeah, exactly, soyou could see through, and you'd see the backgroundof the character. and i would fake the-- the ball would think it's hityour face, but what i've worked out is this is wherejake's face should be and bounce off of that, then causethe background, the second layer with the character to kindof animate and fall down and cry and spit bloodand eyeball falls out
and stuff like that. jake archibald: it remindsme of my childhood. i guess what you forfeit, then,is you wouldn't be able to make the ball go behindthe player, right? because you've got thosetwo separate layers. but you don't havethat problem. remy sharp: i did actually. i do do that. there is some code in therethat, again, with seb's help--
i'm not a 3d programmerin the first place. and he was showing me, pointingout the point where the ball in the 3d scene wouldhave moved-- so if this is the character here, and thisis our scene, the ball would move forward. and with the-- which one is that, x? jake archibald: we'llpretend it's x. remy sharp: that's x.
and so when the x went behindthe character, i actually flipped the canvases around. because i was only painting thefloor and the character on there, the mountains areactually completely background, like a cssbackground on the actual body of the element. so it can go behind it. there are moments where i thinkthe ball can bounce off of something, and suddenly it'scoming forward, but it's
behind, or-- jake archibald: i've seenyou bounce it back. remy sharp: there's something,if you hit it between the legs, there's something abouthitting that i've noticed. if you hit the character betweenthe legs, the ball's z-index doesn't workout quite right. jake archibald: hang on, what? remy sharp: i don'treally know. it's tricky to debug.
jake archibald: let'sgloss over that. your game is just rifewith innuendo. "head shots" was definitely thebest name you could have picked for this. everything else is wrong. remy sharp: there's these littleareas that basically i've shaved corners off to tryand get a game that works and people can see the technologythat is available natively in the browser without plug-ins.
and if there's a few hitcheshere and there, i'm kind of ok with it. it's the kind of thing i'd liketo go back and revisit. jake archibald: what drovethe physics, then? because you've got the sortof bouncy physics. was that just code you wrote, orwas that something that's-- you've got to use anotherlibrary, or is that within three.js? remy sharp: so i'dlike to show you
some of the code here. in-- oh, where is it-- the game.js. it, again, is just kind ofhaving seb, but i think i knew this already. there's a lot of codein the 3d stuff. jake archibald: this is stuffyou wrote, right? remy sharp: this iscode i've written. seb did give me kind of largechunks like the hit detection.
he gave me that, and theprojection, which i can explain is mind-numbing. so this stuff, he gave me,when we sat down for that two-hour session, he kind ofhelped me get right as well. he literally had to come aroundto my office and sit with me and say, remy, remy,what are you doing? why are you doing this? jake archibald: so i can seewhen it hits, the velocity is obviously going to go inthe other direction.
remy sharp: exactly. so this, because we're doingmultiply recalls, we're basically flipping the directionevery time it hits that boundary. so it's not that clever. there's not much physics therein the first place. it just kind of slows it down. actually, there's no physics. it's not proper physics,at least.
there's just-- that'snot the code. it's not pretty. but it's just multiply by 0.7each time on each bounce, so it just eventually gets lessand less and less. jake archibald: so how did yougo about building this? what was your strategy? were you building it mostly inthe browser, or were you building it alongside thephone for the whole development process?
remy sharp: it'sa bit of a mix. certainly, in fact,that's pretty much my workflow generally. i try to do a bulk amount ofwork directly in the browser. so i've got chromeand canary here. so i do the bulk of my workon the desktop browser. and where i can, i'll be-- let's dock that bad boy. where i can, i'll use devtools to do all my
development. and i've started using that injsbin as well, actually, just using dev tools todo the coding. let's make this nice and big. i'm a big fan of right-click,save as, and then linking-- what's background.js? that doesn't soundlike a real file. oh, confusing. hang on.
bear with me. so i don't know what that is. no domain. you guys build browsers. jake archibald: hey,it's your site. remy sharp: that's true. oh, it's because no javascriptloaded on this page. you have to actuallyget into a game. jake archibald: ah, i see.
so the first intro page-- remy sharp: the first pagedoesn't have any javascript in there. jake archibald: thatmakes sense. so part of the reason i guesswe're building it as just a single-page app is becauseyou've got the full screen support in there as well. and once you have full screen,if you were to change url, you'd lose that.
so going back, using dev toolshere, there's a bug with the pin code coming down. i will find the codethat handles that. so let's just assumeit's start.js. and i tend to just to be safe,right-click, save as, and then put it to the rightdirectory, so js. and just overwrite it. and i have live reloadturned on, don't i? have i?
let's allow that. and then i'll be just makingchanges directly into this code, so it's savingdirectly to disk. so i'm trying to debug whatpin number is coming in. so console log pin, save. i think i've got livereload going on. jake archibald: i like how thedev tools are building up to their own id. i think going back a few yearsor certainly months, there was
kind of a push back on that. it was like they didn't wantit to turn into a full id. but i think that's kindof drifting now. and it's nice to see some ofthose features where you could just start developing straightinto the dev tools. i'm a huge fan of-- sorry, i'm just going to saveit and live reload. i'm a huge fan of codingdirectly in dev tools. particularly with the animationloops, where i've
got a loop that's rendering thecanvas each time, being able to just change that insideof the loop, seeing the change instantlyis huge for me. being able to replay xhr. because i'm doing an xhr requestfor the status of the game, and if it kept coming backand failing because there was something wrong with theserver, all you need to do is boot the server backup and then replay the network request.
and then i get to get that-- where is it? replay, replay-- it's somewhere, isn't it? jake archibald: see,this is the thing. this is the part i was hopingyou would show me, because it's the feature i'venot actually used in development myself. i've always just, developing,refresh the
page, do it all again. so when you came to do stuff onthe device, did you use the remote tools there? i say that. i saw you use it before. jake archibald: that's aninterview technique to pretend that i don't actually knowwhat you're doing. remy sharp: like i said, thefirst bulk is done on desktop. and then the tweaking and therefinement, i do between the
phone and desktop. so do you want me to join meshow you it live on the phone? jake archibald: yeah, it'dbe cool to see that. remy sharp: we might have topause during setup and-- jake archibald: oh, well, ifit's too much effort, we can do something else. because it would be interestingto see. because i know that we'vechanged some stuff in canary that makes it easier todo device discovery
as part of dev tools. so we had this thing for so longwhere you would have to open up a command line. we had a whole sortof adb thing. the last time i was here,i was doing that. you have to type the thing thateveryone can remember. i can't even remember itoff the top of my head. i know it's in mybash history. but we're getting around a lotof that stuff now with the
inspect menu in canary. how's that going, remy? i'm doing a very goodjob of filling. remy sharp: you're good. i'm almost there, actually. jake archibald: oh, brilliant. remy sharp: so what i'm doinghere is basically finding the ip address of this machine, andi want to point my mobile phone to the ip addressof the machine.
so 192-- i hope this works-- 168.-- jake archibald: all of the stuffwe've been doing so far has been just successfulstraightaway on the first try, which is great. remy sharp: pretty muchout of the box. it's like we can't doanything wrong here. so wow, look at that.
so i've got-- this is literally the setupthat i will use. i'll point my phone to mymachine that i'm working on. i'm working in chrome, so i'vegot chrome inspector. what am i doing? i'm not taking that route. so sorry. i use chrome, all right. i now have live reloadmixed into things.
and say i want to make a changeto this font size. let's see if this just works. 1.5 is way too small. we want 7.5. oh yes. jake archibald: that's notgoing to work, is it? remy sharp: that shouldhave worked. so it should have caused-- jake archibald: oh wow.
remy sharp: well, i don't wantto hit refresh on the phone manually, because i've gotlive reload in there. it should be doing it. jake archibald: ohthere we go. remy sharp: so i'm makingchanges in dev tools in chrome that it's saving. because it's saving thestyle.css directly to disk, it's causing the live reloadto trigger, which causes my mobile phone to update.
which means it can make thosefine grained adjustments. like maybe the height of thepage isn't quite right, because there's toomuch scroll. i want to bring the aboutlinks up a little bit. i doubt i'll be able todo this properly. jake archibald: so i supposeyou could connect dev tools straight to the phone andmake these changes. but the benefit you've got hereis that you're linked to the files on the disk on yourlaptop, and you're getting to
see the changes bothon desktop and on mobile at the same time. and i'm kind of hoping that-- oh, it's not affecting it now. but i'm kind of hoping thatbecause i can go ahead and inspect the page that we'relooking at on the phone directly from canary here-- i think i've got all kindsof things running here. jake archibald: that'sthe bit i like.
because that's the bit, we don'thave to use adb anymore to do that weird incantationjust to connect to the device. remy sharp: this, for me, isperfect, because i've got the newest version of dev tools. i've got all thenetwork stacks. refresh there. let me try that again. yeah, so i've got thefull network stack. here, if i had xhr requests, icould replay them actually on
the device. my full debugger, breakpoints and so on. the one bit that i'm missing,and since i'm here at google-- this is mobile web thur-- hi, welcome to googledevelopers live. and i guess it's not reallygoogle developers either, so i guess it's just developers,not live, in the google studios. it's not gdl, it's dnliags.
din-a-lags. dnliags. that sounds a bit like dinnerladies, i don't know. anyway, in the studio today,we've got remy sharp, from off of the internet, fromdown in brighton. remy sharp: [drum roll]. kind of teach you sometv producing tips. kind of look at the camera andjust smile and nod a bit. because you want to give peopletime to recover from
their kind of gut-wrenching--
0 comments:
Post a Comment