<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>Modern Drupal Development with Composer</title>

		<meta name="description" content="Modern Drupal Development with Composer">
		<meta name="author" content="Oliver Davies">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/opdavies.css" id="theme">
		<link rel="stylesheet" href="css/tomorrow-night-bright.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
			<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>
		<div class="reveal">
			<div class="slides">
				<section>
					<h1 class="is-big">
						Modern Drupal Development with Composer
					</h1>

					<small>PHPSW Lightning Talks - November 2016</small>
				</section>

				<section>
					<h2>Oliver Davies</h2>

					<div class="columns">
						<div class="column">
							<ul class="bullets medium">
								<li>Senior Drupal/PHP Developer</li>
								<li>Appnovation Technologies</li>
								<li>@opdavies</li>
							</ul>
						</div>

						<div class="column is-3">
							<img class="no-border no-shadow" src="images/me_thumb.jpg">
							<img class="no-border no-shadow" src="images/appnovation.png">
						</div>
					</div>
				</section>

				<!-- <section>
					<h2>Also...</h2>

					<ul class="bullets medium">
						<li>Former Drupal Association employee</li>
						<li>Drupal 7 and 8 core contributor and mentor</li>
						<li>Co-organiser of Drupal Bristol, SWDUG and PHPSW</li>
						<li>Co-founder and co-organiser of DrupalCamp Bristol</li>
						<li>Symfony/Silex/Laravel hobbyist</li>
					</ul>
				</section> -->

				<section>
					<h2>
						The Old Ways
					</h2>

					<ul class="bullets">
						<li>Download an archive from Drupal.org</li>
						<li>Use Drush commands (<code>drush dl</code>)</li>
						<li>Use Drush Make</li>
					</ul>

					<aside class="notes">
					</aside>
				</section>

				<section>
					<h2>
						Composer
					</h2>

					<ul class="bullets">
						<li>Drupal Packagist (deprecated)</li>
						<li>Composer endpoints on Drupal.org (beta)</li>
						<li>Manage core and contrib as dependencies</li>
						<li>Both Drupal 7 and 8</li>
					</ul>
				</section>

				<section>
					<h2>Why?</h2>

					<ul class="bullets">
						<li>"Getting off the island"</li>
						<li>Better versioning support</li>
						<li>Easier updates</li>
						<li>Automatic dependency management</li>
					</ul>

					<aside class="notes">
						Increased adoption of common PHP tools like Composer and PHPUnit.
						Looser versioning
						No manually downloading core or additional projects, can update by changing one value.
						Automatically download dependencies of modules - other modules, external libraries.
					</aside>
				</section>

				<section
					data-background="#000"
					data-background-transition="none">

					<h2 class="is-white">
						Add a new repository
					</h2>

					<pre><code data-trim class="bash is-big">
$ composer config \
repositories.drupal composer \
https://packages.drupal.org/8
					</code></pre>
				</section>

				<section
					data-background="#000"
					data-background-transition="none">

					<h2 class="is-white">
						composer.json
					</h2>

					<pre><code data-trim class="json is-medium">
{
  "repositories": {
    "drupal": {
      "type": "composer",
      "url": "https://packages.drupal.org/8"
    }
  }
}
					</code></pre>
				</section>

				<section
					data-background="#000"
					data-background-transition="none">

					<h2 class="is-white">
						Custom directories
					</h2>

					<pre><code data-trim class="json is-small">
"extra": {
  "installer-paths": {
    "modules/contrib/{$name}": ["type:drupal-module"],
    "profiles/contrib/{$name}": ["type:drupal-profile"],
    "themes/contrib/{$name}": ["type:drupal-theme"]
  }
}
</code></pre>

					<aside class="notes">
						Uses the composer/installers plugin
						Allows for adding packages into directories other than "vendor".
					</aside>
				</section>

				<section
					data-background="#000"
					data-background-transition="none">

					<h2 class="is-white">
						Adding Modules
					</h2>

					<pre><code data-trim class="bash is-small">
$ composer require drupal/pathauto:^1.0

...

  - Installing drupal/token (1.0.0-beta2)
    Downloading: 100%

  - Installing drupal/ctools (3.0.0-alpha27)
    Downloading: 100%

  - Installing drupal/pathauto (1.0.0-beta1)
    Downloading: 100%
    				</code></pre>

    				<aside class="notes">
    					Also downloads token and ctools as they are dependencies.
    				</aside>
				</section>

				<section
					data-background="#000"
					data-background-transition="none">

					<h2 class="is-white">
						Adding Modules with Dependencies
					</h2>

					<pre><code data-trim class="bash is-small">
$ composer require drupal/address:^1.0

...

  - Installing commerceguys/addressing (v1.0.0-beta1)
    Downloading: 100%

...

  - Installing drupal/address (1.0.0-rc3)
    Downloading: 100%
    				</code></pre>

    				<aside class="notes">
    					Also downloads the commerceguys/addressing library as it’s added as a dependency within the modules’s composer.json.
    				</aside>
				</section>

				<section>
					<h2>
						Composer template for Drupal projects
					</h2>

					<ul class="bullets">
						<li>Downloads core into <code>web/</code></li>
						<li>Custom directories for modules, themes, profiles</li>
						<li>Manages directories and file permissions</li>
						<li>Includes Drush and Drupal Console</li>
					</ul>

					<aside class="notes">
						Creates sites/default/files directory and manages directory permissions.
					</aside>
				</section>

				<section
					data-background="#000"
					data-background-transition="none">

					<h2 class="is-white">
						Composer template for Drupal projects
					</h2>

					<pre><code data-trim class="bash is-medium">
$ composer create-project \
drupal-composer/drupal-project:8.x-dev \
some-dir --stability dev \
--no-interaction
    				</code></pre>
				</section>

				<section>
					<h2>Demo</h2>

					<video controls data-autoplay>
						<source src="videos/demo.mp4" type="video/mp4">
					</video>
				</section>

				<section>
					<h2>Resources</h2>

					<ul class="bullets">
						<li>Using Composer to manage Drupal site dependencies - https://www.drupal.org/node/2718229</li>
						<li>Composer template for Drupal projects - https://github.com/drupal-composer/drupal-project</li>
					</ul>
				</section>

				<section
					data-background="#0076C2"
					data-background-transition="none">
					<h2 class="is-white">
						Questions?
					</h2>
				</section>
			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>
			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: false,
				progress: false,
				history: true,
				center: true,
				transition: 'none', // none/fade/slide/convex/concave/zoom

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});
		</script>
	</body>
</html>