Decoupled & Frontend Development

Getting started with Lupus Decoupled Drupal

wolfgang.ziegler — Mon, 22 May 2023 20:40:30 +0000

Getting started with Lupus Decoupled Drupal

Room

HS1 (Ground level)

wolfgang.ziegler Mon, 05/22/2023 - 22:40

Time Slot

Thu 3:00pm to 3:45pm (7/20/23)

Session length

Long session - 45min, including Q&A

Audience

Intermediate

Session Category

Decoupled & Frontend Development

Lupus Decoupled Drupal provides a complete, fully integrated solution for a headless Drupal out of the box - combining the power of Drupal with a modern frontend!

In this session we are building a ddev-based project based upon Lupus Decoupled Drupal - live! We'll start from scratch and will go through all necessary steps to build the site, step-by-step, so you can follow along if you like. We'll be running Drupal next to a nuxt-based frontend, with working authentication, editor-previews, nice-URLs, metatags and layout builder! After setting everything up we'll go through the steps of adding adding a new content type and see how easy the frontend can be customized by writing vue-components. After the basics we'll go through the steps to use layout builder and Views integration within the decoupled setup.

https://www.drupal.org/project/lupus_decoupled
https://nuxt.com/

Speaker(s)

Wolfgang Ziegler

Managing Partner, CTO at drunomics GmbH

Speaker biography

Wolfgang Ziegler is a passionate Drupal contributor and system architect from Vienna, Austria. He is "Managing Partner, CTO" at drunomics in Vienna.

Wolfgang Ziegler - known as fago in the Drupal community - is working with Drupal since 2005. Since then, he authored a variety of different modules, like Rules, Profile2 and their predecessors. He is past maintainer of the core Form and Entity API subsystems and was the lead behind Entity API improvements in Drupal 8, like the new Entity Field API and the underlying Typed Data System.

As part of his position at drunomics, Wolfgang gained a vast experience in utilizing a decoupled architecture by decoupling Drupal and combining it with a Nuxt.js frontend. Furthermore he is an advocate of DevOps principles and loves helping to establishing a DevOps mindset and practices.

Session Keywords

Frontend-Frameworks

Drupal Site-Building

Javascript

Single-Page-Applications

Back End Development

Decoupled Drupal in Jobiqo: a retrospective

joaogarin — Thu, 18 May 2023 08:25:53 +0000

Decoupled Drupal in Jobiqo: a retrospective

Room

HS1 (Ground level)

joaogarin Thu, 05/18/2023 - 10:25

Time Slot

Wed 5:10pm to 5:40pm (7/19/23)

Session length

Short session - 25min, including Q&A

Audience

All Attendees

Session Category

Decoupled & Frontend Development

When we at https://www.jobiqo.com/ started our decoupled journey in 2018 the Drupal decoupled scene was new, very different and less mature than it is today. We found ourselves having to navigate very uncertain waters, not all was easy, but a lot of it was new and exciting and drove a lot of interesting times, personal development, struggles and yes maybe even some tears!

Today we can look back at past mistakes, good decisions, bad decisions, difficult decisions and implementations, great collaboration efforts and things we are not yet even sure were good or bad.

In this session I will go through the initial business (and technical) motivations to change jobiqo’s product which is a SAAS software for creating job boards from a very typical Drupal 7 architecture with a decoupled architecture using Drupal GraphQL and Next.js, what were some of the things we wanted to achieve with it, the risks we knew of, the risks we didn't know of, and analyse if we have delivered on those ideas today.

Doing a radical stack shift like this on a stable and mature product is no easy task, risks are involved, emotions are involved and a lot of buy-in needs to happen in all parts of the organisation (not just from developers) for it to truly succeed.

In this talk we can explore some of those risks and challenges such as :

Time to market (and development time in general)
Lack of knowledge from the team on specific flows / tools to be used
Security and accessibility

And much more.. We also will touch on specific patterns you can find youself fall into that can be detrimental to the team's success such as

Isolating backend and frontend development teams
Working on silos for the sake of "separation of concerns" (spoiler alert, both work on the same concern)
Lack of knowledge sharing

The session does not require any previous knowledge of any specific framework, just a basic understanding of the differences between a typical monolithic architecture and a decoupled architecture.

Speaker(s)

Joao Garin

Senior frontend developer at jobiqo

Speaker biography

Joao Garin

Joao is a senior frontend developer at jobiqo. Has been working at jobiqo for 8 years and worked on both the Drupal 7 version of jobiqo's product and the newer decoupled product. Joao is a tech lead on the product team and is passionate about frontend development, CSS, Javascript and Drupal.

A father of 2, loves surfing, skating, video games and frontend development, huge tolkien nerd also 🤷‍♂️ . You can find him in Lisbon and once every 2 or 3 months for a week in Vienna to join the team in the office and hang out.

Session Keywords

They come from the Future (frontend stuff)

textformer — Sun, 14 May 2023 22:47:32 +0000

They come from the Future (frontend stuff)

Room

HS4 (Ground level)

textformer Mon, 05/15/2023 - 00:47

Time Slot

Wed 2:00pm to 2:45pm (7/19/23)

Session length

Long session - 45min, including Q&A

Audience

Intermediate

Session Category

Decoupled & Frontend Development

This session will focus on HTML, CSS and JS. Some features you will have heard of – like Container Queries and the Parent Selector :has, which you can use already. The main bulk of the session will focus on stuff you may not have heard of – and will probably not be able to use right now. But a little bit down the road some of this will be quite useful.

For example, did you know that we have an brand new HTML element with <search>? With this addition every ARIA landmark now has a native HTML equivalent..
CSS Cascade Layers offer developers better control over which styles take priority, by defining explicit contained layers of specificity.
The View Transitions API will allow animated transitions between different web pages.
The Popover API proposes a standard mechanism for displaying popovers on the Web.

There is actually a lot more on the horizon. Let’s see how much I can cram into 45 minutes. We will not go into details for every feature as some aspects are still changing. The session aims to give you a good overview over some exciting topics.

Speaker(s)

Nicolai Schwarz

Warlock of the Wicked at textformer mediendesign

Speaker biography

Nicolai has been working as a web developer for almost twenty years – mostly with Drupal and, more recently, with Backdrop. He has written over 100 articles for german magazines like t3n, Screenguide and PC Magazin about various tools, CMS and frontend stuff. He was also involved in the organization of some DrupalCamps in Essen, Germany.

Session Keywords

CSS

Javascript

Build a fully decoupled application with Drupal and NextJS

VincenzoGambino — Sat, 13 May 2023 15:31:59 +0000

Build a fully decoupled application with Drupal and NextJS

Room

HS4 (Ground level)

VincenzoGambino Sat, 05/13/2023 - 17:31

Time Slot

Sat 11:00am to 11:45am (7/22/23)

Session length

Long session - 45min, including Q&A

Audience

Beginner

Session Category

Decoupled & Frontend Development

This session will show how NextJS and Drupal can create powerful and flexible web applications. We will set up Drupal to manage our content and provide APIs for your NextJS, and we will explore the basic content management functionality of Drupal. NextJS will then be used to build our web application's front end. We will see how to create queries to retrieve content using the Drupal API. We will set up dynamic routes to handle content, allowing fast and efficient server-side rendering.

We will explore the Next.js for Drupal npm package that provides a powerful client for working with JSON:API

Learning Objectives

- Understand the approaches of a fully decoupled Drupal Application

- Configure Drupal Webservices and Next.js for Drupal module.

- Set up and build a NextJS application for Drupal.

Prerequisites

Basic knowledge of Drupal JSON:API, ReactJS and TypeScript.

Synopsis

This session will provide valuable insights and techniques for building dynamic, scalable, fully decoupled Drupal applications.

Speaker(s)

Vincenzo Gambino

Speaker biography

I am a Senior PHP and Javascript Software Developer from London, UK, with experience building Web Applications for medium-big sized businesses.

Session Keywords

React

Frontend-Frameworks

Javascript

Stupid Simple: Creating Simple, Reusable, Accessible Javascript Interactivity in Drupal (or wherever)

ctorgalson — Sun, 23 Apr 2023 15:05:53 +0000

Stupid Simple: Creating Simple, Reusable, Accessible Javascript Interactivity in Drupal (or wherever)

Room

HS13 (2nd floor)

ctorgalson Sun, 04/23/2023 - 17:05

Time Slot

Wed 10:45am to 11:30am (7/19/23)

Session length

Long session - 45min, including Q&A

Audience

Intermediate

Session Category

Decoupled & Frontend Development

There are a few kinds of javascript-based interactive components that experienced front-end developers have typically built many times. We usually do this because we think the implementation needs to be specific to a given project even though we routinely re-use other code (like contrib modules and base themes) on every project.

If we could avoid this, we'd benefit by reducing time spent re-inventing the wheel, and by making it possible to back-port bugfixes and new features to existing projects.

Well, we can avoid it. Reusable, extensible, customisable implementations of these small interactive components is surprisingly simple--and fast.

In this session, I will:

outline a flexible way to design and plan simple interactive javascript components for web projects with or without Drupal,
step through the implementation of a flexible, customisable, and accessible version of the Web Accessibility Initiative's "disclosure" (or show/hide) pattern,
(time permitting) step through extending the disclosure to create another common type of interactive component.

Attendees to the session will learn:

a way to decide the appropriate roles of html, javascript, and css when building interactive tools,
a way to design javascript for progressive enhancement,
a way to design javascript for reusability & extensibility,
a way to design javascript for customisibility,
a way to design javascript for responsivity,
a way to design your javascript for accessibility,
a way to make javascript responsive.

Speaker(s)

Christopher Torgalson

Front End Developer at Annertech

Speaker biography

Christopher Torgalson has been building stuff on and for the web ever since failing to make a go of a career doing philosophy. His core competencies are the front-end, specifically in Drupal, but he also has experience in the back-end and in devops.

He currently works with Annertech where he does front-end, back-end, and devops work.

Session Keywords

Javascript

CSS

Frontend Performance

Commerce Decoupled - NextJS and the commerce_api module

Cryt1c — Mon, 27 Mar 2023 08:40:26 +0000

Commerce Decoupled - NextJS and the commerce_api module

Room

HS13 (2nd floor)

Cryt1c Mon, 03/27/2023 - 10:40

Time Slot

Wed 11:45am to 12:15pm (7/19/23)

Session length

Short session - 25min, including Q&A

Audience

Intermediate

Session Category

Decoupled & Frontend Development

In this presentation, the use of Nextjs and the Drupal commerce_api module for creating a decoupled webshop will be explored. Statically generated pages for products and and product variations will be focused on, as well as the addition of products to the cart, handling amounts, and deleting order items.
Products with flexible pricing will also be discussed, as well as the management of anonymous and user-assigned carts. The registration process during checkout will also be examined, with an emphasis on creating a seamless and efficient user experience for customers.
Throughout the presentation, best practices and tips for creating a successful decoupled webshop using Nextjs and the Drupal commerce_api module will be shared. Finnally, a real-life example of a webshop that has successfully implemented this approach will be presented.
By the end of the presentation, attendees will have a clear understanding of how Nextjs and Drupal commerce_api can be integrated to create a decoupled webshop that is both flexible and provides a great user experience. It will also provide you with the tools and knowledge needed to create your own decoupled webshop using these technologies.

Speaker(s)

David Peherstorfer

Software Engineer at NETNODE

Speaker biography

David Peherstorfer is a web developer who is passionate about learning new things and sharing his knowledge with others. He has been working with Drupal since 2016 and is experienced in developing web applications using this platform. David enjoys working with APIs (GraphQL/JSON API), decoupled Drupal and Nextjs.

Based in the mountainous region of Vorarlberg, David works at NETNODE in Luzern. He loves the natural beauty of his surroundings and enjoys hiking and skiing in his free time.

David's enthusiasm for web development and his dedication to learning make him a valuable speaker on topics related to Drupal and web development.

Session Keywords

Ecommerce

React