Static is the New Dynamic

A discussion about modern engineering techniques to produce dynamic, scalable, performant, maintainable, and efficient websites.

BuffaloJS - March, 2017
Jesse Farinacci

Static vs Dynamic

static

delivers content in the same format in which it is stored
no server-side code execution is required
usually a mix of HTML, images, CSS, and JavaScript
static != boring
HTML5 + modern frameworks + API Economy = engaging and interactive
cache friendly resources play nice with CDNs and browsers
serverless: modern network file servers grok HTTP

dynamically generated content by a server process
personalized / customized resources or pages
requires code development skill to create and maintain
directly interacts with one or more data sources and web services
LAMP: Linux, Apache, MySQL, {PHP, Perl, Python}
MEAN: MongoDB, Express, Angular, NodeJS
Amazon, EBay, Facebook, YouTube, WordPress, MovableType, Drupal, Joomla, etc
many servers: web ⇔ renderer ⇔ database

dynamic

The OLD Stack

The rough evolution of serving web content to users.

The OLD Stack

The OLD Stack

The OLD Stack

The OLD Stack

The OLD Stack

The OLD Stack

The OLD Stack

The OLD Stack

The OLD Stack

Developers

Stuck with fragile deployment, e.g. FTP
Difficult to scale multiple authors
Complex environments; testing matrix of death
No transactional deployments

Operations

Diverse environments to maintain
Too many caches and pools to tune
ACL nightmare
No transactional deployments

Users

Cold caches
Inconsistent themes for large sites
Poor performance for building simple pages
Server-side rendering is anti-global (no edge CDN)

“Attacks on WordPress Sites Intensify as Hackers Deface Over 1.5 Million Pages”

Catalin Cimpanu at Bleeping Computer

“Panama Papers hack: Unpatched WordPress, Drupal bugs to blame?”

Kieren McCarthy at El Reg

“Vulnerability in popular Joomla e-commerce extension puts online shops at risk”

Lucian Constantin at IDG News

“The Heartbleed bug allows anyone on the Internet to read the memory of the systems protected by the vulnerable versions of the OpenSSL software.”

Heartbleed Authors at Heartbleed

“Yahoo Says 1 Billion User Accounts Were Hacked; [suspected infiltration via insecure cookies]”

Vindu Goel and Nicole Perlroth at New York Times

“CVE: Ruby On Rails JSON Parser Remote Code Execution Vulnerability”

Michael Koziarski at Ruby on Rails Security Google Group

“ShellShock: GNU Bash has a serious flaw which can allow an attacker to remotely run any arbitrary command where the shell is used behind the curtains.”

Pavan Thorat and Pawan Kinger from Deep Security Labs

“Millions of application servers [JBoss, WebLogic, WebSphere] are potentially open to compromise due to how they handle serialized Java apps”

Jai Vijayan at DARK Reading

“Severe SQL Injection Flaw Discovered In WordPress Plugin With Over 1 Million Installs”

BeauHD at Slashdot

Aaarrrggghhh!!!

There's got to be a better way..

The NEW Stack

The reimagining of content delivery.

The NEW Stack

The NEW Stack

The NEW Stack

The NEW Stack

The NEW Stack

The NEW Stack

Developers

Front end decoupled from backend
Building sites decoupled from hosting
APIs are leveraged instead of direct access of database

Operations

Reduced complexity of environments
Removal of at least two layers of servers
Catastrophic outages fixable with a simple rebuild of SCM+CI or load balancer updated

Users

Super hot caches
Consistent themes for large sites
CDN / edge-CDN friendly resources

Static Sites

YAML

YAML Ain't Markup Language: human friendly data serialization.

YAML By Example

---
# scalars
key: value
another_key: Another value goes here.
a_number_value: 100
scientific_notation: 1e+12
boolean: true
null_value: null
long_string: "A string, enclosed in quotes."
"key with: specials": weird
---

YAML By Example

---
# maps
a_map:
    key: value
    a_nested_map:
        another_key: 'Another Value'
        hello: world
---

YAML By Example

---
# sequences
a_sequence:
    - Item 1
    - Item 2
    - 0.5 # multivalued types
    - Item 4
    - key: value
      another_key: another_value
    -
        - This is a sequence
        - inside another sequence
---

Jekyll

Transform your plain text into static websites and blogs.

Jekyll

Simple static site generator
Renders Markdown into HTML/CSS
Generates complete website ready for static serving

YAML configuration, global and local
Comprehensive plugin system
Many themes and templates available

Ruby based build system
Backend for GitHub Pages function
Blog-aware: permalinks, categories, indexes

Jekyll: Project Organization

.                                          # project
├── _config.yml                            # global config
├── _data                                  # global data for use in templates
|   └── members.yml                        # some data, site.data.members.*
├── _drafts                                # unpublished posts
|   └── static-sites-101.md                # 
├── _includes                              # partials and mixins for include
|   ├── footer.html                        # 
|   └── header.html                        # 
├── _layouts                               # templates that wrap posts/content
|   ├── default.html                       # 
|   └── post.html                          # 
├── _posts                                 # your published posts
|   └── 2017-03-06-buffalojs-meetup.md     # 
├── _sass                                  # sass partials
|   └── base.scss                          # 
├── _site                                  # generated site output directory
├── .jekyll-metadata                       # internal tracking data
└── index.html                             # named html file

Jekyll: Example Post

---
layout:     post
title:      "Welcome to Jekyll!"
date:       2015-11-17 16:16:01 -0600
categories: jekyll tutorial
---
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll: Building and Serving

bash$ jekyll build                    # build the site into _site

bash$ jekyll build --watch            # ^^ ++ watch for changes

bash$ jekyll serve                    # build the site and serve wth webserver

bash$ jekyll serve --incremental      # ^^ ++ only build changed resources