ElixirConf 2016 - From Front-End to Full Stack with Elixir & Phoenix

ElixirConf 2016
From Front-End to Full Stack with Elixir & Phoenix
From Front-End
to Full Stack
With Elixir & Phoenix

View Slide

ElixirConf 2016
bit.ly/front-end-to-full-stack

View Slide

ElixirConf 2016
LAUREN TAN

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
! SUGARPIRATE_
" POTETO

View Slide

ElixirConf 2016
ZELDA

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
A long time ago in a galaxy
far, far away….

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
☠

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
JavaScript

View Slide

ElixirConf 2016
let foo = [1, 2, 3, 4, 5];
let bar = foo.map((n) => n + 1); // [2, 3, 4, 5, 6]
let baz = bar.filter((n) => n >=3 && n <= 5); // [3, 4, 5]
let qux = baz.reduce((n, el) => n += el); // 12
console.log(foo); // [1, 2, 3, 4, 5]

View Slide

ElixirConf 2016
let f = R.pipe(Math.pow, R.negate, R.inc);
f(3, 4); // -(3^4) + 1

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
MVC

View Slide

ElixirConf 2016
ember-changeset
https://github.com/DockYard/ember-changeset

View Slide

ElixirConf 2016
{{dummy-form
changeset=(changeset user EmployeeValidations)
submit=(action "submit")
rollback=(action "rollback")
}}

View Slide

ElixirConf 2016
https://facebook.github.io/react

View Slide

ElixirConf 2016
http://redux.js.org/

View Slide

ElixirConf 2016
I. Learn You Some Elixir for Great Good!
II. Phoenix is Not Rails
III.OOPs

View Slide

ElixirConf 2016
Elixir

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
https://www.youtube.com/watch?v=rRbY3TMUcgQ

View Slide

ElixirConf 2016
Domain Logic
Domain Logic
Domain Logic
Domain Logic
Web Umbrella App

View Slide

ElixirConf 2016
https://www.manning.com/books/elixir-in-action
https://www.manning.com/books/the-little-elixir-and-otp-guidebook

View Slide

ElixirConf 2016
|>i|>e

View Slide

ElixirConf 2016
foo(bar(baz(123), 456), 789)

View Slide

ElixirConf 2016
123
|> baz()
|> bar(456)
|> foo(123)

View Slide

ElixirConf 2016
Sugar?

View Slide

ElixirConf 2016
Small Functions

View Slide

ElixirConf 2016
def serialize(user) do
user
|> serialize_attributes()
|> serialize_relationships()
|> to_json()
end

View Slide

ElixirConf 2016
def validate_presence(input) do
if input == "" do
"Can't be blank"
end
input
end

View Slide

ElixirConf 2016
Pattern Matching

View Slide

ElixirConf 2016
def validate_presence(""), do: {:err, "Can't be blank"}
def validate_presence(input), do: input

View Slide

ElixirConf 2016
defmodule MyPlug do
import Plug.Conn
def init(opts), do: opts
def call(conn, currency: currency) do
case currency do
"USD" -> assign(conn, :greeting, "murica")
"CAD" -> assign(conn, :greeting, "eh?")
"AUD" -> assign(conn, :greeting, "oi mate")
_ -> conn
end
end
end

View Slide

ElixirConf 2016
defmodule MyPlug do
import Plug.Conn
def call(conn, currency: currency) do
greet(conn, currency)
end
def greet(conn, "USD"), do: assign(conn, :greeting, "murica")
def greet(conn, "CAD"), do: assign(conn, :greeting, "eh?")
def greet(conn, "AUD"), do: assign(conn, :greeting, "oi mate")
def greet(conn, _), do: conn
end

View Slide

ElixirConf 2016
defmodule WebhookMailer do
use Phoenix.Swoosh, view: MyApp.EmailView, layout: {MyApp.LayoutView, :email}
alias MyApp.User
def webhook(topic, %User{first_name: first_name, last_name: last_name, email: email}) do
title = title_for(topic)
new
|> to({"#{first_name} #{last_name}", email})
|> from({"Patrick", "[email protected]"})
|> subject(title)
|> render_body("webhook.html", %{title: title, first_name: first_name})
end
# ...
end

View Slide

ElixirConf 2016
defp title_for("customer_created"),
do: "Created account successfully"
defp title_for("customer_transfer_created"),
do: "Transfer created"
defp title_for("customer_transfer_cancelled"),
do: "Transfer cancelled"
defp title_for("customer_transfer_failed"),
do: "Transfer failed"
defp title_for("customer_transfer_completed"),
do: "Transfer completed"
defp title_for("customer_funding_source_added"),
do: "Funding source added"
defp title_for("customer_funding_source_removed"),
do: "Funding source removed"
defp title_for("customer_verified"),
do: "Your account was verified"
defp title_for("customer_suspended"),
do: "Your account was suspended"
defp title_for("customer_verification_documentation_needed"),
do: "Documentation needed"
defp title_for("customer_verification_documentation_uploaded"),
do: "Documentation uploaded"
defp title_for("customer_verification_documentation_approved"),
do: "Documentation approved"
defp title_for(message), do: message

View Slide

ElixirConf 2016
Recursion

View Slide

ElixirConf 2016
{
"id": "1",
"foo": {
"bar": {
"qux": "hello world"
},
"baz": 123
}
}

View Slide

ElixirConf 2016
defmodule Json do
def flatten(%{} = json) do
json
|> Map.to_list() # [foo: %{bar: %{qux: "hello world"}, baz: 123}, id: "1"]
|> to_flat_map(%{})
end
def flatten(%{} = json) when json == %{}, do: %{}
# ...
end

View Slide

ElixirConf 2016
bae's case

View Slide

ElixirConf 2016
defp to_flat_map([], acc), do: acc

View Slide

ElixirConf 2016
Add to accumulator

View Slide

ElixirConf 2016
defp to_flat_map([{_k, %{} = v} | t], acc) do
v
|> Map.to_list()
|> to_flat_map(to_flat_map(t, acc))
end

View Slide

ElixirConf 2016
Flatten all the things

View Slide

ElixirConf 2016
defp to_flat_map([{k, v} | t], acc) do
to_flat_map(t, Map.put_new(acc, k, v))
end

View Slide

ElixirConf 2016
%{id: "1", foo: %{bar: %{qux: "hello world"}, baz: 123}}
|> Json.flatten()
|> IO.inspect()
# %{baz: 123, id: "1", qux: "hello world"}

View Slide

ElixirConf 2016
defmodule Json do
def flatten(%{} = json) when json == %{}, do: %{}
def flatten(%{} = json) do
json
|> Map.to_list()
|> to_flat_map(%{})
end
defp to_flat_map([{_k, %{} = v} | t], acc), do: to_flat_map(Map.to_list(v), to_flat_map(t, acc))
defp to_flat_map([{k, v} | t], acc), do: to_flat_map(t, Map.put_new(acc, k, v))
defp to_flat_map([], acc), do: acc
end

View Slide

ElixirConf 2016
Data Types
https://engineering.appcues.com/2016/02/02/too-many-dicts.html

View Slide

ElixirConf 2016
Maps

View Slide

ElixirConf 2016
%{
"data" => %{
"type" => "articles",
"id" => "1"
}
}

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
%{
id: "1",
name: "Bob"
}

View Slide

ElixirConf 2016
Structs

View Slide

ElixirConf 2016
defmodule Employee do
@enforce_keys [:id]
defstruct id: nil, name: nil
@type t :: %Employee{id: pos_integer, name: String.t}
end
defmodule Team do
defstruct name: nil, employees: []
@type t :: %Team{name: String.t, employees: [Employee.t, ...]}
end

View Slide

ElixirConf 2016
defmodule Employee do
# ...
def promote(%Employee{salary: salary} = employee, pay_rise) do
%{employee | salary: round(salary * (1 + pct_increase))}
end
end
defmodule Team do
# ...
def promote_all(%Team{employees: employees}, bonus) do
Enum.map(employees, &(Employee.promote(&1, bonus)))
end
end

View Slide

ElixirConf 2016
bob = %Employee{id: "1", name: "Bob", salary: 80_000}
jane = %Employee{id: "2", name: "Jane", salary: 100_000}
team = %Team{name: "Accounting", employees: [bob, jane]}
# %Team{employees: [%Employee{id: "1", name: "Bob", salary: 80000},
# %Employee{id: "2", name: "Jane", salary: 100000}], name: "Accounting"}
Team.promote_all(team, 0.2) # 20% pay rise
# [%Employee{id: "1", name: "Bob", salary: 96000},
# %Employee{id: "2", name: "Jane", salary: 120000}]

View Slide

ElixirConf 2016
Tuples

View Slide

ElixirConf 2016
{:ok, result}

View Slide

ElixirConf 2016
{:ok, result}
{:err, "message"}

View Slide

ElixirConf 2016
defmodule Foo do
def serialize(user) do
with {:ok, serialized} {:ok, serialized} do: to_json(serialized)
end
def serialize_attributes(user), do: {:ok, user}
def serialize_relationships(user), do: {:ok, user}
def to_json(map), do: Poison.encode!(map)
end

View Slide

ElixirConf 2016
Keywords

View Slide

ElixirConf 2016
def to_currency(value, currency: "USD", cents?: cents?), do: # ...

View Slide

ElixirConf 2016
Protocols

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
defmodule Team do
# ...
defimpl Enumerable do
def count(%Team{employees: employees}), do: {:ok, length(employees)}
end
end

View Slide

ElixirConf 2016
team
# %Team{employees: [%Employee{id: "1", name: "Bob", salary: 80000},
# %Employee{id: "2", name: "Jane", salary: 100000}], name: "Accounting"}
Enum.count(team)
# 2

View Slide

ElixirConf 2016
defmodule Team do
# ...
defimpl Enumerable do
def count(%Team{employees: employees}), do: {:ok, length(employees)}
def member?(_, _), do: {:error, __MODULE__}
def reduce(%Team{employees: employees}, acc, fun), do: do_reduce(employees, acc, fun)
# default list reducer
defp do_reduce(_, {:halt, acc}, _fun), do: {:halted, acc}
defp do_reduce(list, {:suspend, acc}, fun), do: {:suspended, acc, &do_reduce(list, &1, fun)}
defp do_reduce([], {:cont, acc}, _fun), do: {:done, acc}
defp do_reduce([h | t], {:cont, acc}, fun), do: do_reduce(t, fun.(h, acc), fun)
end
end

View Slide

ElixirConf 2016
bob = %Employee{id: "1", name: "Bob", salary: 10_000}
jane = %Employee{id: "2", name: "Jane", salary: 20_000}
team = %Team{name: "Accounting", employees: [bob, jane]}
Enum.member?(team, bob)
# true
Enum.map(team, fn e -> e.name end)
# ["Bob", "Jane"]
Enum.max_by(team, fn e -> e.salary end)
# %Employee{id: "2", name: "Jane", salary: 20000}

View Slide

ElixirConf 2016
defmodule Team do
# ...
def promote_all(%Team{employees: employees}, bonus) do
Enum.map(employees, &(Employee.promote(&1, bonus)))
end
end

View Slide

ElixirConf 2016
defmodule Team do
# ...
def promote_all(%Team{} = team, bonus) do
Enum.map(team, &(Employee.promote(&1, bonus)))
end
end

View Slide

ElixirConf 2016
Behaviours

View Slide

ElixirConf 2016
Interface

View Slide

ElixirConf 2016
defmodule Request do
defstruct headers: %{}, body: %{}
end

View Slide

ElixirConf 2016
defmodule Validator do
@callback validate(request :: Request.t, attribute :: :atom) :: %{}
@callback valid?(value :: any) :: boolean
@optional_callbacks valid?: 1
end

View Slide

ElixirConf 2016
defmodule Validator.Presence do
@behaviour Validator
def validate(%Request{body: body}, attribute) do
valid?(Map.get(body, attribute))
end
def valid?(nil), do: false
def valid?(%{} = map) when map === %{}, do: false
def valid?([]), do: false
def valid?(_), do: true
end

View Slide

ElixirConf 2016
warning: undefined behaviour function validate/2 (for behaviour Validator)
lib/examples/behaviours.ex:10
warning: undefined behaviour function valid?/1 (for behaviour Validator)
lib/examples/behaviours.ex:10

View Slide

ElixirConf 2016
# behaviours.ex:15: The call 'Elixir.Map':get([email protected]::[],[email protected]::any()) will
# never return since the success typing is (map(),any()) -> any()
# and the contract is (map(),key()) -> value()

View Slide

ElixirConf 2016
$ mix dialyzer
https://github.com/jeremyjh/dialyxir

View Slide

ElixirConf 2016
@spec
https://medium.com/@barruumrex/seeking-simple-satisfaction-2a098902ddff

View Slide

ElixirConf 2016
Macros

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
Elixir is written in Elixir

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
elixir/lib/elixir/src/elixir_bootstrap.erl

View Slide

ElixirConf 2016
# Use elixir_bootstrap module to be able to bootstrap Kernel.
# The bootstrap module provides simpler implementations of the
# functions removed, simple enough to bootstrap.
import Kernel, except: [@: 1, defmodule: 2, def: 1, def: 2, defp: 2,
defmacro: 1, defmacro: 2, defmacrop: 2]
import :elixir_bootstrap
defmodule Kernel do
# ...
end

View Slide

ElixirConf 2016
Erlang compiles Elixir

View Slide

ElixirConf 2016
-export(['MACRO-def'/2, 'MACRO-def'/3, 'MACRO-defp'/3, 'MACRO-defmodule'/3,
'MACRO-defmacro'/2, 'MACRO-defmacro'/3, 'MACRO-defmacrop'/3,
'[email protected]'/2, '__info__'/1]).

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
Kernel.SpecialForms

View Slide

ElixirConf 2016
defmacro unquote(:%{})(args), do: error!([args])

View Slide

ElixirConf 2016
expand({'%{}', Meta, Args}, E) ->
elixir_map:expand_map(Meta, Args, E);

View Slide

ElixirConf 2016
expand_map(Meta, [{'|', UpdateMeta, [Left, Right]}], E) ->
{[ELeft | ERight], EA} = elixir_exp:expand_args([Left | Right], E),
validate_kv(Meta, ERight, Right, E),
{{'%{}', Meta, [{'|', UpdateMeta, [ELeft, ERight]}]}, EA};
expand_map(Meta, Args, E) ->
{EArgs, EA} = elixir_exp:expand_args(Args, E),
validate_kv(Meta, EArgs, Args, E),
{{'%{}', Meta, EArgs}, EA}.

View Slide

ElixirConf 2016
:math.pi
# 3.141592653589793

View Slide

ElixirConf 2016
:maps.new() === %{}
# true

View Slide

ElixirConf 2016
defmodule CowSay do
defmacro __using__(_) do
quote do
def cowsay(str) do
"""
#{make_line("_", String.length(str))}
< #{str} >
#{make_line("-", String.length(str))}
\\ ^__^
\\ (oo)\\_______
(__)\\ )\\/\\
||----w |
|| ||
"""
|> IO.puts()
end
defp make_line(char, len), do: String.duplicate(char, len + 1)
end
end
end

View Slide

ElixirConf 2016
defmodule Bob do
use CowSay
end
Bob.cowsay("It's me Bob")

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
https://pragprog.com/book/cmelixir/metaprogramming-elixir

View Slide

ElixirConf 2016
III.OOPs

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
Pipelines

View Slide

ElixirConf 2016
lib/my_app/endpoint.ex

View Slide

ElixirConf 2016
conn

View Slide

ElixirConf 2016
conn
conn
Endpoint
Router Controller
DB
Pipeline
200 OK
Ecto
View

View Slide

ElixirConf 2016
Phoenix is a pipeline

View Slide

ElixirConf 2016
Composed of pipelines

View Slide

ElixirConf 2016
Made out of plugs

View Slide

ElixirConf 2016
And functions

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
Plug

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
def my_plug(conn, _opts) do
conn
end

View Slide

ElixirConf 2016
defmodule MyApp.Authorization do
import Plug.Conn
def call(conn, opts) do
# ...
end
end

View Slide

ElixirConf 2016
defmodule MyApp.Router do
use MyApp.Web, :router
pipeline :authorized do
plug MyApp.Authorization
end
scope "/api", MyApp do
pipe_through :authorized
scope "/v1", Api.V1 do
get "/status", StatusController, :index
end
end
end

View Slide

ElixirConf 2016
defmodule MyApp.WebhookController do
use MyApp.Web, :controller
plug :verify_request_signature
def create(conn, # ...) do
# ...
end
defp verify_request_signature(conn, _) do
# ...
end
end

View Slide

ElixirConf 2016
pipeline :json_api do
plug :accepts, ["json", "json-api"]
plug :fetch_session
plug JaSerializer.ContentTypeNegotiation
plug JaSerializer.Deserializer
end

View Slide

ElixirConf 2016
scope "/api", MyApp do
pipe_through :json_api
# public routes
get "/foo", FooController, :index
scope "/v1", Api.V1 do
pipe_through :authorized
resources "/users", UserController: only: [:index, :show]
end
end

View Slide

ElixirConf 2016
lib/my_app/endpoint.ex

View Slide

ElixirConf 2016
defmodule MyApp.Endpoint do
use Phoenix.Endpoint, otp_app: :my_app
socket "/socket", MyApp.UserSocket
plug Plug.Static,
at: "/", from: :my_app, gzip: false,
only: ~w(css fonts images js favicon.ico robots.txt)
if code_reloading? do
plug Phoenix.CodeReloader
end
plug Plug.RequestId
plug Plug.Logger
plug Plug.Parsers,
parsers: [:urlencoded, :multipart, :json],
pass: ["*/*"],
json_decoder: Poison
plug Plug.MethodOverride
plug Plug.Head
plug Plug.Session,
store: :cookie,
key: "_my_app_key",
signing_salt: "BKi/ZZMd"
plug MyApp.Router
end

View Slide

ElixirConf 2016
Fractal

View Slide

ElixirConf 2016
Terraform
https://github.com/poteto/terraform

View Slide

ElixirConf 2016
Incremental Phoenix

View Slide

ElixirConf 2016
iex(1)> [info] GET /v1/foo
[debug] Processing by MyApp.FooController.index/2
Parameters: %{}
Pipelines: [:api]
[info] Sent 200 in 22ms
[info] GET /v1/bar
[debug] Processing by MyApp.BarController.index/2
Parameters: %{}
Pipelines: [:api]
[info] Sent 200 in 116µs
[info] GET /v1/hello-world # forwarded to legacy API
[info] GET /v1/gifs/search # forwarded to legacy API

View Slide

ElixirConf 2016
defmodule MyApp.Endpoint do
# ...
plug MyApp.ForwardRequest,
client: MyApp.Forwarders.Giphy,
router: MyApp.Router
plug MyApp.Router
end

View Slide

ElixirConf 2016
defmodule MyApp.ForwardRequest do
import Plug.Conn
def call(conn, client: client, router: router) do
routes = router.__routes__ #
conn
|> match_route(routes)
|> handle_request(client)
|> send_response()
end
# ...
end

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
defmacro __before_compile__(_env) do
quote location: :keep do
defoverridable [call: 2]
try do
super(conn, opts)
catch
kind, reason ->
Plug.ErrorHandler.__catch__(conn, kind, reason, &handle_errors/2)
end
end
end
end

View Slide

ElixirConf 2016
catch
kind, reason ->
# do our forward here
end

View Slide

ElixirConf 2016
Terraform
https://github.com/poteto/terraform

View Slide

ElixirConf 2016
defmodule Terraform do
defmacro __using__(opts) do
Module.register_attribute __MODULE__, :terraformer, []
@terraformer Keyword.get(unquote(opts), :terraformer)
@before_compile Terraform
end
end
# ...
end

View Slide

ElixirConf 2016
defmacro __before_compile__(_env) do
defoverridable [call: 2]
try do
super(conn, opts)
catch
_, %{conn: conn} -> terraform(conn, @terraformer)
end
end
defp terraform(conn, terraformer) do
terraformer.call(conn, [])
end
defoverridable [terraform: 2]
end
end

View Slide

ElixirConf 2016
defmodule MyApp.Router do
use Terraform, terraformer: MyApp.Terraformers.Foo
# ...
end

View Slide

ElixirConf 2016
defmodule MyApp.Terraformers.Foo do
alias MyApp.Clients.Foo # example client made with HTTPoison
use Plug.Router
plug :match
plug :dispatch
# match specific path
get "/v1/hello-world", do: send_resp(conn, 200, "Hello world")
# match all `get`s
get _ do
%{method: "GET", request_path: request_path, params: params, req_headers: req_headers} = conn
res = Foo.get!(request_path, req_headers, [params: Map.to_list(params)])
send_response({:ok, conn, res})
end
def send_response({:ok, conn, %{headers: headers, status_code: status_code, body: body}}) do
conn = %{conn | resp_headers: headers}
send_resp(conn, status_code, body)
end
end

View Slide

ElixirConf 2016
III.OOPs

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
Design Patterns

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
–Sandi Metz
“Duplication is far cheaper than
the wrong abstraction.”

View Slide

ElixirConf 2016
https://fsharpforfunandprofit.com/fppatterns/

View Slide

ElixirConf 2016
State

View Slide

ElixirConf 2016
Objects

View Slide

ElixirConf 2016
class Person {
constructor(name) {
this.name = name;
this.x = 0;
this.y = 0;
}
greet() {
return `Hi there, my name is ${this.name}.`;
}
report() {
return `I'm at (${this.x}, ${this.y}).`;
}
move(x = 0, y = 0) {
this.x = x;
this.y = y;
}
}

View Slide

ElixirConf 2016
let bob = new Person('Bob');
bob.greet(); // "Hi there, my name is Bob."
bob.report(); // "I'm at (0, 0)."

View Slide

ElixirConf 2016
bob.move(1, 2);
bob.report(); // "I'm at (1, 2)."

View Slide

ElixirConf 2016
class Movable {
constructor(x, y) {
this.move(x, y);
}
move(x = 0, y = 0) {
this.x = x;
this.y = y;
}
report() {
return `I'm at (${this.x}, ${this.y}).`;
}
}

View Slide

ElixirConf 2016
class Person extends Movable {
constructor(name) {
super();
this.name = name;
}
greet() {
return `Hi there, my name is ${this.name}.`;
}
}

View Slide

ElixirConf 2016
Data

View Slide

ElixirConf 2016
Function

apple -> banana

View Slide

ElixirConf 2016
.toBanana();

View Slide

ElixirConf 2016
.toPineapple();

View Slide

ElixirConf 2016
Uncaught TypeError: .toPineapple is not a function(…)

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016

Function

apple -> banana
Function
banana -> pineapple

View Slide

ElixirConf 2016

Function

apple -> banana
Function
banana -> pineapple

Composition

View Slide

ElixirConf 2016
Function

apple -> pineapple

View Slide

ElixirConf 2016
Model the System

View Slide

ElixirConf 2016

View Slide

ElixirConf 2016
Transform the Data

View Slide

ElixirConf 2016
Fractal

View Slide

ElixirConf 2016
Function
input output

View Slide

ElixirConf 2016
low level operation low level operation low level operation
EmailValidator
Service
email validated result

View Slide

ElixirConf 2016
service service service
UpdateProfile
Use-case
change profile
request
change profile
result

View Slide

ElixirConf 2016
use-case use-case use-case
Web Application
http request http response

View Slide

ElixirConf 2016 - From Front-End to Full Stack with Elixir & Phoenix

ElixirConf 2016 - From Front-End to Full Stack with Elixir & Phoenix

Lauren Tan

More Decks by Lauren Tan

Other Decks in Programming

Featured

Transcript