Drupal Frontend web development

Design and  implementation.

Drupal frontend overview

Aim

Skillfully and faithfully implement site designs into a Drupal website using best practices for Drupal frontend development.

Approach

Utilise modern web frameworks and libraries to deliver component based solutions which are flexible. Expose the features of the design solution to editors so that they can leverage the capabilities of the design.

Outcome

A coherent, consistent design implementation which looks good and works well for editors who need to produce content leveraging the design.

Drupal front end development

The changing role of the front end developer

Developing sites for Drupal is an art as much as a science. The magic happens in the theming layer where the forces of structure, content and design are combined to produce the end result. To the ned user, the result is an attractive site which is coherent and consistent. The front end developer is able to leverage the work done by architects, content designers, designers and site builders to make this a reality.

The role of the froent end developer has changed dramatically in recent times. In the earlier phases of web development a frontender would have been mainly concerned with templates producing HTML and CSS to transform the presentation of that HTML. Whilst this is still very much the bread and butter of frontend developers there are now a range of other technologies and approaches available to them. Frontend developers now utilise complex pipeliens to build their creations and utilise frameworks such as ReactJS to deliver more dyanimc experiences for users.

Component driven design

Component driven design is front and center at the design and development process. Units of functionality, data and presentation can be encapsulated into components which are used to build pages with. Design is therefore about much more than just the way things look. The freontend web developer needs to thing about structure, state, interaction and presentation. They need to be master of many domains.

Decoupling the frontend

The decoupling of code in computer science has been a solid principle for decades. Components should do one thing and do it well. They should be able to talk to each other using agreed interfaces for communication. These principles have now made their way across into frontend development. The rise of frameworks such as Angular, ReactJS and Vue have opened the way for the frontend to be decoupled from the backend. The interface, in this case, is the format of teh data flowing from the back to the front and vice versa.

In the Drupal world there has been a lot of talk about the various adantages of partially decoupling and fully decoupling. A fully decoupled site would have Drupal being used solely as a data server with the frontend handling all of the presentation and functionality. In contrast, a partially decoupled Drupal site would still utilise some of Drupal's core systems such as permissions, templates, rendering pipeline and caching.

At Morpht we have thus far opted for a partially decoupled approach. We believe that there is a lot of value in the decades of effort which have gone into these systems. They serve us well and provide a solid, known foundation to solve well known problems. We will utilise frameworks such as ReactJS and templating solutons such as Handlebars where it makes sense - on a per component basis. This allows us to deliver dynamic, "reactive" experiences when needed.

The Morpht team

Our team comprises of back and frontend developers able to implement frontend solutions. This has enabled us to deliver a number of demanding frontend applications based on Drupal. We have delivered mapping solutions, decision trees and otehr more complex applications with a variety of stages. Our personalization solutions for Convivial CMS are also heavily involved on decoupled principles.

 

 

Insights

DrupalSouth presentation: Kelvin
Article

Kelvin Wong shares some useful tools for building sites with Twig. How templates can be structured to maintain consistency across content types while allowing room for customisation on individual needs.
Marji, Dries and Murray at DrupalSouth
Article

Morpht had a great time at DrupalSouth Sydney 2024! As always, it was an amazing event connecting, collaborating and learning with the Drupal community.
City and people graphic
Case study

The CGC website is based on Convivial for GovCMS and includes document containers and file collections; as well as an interactive map of Australia.
VantaJS
Article

VantaJS is a sweet little Javascript library which displays dynamic, interactive animated backgrounds. It is a natural fit for an implementation as a Modifier in Drupal.
GovCMS8 UI-Kit Starter Theme screenshot
Article

The newly released GovCMS8 distribution ships with a brand-new base theme, designed to deliver a great-looking, functional site - straight out of the box, with no theming or coding required. Suitable for government agencies, platform evaluators as well as site builders and themers.
govCMS logo
Article

Earlier in the year Morpht was hard at work on the new GovCMS8 UI-Kit Starter theme. That work has come to fruition and has now been released as open source.

Speak to an expert

We would love to hear about your project and what you have in mind.
Book an appointment with a Drupal expert to see how Morpht can help.

Make an appointment

Get the latest news from Morpht