Decoupled Days 2018

This sessions will lift the curtain of the biggest Decoupled Website that we run at Amazee.

It will cover:

How we project is setup in terms of Git Repos, Team structures
How it is hosted on Kubernetes and what we specifically learned from hosting Decoupled within Docker & Kubernetes
The CDN and reverse proxy caching architecture with 3 places where the CDN is caching requests
Other things we learned running such a big website

This session will look at popular scenarios for decoupled architectures, drawn from Bluecadet’s work building websites, native apps, and touchscreen/projection interactives. It will cover reasons for/against decoupling your architecture, and take a look at different ways to serve data, including core REST functionality,Views, custom controllers, and GraphQL. We’ll also look at how to use Service Workers to achieve realtime communication between your CMS and frontend application(s). Attendees will get both a high-level over view of decoupled architectures as well as practical steps for trying out Drupal as a decoupled CMS.

Does a reusable, organized, fully tested and accessible React project sound like a dream? What about visualizing it as you build it for your teammates using Storybook?

Through our recent work at Four Kitchens with PRI.org, we were able to accomplish this very setup to create a more performant and sustainable frontend for their Drupal 7 backend. In this session, we will walk through this approach and toolkit, including how to install and build a new React project using:

Storybook and React component structure
Atomic Design organization
Testing using Jest and Jest snapshots (and optional Jest Storybook addon)
Storybook A11y Addon for accessibility
Other helpful Storybook Addons like Link, Knobs, Notes, and more!
This talk is geared towards Frontend React/JavaScript developers including beginners!

Decoupled Drupal is a thing for quite a while now. There seem to be two ways of doing it. We either let the Javascript take control and use Drupal only as a data store (fully decoupled) or let Drupal do the heavy lifting and use the front end frameworks to render discrete parts of the site (progressive decoupling). The first option seems to be much more popular now, even despite the fact that it’s expensive and forces us to re-implement a lot of things that Drupal does well. Why is that?

In this session, we'll try to answer this question. We'll start with a brief description of the JavaScript modernization initiative for Drupal core and ways of applying it to contrib and custom code. We'll discuss possible use cases, investigate common problems, and take a closer looks at the available tools. We'll finish up with a concrete example of a progressively decoupled widget.

The session is for developers interested in using the newest front-end trends in their projects without the hassle of going fully decoupled. The examples will use Vue and GraphQL but no prior knowledge of these tools is required.

Estee Lauder Companies (ELC) has been the global leader in prestige beauty brands. ELC manufactures and markets various marquee brands across skincare, makeup, fragrance & hair care product lines.

With a global workforce with requirements around customer intimacy, product knowledge, regional trends and promotions, ELC invests a lot in making regular learning as part of the job to ensure that their Beauty Advisors are knowledgeable about the products and deliver exceptional customer experience. This is realized through a scalable and global "Learning Experience" platform which has been rolled out to 25,000+ field operators in 20 countries in 14 languages.

Danielle Arnon, Executive Director & Strategic Business Partner at ELC and Srijan would share the decoupled, progressive, responsive & native interfaces of Learning Experience platform and a modular roadmap where we are integrating concepts like AI-based micro-learning, Chatbots, AR/VR, Live Stream and Machine Learning Chatbots.

We will be talking briefly about:

Current features (Product Library, Courses, Points Redemption etc)
Overall Architecture
Our decision to go decoupled and future state of the platform.
How micro-learning fits in and the chatbots then become an extension of the whole experience
The talk will also discuss various content authoring tools and our final choice.

HATEOAS, or "hypermedia as the engine of application state", is a RESTful principle and a deeply embedded idea of the JSON API specification.

Let's take a dive into JSON API and explore some unsung pieces of the specification. We'll see how you can use those parts to speed up your decoupled apps, to write simpler API clients and to solve frustratingly complex problems in an "elegant" way.

As an attendee you should come with a passing understanding of REST. Maybe you've implemented a project or two that integrated with a RESTful web service. Maybe you've wondered, "how do I know when to disable the 'Buy' button when a product is out of stock?" or "how do I know when to show an "Edit" link for a resource without duplicating backend logic on the frontend?"

Angular is keeping its focus on making the lives of developers easier. Hear updates on and see a live demo of building a Schematic, shipping Angular code with Angular Elements, and see the work that the Angular team is putting into helping developers stay up to date with a constantly evolving ecosystem

Decoupling Drupal gives you access to a wide range of front-end tools for creating dynamic interactive interfaces, but fully decoupling means you may have to recreate a lot of functionality that Drupal provides out of the box. A progressively decoupled approach allows you to focus your time and budget on key interfaces while still taking advantage of Drupal features that are often taken for granted.

This session will cover three case studies in which we helped solve unique problems for clients – each progressively decoupling Drupal with different approaches. We’ll walk through the architecture and approach taken when creating:

* An interactive tuition calculator for Stanford Summer Sessions using Vue and drupalSettings
* An open source event management system for libraries, in collaboration with Richland Library, using React, JSON API and custom API routes with ILS integration.
* A lottery system for the Denver Museum of Contemporary Art, known as the Octopus Initiative, that gives patrons a chance to display works of art in their own. Built with React and GraphQL

All these projects presented their own unique challenges. Each approach and technology gave us insight into their advantages and disadvantages. We hope that sharing these experiences will inspire you to decouple where it makes sense without having to reinvent the wheel.

Our session will begin with a tour through our recent project — bring content from disparate sites (D7, D8, Wordpress) into a single index and then serve results out in a consistent manner, allowing users to search across all included properties. We’ll discuss how we got started with React, our process for hooking up to SOLR, and how we used Drupal to tie the whole thing together.

Next, we’ll discuss how we abstracted this project into a reusable product to federate and serve data across disparate data sources, Drupal and otherwise. We’ll surface some assumptions we’ve made about platforms and data, and discuss what’s flexible in the product and what could use some more abstraction.

Finally, we’ll show you how you can leverage this product for your own sites and discuss our roadmap for future work.

What's the deal with all this serverless talk? In this session you will learn the basic concepts around serverless. Serverless is a broad term used to describe an approach where the developer doesn't have to manage the server, only pays for what resources they use, and where scaling is automatic. We will take a beginner friendly look at this approach to development as well as walk through real world examples of use cases. Serverless has many uses, especially for decoupled projects. Attendees will leave with a good working knowledge on the subject.

Drupal's theming and rendering layer is, historically speaking ... difficult to master. Drupal 8 brought with it a number of tools that make it a glorious provider of JSON APIs and many frontenders have responded by considering throwing out the theme layer altogether for their next project. This approach is not without considerable and often overlooked risks and costs in exchange for that agility on the frontend though.

During this talk we'll cover:

Reasons why many folks explore this decoupled approach and how often times what results is actually just a "distributed monolith"
The complexities that this distributed monolith approach brings to not just your development process but also your deployment and maintenance routines.
The many glorious advantages of sticking with Drupal's theme layer for rendering good old HTML.
There are no prerequisites for this talk aside from being curious about application architectures and being open to having both the exotic as well as the mundane in your toolkit.

Want to see new ways to take full advantage of Drupal using Symfony Components? This is for you! As a non-Drupal developer who works with Symfony Framework for years I'm trying to bring communities together by showing Drupal developers the power of the Symfony components available in Drupal and to show Symfony Framework developers that Drupal can also do the things they are used to work with. This session is about a journey to a completely alternative way to create a Restful API without using any of the well known modules. Don't be afraid to let go of the drupalisms you know and love...

At the end of this session you will:

know the different between Symfony Components and Symfony Framework
know how event subscribers can add powerful functionality
know how Symfony components can improve your workflows
and how this attract non-Drupal developers to help on Drupal projects
learn how to create controllers as services and why this is useful
learn how you can configure controllers with annotations
have a basic understanding of Symfony Form
learn about auto-wiring features available in Drupal 8.5
be excited to try everything yourself!

OpenStory is an administrative interface for content editors using Drupal 8.x. It is opensource and is built with AngularJS. It aims to improve the authoring experience on Drupal 8 through a state-of-the-art interface optimized for content management, comments management and user management functionalities. OpenStory connects to any Drupal 8 site through the API layer.

During the session you will learn how a decoupled Drupal frontend can be built with AngularJS, how does it interact with the Drupal admin interface and what benefits it brings to content editors.

An idea to demo AWS Lex interface along with the basic GUI, that is responsible for answering the question over the web interface of the visitor on the fly. Hence, an idea to minimize the overhead of the user for frequently navigating to various links for the content. Again that will help in evolving the conversational interface, based on the interaction with the bot by giving more user-interest driven content. From human to bots, error prone to error free.

Commerce Guys works with a variety of high-volume and forward thinking merchants who require the scalability and flexibility of JavaScript based eCommerce solutions. Based on recent and upcoming client work, we spent February and March defining and developing a standard Cart API that supports progressively decoupled shopping carts in Drupal Commerce for Drupal 8.

The new Commerce Cart API project and reference implementation in Commerce Cart Flyout demonstrate the end result. They afford Drupal Commerce merchants a user experience on par with other major eCommerce software platforms and hopefully make it easier for Drupal agencies to sell Drupal Commerce to their customers.

The work wasn’t without its challenges. We reviewed the core RESTful Web Services and contributed JSON API projects but found unforeseen blockers in using either project completely. In this session, Drupal Commerce co-maintainer Matt Glaman will present Commerce Guys’s comparative analysis of the various API architectures in the Drupal ecosystem and introduce what we developed to meet our requirements for decoupled Drupal Commerce.

Elm is a frontend language that compiles to JavaScript, is strongly-typed, purely-functional, immutable, and promises *NO RUNTIME ERRORS*. No, really. On top of all that, Elm brings enforced semantic versioning, a robust package manager, unidirectional data flow (Redux references Elm as prior art!), a friendly compiler with helpful error messages, and super clean syntax.

Let me share with you the joy that is Elm when building out a frontend application.

In this session, we'll explore Therefore Interactive's experience building a data-rich, and highly interactive web application leveraging the Contenta Decoupled Drupal 8 Distribution and a React Material UI, based front-end.

Working to modernize a robust, legacy product for a nationally recognized non-profit leader and social enterprise (Imagine Canada's Grant Connect) required careful consideration and an optimized approach. A dedicated and specialized customer base, a restrictive budget, and decades of highly complex data, all presented unique challenges to solve.

Exploring both process and approach, from initial research, through beta launch, this presentation will outline Therefore Interactive's journey to deliver a market-ready product in 3 months by leveraging best in class technology, parallel development efforts, and a focused minimum viable product strategy.

Topics we'll cover:

Process: UX research, strategy, and design, Agile
Approach: minimum viable product, close collaboration, feedback & iteration
Development: parallel efforts, cross-disciplinary teams
Technology: Contenta, React, Material UI
What attendees should know:

Basic familiarity with UX, Agile development, and MVP
Basic familiarity or experience with React, decoupled Drupal
What an attendee will learn:

First hand experience implementing Contenta + React in building a data rich web application
How a decoupled technical approach using Drupal is a good fit for building content management based products and services
How MVP oriented UX strategy and close Agile collaboration can produce great results in a short period of time

Gatsby is a React static site generator that has first class support for Drupal! In this talk, the founder of the Gatsby project Kyle Mathews will introduce Gatsby and how it's helping teams all around the world build blazing fast sites and actually enjoy themselves in the process. We'll then dive into Gatsby's Drupal integration and show how the two make a beautiful match.

Intended Audience: People who are interested or using a decoupled architecture should be interested as even people that have already chosen a solution will still have new projects which Gatsby could help with.

Anyone with a few Drupal sites under their belt knows that page caching is the key to a fast, easy-to-scale website, but what if the client is the front-end instead of a browser?

In this presentation, we'll look at best practices for caching when Drupal serves mostly as an API. Topics will include HTTP and REST caching best-practices, patterns for fine-grained invalidation of API responses, and how the front-end can work best when there's a proxy cache (e.g. Varnish) between it and Drupal.

In this session we'll analyze how Chromatic and Meredith Corporation evaluated the benefits of decoupled architecture for Meredith’s brand portfolio. Meredith, who owns and operates a slew of media brands using Drupal to serve tens of millions of users per month, needed a platform that could accommodate all of the brands’ varying needs. After close examination, we concluded that a decoupled architecture was the best solution.

In this session we’ll:

see why the architecture of our code is most successful when it reflects business goals.
discuss the roles of Drupal and Express in our headless platform and how we drew the lines between them.
cover the tools and techniques we used to connect the various layers; including Varnish, json:api, a custom data mapper, and custom APIs.
explore how otherwise isolated sites share and contribute back to the code used across a shared Meredith platform.
This session is for anybody interested in what a decoupled architecture looks like in a context where content and resources are shared across a variety of sites.

haxtheweb.org is a completely decoupled authoring solution for content. Think of it like an advanced WYSIWYG editor that's able to author web components in the front end and then send to the backend an HTML blob of these advanced component elements. HAX takes the concept of web components to the next level by adding in a small piece of schema that's fired in a uniform event when registered with the DOM. This allows front end devs to write assets that are HAX capable with a handful of lines of code, and for HAX to learn about the components that its able to write dynamically. HAX is probably one of the only projects that works in Drupal 6, 7 and 8 and would provide a uniform UX regardless of system (it also has integrations for GravCMS, Backdrop, Electron, static sites). It's a bit unbelievable how simple it makes building; come learn how to join the authoring revolution.

Drupal excels at empowering people to manage data and curate their content. With the initiative towards further decoupled architectures, we can serve that content in a variety of new and interesting ways. Drupal is already really really good at storing and maintaining lots of data. Now imagine the possibilities of analyzing that data with machine learning tools. From predictively serving content based on event data and algorithms that study user trends to sentiment analysis, and beyond.

Imagine the capability to:

Suggest other related products a user might be interested in purchasing based on past trends
Find music recommendations based on a user’s recent interactions with other music tracks
Perform Lead Scoring (likelihood that a user will convert in the current session)
Understand overall user sentiment around a given topic and context
Predict financial trading patterns
Detect live earthquakes from twitter feeds, faster than a geologic center can issue a warning
These goals are now possible, along with much much more.

Together we'll embark on a journey to connect Drupal and Apache PredictionIO, using machine learning algorithms to learn how to gain better insights with predictive analysis on the data stored within Drupal.

This session will provide an introduction to Reactive Programing based on the ReactiveX library for JavaScript. Reactive Programming is a way to declare reactions to data change using data flows that transform data that crosses them. Although in a JavaScript environment not all data is asynchronous, most of it indeed is: user interaction, Web Workers, server pushes from WebSockets, AJAX calls or any other asynchronous calls.

As client-side applications get more complex so does the management of all of this interrelated data. While Promises are an improved approach to manage this complexity than simple callbacks, Observables, operators and other tools from the Reactive Programming are a superior solution that allows creating data pipes that simplify the declaration of application behaviors. This produces a shorter and meaningful code that is easier to understand than other approaches. Because of this, it makes code more maintenable.

Nowadays much of the application logic is placed in the client, and Reactive Programming is a must when dealing with more than simple applications with a low level of data interrelation and interaction.

RxJS is intensively used in Angular, but can be used by importing a library in combination with others libraries like React or Vue.js, or coding an application from scratch.

For this session, attendees would have some experience building asynchronous applications or have some notions about difficulties building those.

After this session, attendees will understand the basic principles of the Reactive Programming and when they should consider using it in a project.

A case study on decoupled information flow architecture for digital display deployments and how we utilized both Firebase and a RethinkDB NoSQL layer to provide real-time updates from Drupal. Display hardware planning via a Raspberry Pi setup will also be included. This topic will include both discussions around digital signage architecture decisions and code implementations, as well as the React and Node.JS front end build.

Gatsby.js is a self described "blazing-fast" static site generator for React. With the gatsby-source-drupal plugin you can easily pull data from a Drupal 8 site using the JSON API Module. While this sounds like a match made in heaven, I’ve noticed that many others in the Drupal community aren’t using gatsby-source-drupal when building sites with Gatsby. After rebuilding my site using Gatsby and gatsby-source-drupal I’ve encountered some limitations that I think might explain this trend.

This session will review:

The challenges I’ve encountered with using Gatsby and Drupal together
Difficulties using the often file and markdown focused plugins offered in the Gatsby plugin ecosystem.
Tips and tricks for using Drupal with Gatsby in a way that can take better advantage of other powerful Gatsby plugins.
Advantages to using Gatsby with Drupal and why I am likely to stick with it.

Are you someone who is struggling with making a decision on what to use when decoupling Drupal what could be the possible solutions available till now.

I’ll walk you through various options and what to use when like a Coupled Drupal, Progressively Decoupled Drupal and Fully Decoupled Drupal talking about the must haves/essentials your project needs keeping in mind the intent of what we need to build and the things which the project can and can’t live without.

Takeaway:

At the end of the session you would be able to make a best fit decision, giving teams the ability to use to architectural robustness which each approach provides.

To know more join me in my session.

In this talk we’ll describe how we solved four key challenges in moving from a Drupal 7 site to a decoupled website using Drupal 8, node, and react. Some of these challenges include: implementing content previews using the front-end, URL handling responsive image handling, and building flexible landing pages. We’ll talk about how using a decoupled architecture translated to specific benefits. Attendees should have exposure to Drupal and modern front-end frameworks like node/react. Attendees will learn how to overcome major hurdles on the road to a decoupled Drupal solution.

Companies have successfully started using chatbots to connect with consumers to meet basic request and chat-based interfaces will probably replace apps as the primary way people use the internet.

Today chat and voice based bots can not only read, write but also respond in a conversational user interface. Bots are now able to automate workflows, transactions, initiate conversations and also personalize engagements for the users in different industries like healthcare, education, search and even E-commerce.

In this session we will talk about how Bots offer a way to change the shopping experience through “conversational commerce” where consumer and business are able to connect in more meaningful way.

We will see how Decoupled Drupal Commerce, Bot Frameworks and Natural Language Understanding (NLU) can be used to provide a seamless shopping experience for ECommerce websites built in Drupal using Drupal services layer.

How we can expose some the common E-commerce functionality like search, exploring products and more as REST API’s.
Bots will allow search and explore the products by integrating Drupal Commerce APIs.
Bots will allow simple, convenient add to cart, review cart functionality via message-based interactions.
Bots can provide relevant actions while browsing the products.
In the session, we will talk about:

Drupal 8 core services and creating custom REST API’s.
Using Decoupled Drupal Commerce API’s with a ChatBot.
Using Node.js and Bot Framework to build ChatBot.
Some of the Bot frameworks and other cognitive services that can be used to build Bots for your use-case.

That's a wrap, kids!