1. VIEW RENDERING
OSKAR SZRAJER - @GOTAR

2. SERVER SIDE VIEW RENDERING
PAST AND PRESENT
▸ Controllers
▸ Helpers
▸ Templates

3. SERVER SIDE VIEW RENDERING
PAST AND PRESENT
▸ Controllers
(Too many responsibilities)
▸ Helpers
▸ Templates

4. SERVER SIDE VIEW RENDERING
PAST AND PRESENT
▸ Controllers
(Too many responsibilities)
▸ Helpers
(Disorganised, mostly gross)
▸ Templates

5. SERVER SIDE VIEW RENDERING
PAST AND PRESENT
▸ Controllers
(Too many responsibilities)
▸ Helpers
(Disorganised, mostly gross)
▸ Templates
(Cluttered, too much logic)

6. SERVER SIDE VIEW RENDERING
PAST AND PRESENT
▸ Controllers
(Too many responsibilities)
▸ Helpers
(Disorganised, mostly gross)
▸ Templates
(Cluttered, too much logic)
▸ Decorators?

7. SERVER SIDE VIEW RENDERING
PAST AND PRESENT
▸ Controllers
(Too many responsibilities)
▸ Helpers
(Disorganised, mostly gross)
▸ Templates
(Cluttered, too much logic)
▸ Decorators?
(Friction, limited)

8. DRY-VIEW

9. SERVER SIDE VIEW RENDERING
DRY-VIEW
▸ Views as objects

10. class Show < Dry::View
end
view = Show.new

11. class Show < Dry::View
attr_reader :article_repo
def initialize(article_repo:)
@article_repo = article_repo
end
end
view = Show.new(article_repo: repo)

12. SERVER SIDE VIEW RENDERING
DRY-VIEW
▸ Views as objects
▸ Explicit template locals

13. class Show < Dry::View
config.template = “articles/show”
expose :article do |slug:|
article_repo.find_by_slug(slug)
end
end
view = Show.new(article_repo: repo)

14. SERVER SIDE VIEW RENDERING
DRY-VIEW
▸ Views as objects
▸ Explicit template locals
▸ Templates

15. / Template written in Slim
h1 = article.title

16. view = Show.new(article_repo: repo)
view.call(
slug: “together-breakfast”,
).to_s
#=> “<h1>Together breakfast</h1>”

17. h1 = article.title
== markdown(article.body)

18. h1 = article.title
== article.body_html

19. SERVER SIDE VIEW RENDERING
DRY-VIEW
▸ Views as objects
▸ Explicit template locals
▸ Templates
▸ View logic on decorated values

20. class Parts::Article < Dry::View::Part
def body_html
render_markdown(body)
end
private
def render_markdown(str)
# …
end
end

21. class Show < Dry::View
config.template = “articles/show”
config.part_namespace = Parts
expose :article # => Parts::Article
end

22. h1 = article.title
== article.body_html
.share-widget[
data-share-url=article.url
data-share-title=article.title
data-share-body=article.body_preview_text
]

23. h1 = article.title
== article.body_html
== render(:share_widget,
url: article.url,
title: article.title,
preview_text: article.body_preview_text)

24. class Parts::Article < Dry::View::Part
def share_widget
render(
:share_widget,
url: article.url,
title: article.title,
preview_text: article.body_preview_text)
end
end

25. h1 = article.title
== article.body_html
== article.share_widget

26. == render(:related_article, article: article)

27. - show_author = defined?(show_autor) ? show_author : false
- link_prefix = defined?(link_prefix) ? link_prefix : “Related: ”
.related-article
a href=article.url = “#{link_prefix} #{article.title}”
- if show_author
.author …

28. class Scopes::RelatedArticle < Dry::View::Scope
def show_author?
locales.fetch(:show_author, false)
end
def link_text
prexif = locals.fetch(:link_prefix, “Related:”)
“#{prefix} #{article.title}”
end
end

29. .related-article
a href=article.url = link_text
- if show_author?
.author …

30. == scope(:related_article, article: article).render

31. class Context < Dry::View::Context
def initialize(assets:, **)
@assets = assets
super
end
def asset_path(asset_name)
@assets[asset_name]
end
end

32. img src=asset_path(“header.png”)
h1 = article.title
== article.body_html
== article.share_widget

33. class Parts::Article < Dry::View::Part
def feature_image_url
url = value.future_image_url
url || asset_path(“article.png”)
end
end

34. SERVER SIDE VIEW RENDERING
VIEW CONCEPTS
▸ View
(config, dependencies, exposures)

35. SERVER SIDE VIEW RENDERING
VIEW CONCEPTS
▸ View
(config, dependencies, exposures)
▸ Exposures
(prepare values)

36. SERVER SIDE VIEW RENDERING
VIEW CONCEPTS
▸ View
(config, dependencies, exposures)
▸ Exposures
(prepare values)
▸ Template & partials
(markup)

37. SERVER SIDE VIEW RENDERING
VIEW CONCEPTS
▸ View
(config, dependencies, exposures)
▸ Exposures
(prepare values)
▸ Template & partials
(markup)
▸ Parts
(behaviour on values)

38. SERVER SIDE VIEW RENDERING
VIEW CONCEPTS
▸ View
(config, dependencies, exposures)
▸ Exposures
(prepare values)
▸ Template & partials
(markup)
▸ Parts
(behaviour on values)
▸ Scopes
(behaviour for templates)

39. SERVER SIDE VIEW RENDERING
VIEW CONCEPTS
▸ View
(config, dependencies, exposures)
▸ Exposures
(prepare values)
▸ Template & partials
(markup)
▸ Parts
(behaviour on values)
▸ Scopes
(behaviour for templates)
▸ Context
(baseline rendering environment)

40. SERVER SIDE VIEW RENDERING
WHAT HAVE WE LEARNT (GAIN)?
▸ Separation of concerns
▸ Encapsulation
▸ Immutability
▸ Testability

41. DRY-VIEW!
OSKAR SZRAJER - @GOTAR