Presentation: BridgetownConf 2022 Keynote by Jared White

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

# What’s New in Bridgetown 1.2, the Plugin Ecosystem, and Content Publishing
## Keynote Speaker: Jared White

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

# Here’s What We’ll Talk About

1. A Brief Introduction
2. State of the Union
3. What’s New in Bridgetown 1.2
4. Fast-charging the Plugin Ecosystem
5. The Future: “Publishing Hub” Strategy
6. Q & A

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

---
class: center animated fadeIn

# Allow Me To Introduce Myself
--

.avatar[![Jared White](/assets/jared-studio-professional.jpg)]

I’m Jared White, the Founder and Lead Rubyist at [Whitefusion](https://www.whitefusion.studio),  
a boutique web studio based in Portland, OR.

[.twitter[![Twitter](/assets/twitter.svg)]@jaredcwhite](https://twitter.com/jaredcwhite) .gray[/] [.github[![Mastodon](/assets/mastodon.svg)]@jaredwhite@indieweb.social](https://indieweb.social/@jaredwhite) .gray[/] [.github[![Github](/assets/github.svg)]@jaredcwhite](https://github.com/jaredcwhite)

I’ve been a Rails dev since 2008, and a Jekyll/Bridgetown site builder since 2015.

And as a designer/developer/blogger in general, since 1997!!! 😱

---
class: animated fadeInRight faster

.center.spicy-logo[![Spicy Web Logo](https://www.spicyweb.dev/images/spicy-web-logo.svg)]

* Blog posts & videos about "vanilla" frontend web specifications & techniques
* Discord community to share tips 'n' tricks
* Upcoming: a subscription platform for courses which do a deep dive into web topics
  * The first one will be all about writing modern, maintainable CSS using design system thinking

.center[🔗 [SpicyWeb.dev](https://www.spicyweb.dev)]

---
class: animated fadeInRight faster

.center.fullstackruby-logo[![Fullstack Ruby Logo](/assets/fullstackruby.svg)]

* A blog about Ruby-themed web development topics and “the art of code”
* A podcast about, er, well, all that too 😄
* Join our mailing list of nearly 300 Ruby developers:

.center[🔗 [FullstackRuby.dev](https://www.fullstackruby.dev)]

---
class: center middle animated zoomIn big

# “Friendly Neighborhood Spider-Man” of Bridgetown

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

---
class: center middle animated fadeInRight

# State of the Union 2022

![applause](/assets/applause.gif)

---
class: animated fadeInRight

# Stats

* 800+ stars on GitHub, on track for 1K next year
* Repositories that depend on Bridgetown: 500+ ‼️
* 27 current sponsors, $400+ month
  * 40 all-time sponsors and growing!
* 338 Discord members, 43 code contributors
* Three major releases in 2022 alone:
  * **March: v1.0** (thanks to a successful $4000+ fundraising campaign)
  * **July: v1.1**
  * **November: v1.2**
* Increasing awareness in broader web dev industry
* Anecdotes of people new to Ruby or re-learning Ruby using Bridgetown

---
class: center middle animated fadeInRight

# Features Galore.

.big[![Super-dee-dooper Features](/assets/super-dee-dooper.jpg)]

---
class: center middle animated zoomIn

# “Hybrid Architecture”

![architecture gif](/assets/architecture-building.gif)

---
class: animated fadeIn faster

# SSG vs. SSR

* Static Site Generation (**SSG**): build once for deployment (usually for each Git commit or from a CMS trigger). It's cached "forever".
* Server-Side Rendering (**SSR**): dynamically build and serve HTML for each request, requires a web server (obviously). No caching unless you somehow opt-in.

.center[![why not both?](/assets/why-not-both.gif)]

---
class: animated fadeInRight

# SSG _and_ SSR 😃👍

## aka the “DREAMstack”

### (Delightful Ruby Expressing APIs & Markup)

* **SSG**: build key public pages once per deployment, cached "forever" via CDN. In other words, your “**Marketing / Content Site**”
* **SSR**: dynamically build and serve HTML for each request on pages which need CRUD (Create, Read, Update, Delete), user presence, paywalled content, and other up-to-the-minute data. aka your “**Web Application**”
* Use techniques like **Hotwire Turbo**, componentized views, and "island architecture" to infuse static pages with dynamic content.
* Our SSR features are powered by **Roda**, a fast web toolkit with much to recommend it vs. Rails for _some_ projects.

---
class: center middle animated zoomIn faster

# Bridgetown is a fullstack framework. <br /><br/>“Static Site Generator” is a feature.

## (this may take some getting used to…)

---
class: center middle animated fadeInRight faster

<h1 class="colorful">A Word on THE FUTURE OF THE WEB™</h1>

---
class: center middle animated zoomIn faster

# The Future of the Web is:

## React Server Components + Turbopack + Tailwind + Deno + Edge + TypeScript + GraphQL + …

---
class: center middle

# No.

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

---
class: center middle animated fadeInRight faster

# Let’s keep pushing a <br/>\*\*polyglot web & standards\*\* forward.

## The Bridgetown Manifesto is: <br/>not “100% vanilla” HTTP/HTML/CSS/JS…but _close_.

---
class: center middle

## (and of course, .twitter[![Ruby](/assets/ruby.svg)] **Ruby**!)

---
class: center middle animated zoomIn

## And now the moment you’ve all been waiting for:

# What’s New in Bridgetown 1.2

.fullstackruby-logo[![Seinfeld happy dance](/assets/friday-happy-dance.gif)]

---
class: animated fadeInRight

# What’s New in Bridgetown 1.2 <br/>“Bonny Slope”

* **Moonshine** (just kidding)
* **Ruby-based Configuration** and Initialization System (for plugins too!)
* **Slotted content** in pages and components (some might say: finally!)
* In **templates**: use `data` instead of `resource.data` everywhere 🙌
* Last version supporting Ruby 2.7. In 2023, we go **Ruby 3.0+** 🎉

---
class: animated fadeInRight faster

# Ruby-based Configuration and Initialization System

* Write configuration using Ruby code. YAML now optional!
* No more “magic” `bridgetown_plugins` bundler group (except for legacy installs)
* Initialize Bridgetown plugins, generic gems, and the Roda server via one location and concept
* Plugins have better hooks for providing user-configurable options and defaults
* Future goal: fewer "globals" to deal with, so can boot multiple Bridgetown sites at once

---
class: animated fadeInRight faster

# Configuring Your Site

```ruby
# config/initializers.rb

Bridgetown.configure do |config|
  init :dotenv

config.autoload_paths << "jobs"

permalink "pretty"
  timezone "America/Los_Angeles"

only :server do
    init :mail, password: ENV["SENDGRID_API_KEY"]

roda do |app|
      app.plugin :default_headers, 'Strict-Transport-Security'=>'max-age=16070400;'
    end
  end
end
```

---
class: animated fadeInRight faster

# Write Your Own Initializers

```ruby
# Somewhere in config/initializers.rb

init :mail, password: "..."
```

```ruby
# config/mail.rb

Bridgetown.initializer :mail do |password:|
  Mail.defaults do
    delivery_method :smtp,
                    address: "smtp.sendgrid.net",
                    port: 465,
                    user_name: "apikey",
                    password:,
                    authentication: :plain,
                    tls: true
  end
end
```

---
class: animated fadeInRight faster smaller-code

# Plugins Should Provide Initializers

```ruby
# Somewhere in config/initializers.rb

init :cool_fancy_plugin, arg1: "...", arg2: "..."
```

```ruby
# In the root file of your plugin gem:

require "cool_fancy_plugin/builder"

Bridgetown.initializer :cool_fancy_plugin do |config, arg1:, arg2: "default value"|
  config.cool_fancy_plugin ||= {}
  config.cool_fancy_plugin.option1 = arg1
  config.cool_fancy_plugin.option2 = arg2

config.builder CoolFancyPlugin::Builder

config.source_manifest(
    origin: CoolFancyPlugin,
    components: File.expand_path("../components", __dir__),
    layouts: File.expand_path("../layouts", __dir__),
    content: File.expand_path("../content", __dir__)
  )
end
```

---
class: animated center middle zoomIn

# Configuration Documentation!

![applause gif](/assets/applause.gif)

**https://edge.bridgetownrb.com/docs/configuration/initializers**

---
class: animated fadeInRight

# Slotted Content in Templates

```erb

<%= slotted :html_head %>
```

```erb

<h1>Hello, I'm a Heading.</h1>

<% slot :html_head do %>
  <style>
    h1 {
      color: navy;
    }
  </style>
<% end %>
```

---
class: animated fadeInRight smaller-code

# Slotted Content in Components

```erb

<%= render(Card.new(title: "Card Header", footer: "Card Footer")) do |card| %>
  <% card.slot :image do %><img src="<%= resource.data.image %>" /><% end %>

Some card content goes here!
<% end %>
```

```erb

<%= slotted :image do %>
  
  <img src="/images/unknown.png" />
<% end %>

<%= content %>

<footer><%= footer %></footer>
```

---
class: animated center middle zoomIn

# Slots Documentation!

![applause gif](/assets/applause.gif)

**https://edge.bridgetownrb.com/docs/template-engines/erb-and-beyond**

---
class: center middle animated zoomIn

# Now, let’s talk about plugins.

![lego building blocks gif](/assets/lego-bricks.gif)

---
class: center middle animated zoomIn

# 2023 will be <br/>💥 “The Year of Bridgetown Plugins” 💥

![fireworks gif](/assets/fireworks.gif)

---
class: animated fadeInRight faster

# A Growing Super-Useful Plugin Ecosystem

* **Turbo** (`roda-turbo`)
* **Forms** (`lifeform`)
* **Database** (`bridgetown-activerecord`)
* **Auth** (Active Record, `pundit` integration, & more)
* **Memberships**, **Paywalls**, etc. (payments via `stripe`, etc.)
* **Dashboards**, **Charts**, etc.

---
class: animated fadeInRight faster

# And we already support integrations with:

* **Open Props**
* **Shoelace**
* **Lit**
* **Ruby2JS**

---

# And we already support integrations with:

* **Open Props**
* **Shoelace**
* **Lit**
* **Ruby2JS**

.center[…and coming soon: a whole new Ruby-based **Web Components SSR pipeline** with per-island hydration in JavaScript 🙌]

---
class: center middle animated zoomIn

# We want your plugins, themes, and community tools.

![We are once again asking you Bernie Sanders meme](/assets/asking-you.jpg)

---
class: center animated fadeInRight

# Final Topic: Bridgetown as Your “Publishing Hub”

Remember this? Steve Jobs’ “Digital Hub” strategy for Apple:

.horiz-align[![digital hub graphic](/assets/digital-hub-graphic.jpg) ![digital hub statement](/assets/digital-hub.jpg)]

---
class: center animated fadeInRight faster

# OK, so that worked. 👏

## Our computers, tablets, phones, and cloud services all form a sort of **digital hub** for generating and consuming awesome content.

## But…um…where do you _publish_ all that awesome content online?

# 🤔🤔🤔

---
class: center middle animated zoomIn

# Your New “Publishing Hub”

.big[![hub of services](/assets/publishing-hub.png)]

---
class: animated fadeInRight faster

# IndieWeb Terminology:

* **POSSE**: Publish (on your) Own Site, Syndicate Elsewhere
  * You post content on your own site, then link to it from other locations (social media, etc.). Great for traditional blogging.

* **PESOS**: Publish Elsewhere, Syndicate (to your) Own Site
  * Great for multimedia and other formats (photography, videos, podcasts, newsletters, etc.).

In **2023**, _experimental_ Bridgetown plugins will start to provide those **PESOS** solutions. Thus in terms of either “IndieWeb” approach, your own website under your own direct control will become the nexus of _all_ your published digital content. 🎉

---
class: center middle animated fadeIn

# In Summary…

![let me sum up](/assets/let-me-sum-up.jpg)

---
class: center middle animated fadeInRight

# The Bridgetown ecosystem is really still getting started. We have a lot of work ahead of us.

## But we’re building on top of a cool architecture and an amazing open source community. It’s a _great_ time to be a Rubyist and a web developer. 😎

---
class: center middle animated fadeIn faster

# Thank You

# 🙏

--
## Start using Bridgetown, file some issues, become a contributor, and rock this party! 🎉
## **[www.bridgetownrb.com](https://www.bridgetownrb.com)**

---
class: center middle animated fadeInRight faster

# Questions?

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

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