Elm and Phoenix: Two great flavors that taste great together

Torschlusspanik
Elm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 1

TorschlusspanikThe fear of time running out.

Iaccidentallykinda didthis
It wasn't the plan!

What'sthisallaboutthen?
» Intro to Phoenix and Elm
» Intro to Firestorm, and its architecture
» Discussion of how Elm interacts with Phoenix
» Remaining interesting ideas and conclusion

Phoenix
Productive.Reliable.Fast.

Reasons to care
aboutPhoenix» Ecto is nice
» Phoenix 1.3 made things better
» Channels are amazing

Phoenix code examples
» Schema
» Controller
» View (for json api)
» Router
» Plug (just comment on how nice the abstraction is)

defmodule FirestormData.Category do
use Ecto.Schema
alias FirestormData.{Repo, Thread, View, Follow, Tagging, Tag}
# ...
schema "categories" do
field :title, :string
field :slug, TitleSlug.Type
field :children, :any, virtual: true
field :ancestors, :any, virtual: true
belongs_to :parent, __MODULE__
has_many :threads, Thread
has_many :views, {"categories_views", View}, foreign_key: :assoc_id
has_many :follows, {"categories_follows", Follow}, foreign_key: :assoc_id
has_many :taggings, {"categories_taggings", Tagging}, foreign_key: :assoc_id
many_to_many :tags, Tag, join_through: "categories_taggings", join_keys: [assoc_id: :id, tag_id: :id]
timestamps()
end
# ...
end

defmodule FirestormWeb.Web.CategoryController do
use FirestormWeb.Web, :controller
alias FirestormData.Commands.{GetCategory, CreateCategory, TagCategory}
plug FirestormWeb.Plugs.RequireUser when action in [:tag, :new, :create]
def show(conn, %{"id" => id_or_slug}) do
finder = get_finder(id_or_slug)
tag_category_changeset =
%TagCategory{}
|> TagCategory.changeset(%{})
case GetCategory.run(%GetCategory{finder: finder}) do
{:ok, c} ->
conn
|> render("show.html", category: c, tag_category_changeset: tag_category_changeset)
{:error, :not_found} ->
conn
|> put_flash(:error, "No such category!")
|> redirect(to: page_path(conn, :home))
end
end

defmodule FirestormWeb.Web.Api.V1.FetchView do
use FirestormWeb.Web, :view
alias FirestormData.Category
import Ecto.Query
alias FirestormWeb.Web.Api.V1.HomeView
def render("index.json", %{categories: categories, users: users, threads: threads, posts: posts}) do
%{
categories: Enum.map(categories, &HomeView.category_json/1),
threads: Enum.map(threads, &HomeView.thread_json/1),
posts: Enum.map(posts, &HomeView.post_json/1),
users: Enum.map(users, &HomeView.user_json/1)
}
end
end

defmodule FirestormWeb.Web.Router do
use FirestormWeb.Web, :router
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session # , fetch_ﬂash, protect_from_forgery, put_secure_browser_headers
plug FirestormWeb.Plugs.CurrentUser
end
scope "/", FirestormWeb.Web do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
get "/home", PageController, :home
post "/categories/:id/tag", CategoryController, :tag
resources "/categories", CategoryController do
post "/threads/:id/tag", ThreadController, :tag
get "/threads/:id/follow", ThreadController, :follow
get "/threads/:id/unfollow", ThreadController, :unfollow
resources "/threads", ThreadController do
resources "/posts", PostController
end
end
end

PlugElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 14

A delightful language
for reliablewebapps.
ElmElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 15

Functional!Strongly Typed!
No runtime errors!
The Elm Architecture!

Basic Elmapp(everyone needs a counter, right?)

type alias Model =
Int
type CounterMsg
= Increment
| Decrement

update : CounterMsg -> Model -> Model
update msg model =
case msg of
Decrement ->
model - 1
Increment ->
model + 1

view : Model -> Html CounterMsg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]

BriefMarketingAside

Beabetter
developer

www.dailydrip.com

DailyContinuing
Education for
Developers

www.dailydrip.com

/ BriefMarketing Aside

An open-source Phoenix-based
Forumwithan Elm frontend

» http://github.com/dailydrip/ﬁrestorm
» http://ﬁrestorm-dogfood.herokuapp.com

DesignWalkthrough

/ DesignWalkthrough

DATAElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 43

WEBElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 44

NOTIFIER

The neat API
or stupid?» JSON-API meets GraphQL...
» ...then abandons reason

ﬁrestorm_elm
An Elm client for Firestorm

view : Store.Model -> User.Model -> Thread.Model -> Html msg
view store user thread =
div
[ class "layout-content" ]
[ div [ class "thread-header" ]
[ h2 [] [ text thread.title ]
, div
[ class "item-metadata" ]
[ a [ href "#", class "username" ]
[ text <| "@" ++ user.username ]
]
]
, ol
[ class "post-list" ]
(List.map (postListItem store) (postsFor store.posts thread))
]

layoutContent
[ threadHeader thread user
, postList store (postsFor store.posts thread)
]

layoutContent : List (Html msg) -> Html msg
layoutContent =
div
[ class "layout-content" ]

postList : Store.Model -> List Post.Model -> Html msg
postList store posts =
posts
|> List.map (postListItem store)
|> ol [ class "post-list" ]

threadHeader : Thread.Model -> User.Model -> Html msg
threadHeader thread user =
div [ class "thread-header" ]
[ h2 [] [ text thread.title ]
, div
[ class "item-metadata" ]
[ a [ href "#", class "username" ]
[ text <| "@" ++ user.username ]
]
]

module View.Threads.Show exposing (view)
-- ...
import Components exposing (threadHeader, postList, layoutContent)
layoutContent
, postList store (postsFor store.posts thread)
]
postsFor : Dict Int Post.Model -> Thread.Model -> List Post.Model
postsFor posts thread =
posts
|> Dict.ﬁlter (k v -> List.member k thread.postIds)
|> Dict.toList
|> List.map (( k, v ) -> v)

-- ...
import Components exposing (threadHeader, postList, layoutContent)
layoutContent
, store
|> Store.postsForThread thread
|> postList store
]

Local
Database
SliverElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 55

module Types.Store exposing ( Model)
type alias Model =
{ categories : Dict Int Category.Model
, threads : Dict Int Thread.Model
, users : Dict Int User.Model
, posts : Dict Int Post.Model
, wants : ReplenishRequest
}

type alias ReplenishRequest =
{ categories : List Int
, threads : List Int
, posts : List Int
, users : List Int
}
type alias StoreUpdate =
{ categories : Dict Int Category.Model
, threads : Dict Int Thread.Model
, users : Dict Int User.Model
, posts : Dict Int Post.Model
}

APIInteractionElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 58

index :
String
-> (StoreUpdate -> msg)
-> (Http.Error -> msg)
-> Cmd msg
index apiBaseUrl tagger errorTagger =
"home"
|> get apiBaseUrl
|> withExpect (Http.expectJson storeUpdateDecoder)
|> send (handleGetHomeComplete tagger errorTagger)

post :
ReplenishRequest
-> String
-> (StoreUpdate -> msg)
-> (Http.Error -> msg)
-> Cmd msg
post replenishRequest apiBaseUrl tagger errorTagger =
"fetch"
|> AH.post apiBaseUrl
|> withJsonBody (encodeReplenishRequest replenishRequest)
|> withExpect (Http.expectJson storeUpdateDecoder)
|> send (handleGetComplete tagger errorTagger)

It's
FastElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 67

DemoElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 68

Downsides

Solutions, kindaBut really we want realtime and the HTTP API will
never get us, so we move to Channels.

Channels

GARBAGE
COLLECTION
ON THE CLIENTElm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 82

WhynotGraphQL?“I dream of one day building a company that gets sued
by or sues Facebook.”
Dream big

Elm is so
simpleitguidesyouto solutions
@opsb

Althoughalanguage
can neverteach aprogrammer
whatconstitutesawell-designed program,

it can guide him
intothinkingaboutthe rightthings.
From the paper
AbstractDataTypes
by Barbara Liskov and
Stephen Zilles

Use Elmwith Phoenix

It'sa great guide

Fin.Elm and Phoenix: Two Great Flavors That Taste Great Together DailyDrip.com 89

This slide intentionallyleftblank.

Geezus stopadvancingthis presentation.

AMøøse once bitmysister

Dangitthe nextslide is literally
justmyvim modelinethere's nothing
moreto see I swear.

Dangyouto heck.
vim:tw=1000

Elm and Phoenix: Two great flavors that taste great together

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Elm and Phoenix: Two great flavors that taste great together