Deeson: Component driven front-end development

Published on November 2, 2020

Annertech: Annertech: Web Agency of the Year

Annertech: Web Agency of the Year My fingers are trembling typing this. I can’t believe it. This morning everyone in Annertech land is thinking “did that really just happen?” It appears it did, we are the web agency of the year! Last night, to top off the other three awards we won – best arts […]

Flickr: Registration Desk – Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprint Lounge – Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: David & Paul – Scout masters – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Jam interview – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprinters wanted – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprint Lounge – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Leopathu: Dynamic Block Weight in Drupal 8

In such a time, i want to place blocks in sidebar region with the dynamic weight. It means the blocks should render in different position for each page request. I have searched and tried lots of method but unfortunately i can’t find proper method to do that. So i have decided to do that with […]

Agiledrop.com Blog: AGILEDROP: Drupal‘s path from 4.0 to 8.0

Last time we guided you through early beginnings of Drupal. We explained how all started and how first versions of Drupal were made. This time we will look how this open-source content-management framework evolved from its fourth to its latest, eight version. Drupal 4.0 Drupal’s fourth version was released on 15. 6. 2002. It became […]

Flickr: Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

OStatic: Web Publishing and Development: Free Tools Abound

Are you involved in DevOps and web development, or are you aiming to be? If so, you’re probably very aware of many of the tools from the open standards and open source arenas that can make your work easier. Still, these are always spreading out at a fast clip and there are some applications and […]

At Deeson we’ve been working on ways to develop our front-end independently from any back-end application.
Our front-end team has developed web applications using decoupled JavaScript frameworks including Angular and React but we’ve found that for many website projects a full web application is overkill and the traditional HTML templating approach is still the most efficient.
Our back-end application is usually Drupal Support Service but we’re increasingly using other frameworks such as Laravel or Symfony and would like to be able to use a consistent approach for our front-end teams. 
We’ve developed a system for this that allows modern build tools, practices Component Driven Development, allows the generation of living style guides and is agnostic to the back-end.
Component Driven Development 
A component, for us, is a collection of HTML, CSS and JS that goes together to form some display element. Consider this against a more traditional approach where HTML, CSS and JS are stored in separate global files, for example, in a global style.css and app.js files.
By grouping code together into components, we separate our application by the domain language, rather than arbitrarily by file extension. This isolates components and makes them easier to develop and maintain.
Components get named based on the domain language of the project and client. Components are not defined for the designer by the limitations and modeling of the application. This provides a common language for the designers, developers and client and reduces the chances of misunderstanding when it comes to the development of functionality.
Using the BEM approach to structuring CSS we isolate much of our CSS to specific components rather than continuously generalising CSS in the way a CSS framework like Bootstrap does. This isolates much of the CSS to a specific component giving us high cohesion and low coupling allowing for confident maintenance, removing much of the fear of wondering what effect changing a piece of CSS is will have on the whole site.
This better matches the way that we work where the complexity of our challenging designs mean rapid delivery using a CSS framework isn’t possible.
Living style guides
The output of our front-end development will include a style guide which will render each of our components into static pages.
Style guides are useful as they demonstrate the components independently of the specific implementation. This allows more rapid front-end development as front-end developers can work without having to worry about how the back-end will integrate.
Over time, however, these style guides move out of sync with the applications they were developed to provide styling information for. An application developer’s job is to integrate the HTML provided by the style guide into the finished site. This has meant copying and pasting code out of the style guide templates and into the application’s templating system.
At this point we have duplication of code and the ability to maintain a strict style guide is lost. When the style guide is updated, all the application templates affected must be identified and updated as well.
Our approach makes the style guide a living style guide. The front-end templates we produce for our components get referenced directly from the target applications theme system. This means that our front-end templates are the exact same ones that the application will be using within the theme.
Front-end developers can make changes to it knowing that those changes will flow through into the application without need for a second step.
For Drupal Support Service developers this means either providing new theme functions for the front-end templates or referencing our front-end templates from within Drupal Support Service templates.
Modern build tools, agnostic to the back-end
Freed from the constraints of a specific application’s templating system we can select the most appropriate tools for the job of front-end development.
Our front-end tooling uses the latest standards and tools. We’re using yarn for package management, and webpack to bundle the static assets. 
Very little knowledge of the back-end is assumed or needed in this approach. You can confidently bring new front-end developers onto your team who are used to using the latest tools without having to spend the first few weeks teaching them the specific theming language and quirks of your back-end application such as the Drupal Support Service theme layer.
A real example 
We’ve got an exemplar project to showcase this way of working. If you clone the project at https://github.com/teamdeeson/cdd-demo and follow the instructions in the README you’ll get a Drupal Support Service 8 project up and running with a theme that uses this process. You’ll see we’ve developed a componentised version of the Bartik theme for this.
If you are intrigued by this and would like to hear more, you’ll enjoy my talk on the subject at Drupal Support ServiceCon Vienna on 26th September.
In summary
Component driven front-end development has worked well for us at Deeson, allowing rapid independent development of our front-end code. Our designers are freed from the previous constraints of designing for a Drupal Support Service website and our developers get to use the latest tools and get onboarded quicker.
Like the sound of the way we do things? We’re currently hiring a Senior Front-end Developer.
Source: New feed

REQUEST FOR PROPOSAL

Need a quick project proposal?

Submit the RFP form below and we will send you a project proposal in 48 hours. If you like what you see, we can schedule a call to discuss the project in greater detail.

Step 1 of 2

  • Contact Information

* Subject to reasonable use. Small fixes and updates must be requested one at a time and take no more than 30 minutes. Only mission-critical tasks are addressed on weekends.

Shopping Cart
There are no products in the cart!
Continue Shopping
0