Your comprehensive guide for Twig front-end view templates.
Fundamental ERB for Front-End Development
Last Updated
Read more
This post is an iteration on ERB and Twig Cross-Reference for Front-End Development. That post is geared towards developers who want to translate their Twig knowledge to ERB, or vice versa. You may also be interested in Fundamental Twig for Front-End Development.
Contents
What is ERB?
ERB (Embedded Ruby) is a feature of Ruby that lets you —you guessed it!— embed Ruby in other files. ERB files have the extension .<compiled_extension>.erb
. It is the language HAML and Slim are shorthand for. ERB is commonly used for templating Views in Rails apps.
Because it can do anything Ruby can do, it’s extremely powerful, has a steeper learning curve than languages intended for front-end templates specifically, and can do a lot that isn’t relevant to front-end templating. There’s no cannonical ERB-for-front-end-developers documentation, and the Rails official documentation is immense and hard to dig through. Some resources if for learning ERB:
- APIdock’s ActionView::Layouts and their documentation for the “included modules” listed under ActionView::Helpers (the UrlHelper’s
link...
andbutton_to
methods are essential. - The APIdock TagHelper’s documentation for the
content tag
andtag
methods are useful. - If you’re building forms familiarize yourself with the methods of the FormHelper, FormTagHelper, and FormOptionsHelper) (some will prefer the appearance of DevDocs — c.f. their ActionView and ActionView/Helpers documentation).
- LaunchSchool’s Loops & Iterators is a good resource for understanding loops in Ruby.
- Mix & Go’s How to use link_to in Rails is helpful for understanding
link_to
- RailsGuides’ Action View Overview and Layouts and Rendering in Rails cover Rails views in depth, with clear examples.
Reference
Delimiters
Comments
Inline comments
<%# … %>
Block comments
=begin
…=end
the opening and closing tags must be at the start of the line
not
Outputting values
<%= … %>
Execution (Control Code)
<% … %>
Conditionals
Single-statement conditionals
if
and unless
Multi-statement conditionals
if
…elsif
…end
Conditionals with logical operators
ERB supports “condition ?
iftrue :
iffalse”, and “ifselftrue ?:
otherwise”.
Note that the “then” case :
must be provided
Truth and falsity of zero in Boolean contexts
0
is True
in Boolean contexts
Defining variables
=
Line breaks within a variable’s value
Multi-line blocks of markup can stored in an identifier with content_for x do
…end
Note: content_for
is additive: each time you provide content for a given variable, that content is appeneded to what was there already. To use content_for
to overwrite a global variable, use the flush: true
option:
Dealing with undefined variables
-
defined?()
-
||=
, the OR Equal operator
Variable interpolation
#{var}
Concatenation
+
(plus). Note that to concatenate a string and a number in Ruby, the number must be converted to a string.
Iteration (loops)
Iterating over items
n.each do |i|
…end
Using the loop index, 0-indexed
-
n.each_with_index do |i, index|
…end
-
n.times do |i|
…end
Using the loop index, 1-indexed
-
.each_with_index
’sindex
is always 0-indexed, so add1
-
n.times do |i|
…end
Iterating a certain number of times
n.times do |i|
…end
Inspecting data
There are several options for formatting an object’s data, notably: simply outputting, .inspect
ing, and debug()
ing. For basic data-checking purposes in a view, the essential difference is debug()
returns YAML while inspect
and printing return strings.
Slicing
.slice(index)
, .slice(start,count)
Shorthand to slice the first count
items
.take(count)
or .first(count)
Trimming whitespace
If trim_mode
is set to -
, a -
in the closing erb
tag will trim trailing whitespace:
is equivalent to
Keyed values
Use a Symbol :property
to look up an operation on a Hash:
Vertical inheritance
For a layout
file that pulls in page
: content_for
in child, yield
in parent
layouts/layout.html.erb
views/page.html.erb
Vertical inheritance with default content in the parent
layouts/layout.html.erb
views/page.html.erb
Using partials
render
will output the contents of another file
To pass values to the rendered file, define them:
If the rendered file expects different variable names, use those:
Articles You Might Enjoy
-
Fundamental Twig for Front-End Development
-
-
Comparing Heroku, Netlify, Vercel, and GitHub Pages for Node.js Projects
Running popular web-based CD tools against each other