Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Realtime Web Apps with Elixir and Phoenix

Elixir and Phoenix are a winning combination when it comes to creating realtime web applications.

  • Be the first to comment

Realtime Web Apps with Elixir and Phoenix

  1. 1. Realtime Web Apps with Elixir and Phoenix Brian P. Hogan
  2. 2. Brian P. Hogan @bphogan Today • Build a simple text-collaboration web app • Explore a little Elixir • Explore some ES6. Today you’ll learn about what Phoenix is and how it works as we work through a web application together. You’ll also learn a little about the Elixir language, and we’ll see some ES6 too, since Phoenix supports that out of the box.
  3. 3. Brian P. Hogan @bphogan Me? • I love to make web stuff • I love to make music • I love to teach So, who am I? I’m a web developer and a teacher. I’m also a book author. I’ve been working with Phoenix for about 6 months now and Elixir for just under a year. I do most of my primary development with Ruby on Rails.
  4. 4. Brian P. Hogan @bphogan • A functional programming language. • Built on Erlang’s virtual machine. • Multiprocessor and fast. • Elegant. So what’s Elixir? It’s a functional programming language that’s really new. It borrows some syntactical things from Ruby but leverages the speed and stability of Erlang. It’s a very powerful language because it can also give us access to the vast array of Erlang libraries available.
  5. 5. Brian P. Hogan @bphogan • An MVC web framework • Built for the “internet of things” • Scalable and fast! • Fault-tolerant • Built-in support for web sockets Phoenix is a web framework created by Chris McCord, designed to handle many connections and be scalable and fault tolerant. It’s nearing version 1.0 and has some pretty robust features including out-of-the-box support for web sockets.
  6. 6. Brian P. Hogan @bphogan Our App Today I’m going to build a small application that lets us create a text editor that broadcasts its content across the web. Anyone with the editor can type text and push that to any other connected editor.
  7. 7. Brian P. Hogan @bphogan Getting Elixir and Phoenix • Install Elixir from • Install Phoenix from • $ mix <path_to_app> • $ cd <path_to_app> • $ mix phoenix.server To get started with Phoenix, you first need to install Elixir, which will have you install Erlang. Then you need to install Phoenix, which isn’t terribly hard now, but will get much easier in about a month. Just follow the directions on the Phoenix web site for now. Once you have things installed you run a command to create a new app, then change to the new directory that ets created and start the server.
  8. 8. Brian P. Hogan @bphogan The whole process looks like this. The task creates the folder structure for you and sets up dependencies. Phoenix apps use Brunch to manage the client- side assets, which means we have support for Sass and Babel built in.
  9. 9. Brian P. Hogan @bphogan Phoenix Router Controller Controller View View Template Template Template Channel Phoenix supports the traditional MVC pattern on the web, where we have a router route requests to a controller which then prepares a view and renders a template. In Phoenix, Views control what gets rendered, and Templates are what people see.
  10. 10. Brian P. Hogan @bphogan Phoenix Router Controller Controller View View Template Template Template Channel We can also have the view render some data like JSON or XML without using a template by creating our own custom handlers.
  11. 11. Brian P. Hogan @bphogan Phoenix Router Controller Controller View View Template Template Template Channel Phoenix also has Channels, which make it possible to send realtime data to connected clients using Websockets. Those clients can send data back to these channels in realtime as well. Clients subscribe to a Topic within a channel, and the server manages the connections.
  12. 12. Brian P. Hogan @bphogan Elixir Basics • Basic Types • Pattern Matching • Functions • Piping Let’s look at the basics of Elixir. This isn’t an Elixir talk, but we have some time while our app does its initial compilation.
  13. 13. Brian P. Hogan @bphogan Basic Types 1 # integer
 0x1F # integer
 1.0 # float
 true # boolean
 :atom # atom / symbol
 "elixir" # string
 [1, 2, 3] # list
 {:ok, “200 OK”} # tuple Elixir has these data types, and a few more that we’re not gonna talk about today. It has integers, floating point numbers, booleans, atoms, which are just pieces of data we can use to label things. It also has strings. Finally, it has lists, which act like arrays, and tuples. Lists are linked-lists, so modifying them is easy if we add to the front, and tuples are usually reserved for fixed sets of data. Lots of functions return tuples in Elixir.
  14. 14. Brian P. Hogan @bphogan Pattern Matching # Variable assignment
 age = 42 Elixir makes heavy use of pattern matching. First, it uses pattern matching to assign variables. When we assign the value of 42 to the “age” variable, Elixiir figures out how to make the left hand side match the right hand
  15. 15. Brian P. Hogan @bphogan Pattern Matching # Variable assignment
 age # We can destructure lists
 [first, second, third] = [1,2,3] We can use that to break apart lists into individual variables. We just assign a list of variables to a list of values.
  16. 16. Brian P. Hogan @bphogan Pattern Matching # Variable assignment
 age # Many functions return tuples we can parse
 {number, junk} = Float.parse("123abc") # We can destructure lists
 [first, second, third] This works for tuples too. The Float.parse function returns a two-value tuple containing the numerical piece followed by the non-numerical part. We can capture that result into variables so we can easily discard the piece we don’t care about.
  17. 17. Brian P. Hogan @bphogan Pattern Matching # Variable assignment
 age # We can even pattern match strings
 "/products/" <> id = "/products/1234" # Many functions return tuples we can parse
 {number, junk} # We can destructure lists
 [first, second, third] Finally, we can even do this with strings. We can pluck out part of a string. The <> is just the string concatenation character.
  18. 18. Brian P. Hogan @bphogan Functions # A simple function
 add = fn(first, second) -> first + second end
 # A simple function using pattern matching
 tax = fn
 (amount, "WI") -> amount * 0.05
 (amount, "MN") -> amount * 0.06
 (amount, 0) -> 0
 We can define some quick functions using the fn keyword. We can even define functions that match different incoming arguments. Depending on which signature matches, the function will run the appropriate code. In Elixir, the last expression executed is the return value. No need for explicit returning.
  19. 19. Brian P. Hogan @bphogan Functions defmodule Math do
 def add(first, second) do
 first + second
 defmodule Tax do
 def calculate(amount, "WI"), do: amount * 0.05
 def calculate(amount, "MN"), do: amount * 0.06
 def calculate(amount, state), do: amount
 end Our functions are usually organized into modules. We can define methods with a block syntax, or, if the method body only has one line, we can use a shorter one-line syntax. It’s our choice.
  20. 20. Brian P. Hogan @bphogan Piping # Add up only even numbers
 Enum.reduce(Enum.filter([1,2,3,4,5,6], fn(x) -> rem(x, 2) == 0 end), 0, fn(x, acc) -> x + acc end )
 Let’s add up all the even numbers in a list. First, we have to filter out all the even numbers by using Elixir’s Enum.filter function. Then we use Enum.reduce to sum up the elements in the list. Filter and reduce are pretty common nowadays, as you can use them in JavaScript, Ruby, and many other languages. But this is pretty hard to read. We could resort to using intermediate variables, but that isn’t the “functional” way. We want to make data flow through our program without using state unless we have no choice. And we do have a choice here.
  21. 21. Brian P. Hogan @bphogan Piping # Add up only even numbers
 Enum rem(x, 
 # Piping cleans this up
 |> Enum.filter(fn(x) -> rem(x, 2) == 0 end)
 |> Enum.reduce(0, fn(x, acc) -> x + acc end) But we can rearrange this using Pipes. In Elixir, we can pipe the output of one function to the first argument of another function. This lets us express our algorithms as a series of steps instead of a series of nested parentheses, resulting in more readable code.
  22. 22. Brian P. Hogan @bphogan Let’s Build An App!
  23. 23. Brian P. Hogan @bphogan Where to go next? • Programming Elixir ( elixir/programming-elixir) • #elixir-lang on IRC (Freenode) • Phoenix Guides ( v0.11.0/docs/overview)
  24. 24. Brian P. Hogan @bphogan Thanks! • Twitter: @bphogan •