Build Your Own Real-Time Web Service with Elixir Phoenix Presented at Manchester Lambda Lounge, 17 Oct 2016

1. ELIXIR/PHOENIX
BUILD YOUR OWN
REAL-TIME WEB
SERVICE WITH

2. PRESENTED BY:
CHI-CHI EKWEOZOR
AT:
MANCHESTER LAMBDA LOUNGE
MON 17 OCT 2016

3. TODAY’S WEB:
Hundreds of millions of interconnected services
continuously exchanging data.
Reliability, concurrency, fault-tolerance, scalability,
all expected as the norm.

4. WHY ELIXIR?
WHY PHOENIX?
BUILDING REAL-TIME WEB SERVICES

5. ABOUT ME:
▸ Chi-chi Ekweozor (@thisischichi):
▸ Contract Software engineer - C/C++, PHP, JavaScript,
and now Elixir
▸ Previously a social media marketing consultant!
▸ Combined social media know how with Elixir/Phoenix to
create Assenty, a real-time Question & Answer tool for
event organisers.

6. INTENDED AUDIENCE:
This talk is intended for web developers with some
familiarity with functional programming concepts.
It is a high level overview of the Phoenix web
framework which is written in Elixir, a relatively new
functional programming language.
No prior experience with Elixir is required.

7. WE’LL COVER:
▸ Why Elixir?
▸ What is Phoenix?
▸ What are Phoenix Channels?
▸ How do they work?
▸ Assenty Live Demo: Phoenix Channels in Production

8. IS IT FUNCTIONAL?
WHY ELIXIR?

9. ELIXIR IS A DYNAMIC,
FUNCTIONAL LANGUAGE
DESIGNED FOR BUILDING …
elixir-lang.org

10. SCALABLE AND
MAINTAINABLE APPLICATIONS.
elixir-lang.org

11. ELIXIR LEVERAGES THE
ERLANG VM, KNOWN FOR
RUNNING LOW-LATENCY,
elixir-lang.org

12. DISTRIBUTED AND FAULT-
TOLERANT SYSTEMS, WHILE
ALSO BEING SUCCESSFULLY
elixir-lang.org

13. USED IN WEB DEVELOPMENT
AND THE EMBEDDED
SOFTWARE DOMAIN.
elixir-lang.org

15. ELIXIR’S
STRENGTHS:

16. WHY ELIXIR?
▸ An extensible and well-documented dynamic language
with Ruby-inspired syntax, undergirded by Erlang’s 30 year
old, tried and tested virtual machine known as BEAM
▸ In-built pattern matching and the pipe operator |> makes it
easy to work with and reason about immutable data
▸ Mix: an impressive tooling ecosystem that adds rock solid
libraries for authentication, metrics, crypto, embedded
systems support and much more

17. RATIONALE FOR CREATING ELIXIR:

18. “WHEN DESIGNING THE
ERLANG LANGUAGE AND THE
ERLANG VM,
José Valim, creator, Elixir

19. JOE, MIKE AND ROBERT DID
NOT AIM TO IMPLEMENT A
FUNCTIONAL PROGRAMMING
LANGUAGE,
José Valim, creator, Elixir

20. THEY WANTED A RUNTIME
WHERE THEY COULD BUILD
DISTRIBUTED, FAULT-
TOLERANT APPLICATIONS.
José Valim, creator, Elixir

21. IT JUST HAPPENED THAT THE
FOUNDATION FOR WRITING
SUCH SYSTEMS SHARE MANY
OF THE FUNCTIONAL
José Valim, creator, Elixir

22. PROGRAMMING PRINCIPLES.
AND IT REFLECTS IN BOTH
ERLANG AND ELIXIR.
José Valim, creator, Elixir

23. BENEFIT OF CODING IN ELIXIR:

24. AT LEAST TWO THINGS YOU STAND TO GAIN WITH ELIXIR:
▸ Because of data immutability, concurrency is a lot easier to
understand, and use:
▸ Your application or program will use all available cores
on your machine to function. It just does.
▸ A single function definition lets you define different
implementations depending on its arguments:
▸ Your application or program will be easier to modularise
and test.

25. WE’LL COVER:
▸ Why Elixir?
▸ What is Phoenix?
▸ What are Phoenix Channels?
▸ How do they work?
▸ Assenty Live Demo: Phoenix Channels in Production

26. IS IT REAL-TIME?
AND THIS PHOENIX?

27. INTRODUCING PHOENIX:
▸ Phoenix is a web development framework written in Elixir
which implements the server-side MVC pattern.
▸ Many of its components and concepts will seem familiar to
those of us with experience in other web frameworks like
Ruby on Rails or Python's Django.
▸ Phoenix is made up of a number of distinct parts, each
with its own purpose and role to play in building a web
application.
Excerpted from the Phoenix Framework Guides

28. ENDPOINT
PHOENIX FRAMEWORK COMPONENT:

29. HANDLES ALL ASPECTS OF
REQUESTS UP UNTIL THE POINT
WHERE THE ROUTER TAKES OVER

30. ROUTER
PHOENIX FRAMEWORK COMPONENT:

31. PARSES INCOMING REQUESTS AND
DISPATCHES THEM TO THE CORRECT
CONTROLLER/ACTION, PASSING
PARAMETERS AS NEEDED

32. MODELS
PHOENIX FRAMEWORK COMPONENT:

33. USES ECTO, AN ELIXIR FRAMEWORK
FOR PERSISTENCE TO READ AND
PERSIST DATA TO AN UNDERLYING
DATABASE

34. CONTROLLERS
PHOENIX FRAMEWORK COMPONENT:

35. PROVIDE FUNCTIONS,
CALLED ACTIONS, TO
HANDLE REQUESTS

36. VIEWS
PHOENIX FRAMEWORK COMPONENT:

37. RENDER TEMPLATES AND
ACT AS A PRESENTATION
LAYER

38. TEMPLATES
PHOENIX FRAMEWORK COMPONENT:

39. HTML FILES INTO WHICH WE
PASS DATA TO FORM
COMPLETE HTTP RESPONSES

40. CHANNELS
PHOENIX FRAMEWORK COMPONENT:

41. MANAGE (WEB) SOCKETS FOR
EASY REAL-TIME COMMUNICATION

42. PUBSUB
PHOENIX FRAMEWORK COMPONENT:

43. UNDERGIRDS THE CHANNEL
LAYER AND ALLOWS CLIENTS
TO SUBSCRIBE TO TOPICS

44. WE’LL COVER:
▸ Why Elixir?
▸ What is Phoenix?
▸ What are Phoenix Channels?
▸ How do they work?
▸ Assenty Live Demo: Phoenix Channels in Production

46. WHAT ARE PHOENIX CHANNELS?
▸ Channels are a really exciting and powerful part of
Phoenix that allow us to easily add soft real-time features
to our applications.
▸ Channels are based on a simple idea - sending and
receiving messages. Senders broadcast messages about
topics.
▸ Receivers subscribe to topics so that they can get those
messages. Senders and receivers can switch roles on the
same topic at any time.
Excerpted from the Phoenix Framework Guides

47. CHARACTERISTICS OF SOFT REAL-TIME SYSTEMS:
▸ You don’t have to hit every deadline, as opposed to the
case in hard real-time systems.
▸ Performance will degrade if too many are missed but
results are still valid after the deadline.
▸ Examples: airline reservation systems.
▸ Contrast with hard real-time systems where you must
absolutely hit every deadline. Examples: nuclear systems,
aircraft control systems, defence applications.

48. TRADITIONAL STATELESS REQUEST-RESPONSE MODEL:
Image taken from Programming Phoenix by Chris McCord, Bruce Tate, and José Valim

49. PHOENIX CHANNELS GIVE YOU STATEFUL CONVERSATIONS:
Image taken from Programming Phoenix by Chris McCord, Bruce Tate, and José Valim

50. A SINGLE CLIENT ON A PAGE
CONNECTS DIRECTLY WITH A
PROCESS ON THE SERVER…
Chris McCord, Phoenix creator

51. CALLED A CHANNEL.
Chris McCord, Phoenix creator

52. SINCE ELIXIR CAN SCALE TO
MILLIONS OF SIMULTANEOUS
PROCESSES THAT MANAGE
Chris McCord, Phoenix creator

53. MILLIONS OF CONCURRENT
CONNECTIONS, YOU DO NOT
HAVE TO RESORT TO THE …
Chris McCord, Phoenix creator

54. REQUEST/RESPONSE MODEL
TO MAKE THINGS EASY TO
SCALE OR EVEN MANAGE.
Chris McCord, Phoenix creator

55. A CLIENT CONNECTS TO A
CHANNEL AND THEN SENDS
AND RECEIVES MESSAGES.
Chris McCord, Phoenix creator

56. THAT’S IT.
Chris McCord, Phoenix creator

57. WHAT PHOENIX CHANNELS MAKE POSSIBLE:
▸ With Channels, neither senders nor receivers have to be
Elixir processes.
▸ They can be anything that we can teach to communicate
over a Channel - a JavaScript client, an iOS app, another
Phoenix application, our watch.
▸ Whereas request/response interactions are stateless,
conversations in a long-running process can be stateful.
Excerpted from the Phoenix Framework Guides

58. WE’LL COVER:
▸ Why Elixir?
▸ What is Phoenix?
▸ What are Phoenix channels?
▸ How do they work?
▸ Assenty Live Demo: Phoenix Channels in Production

59. WHAT’S INSIDE?
UNDERSTANDING PHOENIX CHANNELS

61. HOW DO PHOENIX CHANNELS WORK?
▸ A Phoenix channel is a conversation.
▸ The channel sends messages, receives messages, and
keeps state. We call the messages events.
▸ A Phoenix conversation is about a topic, and it maps onto
application concepts like a chat room, a game, or in
Assenty's case, the question board for an event.
Excerpted from Programming Phoenix by Chris McCord, Bruce Tate, and José Valim

62. BENEFIT OF USING PHOENIX CHANNELS:
▸ For sophisticated user interactions like interactive pages or
multiplayer games, you don’t have to work so hard to keep
track of the conversation by using cookies, databases, or
the like.
▸ Each call to a channel simply picks up where the last one
left off.
▸ A client establishes a new connection with a web socket.
That socket is transformed through the life of the
conversation with the server.
Excerpted from Programming Phoenix by Chris McCord, Bruce Tate, and José Valim

63. COMPONENTS OF
A PHOENIX
CHANNEL:

65. USER SOCKET
PHOENIX CHANNEL COMPONENT:

66. THIS MODULE SERVES AS
THE STARTING POINT FOR
ALL SOCKET CONNECTIONS

67. RESPONSIBLE FOR
AUTHENTICATING, IT ALSO
DEFINES THE TRANSPORT

68. LAYERS THAT WILL HANDLE
THE CONNECTION BETWEEN
THE CLIENT AND THE SERVER.

69. TOPIC
PHOENIX CHANNEL COMPONENT:

70. JUST AS A CONTROLLER
PASSES AN ID PARAMETER
TO REPRESENT A RESOURCE

71. FOR A CONTROLLER, WE
USE A TOPIC ID TO SCOPE
A CHANNEL CONNECTION.

72. WHEN CLIENTS JOIN A
CHANNEL, THEY MUST PROVIDE
A TOPIC. CLIENTS CAN JOIN

73. ANY NUMBER OF CHANNELS
AND ANY NUMBER OF
TOPICS ON A CHANNEL.

74. CHANNEL
PHOENIX CHANNEL COMPONENT:

75. THIS MODULE ALLOWS
CONNECTIONS AND LETS USERS
DISCONNECT AND SEND EVENTS

76. IT SUPPORTS 4 CALLBACKS:
JOIN(), HANDLE_IN(),
HANDLE_OUT(), HANDLE_INFO()

77. 1. JOIN():
CLIENTS JOIN TOPICS ON
A CHANNEL

78. 2. HANDLE_IN():
RECEIVES DIRECT
CHANNEL EVENTS

79. 3. HANDLE_OUT():
INTERCEPTS BROADCAST
EVENTS

80. 4. HANDLE_INFO():
RECEIVES PLATFORM (OTP)
MESSAGES

81. CLIENT LIBRARY
PHOENIX CHANNEL COMPONENT:

82. A CONSTRUCT THAT CAN
CONNECT DIRECTLY TO THE
SERVER

83. PHOENIX CURRENTLY
SHIPS WITH ITS OWN
JAVASCRIPT CLIENT.

84. IOS, ANDROID, AND C#
CLIENTS HAVE BEEN
RELEASED WITH PHOENIX 1.0.

85. YOUR CLIENT CODE
PHOENIX CHANNEL COMPONENT:

86. THIS JAVASCRIPT OBJECT ADDS REAL-TIME
FUNCTIONALITY TO YOUR APPLICATION BY
LISTENING FOR EVENTS GENERATED BY THE
CALLBACKS (JOIN(), HANDLE_* ETC) DEFINED
IN ELIXIR AND RESPONDING APPROPRIATELY.

87. WE’LL COVER:
▸ Why Elixir?
▸ What is Phoenix?
▸ What are Phoenix channels?
▸ How do they work?
▸ Assenty Live Demo: Phoenix Channels in Production

88. WHAT IS ASSENTY?
▸ Assenty is a real-time question and answer tool for event
organisers.
▸ Written in Elixir, and running on the Phoenix framework, it
provides a platform for capturing and persisting questions
posted to an event’s ‘question board’
▸ A question board is an online archive of questions and answers
discussed at a physical or virtual event.
▸ As each question and answer submitted to a question board is
persisted to the database, it is easily shared via social media.

89. PHOENIX CHANNELS LIVE DEMO:
▸ Visit the Question Board created during the live demo
▸ Thank you to all the participants!

90. THE END
THAT’S ALL FOLKS!

91. REFERENCES & RESOURCES
▸ Elixir website http://elixir-lang.org/
▸ On Functional Elixir http://blog.plataformatec.com.br/2016/05/
beyond-functional-programming-with-elixir-and-erlang/
▸ Elixir Guides http://elixir-lang.org/getting-started/
introduction.html
▸ Phoenix Overview http://www.phoenixframework.org/docs/
overview
▸ Erlang and Functional Programming link