Are you jealous of how quickly your Javascript friends can whip up front-end Single Page Applications? Confused about React, Angular, Vue, and all that other nonsense? You don't need any of that to rapidly build reactive, responsive, usable, performant, and easy-to-iterate on web applications. Come learn how to build the whole thing without leaving the comfort of Elixir or the Server. Look Ma! Github: https://github.com/ijcd/presto Twitter: @ijcd San Francisco, California SPEAKER NOTES: ------------- Why a front-end and a back-end? Can't I just stay in Elixir? Can't I just stay on the server? Why can't my UI just be a projection of my database? We have to invent the future we want. I’d felt uneasy about working in Rails. Something just didn't feel right. Found Uncle Bob's "Screaming Architecture" series. Yes, this is what I was missing. I was being blinded by my framework. Looking back, it seems to me that Rails ruined a generation of programmers. Feature folders. Context switching is painful for me. I want to stay in Elixir, even for HTML. I set out to fix this, somehow. 1. Simple Elixir-based generation of tag-based markup. 2. Interoperate properly with Phoenix helpers. I created Taggart - HTML as Elixir. You can embed Taggart inside Phoenix helpers. You can use Phoenix helpers intermingled with Taggart. https://github.com/ijcd/taggart Now I need widgets. I wrapped UIKit. https://github.com/ijcd/uikit_ex https://github.com/ijcd/uikit_ex https://github.com/ijcd/uikit_ex https://github.com/ijcd/uikit_demo Front-end now... jQuery, Ember, Angular, React, Om/Clojurescript. Can we just get rid of the whole client side? Unpoly.js Replaces fragments of a page in place. Transitions are very smooth. It feels like a client application. I want: 1. views as a projection of data 2. simplicity of Elm's model/update/render 3. completely in elixir (minimal javascript) Model. Update. View. State. Message. Response. That sounds an awful lot like a GenServer... and we have Channels... and we have this Unpoly thing... What if I took GenServers, connected with Channles, sent DOM events over the channels, sent views back? GenServer birthed on first user request. Receives DOM events, updates state, renders HTML back through channel. DynamicSupervisor to manage GenServers. You reference your component from your layout or an index.html.eex or whatever. use Presto.Page def initial_model def update def render Lovely microsecond-level responses from Phoenix. It works in Electron. Testing is easy -- it's just a GenServer. Growing your app is simple. Expand render() and update() with helpers.

1. SPAs, Without the SPA
Ian Duggan

3. The Rails Way?

4. Friction Frustrates Me
• Controllers
• Views
• Models
• Templates
• <%= ERB %>

5. Just Give Me Functions

6. A Compendium of
Terrible Ideas
(maybe?)

7. Scratch That Itch

8. Let's Be Grandiose

9. Uncle Bob

10. Screaming Architecture

11. Ports and Adatpers

12. Has Rails Ruined a
Generation of Programmers?

13. • Keep it simple
• Be suspicious of frameworks
• Take only what you need

14. Phoenix File Layout

15. Feature Folders

16. It Works…

17. ERB Templates

18. Taggart
(HTML as Code)

19. Design Goals
• Simple Elixir-based generation of tag-based
markup
• Interoperate properly with Phoenix helpers

20. Basic Syntax

21. Basic Syntax

22. Nesting

23. Phoenix Compatibility

24. Phoenix Helpers

25. Phoenix Views

26. Phoenix Views

27. Benchmarks

28. Benchmarks

29. https://github.com/ijcd/taggart

30. Now I Need Widgets

32. DOM-Aware
"UIkit is listening for DOM manipulations
and will automatically initialize, connect and
disconnect components as they are inserted
or removed from the DOM. That way it can
easily be used with JavaScript frameworks
like Vue.js and React."

33. Lots of Cool Widgets

34. Lots of Cool Widgets

35. Lots of Cool Widgets

36. Lots of Cool Widgets

37. Lots of Cool Widgets

38. Complicated Markup

39. It Can Be Easier

40. And Fun

41. https://github.com/ijcd/uikit_ex
https://github.com/ijcd/uikit_demo

43. Javascript Stuff
• jQuery
• Ember
• Angular
• React/Redux
• Om/Clojurescript

45. Drab
https://github.com/grych/drab

46. This looks promising…

47. No taggart allowed…

48. Unpoly
https://github.com/unpoly/unpoly

49. Replaces Fragments

50. Decorators

51. But I Want Something More

52. • The feel and Reactivity of React
• The simplicity of Elm’s model/update/view
• Completely in Elixir (minimal javascript)

53. GenServer?

54. Presto
• GenServer-based components
• Channel-based communication
• Unpoly-based DOM updates

55. Simple Loop
GenServer Browser
UI Updates
DOM Events
Update State

56. DynamicSupervisor
• PrestoSupervisor manages components
• Components are scoped to a visitor_id, unique
to each browser
• On-page components are further scoped with
named identifiers

57. Setup Javascript Client

58. Wire Up A Channel

59. Call into a Component

60. Component Init

61. Component Update

62. Component Render

63. Performance
• www.prestochange.io
• eu.prestochange.io

64. Electron

65. You Need A Hack for Brunch…
package.json
brunch-config.js

66. Testing?

67. • Split render() with helpers
• Split update() with into helpers
Growing Your App?
(it’s all just functions…)

68. In Development
• Push-messages from the server
• TodoMVC Example
• Lenses and Optics for embedded components
• Time-traveling Debugger
(I did say there were still problems to be solved…)

69. https://github.com/ijcd/presto
https://github.com/ijcd/presto_demo
https://github.com/ijcd/prestochange