Phoenix & Ember Living Together - Jacksonville 11/10/2015

How DockYard is working with Phoenix and Ember

Transcript

1. Phoenix & Ember Living Together Mass Hysteria!
3. @bcardarella
4. @DockYard
5. I run… Boston Elixir Boston Ember
6. I run… Boston.ex Boston Ember
7. I’m here to talk about Modern Full Stack Application Development
8. I’m here to talk about Modern Full Stack Application Development
9. The way it used to be
10. The way it used to be
11. The way it used to be
12. The way it used to be
13. The way it used to be
14. The way it used to be
15. The way it used to be
16. The way it used to be
17. The way it used to be
18. This talk isn’t client-side framework specific
19. This talk isn’t client-side framework specific (mostly)
20. This talk is about two apps
23. priv !"" static #"" css $ #"" app.css $ !"" app.css.map #"" images $ #"" favicon.ico $ !"" phoenix.png #"" js $ #"" app.js $ !"" app.js.map !"" robots.txt
24. priv !"" static #"" css $ #"" app.css $ !"" app.css.map #"" images $ #"" favicon.ico $ !"" phoenix.png #"" js $ #"" app.js $ !"" app.js.map !"" robots.txt
29. backend/ frontend/ foo-app/
30. foo-app-backend/ foo-app-frontend/ Two separate repos
31. ember serve —proxy http://localhost:4000
32. ember serve —proxy http://localhost:4000 requests to /api/*
33. ember serve —proxy http://localhost:4000 requests to /api/* data!
34. ember serve —proxy http://localhost:4000 response back data!
35. Talking with
36. * standardized schema for JSON based APIs * is very verbose * requires special MIME type
37. requires special MIME type application/vnd.api+json
38. defmodule MyApp.Router do scope “/api” MyApp do resources “/accounts”, AccountsController end end
39. defmodule MyApp.Router do pipeline :api do accepts, [“json-api”] end scope “/api” MyApp do pipe_through :api resources “/accounts”, AccountsController end end
40. Copied from plug’s documentation # https://github.com/elixir-lang/plug/tree/master/lib/plug/mime.ex Maps MIME types to file extensions and vice versa. MIME types can be extended in your application configuration as follows: config :plug, :mimes, %{ "application/vnd.api+json" => ["json-api"] } After adding the configuration, Plug needs to be recompiled. If you are using mix, it can be done with: $ touch deps/plug/mix.exs $ mix deps.compile plug
41. Copied from plug’s documentation # config/config.exs config :plug, :mimes, %{ "application/vnd.api+json" => ["json-api"] } Add the MIME type to your Phoenix config
42. Copied from plug’s documentation $ touch deps/plug/mix.exs $ mix deps.compile plug Force plug to recompile
43. { "data": { "type": "authors", "attributes": { "first-name": "Brian", "last-name": "Cardarella" } } }
44. { "data": { "type": "authors", "attributes": { "first-name": "Brian", "last-name": "Cardarella" } } }
45. { "data": { "type": "authors", "attributes": { "first-name": "Brian", "last-name": "Cardarella" } } } Deserialize into snake case
46. defmodule MyApp.Deserialize do def init(options) do options end def call(%Plug.Conn{method: "POST"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PUT"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PATCH"}=conn, _opts) do _deserialize(conn) end def call(conn, _opts), do: conn defp _deserialize(%Plug.Conn{}=conn) do Map.put(conn, :params, _deserialize(conn.params)) end defp _deserialize(%{}=params) do Enum.into(params, %{}, fn({key, value}) -> { _underscore(key), _deserialize(value) } end) end defp _deserialize(value), do: value defp _underscore(key), do: String.replace(key, "-", "_") end
47. defmodule MyApp.Deserialize do def init(options) do options end def call(%Plug.Conn{method: "POST"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PUT"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PATCH"}=conn, _opts) do _deserialize(conn) end def call(conn, _opts), do: conn defp _deserialize(%Plug.Conn{}=conn) do Map.put(conn, :params, _deserialize(conn.params)) end defp _deserialize(%{}=params) do Enum.into(params, %{}, fn({key, value}) -> { _underscore(key), _deserialize(value) } end) end defp _deserialize(value), do: value defp _underscore(key), do: String.replace(key, "-", "_") end
48. defmodule MyApp.Deserialize do def init(options) do options end def call(%Plug.Conn{method: "POST"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PUT"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PATCH"}=conn, _opts) do _deserialize(conn) end def call(conn, _opts), do: conn defp _deserialize(%Plug.Conn{}=conn) do Map.put(conn, :params, _deserialize(conn.params)) end defp _deserialize(%{}=params) do Enum.into(params, %{}, fn({key, value}) -> { _underscore(key), _deserialize(value) } end) end defp _deserialize(value), do: value defp _underscore(key), do: String.replace(key, "-", "_") end
49. defmodule MyApp.Deserialize do def init(options) do options end def call(%Plug.Conn{method: "POST"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PUT"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PATCH"}=conn, _opts) do _deserialize(conn) end def call(conn, _opts), do: conn defp _deserialize(%Plug.Conn{}=conn) do Map.put(conn, :params, _deserialize(conn.params)) end defp _deserialize(%{}=params) do Enum.into(params, %{}, fn({key, value}) -> { _underscore(key), _deserialize(value) } end) end defp _deserialize(value), do: value defp _underscore(key), do: String.replace(key, "-", "_") end
50. defmodule MyApp.Deserialize do def init(options) do options end def call(%Plug.Conn{method: "POST"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PUT"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PATCH"}=conn, _opts) do _deserialize(conn) end def call(conn, _opts), do: conn defp _deserialize(%Plug.Conn{}=conn) do Map.put(conn, :params, _deserialize(conn.params)) end defp _deserialize(%{}=params) do Enum.into(params, %{}, fn({key, value}) -> { _underscore(key), _deserialize(value) } end) end defp _deserialize(value), do: value defp _underscore(key), do: String.replace(key, "-", "_") end
51. defmodule MyApp.Deserialize do def init(options) do options end def call(%Plug.Conn{method: "POST"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PUT"}=conn, _opts) do _deserialize(conn) end def call(%Plug.Conn{method: "PATCH"}=conn, _opts) do _deserialize(conn) end def call(conn, _opts), do: conn defp _deserialize(%Plug.Conn{}=conn) do Map.put(conn, :params, _deserialize(conn.params)) end defp _deserialize(%{}=params) do Enum.into(params, %{}, fn({key, value}) -> { _underscore(key), _deserialize(value) } end) end defp _deserialize(value), do: value defp _underscore(key), do: String.replace(key, "-", "_") end
52. defmodule MyApp.Router do pipeline :api do accepts, [“json-api”] end scope “/api” MyApp do pipe_through :api resources “/accounts”, AccountsController end end
53. defmodule MyApp.Router do pipeline :api do accepts, [“json-api”] plug MyApp.Deserialize end scope “/api” MyApp do pipe_through :api resources “/accounts”, AccountsController end end
54. %{ “data" => %{ “type" => "authors", “attributes" => %{ “first_name” => "Brian", “last_name” => "Cardarella" } } }
55. Actions
56. Actions def create(conn, params)
57. %{ “data" => %{ “type" => "authors", “attributes" => %{ “first_name” => "Brian", “last_name” => "Cardarella" } } }
58. %{ “data" => %{ “type" => "authors", “attributes" => %{ “first_name” => "Brian", “last_name” => "Cardarella" } } }
59. %{ “data" => %{ “type" => "authors", “attributes" => %{ “first_name” => "Brian", “last_name” => "Cardarella" } } }
60. Actions def create(conn, %{“data” => %{“attributes” => data, “type” => “authors”}})
61. Actions def create(conn, %{“data” => %{“attributes” => data, “type” => “authors”}})
62. Actions def create(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def post(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def put(conn, %{“data” => %{“attributes” => data, “type” => “authors”}})
63. Actions def create(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def post(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def put(conn, %{“data” => %{“attributes” => data, “type” => “authors”}})
64. Actions def create(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def post(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def put(conn, %{“data” => %{“attributes” => data, “type” => “authors”}}) def delete(conn, %{“id” => id}) def show(conn, %{“id” => id}) def index(conn, _params)
65. Actions def show(conn, %{“id” => id}) do author = MyApp.Repo.get!(MyApp.Author, id) render conn, model: author end
66. View defmodule MyApp.AuthorsView do use PhoenixExample.Web, :view use JaSerializer.PhoenixView attributes [:first_name, :last_name] end web/views/authors_view.ex
67. View defmodule MyApp.AuthorsView do use PhoenixExample.Web, :view use JaSerializer.PhoenixView attributes [:first_name, :last_name] end web/views/authors_view.ex
68. View defmodule MyApp.AuthorsView do use PhoenixExample.Web, :view use JaSerializer.PhoenixView attributes [:first_name, :last_name] end web/views/authors_view.ex https://github.com/AgilionApps/ja_serializer
69. data! requests to /api/* response back
70. requests to /api/* response back Thanks brah!
71. requests to /api/* response back No problemo!
72. testing
73. Test each part in isolation
74. Test each part in isolation Test the complete system
75. Unit Tests Integration Tests
76. API Unit Tests test !"" api
77. API Unit Tests test "`create` insert into the database and return payload" do count = MyApp.Repo.all(MyApp.Author) |> length post(conn, authors_path(conn, :create), json_for(:author, @author)) |> json_response(201) |> assert_payload_contains(%{ "authors": %{attributes: %{first-name: "Gizmo"}} }) assert count + 1 == MyApp.Repo.all(MyApp.Author) |> length end
78. API Unit Tests test "`create` insert into the database and return payload" do count = MyApp.Repo.all(MyApp.Author) |> length post(conn, authors_path(conn, :create), json_for(:author, @author)) |> json_response(201) |> assert_payload_contains(%{ "authors": %{attributes: %{first-name: "Gizmo"}} }) assert count + 1 == MyApp.Repo.all(MyApp.Author) |> length end
79. %{ “data" => %{ “type" => "authors", “attributes" => %{ “first_name” => "Brian", “last_name” => "Cardarella" } } }
80. def json_for(type, attributes) do %{ "data" => %{ "type" => Atom.to_string(type) |> String.replace("_", "-"), "attributes" => attributes }, "format" => "json-api" } end def json_for(type, attributes, id) do json = json_for(type, attributes) put_in json["data"]["id"], id end
81. def json_for(type, attributes) do %{ "data" => %{ "type" => Atom.to_string(type) |> String.replace("_", "-"), "attributes" => attributes }, "format" => "json-api" } end def json_for(type, attributes, id) do json = json_for(type, attributes) put_in json["data"]["id"], id end
82. API Unit Tests test "`create` insert into the database and return payload" do count = MyApp.Repo.all(MyApp.Author) |> length post(conn, authors_path(conn, :create), json_for(:author, @author)) |> json_response(201) |> assert_payload_contains(%{ "authors": %{attributes: %{first-name: "Gizmo"}} }) assert count + 1 == MyApp.Repo.all(MyApp.Author) |> length end https://github.com/danmcclain/voorhees
83. API Unit Tests test "`show` an author" do %{authors: %{one: author}} = fixtures(:authors) get(conn, authors_path(conn, :show, author.id)) |> json_response(200) |> assert_payload_contains(%{ "authors": %{attributes: %{first-name: "Brian"}} }) end
84. API Unit Tests test "`show` an author" do %{authors: %{one: author}} = fixtures(:authors) get(conn, authors_path(conn, :show, author.id)) |> json_response(200) |> assert_payload_contains(%{ "authors": %{attributes: %{first-name: "Brian"}} }) end https://github.com/dockyard/ecto_fixtures
85. authors model: MyApp.Author, repo: MyApp.Repo do valid do first_name "George" last_name "Washington" email "test@example.com" date_of_birth Ecto.Date.from_erl({1990,1,1}) password_hash Comeonin.Bcrypt.hashpwsalt("password") end one inherits: valid do id 1 email "one@example.com" first_name "Leroy" last_name "Jenkins" end end test/fixtures/authors.exs
86. API Unit Tests
87. Integration Tests
92. Setting Up Data Per Test if Mix.env == :test do post "/fixtures/start", FixturesController, :start post "/fixtures", FixturesController, :create end
93. Setting Up Data Per Test defmodule MyApp.FixturesController do use MyApp.Web, :controller import EctoFixtures, only: [fixtures: 1] def start(conn, _params) do Ecto.Adapters.SQL.begin_test_transaction(MyApp.Repo) send_resp(conn, 200, "") end def create(conn, %{"fixtures" => fixtures}) do Ecto.Adapters.SQL.restart_test_transaction(MyApp.Repo) Poison.decode!(fixtures) |> Enum.each(fn(name) -> fixtures(name) end) send_resp(conn, 200, "") end end
94. Setting Up Data Per Test defmodule MyApp.FixturesController do use MyApp.Web, :controller import EctoFixtures, only: [fixtures: 1] def start(conn, _params) do Ecto.Adapters.SQL.begin_test_transaction(MyApp.Repo) send_resp(conn, 200, "") end def create(conn, %{"fixtures" => fixtures}) do Ecto.Adapters.SQL.restart_test_transaction(MyApp.Repo) Poison.decode!(fixtures) |> Enum.each(fn(name) -> fixtures(name) end) send_resp(conn, 200, "") end end
95. Setting Up Data Per Test defmodule MyApp.FixturesController do use MyApp.Web, :controller import EctoFixtures, only: [fixtures: 1] def start(conn, _params) do Ecto.Adapters.SQL.begin_test_transaction(MyApp.Repo) send_resp(conn, 200, "") end def create(conn, %{"fixtures" => fixtures}) do Ecto.Adapters.SQL.restart_test_transaction(MyApp.Repo) Poison.decode!(fixtures) |> Enum.each(fn(name) -> fixtures(name) end) send_resp(conn, 200, "") end end
96. Setting Up Data Per Test defmodule MyApp.FixturesController do use MyApp.Web, :controller import EctoFixtures, only: [fixtures: 1] def start(conn, _params) do Ecto.Adapters.SQL.begin_test_transaction(MyApp.Repo) send_resp(conn, 200, "") end def create(conn, %{"fixtures" => fixtures}) do Ecto.Adapters.SQL.restart_test_transaction(MyApp.Repo) Poison.decode!(fixtures) |> Enum.each(fn(name) -> fixtures(name) end) send_resp(conn, 200, "") end end
97. Setting Up Data Per Test defmodule MyApp.FixturesController do use MyApp.Web, :controller import EctoFixtures, only: [fixtures: 1] def start(conn, _params) do Ecto.Adapters.SQL.begin_test_transaction(MyApp.Repo) send_resp(conn, 200, "") end def create(conn, %{"fixtures" => fixtures}) do Ecto.Adapters.SQL.restart_test_transaction(MyApp.Repo) Poison.decode!(fixtures) |> Enum.each(fn(name) -> fixtures(name) end) send_resp(conn, 200, "") end end test/support/fixtures_controller.ex
98. Calling the fixtures in your Ember Test Suite module(“my awesome test module”, { setup() { Ember.$.post(“api/fixtures/start”, { async: false }); } });
99. Calling the fixtures in your Ember Test Suite module(“my awesome test module”, { setup() { Ember.$.post(“api/fixtures/start”, { async: false }); } });
100. Calling the fixtures in your Ember Test Suite test(“my awesome test”, function(assert) { Ember.$.post(“api/fixtures”, { data: { fixtures: [“foo”, “bar”] }, async: false }); });
101. Calling the fixtures in your Ember Test Suite test(“my awesome test”, function(assert) { Ember.$.post(“api/fixtures”, { data: { fixtures: [“foo”, “bar”] }, async: false }); });
102. Calling the fixtures in your Ember Test Suite test(“my awesome test”, function(assert) { Ember.$.post(“api/fixtures”, { data: { fixtures: [“foo”, “bar”] }, async: false }); });
103. Other Topics Not Covered * Running with CI * Speeding up test suite * Deployment * Testing Email via Ember (that I will briefly cover right now)
104. Thank you!
106. Talk to us about Phoenix and/or Ember development! @dockyard dockyard.com/contact