Progressive decoupling with Webpack

Progressive decoupling has been a thing for quite a while now. In September 2015, in his blog post The future of decoupled Drupal Dries mentioned it as a way of pushing Drupal forward. The advantages of this approach are clear, however, we still aren't experiencing any signs of wide adoption. People are building progressively decoupled widgets here and there yet those rarely end up published as contributed modules. Why is that?

One of the reasons is the lack of an established way of doing it. Drupal 8 introduced the concept of libraries, which work well for old-school js development but lack the tools to support the key areas of the modern JavaScript landscape, like bundling, transpilation, and importing npm packages. As a result, building a progressively decoupled component often requires knowledge of advanced external tools and becomes unnecessarily complicated.

In the perfect world, we'd like to write Drupal libraries in our js framework of choice, have easy access to the npm modules and use the latest features of JavaScript. We'd like to be able to pick our favorite CSS preprocessor, inline svgs easily and be ready to start building something awesome right away. This is more less what Webpack does in the JS world and the webpack module brings all that flexibility to D8.

After this session you'll know how to:

• use modern JavaScript in custom and contrib code
• import npm packages in Drupal libraries
• use webpack loaders to process JSX and .vue files
• build rich, testable and shippable front-end components
• fetch and mutate Drupal data with GraphQL
• extend and alter webpack config

The session is mostly for developers who want to write their Drupal libraries in modern javascript. No prior webpack knowledge is assumed.