Presentation: From Dynamic to Static and Back Again

class: center, middle, white-titles animated fadeIn faster
background-image: url(https://fundraising.bridgetownrb.com/images/bridgetown-background.jpg)

# Database-Driven Apps with Bridgetown, Roda, Hotwire Turbo, and Lifeform
## (or How I Learned to Love CRUD All Over Again)

---
class: animated fadeInRight faster bigger-list bold-list

# Here’s What We’ll Talk About

1. Target Audience
2. Why Roda?
4. ActiveRecord? Outside of Rails?!
3. Turbo? Outside of Rails?!
5. What’s Lifeform?
6. DEMO TIME
7. Q & A

.right.gray[Presented by Jared White on]
.right.gray[Monday, November 7, 2022]

---
class: center middle animated zoomIn big

# The Bridgetown Web App framework

.big[![Bridgetown](https://www.bridgetownrb.com/images/bridgetown-logo-twitter-card.jpg)]

## But why? For whom?

---
class: center middle animated fadeInRight

# Who are we competing with?

---
class: center middle

# Who are we competing with?

.medium[![Ruby on Rails](/assets/railslogo.svg)]

# 🤡

---
class: center middle

# No.

![Bugs Bunny says NO](/assets/bugs-no.jpg)

---
class: animated fadeInRight

# Bridgetown Competitors:

---
# Bridgetown Competitors:

* **Gatsby**
--
* **Astro**
--
* **Eleventy**
--
* **Next**
--
* **Nuxt**
--
* **SvelteKit**
--
* (And on and on and on it goes…)

---
class: center middle animated zoomIn big

# Attack of the ~~Clones~~ JS Frameworks

.big[![Frameworks](/assets/javascript_frameworks.jpg)]

---
class: center middle animated zoomIn big

# Web Developer Just Starting Out:

.big[![A New Man, Apparently Free](/assets/new-free-man.jpg)]

## Apparently Free! 😎

---
class: center middle animated zoomIn big

# After Your 30th Framework/Build Tool/Hosting Infra/etc.…

.medium[![Not Free](/assets/not-free.jpg)]

## We’re not here because we’re free… we’re here because we’re **NOT free!**

---
class: center middle

# Just Say No to Yak Shaving. 😂

.medium[![Yak Intensifies](/assets/yak-intensifies.gif)]

---
class: center middle animated zoomIn big

# Bridgetown: YARF (Yet Another Ruby Framework)

.medium[![Bridgetown](https://www.bridgetownrb.com/images/bridgetown-logo-twitter-card.jpg)]

## Gotta compete with **YAJSF**, amirite? 🥸

---
class: center middle animated fadeInRight

# But, like, this is a big problem.

## We need a solution which presents a compelling alternative to the frontend-themed YAJSF explosion.

## Rails/Hanami/Jekyll/Middleman/etc. ain’t it.

---
class: center middle animated fadeInRight

# “I built a site using Astro and that was cool and all, but…I really love Ruby. Can I use Bridgetown?”

---
class: center middle

# “I built a site using Astro and that was cool and all, but…I really love Ruby. Can I use Bridgetown?”

# _YES!_ 👍

---
class: animated fadeInRight

# Bridgetown: SSG & SSR

## SSR is Powered by **Roda**

* [The Routing Tree Web Toolkit](http://roda.jeremyevans.net), created by Jeremy Evans
* **Simplicity**: Roda is designed to be simple, both internally and externally, reducing cognitive overhead.
* **Usability**: Roda uses a routing tree. At any point during routing, it allows you to operate on the current request.
* **Productivity**: Roda makes it easy to develop applications quickly.

---
class: animated fadeInRight

# Roda route blocks:

```ruby
class App < Roda
 route do |r|
 # /hello branch
 r.on "hello" do
 # Set variable for all routes in /hello branch
 @greeting = 'Hello'

# GET /hello/world request
      r.get "world" do
        "#{@greeting} world!"
      end

# /hello request
      r.is do
        # GET /hello request
        r.get do
          "#{@greeting}!"
        end

# POST /hello request
        r.post do
          @name = r.params["name"]
          puts "#{@greeting} #{@name}!"
          r.redirect
        end
      end
    end
  end
end
```

---
class: center middle animated zoomIn

# Bridgetown provides an “opinionated distribution” of Roda

## With some extra features. Most notably: **File-Based Routing**

```
_routes/items/index.erb
_routes/items/[slug].erb

_routes/books/[slug]/chapter/[chapter].erb
```

---
class: animated fadeInRight

# Roda + Bridgetown in action

`_routes/items/[slug].erb`

```erb
---<%

# route: /items/:slug
r.get do
  item_id, *item_sku = params[:slug].split("-")
  item_sku = item_sku.join("-")

render_with data: {
    layout: :page,
    title: "Item Page",
    item_id: item_id,
    item_sku: item_sku
  }
end
%>---

Item ID: <%= data.item_id %>

Item SKU: <%= data.item_sku %>
```

---
# Roda + Bridgetown in action

`_routes/items/[slug].erb`

```erb
---<% # <== This looks like front matter!

# route: /items/:slug
r.get do
  item_id, *item_sku = params[:slug].split("-")
  item_sku = item_sku.join("-")

render_with data: { # <== This provides data to the template below
 layout: :page,
 title: "Item Page",
 item_id: item_id,
 item_sku: item_sku
 }
end
%>---

Item ID: <%= data.item_id %> <== Roda data var

Item SKU: <%= data.item_sku %> <== Roda data var
```

---
class: center middle animated zoomIn

# You’ll see Roda in action in the upcoming DEMO.

## Next: key plugins to aid your CRUD, starting with:

---
class: center middle animated zoomIn faster

# Active Record

.fullstackruby-logo[![Ruby on Rails](/assets/railslogo.svg)]

---
class: center middle animated zoomIn faster

# .fullstackruby-logo[![Turbo](/assets/turbo-logo.svg)]

## (Primarily **Stream** responses running over HTTP.)

### P.S. Custom Actions are the bees’ knees.

---
class: center middle animated zoomIn faster

# 🧬 Lifeform

## A new form component library in development, powered by **Phlex**. Compatible with both Bridgetown _and_ Rails (replacing all previous form helpers).

### Define forms as objects using a simple DSL, then render those forms potentially as one-liners. Never wrestle with horrible form template markup again! 🙌

---
class: animated fadeInRight faster

# 🧬 Lifeform in action:

```ruby
class Forms::Movie < Lifeform::Form
 field :title,
 label: "Title (required)",
 required: true,
 autofocus: true
 field :year,
 label: "Year (required)",
 required: true
 field :director,
 label: "Director"

field :submit, type: :submit_button, label: "Save"
end
```

```erb
<%= render Forms::Movie.new(data.movie) %>
```

---
class: animated fadeInRight faster

# 🧬 Lifeform features

* Mix 'n' match fields from various component libraries. Will ship with a "default" vanilla one and one for Shoelace.
* Easily write your own field types using Phlex templates.
* Framework-agnostic: not only Bridgetown or Rails, but potentially any Ruby web framework.
* If you need more rendering flexibility than the "one-liner", you can render any field out individually in any order and even override specific options.

---
class: center middle animated zoomIn

# 🤘 DEMO TIME 🤘

.avatar[![Bridgetown Logo](/assets/bridgetown-avatar.svg)]

---
class: animated fadeInRight

# Bridgetown SSR / CRUD

* Progressively enhance your static/public content with all the extra bits.
  * Forms
  * E-commerce
  * Paywalls
  * Dashboards
  * Digital Products
  * Anything which doesn't map cleanly to static builds.

* See how far you can push this stack before reaching for “The Big Kahuna” (Rails?)
* You can always rewrite your backend later and still use Bridgetown for the frontend. I know this because Jekyll + Rails installs used to be my jam!

---
class: center middle animated zoomIn big

# The Bridgetown Web App framework

.medium[![Bridgetown](https://www.bridgetownrb.com/images/bridgetown-logo-twitter-card.jpg)]

## Open for business in 2022, 2023, and beyond.

---
class: center middle animated fadeInRight faster

# Questions?

.avatar[![Bridgetown Logo](/assets/bridgetown-avatar.svg)]

## **[www.bridgetownrb.com](https://www.bridgetownrb.com)**