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 end 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 front 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 pipelines to build their creations and utilise frameworks such as ReactJS to deliver more dynamic 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 frontend 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 the 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 advantages 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 solutions 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 other more complex applications with a variety of stages. Our personalization solutions for Convivial CMS are also heavily involved on decoupled principles.

 

 

Insights

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.
Social Share initial
Article

There are couple of online tools, and integration modules to get sharing widget to your site. They rely on JavaScript and the security of your users is questionable. This article will show you how to create a simple yet flexible and safer service sharing widget without line of JavaScript.