If you're interested in this series, there's a good chance you've heard at least some of the buzz in

the Drupalverse about "headless" or decoupled Drupal. Or perhaps you watched Dries' keynote
from DrupalCon Barcelona or read his recent blog post about the future of decoupled Drupal.
Whatever the case may be, this series will help walk you through the build out of a simple
decoupled blog. In Dries' terminology the demo site we'll be building is "fully decoupled." While
it would be trivial to adopt similar techniques to build a progressively decoupled site, let's dig a
bit deeper into what it means to build a decoupled Drupal site.

Traditionally, Drupal sites are monolithic in the sense that Drupal is responsible for content
management as well as rendering the front-end pages for the entire web site. A site takes its first
steps towards being decoupled when some component of the front end is being rendered by a
system other than Drupal. That's really all there is to it. You're adding a layer of abstraction, a
content API, between the back-end content management system and the front-end rendering
system.

Early adopters
One of the early adopter success stories to this approach is NPR, with their Create Once Publish
Everywhere (COPE) approach.

Photo credit: NPR: Create Once Publish Everywhere (Slide #21)

Netflix and other large media organizations have seen benefits to decoupling their sites,
especially when it comes to content reuse across platforms. Even in the Drupal world there are
several examples of success stories building decoupled Drupal sites to make multi-channel
publishing easier.
The decoupled approach
Let's say, for starters, you'd like to build a mobile app, either for iOS or Android, and you need to
pull data from your Drupal site. You'd probably begin by researching ways to export data from
your Drupal site. You might use Views Datasource, or Services, or RESTful, or maybe even just
custom code (we have lessons in this series to cover each approach). With your Drupal site
exposing JSON (or XML) endpoints, you'd now have the data your app needs. Congratulations,
you've now decoupled your website. That's really all it takes to get started.

Implications and "gotchas"

Of course, the story doesn't quite end there. With the additional flexibility to build out multiple
front-ends comes great responsibility. In order to improve performance you need to worry about
caching your API, minimizing HTTP requests from the front-end, a generally more complex
architecture with more moving pieces—not to mention SEO considerations.
Photo credit: NPR: Create Once Publish Everywhere (Slide #30)

In addition to the back-end implications, the way you build content types likely changes as well.
Content reuse introduces another set of challenges. In an ideal world, an article would have the
same title regardless of where it's displayed. In reality, limitations introduced by screen size,
design restrictions, or editorial concerns often means that's just not possible. We must seriously
address device proliferation and the growing number of screen sizes.

Plan and leverage

What if we could build into our CMS the idea of adaptive content, that is, content with enough
metadata that our API consumer can best decide what to render? It turns out that Drupal's Field
API provides us with a good foundation to do just that. Once you've done your homework and
planned a content strategy that maximizes content reuse you're well suited to take advantage of a
decoupled architecture.

As NPR's experienced developers warn us though, "Building an API is Not Enough" when it
comes to true content portability. The extra layer of abstraction between content producers and
content consumers doesn't by itself improve our data model or make our site responsive. If we're
interested in the idea of COPE, it's worth the extra work developing a content strategy that
supports this reuse. In fact, NPR argues "COPE is the key difference between content
management systems and web publishing tools, although these terms are often used
interchangeably in our industry." With that in mind, and a basic understanding of what it means
to build a decoupled Drupal site, is that the right approach for our project?

Next up...
Now that we know what it means to be a decoupled site, in the next tutorial we'll discuss more of
the pros and cons of a decoupled approach.

Additional Resources
 Drupalize.Me Podcast: Decoupled Drupal
 Headless Websites: What's the Big Deal?
 Headless Drupal, One Form at a Time
 Future of the CMS
 Insert Content Here Podcast: Daniel Jacobson on NPR's COPE and Content APIs
 Decoupled Architecture with WordPress and Drupal
 Decoupled Drupal, When, Why and How
 Headless Drupal Group
https://assets.lullabot.com/podcasts/drupalizeme_022.mp3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">

<title>AirPupnMeow.com: All the love, none of the crap!</title>

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/main.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media
queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">AirPupnMeow</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
 </ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-
control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</div>

<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It

includes a large callout called the
hero unit and three supporting pieces of content. Use it as a starting
point to create something more
unique.</p>

<p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>

</div>
</div>

<div class="container">
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,

tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam
porta sem malesuada magna mollis
euismod. Donec sed odio dui. </p>

<p><a class="btn btn-default" href="#">View details &raquo;</a></p>

</div>
<div class="col-lg-4">
<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,

tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam
porta sem malesuada magna mollis
euismod. Donec sed odio dui. </p>

<p><a class="btn btn-default" href="#">View details &raquo;</a></p>

</div>
<div class="col-lg-4">
 <h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Vestibulum id ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-default" href="#">View details &raquo;</a></p>

</div>
</div>

<hr>

<footer>
<p>&copy; AirPupnMeow.com</p>
</footer>
</div>
<!-- /container -->

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Index.php