talks/goodbye-drush-make-hello-composer/2017-11-17-drupal-bristol/slides/index.html

623 lines
17 KiB
HTML
Raw Normal View History

2017-07-01 23:51:42 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Goodbye Drush Make. Hello Composer!</title>
<meta name="description" content="Goodbye Drush Make. Hello 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">
Goodbye Drush Make. Hello Composer!
</h1>
<img
src="images/composer.png"
alt=""
class="no-border no-shadow"
style="max-height: 300px">
</section>
<section>
<img src="images/drush-make-talk.png" alt="">
</section>
<section data-background-transition="none">
<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>
<section data-background-transition="none">
<section
data-background="#0076C2"
data-background-transition="none">
<h2 class="is-white">
The "Old" Ways
</h2>
</section>
<section>
<h2>
Monolith repository
</h2>
<ul class="bullets">
<li>Everything in one repository</li>
<li>Easiest to set up, most difficult to maintain</li>
<li>Core, contrib code in your repository</li>
</ul>
</section>
<section data-background-transition="none">
<h2>
Drush Make
</h2>
<ul class="bullets">
<li>Define your site as code</li>
<li>Automated updates, patching</li>
</ul>
</section>
<section>
<h2>
Drush Make
</h2>
<ul class="bullets">
<li>Drupal specific</li>
<li>Multiple repositories</li>
<li>Can't update an existing build</li>
<li>Need to "compile"</li>
</ul>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
drupalbristol.make
</h2>
<pre><code data-trim class="is-medium">
api = 2
core = 7.x
projects[drupal][type] = "core"
projects[drupal][version] = "7.51"
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
drupalbristol.make
</h2>
<pre><code data-trim class="is-medium">
api = 2
core = 7.x
projects[drupal][type] = "core"
projects[drupal][version] = "7.51"
projects[pathauto] = "1.3"
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
drupalbristol.make
</h2>
<pre><code data-trim class="is-medium">
api = 2
core = 7.x
projects[drupal][type] = "core"
projects[drupal][version] = "7.51"
projects[pathauto][version] = "1.3"
projects[pathauto][subdir] = "contrib"
projects[pathauto][patch][] = "..."
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Building
</h2>
<pre><code data-trim class="bash is-medium">
$ drush make drupalbristol.make some-dir
Beginning to build drupalbristol.make.
drupal-7.51 downloaded.
pathauto-7.x-1.3 downloaded.
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Building
</h2>
<pre><code data-trim class="bash is-medium">
$ drush make drupalbristol.make some-dir
Base path some-dir already exists.
exit 1
</code></pre>
</section>
</section>
<section data-background-transition="none">
<section
data-background="#0076C2"
data-background-transition="none">
<h2 class="is-white">
Composer
</h2>
</section>
<section>
<h2>Composer</h2>
<div class="columns">
<div class="column is-9">
<ul class="bullets">
<li>Dependency manager for PHP</li>
<li>Downloads packages into a <code>vendor</code> directory</li>
<li>Downloads packages from one or more repositories</li>
<li>Generates <code>composer.json</code> and <code>composer.lock</code></li>
</ul>
</div>
<div class="column is-3">
<img src="images/composer.png" alt="" class="no-border no-shadow">
</div>
<aside class="notes">
vendor directory is usually removed from your version control repo.
</aside>
</div>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Adding Packages
</h2>
<pre><code data-trim class="bash is-medium">
$ composer require silex/silex
...
- Installing pimple/pimple (v3.0.2)
Downloading: 100%
- Installing silex/silex (v2.0.4)
Downloading: 100%
Writing lock file
Generating autoload files
</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-big">
"require": {
"silex/silex": "^2.0"
}
</code></pre>
</section>
<section>
<h2>Composer in Drupal</h2>
<ul class="bullets">
<li>Dependency management and autoloading in Drupal 8 (no included <code>vendor</code> directory since 8.1.x)</li>
<li>Not included with Drupal 7 (Composer Manager and xautoload in contrib)</li>
</ul>
</section>
</section>
<section data-background-transition="none">
<section
data-background="#0076C2"
data-background-transition="none">
<h2 class="is-white">
Building Drupal with Composer
</h2>
</section>
<section>
<h2>Building Drupal with Composer</h2>
<ul class="bullets">
<li>Use <code>drupal/drupal</code> from Packagist</li>
<li>Use the <code>drupal-composer/drupal-project</code> template</li>
</ul>
</section>
<section
data-background="#000"
data-background-transition="none">
<pre><code data-trim class="bash is-big">
$ composer create-project \
drupal/drupal \
my_site_name ^8.2 --no-dev
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<pre><code data-trim class="bash is-medium">
$ composer create-project \
drupal-composer/drupal-project:8.x-dev \
my_site_name-dir --stability dev \
--no-interaction
</code></pre>
</section>
<section>
<h2>Comparison</h2>
<ul class="bullets">
<li><code>drupal/drupal</code> is a minimum setup, no extras, uses the repo root as the docroot</li>
<li><code>drupal-composer/drupal-project</code> includes installer paths, scaffold files, Drush, Drupal Console</li>
<li><code>drupal-composer/drupal-project</code> available for Drupal 7 and Drupal 8</li>
</ul>
</section>
</section>
<section data-background-transition="none">
<section
data-background="#0076C2"
data-background-transition="none">
<h2 class="is-white">
Managing contrib dependencies
</h2>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Add Drupal.org as a repository
</h2>
<pre><code data-trim class="json 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">
Configuring paths
</h2>
<pre><code data-trim class="json is-small">
"extra": {
"installer-paths": {
"modules/contrib/{$name}": ["type:drupal-module"],
"modules/custom/{$name}": ["type:drupal-custom-module"],
"profiles/contrib/{$name}": ["type:drupal-profile"],
"themes/contrib/{$name}": ["type:drupal-theme"],
"themes/custom/{$name}": ["type:drupal-custom-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 its added as a dependency within the moduless composer.json.
</aside>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Adding themes
</h2>
<pre><code class="bash is-medium">
$ composer require drupal/omega:^5.0
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Patching
</h2>
<pre><code class="bash is-medium">
$ composer require cweagans/composer-patches
</code></pre>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Patching
</h2>
<pre><code class="json is-small">
"extra": {
"patches": {
"drupal/drupal": {
"Add startup configuration for PHP server":
"https://www.drupal.org/files/issues/1543858-30.patch"
}
}
}
</code></pre>
</section>
</section>
<section data-background-transition="none">
<section
data-background="#0076C2"
data-background-transition="none">
<h2 class="is-white">
Updating
</h2>
</section>
<section>
<h2>composer install vs update</h2>
<ul class="bullets">
<li>"install" updates local code with versions defined in <code>composer.lock</code></li>
<li>"update" updates <code>composer.lock</code> with the latest available versions</li>
</ul>
</section>
<section
data-background="#000"
data-background-transition="none">
<h2 class="is-white">
Updating
</h2>
<pre><code class="bash is-big">
$ composer update \
--with-dependencies
$ composer install --no-dev \
--optimize-autoloader
</code></pre>
</section>
<section>
<h2>Updating</h2>
<ul class="bullets">
<li>Update the versions in composer.lock</li>
<li>Deploy new version to the server</li>
<li>Update local versions with <code>composer install</code></li>
</ul>
</section>
</section>
<section>
<h2>A real example</h2>
<img
src="images/drupal-bristol-github.png"
alt=""
class="no-border no-shadow">
</section>
<section>
<h2>Resources</h2>
<ul class="bullets">
<li>https://getcomposer.org</li>
<li>https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies</li>
<li>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>