Index

A Angular CLI, 356 installation, 356 Access token, 125–126 API Blueprint, 449 Acquia Dev Desktop, 72 API design, 449 Admin UI and JavaScript Modernization API-first distributions, 269–281, 283 Initiative, 466–467 Contenta (see Contenta) advantages, decoupled Drupal, 45 Headless Lightning (see Headless content syndication, 45–46 Lightning) front-end developer experience, 47 Reservoir (see Reservoir) pipelined development, 48 variations, 269 separation of concerns, 46 API-first Drupal, 18 user-centered user API-first initiative, 18 experience, 46–47 API specifications, 449 Angular, 355, 466 Apple Watch, 470 AngularJS, 355 Application programming components, 358, 361, 363–364 interface (API), 15 dependency injection, 372 Asynchronous JavaScript and directives, 359, 365–369 XML (Ajax), 22–23 ngFor directive, 365 Atom, 28 ngIf directive, 367 Augmented reality (AR), 468 two-way data binding, 365 Authentication, 113 HttpClient, 375 basic authentication (see Basic observables, 375–376, 379 authentication) retrieving data from Drupal, cookie-based authentication 375–377, 379 (see Cookie-based authentication) reusable and nestable components, 358 OAuth2 Bearer Token authentication scaffolding, 356, 358 (see OAuth 2.0 Bearer token services, 370–372, 374–375 authentication) subscribe() method, 379 Authorization code grant, 121 subscribing to observables, 378–379 Authorization header, 115, 116 two-way data binding, 359–360 Axios, 285, 327, 329, 391 481 © Preston So 2018 P. So, Decoupled Drupal in Practice, https://doi.org/10.1007/978-1-4842-4072-4 Index B Surrogate-Keys header, 461 time-to-live (TTL), 463 Basic authentication, 113, 204 use cases, decoupled access tokens, 125–127 Drupal, 455–456 authorization header, 115, 116 personalization, 455 generating keys, 122 security, 455 grants, 121 VCL, 462 handling expired tokens, 128–129 X-Drupal-Cache-Tags header, 461 HTTP Basic protocol, 114 Cascading Style Sheets (CSS), 4 installation, 122 Chatbots, 7 scopes, 123 Client credentials grant, 121 scopes are permissions, 123 Client-side validation, 289, 446 session cookie, 117–119 Composer, 69 Simple OAuth installation (see Simple downloading Drupal and OAuth module) dependencies, 70–72 user roles, 123–125 installation, 69 BigPipe, 52 Conference Organizing Distribution Black box problem, 50 (COD), 269 Block placement, 472–473 Consumer Electronics Show (CES), 8 Bluetooth Low Energy (BLE), 8 Content AR and VR, 7–8 channels, 9 C conversational, 7 Cacheability metadata, 52 responsive web design (RWD), 5 Cache invalidation, 52 situational, 8–9 Cache tags, 52, 456–457 Contenta, 270, 303 Caching, 455, 458 Contenta.js, 308 cache indexing, 461 installation, 272–273 cache invalidation, 462–463 mission, 271 cache tags, 457 reference builds content delivery networks (CDNs), 457 contenta_angular, 303–304 hard purges, 463 contenta_ember, 304 incoherency, 459 contenta_react, 305–306 monolithic Drupal architectures, 455 contenta_vue_nuxt, 307 personalization, 455 contenta_angular, 303–304 purge requests, 462 Contenta ecosystem, 303 reverse proxies, 458, 460 contenta_ember, 304 soft purges, 463 Contenta.js, 308, 455

482 Index contenta_react, 305–306 X-CSRF-Token request Content as a service (CaaS), 19, 284 header, 145, 148 contenta_vue_nuxt, 307 CouchDB, 92–93, 203, 206 Content delivery networks (CDNs), 382, databases, 206 391, 432, 457–458, 460–462 documents, 206 purge APIs, 462 Cross-origin resource sharing (CORS), 77 Contentful, 284 configuration in Drupal, 77, 79 Content management system (CMS), 11 Cross-site content staging, 92 Content modeling, 168 Cross-site request forgery (CSRF), 145 Content staging, 91, 94, 96–97 Cross-site scripting (XSS) Content syndication, 45 attacks, 50 Contextual administration, 53 CSV Serialization module, 63 Contextual links, 50, 477 Custom modules, 419–420 Contextual tools, 53 .info.yml file, 419 Conversational content, 7 Cookie-based authentication, 116, 117 Cordova, 6 tag">D Core REST, 73 Decoupled Blocks, 472–473 configuration, 74–76 Decoupled CMS architectures, 12–14 content entities Decoupled content management, 13, 19 creation, 148–150, 152 Decoupled Drupal, 29, 468 deletion, 158, 160 caching (see Caching) retrieval, 146–147 choosing architectures, 42 updating, 153, 157 definition, 29 DELETE requests, 158, 160 disadvantages (see disadvantages, GET requests, 146–147 decoupled Drupal) HTTP verbs (request methods), 144 Drupal as site and repository, 38–39 issuing HTTP requests, Drupal core flowchart for decision makers, 43 safe and unsafe methods, 144 fully decoupled Drupal, 31–32 serialization formats, 145 JavaScript developer experience, 471 X-CSRF-Token request performance (see also Caching), 435, 441 header, 145 preview, 471 modules, 73 progressive decoupling PATCH requests, 153, 157 (see Progressive decoupling) POST requests, 147, 152 pseudo-decoupled Drupal, 32–34 safe and unsafe methods, 144 security, 50 serialization formats, 145, 151 use cases, 40, 468 Views REST exports, 161 site-and-repository, 270, 468

483 Index

Decoupled Router, 442 personas, 467 DELETE requests, 158 user experience, 465 core REST, 158, 160 Drupal 8, 82 JSON API, 200 cache tags, 457 Derived schemas, see Schemas cache tag system, 455–456 Devel module, 73, 185 Form API, 477 content generation, 73 plug-ins, 420 Devel Generate submodule, 73 Typed Data system, 446 Digital signage, 468 web services, 82 disadvantages, decoupled Drupal, 49 Drupal-aware decoupled Drupal, 32 additional point of failure, 49 Drupal Console, 420 lack of content workflows, 51 scaffolding custom modules, 420 lack of contextualized tools, 50 Drupal 8 core lack of layout and display entity access system, 67 management, 51 Hypertext Application Language (HAL) lack of security and input module, 68 sanitization, 50 OAuth module, 67 lack of system notifications, 51 serialize() and deserialize() need for accessibility and usability, 53 methods, 63 performance drawbacks, 52 web services, 82 Display Suite, 51 Drupal Deploy ecosystem, 91–92, 203 Distributed denial-of-service (DDoS) Drupal ecosystem, 81 attacks, 77 Drupal front end Document object model (DOM), 24 decoupled blocks, 471–473 Drupal, 12, 467 progressive decoupling, 471 administrative interface, 478 shared rendering, 474 community, 12 shared routing, 474 custom modules (see Custom modules) shared templating, 474 decoupling by design, 476–478 universal editing, 470 distributions, 269 Drupal iOS SDK, 299 editorial experience, 469 Drupalisms, 12 end-user experience, 469 Drupal-powered interface, 471 front end, 468 drupalSettings, 38 preprocess functions, 468 Drupal web services ecosystem, 81 shared routing, 475–476 dummy APIs, 449 installation profiles, 477 Dynamic HTML (DHTML), 4 new incongruity, 468 dynamic pages, 22

484 Index E Flux, 314 Flux architectural approach, 314 ECMAScript 6 (ES6), 27, 472 Fully decoupled Drupal, 31–32, 40 Electron, 28 Elm, 466 Ember, 399, 466 G adapters, 411–412 Generated API documentation, 449 customization, 413 Generated code, 452 JSONAPIAdapter, 411, 415 GET request, 146 components, 406–409 core REST, 146–147 ecosystem, 400–401 GraphQL, 239 JSONAPIAdapter, 412 JSON API, 184 launching a local server, 403 JSON-RPC, 432–433 models, 410–411 RELAXed Web Services, 207 retrieving data from Drupal, 412–413 Schemata module, 447 route handlers, 404, 412–413 Subrequests, 437 routes, 404–406 Views REST exports, 178 scaffolding, 401, 403 Graphical user interface (GUI), 14 templates, 403–404 GraphiQL, 108, 239 Ember CLI, 400 keyboard shortcuts, 240 installation, 401 GraphQL, 18, 98, 239 Ember Data, 400, 410 aliases, 243–244 ember-drupal-waterwheel, 300 condition groups, 256, 262–263 installation, 301 directives, 105–106 Ember FastBoot, 300, 401 filter operators, 255 Ember Inspector, 401 fragments, 103–105, 244 Entity Access system, 67 GET requests, 239 Entity Query API module, 285 limitations in typical RESTful Entity resolvers, 64 architectures, 98, 100 Expo CLI, 336 module, 107–108 installation, 336 motivations, 98, 100 Extensible Markup Language (XML), 15 mutations, 106–107, 263–264 permissions, 239 queries and mutations, 101 F retrieving entities, 239 Fielding constraints, 16–18 entity collections, 247–249 File Transfer Protocol (FTP), 4 entityLabel field, 240 Filtering entity collections, 255 entityOwner field, 243

485 Index

GraphQL (cont.) Installation profiles, 477 filtering entity collections, 252 Internal Page Cache, 458 individual entities, 240 Internet of Things (IoT), 9 individual entities with Isomorphic JavaScript, see Universal relationships, 243 JavaScript sorting entity collections, 249, 251 J, K selection sets and fields, 101–103 JavaScript, 5, 23 variables, 105–106 JavaScript renaissance, 5–6 single-page applications (SPAs), 466 H universal JavaScript, 5 HAL+JSON format, 59 JavaScript Object Notation (JSON), 15 HAL+JSON normalization, 64 JavaScript renaissance, 23–24, 28 HAL module, 59 JavaScript-to-native frameworks, 6 HAL+JSON format, 59 jQuery, 24, 467 normalize() implementation, 64 JSON API, 18 Serialization API, 59 condition groups, 189 Handlebars, 403 creating resources, 195–198 Headless Lightning, 270, 279 DELETE requests, 200 installation, 280 deleting resources, 200 mission, 280 Drupal 8 implementation, 84 Headless software, 14 GET requests, 184 Hoodie, 97 JSON API, 200 HTTP Basic protocol, 114 module, 83, 88 authorization field, 114 module API HTTP/2 server push, 304 request headers and response Hydrant, see Waterwheel.js codes, 90–91 Hypermedia as the engine of application types, 89 state (HATEOAS), 17 URLs, 89–90 Hypertext Application pagination links and definitions, 186 Language (HAL), 58, 68 PATCH requests, 198, 200 Hypertext Markup Language (HTML), 4 POST requests, 196–197 retrieving resources, 184 common filtering scenarios, 194 I entity references, 195 Incremental adoptability, 381, 466 field subsets, 195 In-place editing, 50, 468, 477 filtering resource collections, 188, Input sanitization, 50 190, 192 486 Index

filtering resource collections with JSON Web Tokens (JWT), 130 condition groups, 191 advantages, 133 paginating resource collections, 185 authenticated requests, 139 relationships, 195 authentication workflow, 133–134 request headers and response file-based keys, 135 codes, 198 headers, 130 retrieving resource collections, 185 HMAC algorithm, 130 retrieving single resources, 184 installation, 134–135 sorting resource collections, payload, 131–133 187–188 private claims, 131 specification public claims, 131 attributes and registered claims, 131 relationships, 87 signature, 132 document structure, 85 stateless, 133 relationships, 87–88, 183 validating, 138 resource objects, 86 JSX, 320, 322, 335 updating resources, 198, 200 JSON API Defaults, 430 JSON API Extras, 271, 427–430 L configuration, 428 LAMP stacks, 49 installation, 428 Laravel, 381–382 json_encode() method, 441 Layout management, 468, 470 JSON-RPC, 431, 433–434, 437 Lightning, 279 GET requests, 432–433 Liquid Fire, 401 installation, 432 Literal UI, 471 methods, 432, 434 Logical data models (LDMs), 445 permissions, 432 POST requests, 432 JSONPath, 439 M JSON Schema specification, 446, 448 MEAN stacks, 49 JSON.stringify() method, 441 Memcached, 458–459 JSON Web Token Authentication module, MERN stacks, 49 130, 135 Mobile back end as a service (mBaaS), 19 generating keys, 135, 138 Model–view–anything (MV*), 399 HMAC Key, 135 Model–view–controller (MVC), 313 installation, 134–135, 139 Model–view–presenter (MVP), 383 RSA Key, 135 Model–view–viewmodel (MVVM), 382 validating keys, 138–139 MongoDB, 25

487 Index Monolithic CMS architectures, 12 P Monolithic content management, 12 Page Cache, 441 Monolithic Drupal, 29–30, 39, 40, 455, 468 Panels, 33, 51 Password grant, 121 N PATCH requests, 199 Native applications, 11, 477 core REST, 153, 157 Native mobile applications, 28 JSON API, 198 Nightwatch.js, 467 PhoneGap, 6 Node.js, 356 php-v8-js, 474 installation, 356 Pipelined development, 48 Node Package Manager (NPM), 24 Postman, 75 Node Version Manager (NVM), 356 POST requests, 148 Normalization, 59 core REST, 147, 152 NoSQL, 25 JSON API, 195, 198 JSON-RPC, 432 Subrequests, 437 O PouchDB, 97 OAuth 2.0 bearer token authentication Preprocess functions, 468 access token, 125–126 Previewable content workflow, 51 grants, 121 Prismic, 284 implicit grants, 121 Private claims, 131 handling expired tokens, 128–129 Progressive decoupling, 34–38, 40, 45, 47, headers, 132 50, 52, 472–473 installation, 122 approaches, 37 generating keys, 122 black box problem, 50 Simple OAuth, 122 issues, 473 refresh tokens, 128 Progressive enhancement, 37 scopes, 123 Progressive loading, 52 user roles, 123–125 Progressively decoupled Drupal, 34–38, OpenAPI module, 275, 289, 291 40, 45, 47 OpenAPI UI module, 450 Pseudo-decoupling, 32–34, 40 ReDoc for OpenAPI UI Public claims, 131 module, 450 PUT requests, 217 Swagger for OpenAPI UI module, 450 Open Social, 269 Q Outside-in interfaces, 471 Quick Edit, 477

488 Index R RefreshLess, 475 Registered claims, 131 React, 313, 466 Rehydration, 25–26 application creation, 314 RELAXed Web Services, 203 components, 317–318, 326 creating resources conditional rendering, 334 document collections, 229–235 create-react-app, 314 documents, 220, 223, 225 declarative rendering, 320, 322 file attachments, 219 ecosystem, 314 multiple documents, 230–231 handling errored and loading workspace collections, 207–209 state, 329–333 workspaces, 217–219 index (root) component, 317–320 deleting resources launching a local server, 314 documents, 237 React Router, 323 file attachments, 237 render() method, 320, 322 workspaces, 236–237 retrieving data from Drupal, 326–329 GET requests, 207 routing, 323–324, 326 permissions, 204 state, 322 PouchDB and Hoodie, 97 Virtual DOM, 313 retrieving resources, 207 React Native, 335 document collections, 210 App.js, 340–342 documents, 211–213 components, 346–349 file attachments, 213–216 Expo CLI, 336 workspace collections, 207–208 FlatList component, 338, 340 workspaces, 208–209 handling errored and loading updating resources states, 352, 354 document collections, 229–235 launching a packager, 336 documents, 226, 228–229 retrieving data from Drupal, 349, file attachments, 217 351–352 workspace nomenclature, 220 scaffolding, 314, 336–337 RELAXed Web Services module ScrollView component, 338 installation, 94–95 styles, 340–341, 344–345 settings page, 95 views, 338–341 Remote procedure calls (RPCs), 431 react-jsonschema-form, 452 Representational State Transfer (REST), react-waterwheel-app, 301–302 16–18 Redis, 458 Reservoir, 270 ReDoc, 275, 450 characteristics, 275 Reference builds, 283, 300 differences from Contenta, 276

489 Index Reservoir (cont.) S ecosystem, 279 Same-origin policy, 77 reservoir-docker, 279 Safe and unsafe methods, 144 well, 279 Schemas, 445–446 generated API documentation, 275 definitions, 446 goal, 274 permissions, 447 installation, 277–278 Schemata module, 445–448 limitations, 279 GET requests, 447 minimalist orientation, 275 installation, 446 mission, 274 Search engine optimization (SEO), 442 sample content, 278 Security Assertion Markup Language side-by-side previews, 274 (SAML), 133 Resource discovery, 289 Separation of concerns, 46 Responsive web design (RWD), 5, 469 Serialization API RESTful APIs, 11, 15, 18, 29–30 encoding and decoding serialization architectural constraints, 16 formats, 63 cacheable, 16 HAL module, 59 client/server separation, 16 normalization, 64 code on demand, 17 resolve(), 64 Fielding constraints, 18 serialization formats, 63 layered system, 17 serialize() and deserialize() server side, 29 methods, 63 specification, 18 Serialization formats, 145 stateless, 16 Serialization module, 59 uniform interface, 17 encode() and decode() methods, 62 RESTful Panels, 33, 51 normalization, 60–61 RESTful Web Services module, 65 normalization and encoding authentication, 67 process, 59–60 Entity Access system, 67 Server-side rendering, 472, 475 REST module, 65 services.yml, 77 REST resource configuration, 65–66 Short Message Service (SMS), 7 REST resource plug-ins, 420 Simple OAuth module, 120 annotations, 422–423 Simple OAuth Extras module, 128 HTTP methods, 422 Simple Object Access Protocol (SOAP), 15 serving responses, 423–426 Single-page application frameworks, 24 uri_paths definitions, 422–423 Single-page JavaScript applications REST UI, 108–110, 127, 425 (SPAs), 29, 466 Reverse proxies, 455, 458, 460

490 Index Single-site content staging, 92 U Software development Umami theme, 271 kits (SDK), 283–284 Uniform resource identifiers (URIs), 16 API-first distributions, 283 Universal (isomorphic) JavaScript, 477 ecosystem Universal JavaScript, 25, 27–28 Contenta (see Contenta) Universally unique identifiers (UUIDs), 64 Waterwheel (see Waterwheel URL aliasing, 442 ecosystem) SproutCore, 399 Spark initiative, 469–470 V Subrequests, 435 V8 JavaScript engine, 474 blueprints, 437–438, 440–441 Varnish, 458, 462 GET requests, 437 configuration, 462 installation, 436 open source Varnish, 462–463 performance, 435, 441 Varnish configuration language (VCL), 462 POST requests, 437 Views properties, 437–438 REST export displays, 161 request dependencies, 438–439 Views module, 161 superagent, 285 Views REST exports, 161, 456 Swagger Codegen, 452 aliases on field names, 176 Swagger ecosystem, 450 configuration, 166, 171 Paw, 450 field selection, 172–173 Swagger Codegen, 450 filter criteria, 164–165 Swagger UI, 450 GET requests, 178 Swagger specification, see OpenAPI preview, 164 module retrieval, 178 Swift, 284 sort criteria, 167 style options, 178 Virtual DOM, 313 T Virtual reality (VR), 8 Thunder, 269 Voice assistants, 6–7 Time to first interaction, 25 Vue CLI, 389 Time to first paint, 25 installation, 389 Time-to-live (TTL), 463 scaffolding, 389 Titanium, 6 Vue.js, 381, 466 Twig, 468, 474 characteristics, 381 TypeScript, 355 components, 387, 389 syntax packages, 355 declarative rendering, 383 491 Index

Vue.js (cont.) Custom Elements, 406–407 directives, 384–385, 387 Web services, 15, 81 ecosystem, 389–390 Drupal 8 handling errored and loading GraphQL (see GraphQL) states, 394–396 JSON API (see JSON API) incremental adoptability, 381–382 RELAXed Web Services (see launching a local server, 391 RELAXed Web Services module) MVVM-inspired pattern, 382–383 REST UI, 108 reactivity system, 383 Web Services and Context Core Initiative retrieving data from Drupal, 392–394 (WSCCI), 18 scaffolding, 391 Web Services Description Language templates, 383 (WSDL), 15 viewmodel, 383 Web sites CMS, 4 W CSS-based layouts, 4 Waterwheel ecosystem, 284 web applications, 4 ember-drupal-waterwheel, 300–301 web developers, 4 react-waterwheel-app, 301–302 Workspaces, 91 Waterwheel.js (see Waterwheel.js) Workspaces, RELAXed Web Services Waterwheel.swift, 299–300 creation, 217–219 Waterwheel.js, 284 deletion, 236–237 built-in functionality, 286 retrieving, 206–207 bundling, 286 World Wide Web Consortium (W3C), 4 configuration, 287–288 creating content, 292 X deleting content, 294 Xamarin, 6 dependencies, 286 X-CSRF-Token request header, 145 HTTP client, 285 XPath 2.0, 439 installation, 285–286 XMLHttpRequest (XHR), 4, 115 instantiating, 286–287 populating resources, 289 Y resource discovery, 289 YAML, 419 running tests, 286 Yarn, 389 updating content, 293 installation, 389 Waterwheel.swift, 299–300 Web 1.0, 21–22 Web 2.0, 22 Z Web Components, 314, 406 Zero user interfaces, 6–7 492