Web Components https://www.tag1consulting.com/ en Tag1 goes to DrupalCon Prague 2022 https://www.tag1consulting.com/blog/tag1-goes-drupalcon-prague-2022 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>Join our experts in person at DrupalCon Prague 2022 - Sept 20-23, 2022 - for three talks, and a workshop! <a href="https://www.drupal.org/u/slashrsm">Janez Urevc</a> and <a href="https://www.drupal.org/u/Fabianx">Fabian Franz</a> along with Google’s Andrey Lipattsev will present how our collaboration with Google is making the web faster, and how <a href="https://developers.google.com/learn/pathways/web-vitals">Google’s Web Vitals initiative</a> supports better user website experiences. Look for our presentation, <a href="https://events.drupal.org/prague2022/sessions/core-web-vitals-improving-end-user-experience-drupal">Core Web Vitals: Improving the End User Experience of Drupal</a>. Gain a plethora of new tools to make your dev life easier by attending Fabian’s talk: <a href="https://events.drupal.org/prague2022/sessions/components-everywhere-component-library-module-fully-decoupled-layout-builder">Components everywhere! From Component Library module to Fully Decoupled Layout Builder with Instant Preview</a> . Share <a href="https://events.drupal.org/prague2022/sessions/getting-started-drupal">Getting Started with Drupa</a>l presented by <a href="https://www.drupal.org/u/dinarcon">Mauricio Dinarte</a> with your Biz Dev friends as well as with friends getting into the world of Drupal. They will walk away with a great foundation to continue their Drupal learning journey. Schedule: * <a href="https://events.drupal.org/prague2022/sessions/components-everywhere-component-library-module-fully-decoupled-layout-builder">Components everywhere! From Component Library module to Fully Decoupled Layout Builder with Instant Preview</a> - Tues., Sept 20th at 3:00 pm CEST * Google’s Privacy BoF - Tues., Sept 20th at 3 - 3:45pm CEST * <a href="https://events.drupal.org/prague2022/sessions/getting-started-drupal">Getting Started with Drupal</a> - Wed., Sept 21th at 10:30 CEST * <a href="https://events.drupal.org/prague2022/workshops">Tag1 &amp; Google Performance Workshop</a> - Wed., Sept 21st 4:15 pm CEST *...</p> <div class="more-link"><a href="/blog/tag1-goes-drupalcon-prague-2022" class="more-link" aria-label="Read more about Tag1 goes to DrupalCon Prague 2022" hreflang="en">Read more</a></div> </div> <span><span>phoenix@tag1co…</span></span> <span>Tue, 09/06/2022 - 01:55</span> Tue, 06 Sep 2022 08:55:24 +0000 phoenix@tag1consulting.com 448 at https://www.tag1consulting.com Web Components https://www.tag1consulting.com/web-components <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Web Components are comprised of <em>custom HTML elements</em>. In other words, developers can define custom HTML tags outside of the current range of available elements. Web Components consist of three major parts: a template in HTML, scoped styles in CSS, and scoped JavaScript.</p> <p>The future of <a href="/decoupled" title="decoupled Drupal">decoupled Drupal</a> is looking strongly in the direction of Web Components. Learn more about how Tag1 is incorporating components into our work:</p></div> <span><span>lynette@tag1co…</span></span> <span>Thu, 04/08/2021 - 09:21</span> <div class="field field--name-field-blog-tags field--type-entity-reference field--label-hidden clearfix"> <div class="views-element-container form-group"><div class="view view-cornerstone-item-list view-id-cornerstone_item_list view-display-id-default js-view-dom-id-5de99fd82c0a4a706eb058699cee346c06076f76fdd1c9e9a0193237bc768fd0"> <div class="view-content"> <h3>Tech Overview</h3> <div class="views-row"> <article data-history-node-id="147" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/web-components-part-1" rel="bookmark"> <span>Components everywhere: Is Drupal’s front-end future in Web Components? - part 1</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="161" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/web-components-part-3" rel="bookmark"> <span>Components everywhere: How JSX can inspire Twig components for Drupal&#039;s front end - part 3</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="159" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/web-components-part-2" rel="bookmark"> <span>Components everywhere: How a virtual DOM could bring Drupal to a reactive front-end future - part 2</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="185" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/declarative-components-drupal-next-steps-components-everywhere-drupal-part-2" rel="bookmark"> <span>Declarative components in Drupal: Next steps for components everywhere in Drupal - part 2</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="99" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/deep-dive-rich-text-editors-tagteamtalk-002" rel="bookmark"> <span>A Deep Dive Into Rich Text Editors - TagTeamTalk #002</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item vlog">Vlog</div> <div class="field--item podcast">Podcast</div> </div> </div> <div class="field field--name-field-length field--type-string field--label-visually_hidden"> <div class="field--label sr-only">Length</div> <div class="field--item">57 min talk</div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="149" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/laravel-part-2" rel="bookmark"> <span>Laravel at enterprise scale: Resolving back-end and front-end challenges for an organization serving millions of users - part 2</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="162" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/web-components-part-4" rel="bookmark"> <span>Components everywhere: How to enable server-side rendering with Web Components in Drupal-part 4</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="175" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/declarative-components-drupal-how-drupal-can-make-true-shared-components-reality-part-1" rel="bookmark"> <span>Declarative components in Drupal: How Drupal can make true shared components a reality - part 1</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <h3>General Overview</h3> <div class="views-row"> <article data-history-node-id="170" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/enabling-declarative-components-everywhere-drupal-web-components-out-box" rel="bookmark"> <span>Enabling Declarative Components Everywhere: Drupal + Web Components Out of the Box - Tag1 TeamTalk #019</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item vlog">Vlog</div> <div class="field--item podcast">Podcast</div> </div> </div> <div class="field field--name-field-length field--type-string field--label-visually_hidden"> <div class="field--label sr-only">Length</div> <div class="field--item">51 min talk </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="448" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/tag1-goes-drupalcon-prague-2022" rel="bookmark"> <span>Tag1 goes to DrupalCon Prague 2022</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> <div class="views-row"> <article data-history-node-id="119" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/decoupled-drupal-strengths-and-weaknesses-tag1-team-talk-008" rel="bookmark"> <span>Decoupled Drupal - Strengths and Weaknesses -Tag1 Team Talk #008</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item vlog">Vlog</div> <div class="field--item podcast">Podcast</div> </div> </div> <div class="field field--name-field-length field--type-string field--label-visually_hidden"> <div class="field--label sr-only">Length</div> <div class="field--item">49 min talk</div> </div> </div> </article> </div> <h3>Functionality</h3> <div class="views-row"> <article data-history-node-id="164" role="article" class="blog cornerstone-teaser clearfix"> <p class="title"> <a href="/blog/web-components-part-5" rel="bookmark"> <span>Components everywhere: How Web Components and reactivity could reinvent Drupal - part 5</span> </a> </p> <div class="content"> <div class="field field--name-field-blog-type field--type-list-string field--label-visually_hidden"> <div class="field--label sr-only">Media type</div> <div class="field--items"> <div class="field--item blog">Blog</div> </div> </div> </div> </article> </div> </div> </div> </div> </div> Thu, 08 Apr 2021 16:21:02 +0000 lynette@tag1consulting.com 353 at https://www.tag1consulting.com Declarative components in Drupal: Next steps for components everywhere in Drupal - part 2 https://www.tag1consulting.com/blog/declarative-components-drupal-next-steps-components-everywhere-drupal-part-2 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p><a href="https://www.tag1consulting.com/blog/how-drupal-can-make-true-shared-components-reality-part-1" title="Part 1">Part 1</a> | Part 2 Emerging approaches to front-end development portend a very different world from the one we live in today with regard to handling and juggling components. After all, new best practices promulgated by the likes of JavaScript technologies like React are overturning our preconceived notions about components and our foregoing definitions. For instance, React now contains both declarative rendering of components through JSX and efficient document object model (DOM) diffing through the concept of Virtual DOMs. Despite all of this progress, however, content management systems (CMS) like Drupal and others have not kept pace with the rapid change in how components are realized in front-end ecosystems. Can they ever catch up? <a href="https://www.drupal.org/u/fabianx">Fabian Franz</a> (Senior Technical Architect and Performance Lead at Tag1) presented <a href="https://www.youtube.com/watch?v=RK4BG3hsN3I">a well-attended session entitled "Components everywhere: Bridging the gap between back end and front end"</a> at DrupalCon Amsterdam 2019 that articulated his dream vision for shared components across back end and front end in Drupal's own native rendering. He recently rejoined <a href="https://www.drupal.org/u/michaelemeyers">Michael Meyers</a> (Managing Director at Tag1), and me (<a href="https://preston.so/">Preston So</a>, Editor in Chief at Tag1; Senior Director, Product Strategy at Oracle; and author of <em><a href="https://www.amazon.com/Decoupled-Drupal-Practice-Architect-Architectures/dp/1484240715">Decoupled Drupal in Practice</a></em>) for [a Tag1 Team...</p> <div class="more-link"><a href="/blog/declarative-components-drupal-next-steps-components-everywhere-drupal-part-2" class="more-link" aria-label="Read more about Declarative components in Drupal: Next steps for components everywhere in Drupal - part 2" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Mon, 07/20/2020 - 12:11</span> Mon, 20 Jul 2020 19:11:02 +0000 preston 185 at https://www.tag1consulting.com Declarative components in Drupal: How Drupal can make true shared components a reality - part 1 https://www.tag1consulting.com/blog/declarative-components-drupal-how-drupal-can-make-true-shared-components-reality-part-1 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>Part 1 | <a href="https://www.tag1consulting.com/blog/next-steps-components-everywhere-drupal-part-2" title="Part 2">Part 2</a> Front-end development workflows have seen considerable innovation in recent years, with technologies like React disseminating revolutionary concepts like declarative components in JSX and more efficient document object model (DOM) diffing through Virtual DOMs. Nonetheless, while this front-end development revolution has led to significant change in the developer experiences we see in the JavaScript landscape and to even more momentum in favor of decoupled Drupal architectures in the Drupal community, it seems that many traditional CMSs have remained behind the curve when it comes to enabling true <em>shared</em> component ecosystems through developer experiences that focus on facilitating shared development practices across back and front end. At DrupalCon Amsterdam 2019, <a href="https://www.drupal.org/u/fabianx">Fabian Franz</a> (Senior Technical Architect and Performance Lead at Tag1) delivered <a href="https://www.youtube.com/watch?v=RK4BG3hsN3I">a session entitled "Components everywhere: Bridging the gap between back end and front end"</a> that delved into his ideal vision for enabling such shared components in Drupal's own native rendering layer. Fabian joined <a href="https://www.drupal.org/u/michaelemeyers">Michael Meyers</a> (Managing Director at Tag1), and me (<a href="https://preston.so/">Preston So</a>, Editor in Chief at Tag1; Senior Director, Product Strategy at Oracle; and author of <em><a href="https://www.amazon.com/Decoupled-Drupal-Practice-Architect-Architectures/dp/1484240715">Decoupled Drupal in Practice</a></em>) for <a href="https://www.tag1consulting.com/blog/enabling-declarative-components-everywhere-drupal-web-components-out-box">a Tag1 Team Talks episode</a> highlighting the progress other ecosystems have made...</p> <div class="more-link"><a href="/blog/declarative-components-drupal-how-drupal-can-make-true-shared-components-reality-part-1" class="more-link" aria-label="Read more about Declarative components in Drupal: How Drupal can make true shared components a reality - part 1" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Wed, 07/08/2020 - 05:59</span> Wed, 08 Jul 2020 12:59:06 +0000 preston 175 at https://www.tag1consulting.com Enabling Declarative Components Everywhere: Drupal + Web Components Out of the Box - Tag1 TeamTalk #019 https://www.tag1consulting.com/blog/enabling-declarative-components-everywhere-drupal-web-components-out-box <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>Many front-end technologies, especially React, now consider the notion of declarative components to be table stakes. Why haven't they arrived in environments like the Drupal CMS's own front end? Many native CMS presentation layers tend to obsolesce quickly and present a scattered or suboptimal developer experience, particularly against the backdrop of today's rapidly evolving front-end development workflows. But according to Fabian Franz, there is a solution that allows for that pleasant front-end developer experience within Drupal itself without jettisoning Drupal as a rendering layer. The solution is a combination of Web Components support within Drupal and intelligent handling of immutable state in data that allows for Drupal to become a more JavaScript-like rendering layer. Rather than working with endless render trees and an antiquated Ajax framework, and instead of reinventing Drupal's front-end wheel from scratch, Fabian recommends adopting the best of both worlds by incorporating key aspects of Web Components, the Shadow DOM, and particularly syntactic sugar for declarative components that competes readily not only with wildly popular JavaScript technologies like React and Vue but also matches up to the emerging approaches seen in ecosystems like Laravel. In this <em>Tag1 Team Talks</em> episode, join <a href="https://www.drupal.org/u/fabianx" title="Fabian Franz">Fabian Franz</a> (VP, Software...</p> <div class="more-link"><a href="/blog/enabling-declarative-components-everywhere-drupal-web-components-out-box" class="more-link" aria-label="Read more about Enabling Declarative Components Everywhere: Drupal + Web Components Out of the Box - Tag1 TeamTalk #019" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Wed, 07/01/2020 - 05:13</span> Wed, 01 Jul 2020 12:13:47 +0000 preston 170 at https://www.tag1consulting.com Components everywhere: How Web Components and reactivity could reinvent Drupal - part 5 https://www.tag1consulting.com/blog/web-components-part-5 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>In this multi-part blog series that covers Fabian's session in detail from start to finish, we summarize some of the key ideas that could promise an exciting vision not only for the front-end developer experience of Drupal but also for the user experience all Drupal developers have to offer their customers. In this fifth installment in the series, we continue our analysis of some of the previous solutions we examined and consider some of the newfangled approaches made possible by this evolution in Drupal.</p> <div class="more-link"><a href="/blog/web-components-part-5" class="more-link" aria-label="Read more about Components everywhere: How Web Components and reactivity could reinvent Drupal - part 5" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Mon, 05/18/2020 - 06:39</span> Mon, 18 May 2020 13:39:01 +0000 preston 164 at https://www.tag1consulting.com Components everywhere: How to enable server-side rendering with Web Components in Drupal-part 4 https://www.tag1consulting.com/blog/web-components-part-4 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>Among the most pitched debates currently in the Drupal community is the discussion over the future of Drupal's front-end and whether decoupled Drupal marks how front-end development in one of the world's most popular content management systems (CMS) will look for years to come.</p> <div class="more-link"><a href="/blog/web-components-part-4" class="more-link" aria-label="Read more about Components everywhere: How to enable server-side rendering with Web Components in Drupal-part 4" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Mon, 05/04/2020 - 06:00</span> Mon, 04 May 2020 13:00:49 +0000 preston 162 at https://www.tag1consulting.com Components everywhere: How JSX can inspire Twig components for Drupal's front end - part 3 https://www.tag1consulting.com/blog/web-components-part-3 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>Drupal is quickly approaching a critical inflection point in terms of its ability to adapt to and outperform other technologies in the web development space, particularly in the front end. Trends like decoupled Drupal, are rapidly gaining adoption in the Drupal community, but such architectural approaches do not resolve the issue of how Drupal's front end can contend with the increasing focus on popular front-end technologies like React and Vue.</p> <div class="more-link"><a href="/blog/web-components-part-3" class="more-link" aria-label="Read more about Components everywhere: How JSX can inspire Twig components for Drupal&amp;#039;s front end - part 3" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Mon, 04/27/2020 - 06:48</span> Mon, 27 Apr 2020 13:48:24 +0000 preston 161 at https://www.tag1consulting.com Components everywhere: How a virtual DOM could bring Drupal to a reactive front-end future - part 2 https://www.tag1consulting.com/blog/web-components-part-2 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>A debate has been ongoing for several years about how Drupal's front end can compete against the primacy of JavaScript frameworks that are rapidly gaining steam in the wider web development community. In this multi-part blog series, we review the most important concepts behind this potential future for Drupal's front end, including Web Components, virtual DOMs, and what Drupal can learn from other ecosystems. In this second installment in the series, we examine how Drupal's render tree bears striking similarities to virtual DOMs in other frameworks and what future Drupal versions could look like under the hood.</p> <div class="more-link"><a href="/blog/web-components-part-2" class="more-link" aria-label="Read more about Components everywhere: How a virtual DOM could bring Drupal to a reactive front-end future - part 2" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Sun, 04/19/2020 - 21:52</span> Mon, 20 Apr 2020 04:52:10 +0000 preston 159 at https://www.tag1consulting.com Components everywhere: Is Drupal’s front-end future in Web Components? - part 1 https://www.tag1consulting.com/blog/web-components-part-1 <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> <p>The question of where Drupal's front end is headed has led to much handwringing in the community, with a variety of ongoing discussions about whether decoupled Drupal is the future for Drupal's presentation layer. Out of all the debates in the community, few have engendered as much consternation and spilled ink as how, when, and whether to replace or augment Twig's functionality as the default theme engine for Drupal.</p> <div class="more-link"><a href="/blog/web-components-part-1" class="more-link" aria-label="Read more about Components everywhere: Is Drupal’s front-end future in Web Components? - part 1" hreflang="en">Read more</a></div> </div> <span><span>preston</span></span> <span>Wed, 04/15/2020 - 18:49</span> Thu, 16 Apr 2020 01:49:50 +0000 preston 147 at https://www.tag1consulting.com