Bite-sized Elixir (ENG) - Tetiana Dushenkivska | Elixir Club Evening 4 Online

@tetiana12345678 Kiev Elixir Club 2020
Bite-sized Elixir

Who is your customer?

What problem are we solving?

An interactive quiz…
where teams compete against each other…
answering elixir trivia questions

Tetiana Dushenkivska

The goal
Goal:

The goal
Challenge:Goal:

Why not?

MVP
Earliest
Testable
Product

Where to start?

Where to start?
LiveView

OUR
Earliest
Testable
Product
Early release not that impressive…

V S
OUR
Earliest
Testable
Product
Early release not that impressive…

Agile

Agile
iteratively and incrementally

Agile
BITE sizes

Agile
BITE sizesBYTE sizes

The grand plan

Support multiple quizes

Quiz mapping

quiz_web/router.ex
scope "/", QuizWeb do
...
live "/:conf_name", ConfLive
end

quiz_web/live/quiz_live.ex
def mount(%{"conf_name" => conf_name}, _, socket) do
state = init_state(conf_name)
{:ok, assign(socket, state)}
end
defp init_state(conf_name) do
conf = Quiz.get_by_url(conf_name)
...
end

Complete small feature

Quiz appearance
Welcome message Last page message

Thinking ahead

<%= raw @conf.title %>
quiz_web/templates/quiz.html.leex

score
instant feedback

defp is_correct(answer, correct_answer) do
answer == correct_answer
end

end
iex> "hello" == "hello "
false

end
defp strip(answer) do
answer
|> String.downcase()
|> String.trim
end

3 attempts

skip button

progress

Feedback from customer

Answer?

Answer? -> show correct
answer

answer
String
comparison

answer
String
comparison -> ast

quoted(answer) == quoted(correct_answer)
end
defp quoted(answer) do
answer
|> String.downcase()
|> String.trim()
|> Code.string_to_quoted()
end

iex> String.capitalize("hello") == "hello"
false

Bug! Bug! Bug!

1st release

Functionally viable increments
1st release

Ship it!
28 - 29 May
Code BEAM V

Beware of the bear!

Too many elixircards
(Alvise) arguable
Most used linter
Feedback

Automate!

Issues with the code
Hard to follow logic of the game
Does it even work?

Readability issue
2 long files conf_live.ex game.ex
state
new state
PUREIMPURE

def handle_event("next_card", _, socket) do
updated_game = Game.update_state(socket.assigns.game)
{:noreply, assign(socket, game: updated_game)}
end

lib/game.ex
def init_state(conf) do
%Game{
card_index: 1,
number_of_cards: Enum.count(conf.cards),
card: hd(conf.cards),
cards: tl(conf.cards)
}
end
Before

lib/game.ex
After
def init_state(conf) do
cards = setup_cards(conf.cards)
%Game{
card_index: 1,
number_of_cards: Enum.count(conf.cards),
}
end

lib/game.ex
After
defp setup_cards(cards) do
add_card_index = fn card, i ->
{Card.update_card(card, %{index: i}), i + 1}
end
{cards, index} = Enum.map_reduce(cards, 1, add_card_index)
cards
end

lib/card.ex
After defmodule Quiz.Card do
use Ecto.Schema
import Ecto.Changeset
schema "cards" do
...
field :index, :integer, virtual: true
end
def update_card(card, params) do
card
|> cast(params, [:index])
|> apply_changes()
end
end

test/quiz_test.exs
After

After
lib/game.ex
def update_state(game) do
%Game{
card_index: game.number_of_cards - Enum.count(game.cards),
}
end

Readability issue
2 long files
index.html.leex
state1.html.leex
state2.html.leex
state3.html.leex
…

def render(assigns) do
Phoenix.View.render(QuizWeb.QuizView, "index.html", assigns)
end

quiz_web/templates/quiz/index.html.leex

Ship it!
18 - 19 June
ElixirConf EU

High scores board

High scores board
Hints

Quiz is time based
High scores board
Hints

Quiz is time based
High scores board
Hints
45s

Elixir

Hints
Hint: Expected a String, got Integer

Elixir
Integer.parse("34")
=> {34, ""}

Elixir
Integer.parse("34")
=> {34, ""}
Integer.parse("three")
=> :error

Elixir
Integer.parse("34")
=> {34, ""}
Integer.parse("three")
=> :error
Integer.parse("34.5")
=> {34, ".5"}

Elixir
Integer.parse("34.4boom")
{34, ".4boom"}

Elixir
def type(input)
input
|> get_type()
end

Elixir
defp get_type(quoted_value) when is_float(quoted_value), do: "Float"
defp get_type(quoted_value) when is_integer(quoted_value), do: "Integer"
defp get_type(quoted_value) when is_binary(quoted_value), do: "String"
defp get_type(quoted_value) when is_list(quoted_value), do: "List"
defp get_type(quoted_value) when is_boolean(quoted_value), do: "Boolean"
defp get_type(quoted_value) when is_atom(quoted_value), do: "Atom"
def type(input)
input
|> get_type()
end

Elixir
{:ok,

Elixir
** (SyntaxError) unexpected token: ).
The "{" is missing terminator "}"
{:ok,

Elixir
def type(input)
input
|> get_type()
rescue
_ -> "Unidentified"
end

High score board

def mount(%{"conf_name" => conf_name}, socket) do
...
topic = conf_name
if connected?(socket) do
Phoenix.PubSub.subscribe(QuizWeb.PubSub, topic)
end
{:ok, socket}
end

def handle_event("email", params, socket) do
add_new_score(socket, params)
{:noreply, socket}
end

defp add_new_score(socket, params) do
case Store.Quiz.add_new_score(params) do
{:ok, score} ->
message = {:score_added, score}
topic = socket.assigns.game.conf_name
Phoenix.PubSub.broadcast(QuizWeb.PubSub, topic, message)
_ -> :noop
end
end

def handle_info({:score_added, score}, socket) do
high_scores =
[score | socket.assigns.high_scores]
|> Enum.sort_by(& &1.score, :asc)
{:noreply, assign(socket, high_scores: high_scores)}
end

Feedback time

Feedback time
When Erlang was open sourced?

Feedback time
When Erlang was open sourced?
Hint: the answer is an Integer.

Earliest Usable Product

Ship it!
3 - 4 Sept
ElixirConf

Hints don’t work
Feedback

Think outside the box - hints!

Hint 1:
1st half of the answer

Hint 1:
1st half of the answer
Hint 2:
2nd half of the answer

Ship it!
10 - 11 Sept
Code BEAM STO

Feedback
Nice content

Improvements - logo setup

quiz_web/templates/layout/root.html.leex
<img scr="<%= assigns.game.logo_url %>"/>

Ship it!
7 - 8 Oct
Elixir Conf EU

Feedback
Lots of likes, loves,
1 meh

editor_web/lib/templates/card/card.html.leex
<textarea name="card[meta]" phx-debounce="blur">
<%= {:safe, Jason.encode!(@card.meta)} %>
</textarea>

editor/priv/repo/migrations/*add_meta_to_card.exs
defmodule Editor.Repo.Migrations.AddMetaToCard do
use Ecto.Migration
def change do
alter table(:cards) do
add(:meta, :map)
end
end
end

editor/lib/card.ex
defmodule Editor.Card do
...
@derive {Jason.Encoder, only: [:meta]}
schema "cards" do
...
embeds_one(:meta, Editor.CardMeta, on_replace: :delete)
end
def changeset(card, params) do
params_with_meta = Map.update!(params, "meta", &Jason.decode!/1)
card
|> cast(params_with_meta, @fields)
|> cast_embed(:meta)
...
end
end

editor/lib/card_meta.ex
defmodule Editor.CardMeta do
use Ecto.Schema
@fields ~w(style hints)a
@derive {Jason.Encoder, only: @fields}
@primary_key false
embedded_schema do
field :style, :string
field :hints, {:array, :string}, default: []
end
def changeset(schema, params) do
cast(schema, params, @fields)
end
end

editor/lib/card_meta.ex
defmodule Editor.CardMeta do
use Ecto.Schema
@fields ~w(style class hints)a
@derive {Jason.Encoder, only: @fields}
@primary_key false
embedded_schema do
field :style :class, :string, default: ""
field :hints, {:array, :string}, default: []
end
def changeset(schema, params) do
cast(schema, params, @fields)
end
end

editor_web/assets/css/app.css

editor_web/lib/templates/card.html.leex
<tr class="<%= Phoenix.HTML.raw(@card.meta.class) %>">

Ship it!
5 - 6 Nov
Code Mesh

Earliest Lovable Product

Ship it!
19 Nov
Elixir Club

Quiz
quiz.elixircards.co.uk/elixir_kiev_club

Feedback
not intuitive when
answer is wrong
???

Summary

Summary
Who is
your
customer?

Summary
Who is
your
customer?
What problem
are you
solving?

Summary
Who is
your
customer?
What problem
are you
solving?
Earliest
Testable
Product

Summary
Who is
your
customer?
What problem
are you
solving?
Earliest
Testable
Product
Feedback

Summary
Who is
your
customer?
What problem
are you
solving?
Earliest
Testable
Product
Small releasable
iterations of
complete features
Feedback

Bite-sized Elixir (ENG) - Tetiana Dushenkivska | Elixir Club Evening 4 Online

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Elixir Club

Mehr von Elixir Club (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Bite-sized Elixir (ENG) - Tetiana Dushenkivska | Elixir Club Evening 4 Online