Tweet
Tweet

Slide 1

Slide 1 text

Welcome 👋

Slide 2

Slide 2 text

Andrew Mason

Slide 3

Slide 3 text

@andrewmcodes https://andrewm.codes

Slide 4

Slide 4 text

.com

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Learn Enough Bridgetown to be dangerous

Slide 7

Slide 7 text

2016

Slide 8

Slide 8 text

👨💻

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What I Didn't Know

Slide 11

Slide 11 text

Static Site Generators

Slide 12

Slide 12 text

Cloud f lare A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates.

Slide 13

Slide 13 text

Jekyll

Slide 14

Slide 14 text

JAMstack

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

2019

Slide 17

Slide 17 text

2020

Slide 18

Slide 18 text

Bridgetown is born

Slide 19

Slide 19 text

I ❤ Bridgetown

Slide 20

Slide 20 text

What is Bridgetown?

Slide 21

Slide 21 text

www.bridgetownrb.com A next-generation, progressive site generator & fullstack framework, powered by Ruby.

Slide 22

Slide 22 text

Terminology ▪ SSR: known as Server-Side Rendering, this is where your HTML is not pre- built as static f iles, but where you render HTML in real-time before delivering it to the browser. ▪ CSR: known as Client-Side Rendering, this is where JavaScript libraries manipulate the DOM of the webpage based on user interactivity and API calls to backend or third-party services. ▪ Partial Hydration: this is essentially a hybrid of the two approaches. You start f irst with some combination of SSG & SSR, then “hydrate” certain components on the frontend to handle interactivity only if and when it’s needed.

Slide 23

Slide 23 text

Next-generation

Slide 24

Slide 24 text

progressive site generator

Slide 25

Slide 25 text

fullstack framework

Slide 26

Slide 26 text

Powered by Ruby

Slide 27

Slide 27 text

Let's Build a Blog

Slide 28

Slide 28 text

gem install bridgetown

Slide 29

Slide 29 text

Template Engine

Slide 30

Slide 30 text

Liquid Default Option

Slide 31

Slide 31 text

ERB Recommended Option

Slide 32

Slide 32 text

Serbea Additional Options

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Resources

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Frontmatter

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Collections

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Layouts

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Pagination

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Taxonomies

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Components

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Data

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Turbocharge with Bundled Con f igurations

Slide 52

Slide 52 text

• Turbo • Stimulus • Lit • Shoelace • Open Props • Ruby2JS • PostCSS • Tailwind CSS • Render Con f ig • Netlify Con f ig • Vercel con f ig • GitHub Pages con f ig • Minitest • Cypress

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Plugins & Automations

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Add Tailwind CSS

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Modern Frontend Powered by ESbuild

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Advanced Ruby

Slide 61

Slide 61 text

Inspectors

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Generators

Slide 64

Slide 64 text

Web Components

Slide 65

Slide 65 text

ViewComponents

Slide 66

Slide 66 text

I18n

Slide 67

Slide 67 text

Last Step

Slide 68

Slide 68 text

bin/bridgetown deploy

Slide 69

Slide 69 text

Why Bridgetown?

Slide 70

Slide 70 text

Productivity

Slide 71

Slide 71 text

Ruby

Slide 72

Slide 72 text

Community

Slide 73

Slide 73 text

Go forth and build!

Slide 74

Slide 74 text

Thank You • @andrewmcodes • https://andrewm.codes • Remote Ruby & Ruby for All Podcasts • Ruby Radar Newsletter • Podia!