Gain insights into building scalable backend applications with Elixir, OTP, and Phoenix. Learn about persistent connections via Phoenix Channels, and explore distinct, decoupled application layers.

Functional Web Development with  Elixir, OTP and Phoenix by The Pragmatic Programmer_ .png

elixir_islands_test.tar.gz

elixir-app

pheonix-app

elixir-app-guesses

island-interface

phoenix-app-compiled

phoenix-app-iex

phoenix-app-form

phoenix-app-new-module

client-connection

presence

phoenix-app-final

without-presence

Elixir and OTP provide exceptional tools to build rock-solid backend applications that scale. In this course, you’ll build a web application in a radically different way, with a backend that holds application state. You’ll use persistent Phoenix Channel connections instead of HTTP’s request-response, and create the full application in distinct, decoupled layers.

In Part 1, you’ll start by building the business logic as a separate application, without Phoenix. You’ll model the application domain with Elixir functions and simple data structures.

In Part 2, you’ll add in the GenServer Behaviour to make managing in-memory state a breeze. 

In Part 3, you’ll build a web interface with Phoenix where you’ll use Phoenix Channels to establish persistent connections between the stateful server and a stateful front-end client.

Needless to say, you’re going to love this way of building web apps!

Functional Web Development with Elixir, OTP and Phoenix

# Client-side code

Our goal in this section is to write a client code that can invoke the `join/3` function we now have on the server. There are a few steps to make that happen:

- We need to define a client socket and use it to establish a connection to the socket on the server. Then, we need to define a new Channel object on the client, and use it to join the Channel on the server.

- Phoenix ships with **`phoenix.js`**—a JavaScript file that knows all about working with sockets and Channels. It’s indispensable for writing JavaScript client code for Channels, and our first task is to make it available in the browser’s console window.

ls
mix phx.new islands_interface --no-ecto
cp -v ./islandsInterface/mix.exs ./islands_interface/
cp -v ./islandsInterface/islands_interface_web/router.ex ./islands_interface/lib/islands_interface_web
cp -v ./islandsInterface/islands_interface_web/controllers/page_controller.ex ./islands_interface/lib/islands_interface_web/controllers
cp -v ./islandsInterface/islands_interface_web/templates/page/index.html.eex ./islands_interface/lib/islands_interface_web/templates/page
cp -v ./islandsInterface/islands_interface_web/templates/layout/app.html.eex ./islands_interface/lib/islands_interface_web/templates/layout
cp -v ./islandsInterface/islands_interface_web/channels/user_socket.ex ./islands_interface/lib/islands_interface_web/channels
cp -v ./islandsInterface/islands_interface_web/channels/game_channel.ex ./islands_interface/lib/islands_interface_web/channels
cp -v ./islandsInterface/assets/js/app.js ./islands_interface/assets/js/
#cp -v ./islandsInterface/assets/js/socket.js ./islands_interface/assets/js
cp -R ./islandsInterface/assets/js/ ./islands_interface/assets/
cp -v ./islandsInterface/assets/brunch-config.js ./islands_interface/assets/
cp -v ./islandsInterface/assets/package.json ./islands_interface/assets/
cp -v ./islandsInterface/assets/css/app.css ./islands_interface/assets/css/
cd ./islands_interface/
iex -S mix phx.server


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

Let’s go to Player 1’s JavaScript console and acquire the `phoenix.js` file.

> **Note:** Open the widget link in two separate browser tabs and open the developer tools. Run the following commands in the JavaScript console.

We need to instantiate a new socket object to establish a connection from the client to the channel running on the server. As we do that, we need to pass it a path to the socket and also any parameters we want to pass in as we establish a connection. Since we don’t need to pass in any parameters, we use a blank object.

Once we have the socket object, we can have it establish a connection to the path we defined when we created it:

```
socket.connect()
```

Now that we’re connected, we need to define a new Channel object before we’re ready to start pushing messages down the server. To do that, we invoke the `socket.channel` function with the topic-subtopic and some parameters.

The general form of that call looks like this:
```
var new_channel = socket.channel("topic:subtopic", {some_key: "some_value"})
```
The parameters are important. The ones we specify here are the ones that will get passed to the `join/3` function in the `GameChannel`, even if we pass other parameters into the client’s `join` function later.

To make this a little neater and more flexible, let’s wrap that `socket.channel` call in a new function called `new_channel`. It will take a subtopic and the screen name of the player who wants to join. The one parameter we want to send into the channel object itself is the player’s screen name.

Go ahead and type the function definitions in at Player 1’s console prompt:
```
function new_channel(subtopic, screen_name) {
  return socket.channel("game:" + subtopic, {screen_name: screen_name});
}
```
Now, we can invoke the `new_channel` function with a player’s name to generate a new Channel object. This will already have the parameters we specified baked into it:
```
var game_channel = new_channel("moon", "moon") 
```
If we click on the `game_channel` object in the console to inspect it, we see the `params` object itself:
```
game_channel 
```
This is exactly what we want.

There’s one more function we need to define in Player 1’s console— the `join` function itself.

As a practical matter, the `game_channel` object already has a `join` function. We could call it directly, but the return value would be an object that, on the face of it, doesn’t tell us whether or not it works.

In order to see that something is really happening in the JavaScript console, we define a wrapper function around the channel’s `join` function:

```
function join(channel) { 
  channel.join()
    .receive("ok", response => {
        console.log("Joined successfully!", response)
      })
    .receive("error", response => {
       console.log("Unable to join", response) })
}
```

Inside our wrapper function, we chain receive function calls to check for a return of `"ok"` or `"error"` and log out a different message depending on which one we get.

Now that we have our own `join` function defined, we can invoke it, and if all goes well, this will invoke the `join/3` function we wrote in the channel.

This message path is going to be from Player 1 to the channel and only back to Player 1, like this:

Let's understand how to write code for the client-side.

Introduction

Mapping Our Route

Model Data and Behavior

Working of State Machines

Add OTP for Concurrency and Fault Tolerance

Process Supervision for Recovery

Generate a New Web Interface with Phoenix

Create Persistent Connections with Phoenix Channels

Appendix

Establish a Client Connection

Client-side code