ElixirConf 2016 - Phoenix Beyond the Browser - Realtime Applications with... by David Stump

welcome to elixir comp I hope everyone's having a great day so far hope everyone's excited that we're in Orlando I know Disney was always my favorite vacation growing up and so I was like beside myself when I learned that we were gonna have elixir confident Disney World I was gonna get to talk to really cool people about it elixir all day and then go to Disney at night so I'm like beside myself my name is David stump and I'm here today to talk about taking Phoenix beyond the browser specifically building real-time applications with Swift and Phoenix the overall goal for today is to convince you to tell you to show you that Phoenix is great for being the server side component to your mobile apps additionally Phoenix comes with real-time features out of the box that allow you to build some really really incredible powerful real-time apps with Swift to do that we're gonna get started with some of the features that make Phoenix so great at being a mobile backend and one of those Phoenix features obviously as channels WebSockets which we will dive into a little bit we'll talk about what a WebSocket is how Phoenix approaches these WebSockets and how they're really the engine is driving our real-time behaviors followed following that we're going to talk about Swift I wish I had enough time to talk about why all the reasons that I think Swift is awesome but instead we're gonna do kind of a glance at Swift we're just going to talk about really what it is where it came from the types that Swift allows us to use as well as one really quick example of a programmatic principle and elixir followed by that same principle and Swift the purpose for that is just to kind of give you some approachability to swift if you don't have any already if you have never encountered Swift before for when we get to the later demo part of our talk of my talk it seems approachable and it seems saying it seems a little easier to follow so that is what I like I said the next part of the talk which is the meat of the talk which is a demo we're gonna showcase a real-time iOS chat app that is communicating with a phoenix server that I have running on my machine the Phoenix server is Chris mccords Phoenix chat example and we're going to showcase all of the non boilerplate code that it takes to write a real-time iOS app that's going to talk to that Phoenix instance so we're gonna go through that we're gonna go through why the code does what it does how its stable what it offers us and finally we're gonna wrap up and we're going to talk about just kind of reinforce what we learned why Phoenix is so great with Swift and then just kind of explore really really briefly a few larger more high-level possibilities with real time apps with Swift and Phoenix the first the first thing that I wanted to touch on really briefly I'm gonna try to be brief with this I swear because this is the slide that everybody cares about the least but who under with a my name is David stump like I said I'm a lead developer for little lines which is a consulting firm out of Dayton Ohio we also are out of Seattle I graduated from Butler in 2005 and went on to get my master's degree in human-computer interaction from DePaul I've worked on most popular web stacks at one point or another through my career and along that way I ran into Ruby and I really fell in love with its expressive nature a while ago and that really introduced me to Matt Sears who at the time is and still is and was little lines and I started my journey with them while I was working at little lines I had the pleasure of working with Chris McCord and it was infectious to see how enthusiastic he was about a lick sir when everybody myself included had zero idea what elixir was throughout that kind of time while I was working with Chris I was fortunate enough to see him start to build Phoenix and to see the care and dedication that he put into Phoenix it was impossible not to really get caught up in some of the possibilities that are amazing to see today just from the care like I said the care and dedication that he took in starting that platform so that was amazing to watch and I've been enthralled with the community and the stack ever since so speaking of Phoenix let's get to what we're all here to talk about why why should I choose Phoenix as my mobile backend so well discussing this today we're going to talk about a fake app that I'm going to write and is going to make me millions of dollars and that app is called insta Flickr it's an Instagram clone and I'm gonna get millions of users and I'm gonna have millions of dollars all I have to do is figure out how to build it so I'm making a checklist for server-side features that I need for my brilliant idea and the number one giant red-letter feature that I need is speed this really isn't unique to native apps but we're talking about native is apt here so that's that's really what I'm focused on but anytime you choose any framework for anything speed is usually among the number one features that you want so I know there's like a gray area especially more and more every passing day with responsive apps when you're talking about what is mobile since we're talking about Swift when I talk about mobile and I'm more referring to native apps and when I have a user that's on a native app I know that they're concerned with speed and they're usually on the go more so than other apps I want my app to be able to deliver them an experience I want them to be able to do whatever they're gonna do and I want them to be able to get it done quickly and God forbid get back to driving so I'm sure you've all seen the the Phoenix or installed Phoenix yourself seen the Phoenix demo and seeing that funky you character that you get when you look at response times I will shamelessly admit I had to look up what on earth that funky you sign was because I had no recollection of high school science at all so it turns out that stands for microseconds microseconds are fantastic for my little checkbox for what I want to choose so Phoenix has speed and we have it in droves the next thing that I want for my the server-side can put it from a mobile app is fault tolerance and besides the big shiny marquee on the side of elixir and Phoenix what does this mean to me and what does this mean to my app excuse me well if I have millions of users like I said I obviously will have and user 1 million and 27 encounters a problem or some process that they're on that they have running encounters a problem I want all other users on my app to continue having a great experience and in a perfect world if I could if I could choose the perfect back-end that user would also continue to have a great experience so without really dubbing in because it's probably multiple more talks to really what supervisors do elixir and ultimately then phoenix comes with a strategy that allows me to tell failing processes what strategy i want them to do and how i want them to hopefully continuing allowed allowing the user to use my app so I have fault tolerance with this stack fantastic the next box that I want to check is concurrency and this really ties back into the first one because why do I want construct currency I want concurrency because concurrency is awesome and it makes me feel really cool but I my users want concurrency because all they really care about is that my app is fast and concurrently concurrency allows me to build an app that feels even faster than it would otherwise if I have my instance the flicker clone I should have picked an app that was easier to say if I have my instant flicker clone I can have a process running that is in charge of syncing with my camera roll on my iOS device I can have another process running that's downloading all of the user profile data I can another process running that's downloading my image feed uploading my image whatever I want I'm working on a stack stack where I can spawn literally millions of processes for whatever I need to do and it seems sane it seems completely normal but the speed increase that I get from doing all of those things at the same time versus all of those things one at a time is important and cool to me but ultimately it's more important to my user because my app gives them what they want and it gives it to them quickly so the next thing I want is I want scalability and I'm gonna talk about scalability really quickly from two aspects a technological aspect and a human aspect so what do I want from it as a technological aspect I want it not to die and so luckily I was going to reference the blog post but Chris McCord used it in his keynote now almost all of us if not all of us have seen the two million connections to channels and how well it behaved and it could be wrong but I think the problem there was not a Phoenix one when they stopped the two million as it was trying to provision more ports and a neigh-neigh physical one which is which is incredible so from a technological standpoint my stack is scalable and especially since we're talking about real time features today my stack is very scalable so what do I mean from a human standpoint well from a human standpoint I want one that allows me to scale my insta flicker company I want one that allows me to scale my team and what what does that mean to me well I need I need immunity I need an ecosystem I need people that are passionate about what my apps built on if I choose a fab that has a grand total of 12 people that know it today I'm taking a pretty big risk that that's going to continue to being around for the lifestyle of my life of my company so I need something that allows people to be excited about what what they're working on and to really scale their knowledge as they go um I need a community that's enthused which you all are and I need a computer community with established patterns established libraries people have thought about it for a while and they've come up with things that are great things that are terrible and luckily Phoenix is built on a lick sir both have passionate communities and both are built on Erlang which has have been around for decades so I'm not working with something where in a month all of the things that they've come in all of the theories all of the practices that they've come in are completely obsolete and out the window so that is fantastic for me as far as deciding which framework to choose the last one is maintainability Emily the same thing I'm going to talk about maintainability from a server side from a technological static you man and it's very it's very similar it's very similar to me to scalability and that the server side component of maintainability comes with part of that comes with the language part of that comes with a stack part of that really ties into scalability how easy is this to maintain like I said with Supervisors getting into hot code reloading which Chris touched on and his code in his keynote today which sounds even more promising that already was with elixir having things like hot code reloading and allowing me to deploy features as I need to without destroying anyone's user experience is definitely great and my checklist of things that I want from my server-side app also maintainability is it kind of ties in a little bit to the human level but the the interest that maintain that the the ease with which I can ration about the code that I'm writing elixir is a beautiful language I it's the first language that I've had albeit I'm only 33 so you know my I've seen languages but I don't have a decades of experience going on here but in in the languages I've had the chance to write in only Ruby back in it's kind of early days really gave me gave me the same sense that I get when I look at a lick sir now in hiring people that are really passionate about the language that they write the expressive nature of the code itself and some of the really really cool innovative patterns that you see people coming up with that a year from now I can look at and still think that looks pretty awesome so that really ties in kind of the human level of maintainability as well that as well as the technological level itself so Phoenix checks every box that I have and then some that really gets like a check plus I guess for concurrency but that's neither here nor there so I summed it up as why choose Phoenix you should choose peenics because it's packed with all the features necessary to handle world-class mobile apps I'm gonna apologize in advance this is we're talking about Swift Swift was made by Apple I could not resist but add the following slide but wait we have one more thing WebSockets WebSockets really to me we're the cherry on top of Phoenix Phoenix if I'm building a JSON API is already great it's already great it's already a fantastic choice for our mobile backend phoenix comes with WebSockets out-of-the-box in the form of channels and WebSockets allow us to build real time applications that enable interactions from every device so to start with what on earth is a WebSocket well wikipedia tells us that a WebSocket is a protocol providing full duplex communication channels over a single TCP connection back to the shameless shameless self analysis here I definitely had to look up what on a full duplex meant and full duplex means allowing communication in both directions so from a human on Wikipedia level what does this mean for us this means we can establish one single connection and send and receive messages as much as we want as long as we have that connection established and that's pretty incredible that's that really is the engine that really is the heart at our real-time functionality if we have a hub whatever abstract thing we want to think that of that is being and we allow people no matter what device they're on to connect to that hub and then they can send and receive messages as much as they want once there connected that hub that really is what we're talking about when we're talking about real-time apps whether that be from the web from an iOS device from an Android device or four crazy other things like embedded hardware or whatever you want to talk about how does Phoenix interact with these these web sockets well Phoenix has an amazing web socket layer called channels this is another one of those things where my initial presentation had probably like 50 slides about how cool channels were and I would be here for about three hours so needless to say channels are awesome Phoenix comes with a WebSocket layer called channels out of the box and what does this mean for us why is it important that it comes out of the box these rails I can I can install a gem that gives me some form of WebSocket layer ignore rails 5 in action cable for a moment but uh what does this mean for me this means that I have zero additional code zero additional dependencies I really don't have anything else that I need to do I mentioned how great this was for just a normal flat JSON API layer for a mobile app if later on is the flicker takes off and I want to reload that feed in real time I want to reload user data in real time I have a tool to do it and I don't have to really do anything to start using it other than dig in and start writing code so let's talk about this is very very very brief very very abbreviated but what is what is a channel so we're gonna use chris McCord's phoenix chat example today which mirrors a lot of the examples from the actual guides themselves and so we're gonna build a rooms channel so we have a room channel here that's going to allow people to connect to it and as long as they connect to the lobby they're all going to be able to chat if however they want a private room in this case for simplicity sake we're just going to go ahead and boot them out and say you're unauthorised for that but once we get this implemented you could go on and add that feature if you wanted so what do I need the first thing that I need is I need a join function we need some way for somebody to join this channel so I have two defined here and we're gonna use pattern matching to decide whether the topic that they're attempting to join is the lobby or whether the topic is one of those private channels if it is the topic I'm going to tell it to do all of the things tell me ok and continue on its merry way if unfortunately it's a room but it's not a lobby go ahead and tell them they're not authorized to be in that room and we're going to move on the last really main function type feature that I want to deal with for today's chat is the handle in function for handling events so in this case I'm gonna handle in the new message event and I'm gonna do things like I'm gonna broadcast to the whole socket that there was a new message and pull off the user and the body from that message so it's easy to digest for everyone then I'm gonna be few boilerplate end lines here I'm gonna pass okay I'm gonna pull the body off and I'm gonna assign the user to the socket this is an abbreviated version of this channel there's definitely more things you could do handle out handle info this is not the entirety of the channel API by any stretch but this is more or less all that I need to start coming up with a functional channel that will allow people to chat which is pretty incredible given the brevity of this code so Chris actually did a good job in stings in already starting this topic today which was unexpected and awesome but what are some caveats to using WebSockets so none of these are reasons not to use WebSockets I think WebSockets are awesome and the real-time behaviour they power are awesome these are just some caveats of things to think about when you're either reaching for a client that allows you to use WebSockets or you're implementing your own and the first is missed messages and I quite honestly had come up with the tunnel example but now that's what chris said and i really have another one off the top of my head so we're gonna go ahead and continue using the tunnel example so I go through the tunnel I disconnect from the socket while I'm inside of that tunnel I'm any messages that were sent through that connection while I was going through the tunnel unless your application implements some form of persistence those messages are gone and I'm not going to receive them there's definitely numerous ways to fix this like I said with a either a client that goes at and implements this for you or with your own app implementing some form of persistence and if that's crucial to your design the next step is buffering and not necessarily Netflix buffering but in this case if I'm going through that tunnel and I'm typing and I'm typing messages I want an implementation that will create a buffer queue for me it will go ahead and once I've reached the other side of the tunnel and I've reestablished the same connection will go and go one-by-one through the buffer queue and send those messages giving me as limited of a user experience interruption as I can possibly have that really ties in the last one which is reconnection so I want a client that has some sane strategy for reconnecting to the socket if I go through that tunnel I don't want the user to have to really know that we disconnected or if they do have to do anything to reconnect to the socket as soon as we're able so I want a client that's gonna go ahead and implement some sane strategy for me to reconnect to the socket as soon as I can and like I said preserve the user experience as much as possible like I said none of these are reasons not to use WebSockets in any way these are just things that I would look for and make sure that if you're reaching for a client or implementing one they're somewhere in your mind or in the creator of the clients mind some way of solving each one of these the name of my talk is beyond the browser and why is that that is because WebSockets aren't just for the web this was really kind of the the cool moment for me when Swift first came out and Phoenix was first being built and I wanted some way to play with both of them so I've had to play with a way to get them both to interact and the Saints way that I thought of doing that was with WebSockets and it's it's no it's no mind-blowing notion it's nothing crazy it's extremely obvious but at the time it wasn't something that I had really ever played around with her I had given any thought to then anyone can connect to these WebSockets all major browsers now can there is right there's repositories libraries on iOS on Android there's numerous on both we're gonna do a starscream a little bit today I don't know though the clients in Java very well so there may be one that is obviously used other than these I'm gonna post all of these on github after so somebody please tell me if there's a much much much better way of dealing with WebSocket in Java than the couple that I have listed here but anyway it just seemed awesome to me that we're not just dealing with something that allows Chrome and Safari to interact together this really is any device but today we're dealing with iOS and we're dealing with Swift so I figured I'd talk about the three main clients I've had exposure to that really Mayor Mary Phoenix and Swift I've come across birdsong Phoenix WebSocket and Swift Phoenix client that I'll do a great job of allowing you to connect your Swift access to Phoenix there may the same thing there may be more or this was at the time that I was really coming up with these slides that these were the main ones that I found I don't mean to leave anyone off the list if anyone comes up with one later or has one now I would be happy to either add it to the slide or add it to any github discussion because the more the merrier full transparency I wrote the last one it is no better in any way than the other two and if you're planning on writing a swift app I heavily encourage you to look at all three of them and decide which one and which style works best for you but for today we're going to deal with swift Phoenix client because I wrote it and I'm more familiar with it so let's talk about Swift like I said I wish this could tell you all of the reasons that Swift is awesome and I really enjoy writing in Swift but this really is just a glance at Swift so that our demo seems a little more approachable Swift came on the scene in 2014 Apple debuted it at WWDC prior to that objective-c was the language of the land and just to clear up any confusion or any miss judgments of what I say objective-c has written some amazingly powerful world-class apps that have made people in the same ly wealthy and will continue to do that for a long time that said there's been a much heavier adoption to Swift in the fact that it seems you know in a small way like a lick sir did to be a language that allows me to be a little bit more expressive and a little easier to really digest and reason about then the objective-c acts were in the past and I should caveat a giant parentheses for some people in 2015 Swift was open source which was really a watershed moment in my humble opinion because while I liked Swift even before it was open source and I have an iPhone I enjoy I'm fine with Apple products but it's nice that one company is not really the shepherd of something that I'm devoting a lot of my time and resources to and ultimately my business if I'm writing my app in Swift 2016 today Swift is still awesome it would be even awesomer if I could write here that Swift is functional but that would be a lie because it's not I will say that there's a larger functional community and Swift than in most other languages non functional languages that I have had the pleasure of encountering there really is a lot of strong emotion and patterns around functional programming is Swift that I see kind of from a core level than some other apps and I will put a note out there I'm in no way associated with this there is a functional Swift book that you can look up at objc IO it is great it looks great I mean it'll talk way more about functional patterns and Swift than I could ever think of so I highly suggest that you check that out so what kind of basic types do we have in Swift obviously I have to I have to maybe not obviously I have to declare my types and Swift so Swift comes with very sane types none of these are really surprising even in I have a float I have double bool string and I have a character get to the last one in a second you'll notice that I put let in front of each one of these variable let implies immutability there's no rule but the established pattern of anything that I've ever had exposure to or anyone I've ever met is you always reach for let first and you let your compiler scream at you that you have to make something var before you make something mutable other than that the last kind of odd person out odd type out here depending on your background some people might have had exposure to this some people are not is an optional and when I'm declaring my types in Swift and int as an INT can only be an int unless it's an optional int and then it can be nil so if I make a type optional that means it can be nil and this really is pretty awesome just kind of going along with other languages where I have to define type because I as long as I have I'm dealing with not an optional or if I am dealing with an optional I've unwrapped it safely I know that my code is not nil and I know that I'm not gonna run any any into any unexpected no errors like I said not like world-changing but that really is a cool type and a cool feature that Swift offers so the thing that I thought we would do today is I thought iteration was pretty sane pretty pretty straightforward to showcase the lecture and then showcase Swift and how they both would deal with this this one programmatic principle it's a side before someone tweets it I am aware that their shorthand for both of these but I thought a little more straightforward today to showcase the non shorthand version of this particular instance in both elixir and Swift so if I have my elixir and I want to iterate here I have a it I've an array of numbers 1 2 & 3 so what I want to do I want to go over all of those numbers and I want something to give me the sum of all of the numbers that I have in my array so I'm going to go ahead here and reach in the Inu module I'm going to call reduce I'm going to reduce over the numbers I'm going to start with the initial value of 0 let them pass in a function this function takes the noon variable it takes our accumulator the new variable is the current value of the iteration we're on and the accumulator is the return value of the last iteration so what I want to do here is I want to say the accumulator plus noon in the end that will set the output of all of that to sum when I print it out I get 6 pretty straightforward pretty easy so at a swift deal with the same exact problem well here I have let numbers equal 1 2 3 I have the same numbers bucket I'm gonna define my sum variable here and I'm gonna set it to numbers dot reduce just like before I'm going to give it the initial value of 0 here's a slight difference though in Swift if the last if the last argument that I'm passing in here the last parameter is a closure if it's an anonymous function I can use this curly bracket syntax outside of the last parentheses this is basically I wanted to showcase this here today because in like the Swift Phoenix client code that will show later you'll see the same code used a lot for code that you want to execute after you've joined a socket or after an event it's been received over a channel I'm so usually in those cases it's the last callback that you call in that function so in this case we're going to do the same exact implementation we're going to call a CC plus a new print out the sum and the sum equal 6 I'm not trying to imply here that they're apples to apples by any Universal stretch from a lecture to Swift but only if you've had no exposure to Swift as compared to some of the objective-c that came before it it really is sane to reason about and pretty straightforward when you read it for a much more in-depth playing with Swift for demos first of all I would recommend you go to Apple has fantastic demos there's also a site ray winter lick calm it some examples of how to start Swift that from scratch but one of the greatest things that I like about playing with Swift is package with Xcode I get Swift playgrounds and this is just a file that I can open gives me a place to enter my Swift on the left and a place will show me the real time response on the right and this is pretty cool because I can do something as simple as the reduce example that I showed today and play with it or I can do things like concurrency and threading and swift and see how that behaves I can play with functional programming principles and it really is a playground where I can just play with Swift and see how the language or libraries work there's also an iOS app coming I don't think it's out yet but that could be wrong but ok so I always said only it is coming men to help learning Swift on the iPad that looks fantastic so without further ado let's get real-time Swift with Phoenix channels so I need two things I need Phoenix and I need Swift so for my Phoenix app like I said I'm using Chris mccords Phoenix Chad example on my server that's vanilla I didn't do anything to it if you're following all in later at home literally get clone mix depths get mix Phoenix that server and you've got the chat app that I'm using for this talk today on localhost 4000 so next I need my Swift app so I have Xcode I do went to file and a new project and I chose Swift as the language of my project like I said for anybody following along later this is just a single view app the next section deals with a package manager called cocoa pods I had thought about delving into it a little bit but there's many many many options for package managers on Swift the new Swift 3 is coming out with Swift package manager which is its own implementation there's cocoa pods which is what this is there's Carthage and there's also what my client began is which is literally just pulling the files physically into your app so there's multiple ways of dealing with this in this case we're gonna do with poke cocoa pods cocoa pods looks like adding a dependency to your Phoenix app or rails app kind of rubygems esque I'm gonna call pod in it from my root directory here of the project it's gonna go ahead and crate a pod file for me where I'm going to add pod Swift Phoenix client and then I'm gonna run pod install that will go ahead and import all of my dependencies Swift Phoenix client in this case so a Phoenix client has starscream as the dependency Starscream's really the underlying tool that we're going to use to establish our WebSocket connection and get any responses from that WebSocket and that's going to generate for me an XC workspace file that's what we're going to work with that includes the boilerplate code from my app as well as all of the pods all of the dependencies pulled in that I need to use so we have so we now have a swift app and we have a Phoenix app we're going to go over the code to make them talk to each other so please hold all judgments of my world class UI design until sometime later but we have a chat app and in this chat app we have a textview here with the text and that's gonna be our chat log I have a user named UI text field and I have a message UI text field I also have a send UI button and that's really it that's all we're gonna deal with it's a little hard to show especially at this resolution without looking really messy and really hard to follow but you can open up and split view my code and my UI my storyboard that I've got here control click to create what are called outlets or actions in our code that allow us to interact with our UI elements inside of our code so I've gone ahead and done that this is a like I said a single view there's only one view to this app this chat view and so there's only one view controller so we're gonna pop into our view controller and see what's there so like I said I have these four outlets here I have chat view which is our chat log that text view I have message field which is our message field I've user field which is our user field and I have the send button which is our UI button down here there's an IB action it's the send message action for what we want to do when we send the message I'm gonna wait and go over that at the end after we go over the rest the code the view controller so just hold off on that for a moment so I have a storyboard I have my UI I have my code I'm ready to go what do I need to do well if we if I want to deal with real-time behavior today I have to tell it where my socket is and so this we're going to use Phoenix socket to establish to accomplish this I don't to say let socket equals Phoenix doc socket tell it the domain import Minds running locally on 4,000 tell it the path and tell it the transport this doesn't actually join the socket this is just to find the address of where our socket is this is just what we're gonna use with Starscream to actually connect directly to the web socket here in just a moment as you saw with our Channel and as you've seen if you go to either Chris McCourt the Phoenix chat example itself or the guides I need a topic and so in this case we're going to do rooms lobby because if the default state my app should be that you can hop in and just start chatting with everybody so now I have my socket now I have my topic so inside of this view controller there's a function that comes a boilerplate function that it comes with called viewdidload stick with me here this is incredibly complex iOS development this will run when the viewdidload so the first thing that I want to do first thing that I want to do is I want to join the actual socket so I'm gonna call socket join I'm gonna pass at the topic rooms Lobby in this case I'm going to use this Phoenix dot message class here to construct a message in the in the manner that Phoenix is expecting saying status and joining and then the last element here that we're dealing with is a closure and this I can use this closed paren curly bracket syntax this passes in a channel and the first thing that I do is I'm gonna confirm that that channel mirrors up with my Phoenix that channel implementation if it doesn't horrible things happen and it explodes so the first thing that I want to do once I've actually connected to the socket I've landed in here I had a channel I want this to do something when I've joined this channel so I'm gonna set that chat logs output to you've joined the room once I do this we've now connected to the socket landing in confirmed that we have a channel that we're dealing with and said you've joined the room in the chat log and the users ready to chat that's really the the core behind what we're dealing with here the next couple of things are events that I want to handle once I am connected to that chatroom so the first thing that I want to do much like the channel example we saw with handle in is I want some way to deal with a new message so here I have channel that on new message I'm gonna pass in a message so here I have the next thing that I'm gonna have is a guard clause this guard calls looks works about like guard clauses would in any language it guards some expression some kind of data and if that doesn't match what I want I get the option to either manipulate the data or return and say screw it so I have a message I have my message has a user and that message has a body so if that's all true what I want to do is I want to format that message here I'm just gonna use square bracket username body newline you'll see the next two lines a couple places all this does is this takes whatever the value of that chat log is a pen the the new message that we've just formatted and resets the value of that chat log to what we just created by string by appending string from a user perspective all that does is shove whatever message we're passing through to the bottom of the chat log so that basically is how we're gonna handle running a new message the next two events that I've got here are what I want to do any users entered my room and what I want to do when there's an error so these both look very very very similar to new message for the user entered I'm gonna I'm gonna pass in a message in this case we're not actually pulling user names off of the server just for simplicity sake but you could absolutely do that here we're just going to go ahead and preset this to anonymous and we're gonna go ahead and append that to our chat log so it will say anonymous has entered the room mirroring what fenix chat example is doing right now for us the last thing that I want is if my connection breaks or something else terrible goes wrong in this case I want to tell the user hey by the way you're not connected anymore something terrible has gone wrong so if I get an error coming through here I'm gonna guard that I have a message that message has a body and if that's true I'm gonna make format a square bracket error whatever the body is followed by a new line I'm gonna have these same two lines again that I'm just going to append it to the bottom of our chat log so the user can know that something terrible has happened the last thing that I'm going to go over here is like I said I'm gonna go back up and we're going to go over this send a message Clause so by creating this action I had to identify an event that it should trigger it so this case I identified touch up inside which means that send button was tapped kind of in a traditional behavior so once that's tapped I want to execute this function so I want to construct a message I mean you finished that message to construct it like I said in a style that Phineas is gonna expect and pass in the text of the username field and is the body the text of the message field I'm gonna take that message that I've constructed and I'm gonna pass it in to Phoenix that payload to construct the payload for us to send along the socket so I'm gonna pass the topic through the airlock which like we said before is rooms Lobby an event new message so our channel knows how to deal with this and what it should do with this and the message that I've just created in the line above the last thing that I want to do now that I have the payload constructed has actually send it along the socket and reset the message field text to empty thus allowing the user to enter their next chat message so let's see how this all works as with as with everything I have to wait for a moment for Xcode alright great so we have anonymous entered over here we have you've joined the room over there Phoenix is currently sending off a system ping which were outputting that way we can see that both are currently getting the ping this after this point is pretty sane I can send a message here and receive it on all devices that are connected including our Swift app likewise I can send a message back so I will readily admit that this is not whatsapp this isn't gonna make me a billion dollars but with about 65 to 70 lines of code I have a running real-time chat app connected to my Phoenix instance fairly quickly and fairly easily the other nice thing about this is it is fairly reliable fairly stable you can actually send this app into background mode and send messages come back here reopen your app I proceeded to continue getting the messages that I missed also we'd implemented that error behavior and if I either go through the tunnel or something awful happens yeah yeah it that has to do with the actual implementation of the iOS app itself there's nothing that Swift enix client is doing is that correct no sorry the question was when the app went into background mode and came back I have is there any implementation required on our end to facilitate getting the data back from our app and the answer is no there's not that actually has to do with the architecture that our iOS device has when a user when a app enters background mode that it's still able to receive messages sent along this socket so here we have a whole bunch of bad bad error messages I can read go ahead and run run our Phoenix server again this has gone ahead and decided to reconnect to the socket because it's available again it's told me you've rejoined the room and I proceed to see my pings again and I can receive messages as I did before so like I was like I said what seemed cool to me when I was playing with this when I was implementing this is with all of 67 lines of code of not production code when all of 67 lines of code I have a real-time iOS chat app that's talking to my Phoenix chat app so to sum up Phoenix and Swift really are a match made in heaven what does Phoenix give me Phoenix gives me a framework that's real-time fault tolerant fast concurrent stable easy to learn and easy to maintain and that there's some amazing real-time possibilities when you look into the future of Phoenix and Swift together I'm sure there's many more than just this but a few examples that I thought of were gaming such as multiplayer games scoreboards chat features I know when I was playing this when I was first creating this about the same amount of code as I had on this chat app I created a little dummy app called Rockets on iOS that is not available on the App Store it was a terrible game but it was fun to play with and all it was was a space scene that allowed every everyday that connected to the socket to control a little rocket and you could all fly around space controlling rockets it was a terrible game because you could not shoot each other you could not run into each other you could not do anything other than fly around rockets in space so that was cool but what seemed cooler to me was I could connect to the Phoenix chat example use the same backend and in the log I could see all of the coordinate trajectories of all of the Rockets that were connected to that game and all of the moves that all of the players were making on a makeshift web kind of admin dashboard that I was looking it was just the log of that Phoenix web chat that's what really seemed cool to me that theoretically I could make a canvas game I could do whatever I could think of and allow people to interact with they see the actions from a running Swift game on my web browser you can do stuff like in-app notification set up socket based notifications with fall backs in our case APNs which is Apple's notification system but I could create a socket system that my web users my Android users and my Swift users would all get a SOT a notification at the same time or live content reloading things like comments Trello Basecamp think of anything like that I know we have a client with a pretty complex dashboard and a boatload of JSON that comes with it well currently that JSON is being served up via socket connection on to a dashboard that's running a web app once that's completed we already have plans to create a Swift client for them and I am already thrilled that I can I can do something similar to this make the connection of the web socket and I will instantly have real-time dashboard data dashboard JSON coming to me anytime that a change is received that a change needs to happen to that dashboard and my Swift code is going to be very very small to do something seemingly complex so there's more possibilities than just this I think there's some amazing apps that you can create with Phoenix and Swift with some really amazing real-time interactions if you'd like to learn more I've posted all of this on a speaker deck at speaker deck comm slash David stump and after this sometime today or tomorrow I will post all of this to elixir Kampf I'll have the Phoenix chat example I used just for posterity in case it changes I have my swift app and I have all of the code examples and my slides on github as well if you'd prefer there lastly and sincerely thank you I'm ecstatic that I got to talk to you today my hope I told you the goal of my talk as a whole was to convince you that all this is great and you could build really cool acts with Phoenix and Swift my personal goal to be quite honest is to enthuse people to learn more about what's possible with Phoenix Swift and WebSockets and for somebody here or somebody later to come up with some awesome ways of doing things that are far beyond what I can come up with and I what I know and I get to learn from all of you or somebody in the future that would be that would be mind-blowing ly amazing for me so lastly like I said have a fantastic rest of your conference I know you're running short on time so if you have any questions or want to talk please find me or if you just want to say hi I would love that so thank you very much and have a good

Channel: Confreaks

Views: 4,446

Rating: 4.9200001 out of 5

Keywords:

Id: 7vBc0Q-nwUI

Length: 43min 4sec (2584 seconds)

Published: Mon Sep 26 2016