SlideShare a Scribd company logo
1 of 36
Make You, & Your Clients, Happy
by using Reusable Components
to Build Drupal Sites
Trent Stromkins
Front End Development Lead
trent@imagexmedia.com • github.com/bmx269 • @bmx269 • d.o: bmx269
Reusable Components
What do you mean?
1760
Mass production of screws using lathes
1841
J Witworth suggests standardizing thread pitch & count per diameter
1860
His proposal became standard practice in Britain
100 YEARS AFTER MASS PRODUCTION
!!!
What about this?
Slideshows
Or this?
News Listings
These can all be the same
Features Right?
That is just one part of the puzzle
Events Listing
Example Reusable Component
Exporting the work to a Feature is one step of making a
component. Making the component reusable by the client / site
admin / developer makes it valuable.
Drupal Piece Specific Item Description
Event Content Type Event Category Taxonomy Used to categorize the Events.
Display Suite View Modes •IMG Left Teaser
•IMG Top Teaser
•Featured Teaser
•etc
Build the layouts of your displays
Views Content Pane •Exposed Taxonomy Filter
•Content: (your View Mode)
•Allow Pane Settings
This is where the magic happens. Exposing
the Views settings to the Panel editor.
Panels / Panelizer Staff Name Edit and formatting
Panopoly Magic Views Content Panes Better UI. Previews & exposed View
Modes
Next Level
Custom Entities
Splash Image / Slideshow
Example Reusable Component
This is a dynamic optional Splash Image or Slideshow. Using ECK,
Flexslider 2, Entity Reference, Inline Entity Form, and Views.
I wanted to make the slideshow management experience as easy to manage as adding images to a node.
Considerations:
Option to add a Splash image or Slideshow to any page
Easy to use and manage by the client
Reusable Slides
Reusable on other projects
Methods:
Separate Content Type / Views (Flexslider View Display) - More training. Not easily managed.
Rotating Banner Slideshow Module – Easy to use. Non-reusable Slides. Block Training
Field Collection / Views (Flexslider View Display) – Easy to use. Poor UI. Reusable with some work.
ECK, Entity Ref., Inline Entity Form, Views (Flexslider View Display) – Easy to use. Better UI. Reusable.
Use ECK to create the Entity
Use an Entity Reference Field
Inline Entity Splash
Referencing Existing Splash
The Listing
Editing an Item
Now Features?
Yes, Now.
Exporting the work
This is not that hard to do.
Create your Feature, keeping naming generic, &
version it.
You will need to save the Content Type, Entity Types,
Fields, Taxonomy, Display Suite settings, View Modes,
Views, along with any other parts to your component.
You now have a few Reusable Components.
If you don’t know how to use Drupal Features, there are a lot of
helpful tutorials, and helper modules.
Products?
I thought you were talking about components?
Products
Own each component
When each Reusable Component is considered a product on it’s
own, we can provide a higher quality result, with less time spent
per website developed. This means more money.
This may sound like hopes and dreams, but in reality, it is the essence of the industrial revolution.
Benefits of components as Products:
Better with Reuse
Feature Set Refinement
Quality Control
Business Analysis
Project Planning
Documentation is Clear
Training and Augmentation
Client Happiness
This can happen… Really.
Client Happiness
This can happen… Really.
Easy
Management
Clear
Documentation
Quality
Features
Even Further
Make the Benefits Full Circle
Products
Own each component
Benefits of components as Products:
Better with Reuse
Feature Set Refinement
Quality Control
Business Analysis
Project Planning
Documentation is Clear
Training and Augmentation
Sales / PM Client SupportDevelopment
Client SupportDevelopment
Sales Documentation
Easier Estimation
Clear Feature Set
Pricing Structure
Business Analysis
Project Planning
Training and Augmentation
Sales / PM
Client SupportDevelopment
Sales Documentation
Easier Estimation
Clear Feature Set
Pricing Structure
Business Analysis
Project Planning
Training and Augmentation
Developer Documentation
Better with Reuse
Feature Set Refinement
Development Speed
Sales / PM
Client SupportDevelopment
Sales Documentation
Easier Estimation
Clear Feature Set
Pricing Structure
Business Analysis
Project Planning
Training and Augmentation
Developer Documentation
Better with Reuse
Feature Set Refinement
Development Speed
Client Documentation
Ensured Quality
Set Training for Components
Sales / PM
ORLY?
Ask me some questions
Make You, & Your Clients, Happy
by using Reusable Components
to Build Drupal Sites
Trent Stromkins
Front End Development Lead
trent@imagexmedia.com • github.com/bmx269 • @bmx269 • d.o: bmx269
Thank You

More Related Content

Similar to Making you, and your Clients Happy, by Using Reusable Components to Build Drupal Sites

© SAP SE CASE STUDY .docx
 © SAP SE   CASE STUDY .docx © SAP SE   CASE STUDY .docx
© SAP SE CASE STUDY .docx
mayank272369
 
Define and Manage Requirements with IBM Rational Requirements Composer
Define and Manage Requirements with IBM Rational Requirements ComposerDefine and Manage Requirements with IBM Rational Requirements Composer
Define and Manage Requirements with IBM Rational Requirements Composer
Alan Kan
 
230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view
230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view
230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view
Faina Fridman
 

Similar to Making you, and your Clients Happy, by Using Reusable Components to Build Drupal Sites (20)

SUG Bangalore - Extending Sitecore Experience Commerce 9 Business Tools
SUG Bangalore - Extending Sitecore Experience Commerce 9 Business ToolsSUG Bangalore - Extending Sitecore Experience Commerce 9 Business Tools
SUG Bangalore - Extending Sitecore Experience Commerce 9 Business Tools
 
Dashboard Factory - most efficient way to develop with SAP Design Studio
Dashboard Factory - most efficient way to develop with SAP Design Studio Dashboard Factory - most efficient way to develop with SAP Design Studio
Dashboard Factory - most efficient way to develop with SAP Design Studio
 
OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020
 
Building and Deployment of Drupal sites with Features and Context
Building and Deployment of Drupal sites with Features and ContextBuilding and Deployment of Drupal sites with Features and Context
Building and Deployment of Drupal sites with Features and Context
 
© SAP SE CASE STUDY .docx
 © SAP SE   CASE STUDY .docx © SAP SE   CASE STUDY .docx
© SAP SE CASE STUDY .docx
 
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment PreviewVS Code and Modern Development Environment Preview
VS Code and Modern Development Environment Preview
 
How to embed reporting into your asp.net core web applications
How to embed reporting into your asp.net core web applications How to embed reporting into your asp.net core web applications
How to embed reporting into your asp.net core web applications
 
Skye Sant - lead ux/product case studies
Skye Sant - lead ux/product case studiesSkye Sant - lead ux/product case studies
Skye Sant - lead ux/product case studies
 
An Introduction to Drupal
An Introduction to DrupalAn Introduction to Drupal
An Introduction to Drupal
 
In Mind Cloud - Product Release - 1904
In Mind Cloud - Product Release - 1904In Mind Cloud - Product Release - 1904
In Mind Cloud - Product Release - 1904
 
Improving Business Agility through IBM Business Insight Advanced
Improving Business Agility through IBM Business Insight AdvancedImproving Business Agility through IBM Business Insight Advanced
Improving Business Agility through IBM Business Insight Advanced
 
How to Best Develop a Product by PlateRate Founder
How to Best Develop a Product by PlateRate FounderHow to Best Develop a Product by PlateRate Founder
How to Best Develop a Product by PlateRate Founder
 
Define and Manage Requirements with IBM Rational Requirements Composer
Define and Manage Requirements with IBM Rational Requirements ComposerDefine and Manage Requirements with IBM Rational Requirements Composer
Define and Manage Requirements with IBM Rational Requirements Composer
 
230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view
230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view
230394452 extending-extending-srm-web-dynpro-view srm-web-dynpro-view
 
Ssrs tutorial
Ssrs tutorialSsrs tutorial
Ssrs tutorial
 
The Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your DeploymentThe Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your Deployment
 
13 mcv sand_mt2
13 mcv sand_mt213 mcv sand_mt2
13 mcv sand_mt2
 
Neat Tricks with Content Types
Neat Tricks with Content TypesNeat Tricks with Content Types
Neat Tricks with Content Types
 
Rishabh UI Presentation - HDFC Website.pdf
Rishabh UI Presentation - HDFC Website.pdfRishabh UI Presentation - HDFC Website.pdf
Rishabh UI Presentation - HDFC Website.pdf
 
In Mind Cloud - Product Release - 2011
In Mind Cloud - Product Release - 2011In Mind Cloud - Product Release - 2011
In Mind Cloud - Product Release - 2011
 

Recently uploaded

Recently uploaded (20)

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

Making you, and your Clients Happy, by Using Reusable Components to Build Drupal Sites

  • 1. Make You, & Your Clients, Happy by using Reusable Components to Build Drupal Sites Trent Stromkins Front End Development Lead trent@imagexmedia.com • github.com/bmx269 • @bmx269 • d.o: bmx269
  • 3.
  • 4.
  • 5.
  • 6.
  • 7. 1760 Mass production of screws using lathes 1841 J Witworth suggests standardizing thread pitch & count per diameter 1860 His proposal became standard practice in Britain 100 YEARS AFTER MASS PRODUCTION !!!
  • 10. These can all be the same
  • 11. Features Right? That is just one part of the puzzle
  • 12. Events Listing Example Reusable Component Exporting the work to a Feature is one step of making a component. Making the component reusable by the client / site admin / developer makes it valuable. Drupal Piece Specific Item Description Event Content Type Event Category Taxonomy Used to categorize the Events. Display Suite View Modes •IMG Left Teaser •IMG Top Teaser •Featured Teaser •etc Build the layouts of your displays Views Content Pane •Exposed Taxonomy Filter •Content: (your View Mode) •Allow Pane Settings This is where the magic happens. Exposing the Views settings to the Panel editor. Panels / Panelizer Staff Name Edit and formatting Panopoly Magic Views Content Panes Better UI. Previews & exposed View Modes
  • 13.
  • 14.
  • 15.
  • 16.
  • 18. Splash Image / Slideshow Example Reusable Component This is a dynamic optional Splash Image or Slideshow. Using ECK, Flexslider 2, Entity Reference, Inline Entity Form, and Views. I wanted to make the slideshow management experience as easy to manage as adding images to a node. Considerations: Option to add a Splash image or Slideshow to any page Easy to use and manage by the client Reusable Slides Reusable on other projects Methods: Separate Content Type / Views (Flexslider View Display) - More training. Not easily managed. Rotating Banner Slideshow Module – Easy to use. Non-reusable Slides. Block Training Field Collection / Views (Flexslider View Display) – Easy to use. Poor UI. Reusable with some work. ECK, Entity Ref., Inline Entity Form, Views (Flexslider View Display) – Easy to use. Better UI. Reusable.
  • 19. Use ECK to create the Entity Use an Entity Reference Field
  • 20.
  • 24. Exporting the work This is not that hard to do. Create your Feature, keeping naming generic, & version it. You will need to save the Content Type, Entity Types, Fields, Taxonomy, Display Suite settings, View Modes, Views, along with any other parts to your component. You now have a few Reusable Components. If you don’t know how to use Drupal Features, there are a lot of helpful tutorials, and helper modules.
  • 25. Products? I thought you were talking about components?
  • 26. Products Own each component When each Reusable Component is considered a product on it’s own, we can provide a higher quality result, with less time spent per website developed. This means more money. This may sound like hopes and dreams, but in reality, it is the essence of the industrial revolution. Benefits of components as Products: Better with Reuse Feature Set Refinement Quality Control Business Analysis Project Planning Documentation is Clear Training and Augmentation
  • 27. Client Happiness This can happen… Really.
  • 28. Client Happiness This can happen… Really. Easy Management Clear Documentation Quality Features
  • 29. Even Further Make the Benefits Full Circle
  • 30. Products Own each component Benefits of components as Products: Better with Reuse Feature Set Refinement Quality Control Business Analysis Project Planning Documentation is Clear Training and Augmentation
  • 31. Sales / PM Client SupportDevelopment
  • 32. Client SupportDevelopment Sales Documentation Easier Estimation Clear Feature Set Pricing Structure Business Analysis Project Planning Training and Augmentation Sales / PM
  • 33. Client SupportDevelopment Sales Documentation Easier Estimation Clear Feature Set Pricing Structure Business Analysis Project Planning Training and Augmentation Developer Documentation Better with Reuse Feature Set Refinement Development Speed Sales / PM
  • 34. Client SupportDevelopment Sales Documentation Easier Estimation Clear Feature Set Pricing Structure Business Analysis Project Planning Training and Augmentation Developer Documentation Better with Reuse Feature Set Refinement Development Speed Client Documentation Ensured Quality Set Training for Components Sales / PM
  • 35. ORLY? Ask me some questions
  • 36. Make You, & Your Clients, Happy by using Reusable Components to Build Drupal Sites Trent Stromkins Front End Development Lead trent@imagexmedia.com • github.com/bmx269 • @bmx269 • d.o: bmx269 Thank You

Editor's Notes

  1. COVER 1 – A sample for the cover
  2. Reusable, Repurposed for any client. Built it generic, then brand it specific to the client.
  3. Components that can build many different results.
  4. Components can scale. From a treehouse to the building we are in today.
  5. This about how it can be used, outside the current use case. USB: Mouse, Data Cable, Charging, Phone, Computer, Camera, Audio Devices, Diagnostic tools for vehicles
  6. If at all possible, use or set a standard for all your components.
  7. CONTENT 1 – A sample for the content page
  8. CONTENT 1 – A sample for the content page
  9. Using the same content type, we can use 1 View with display variations to build these.
  10. CONTENT 1 – A sample for the content page
  11. TABLE CONTENT – Tables can be created in Word or Excel and dragged in here. They can also be generated directly in PowerPoint. This is what the overall look and feel is
  12. CONTENT 1 – A sample for the content page
  13. CONTENT 1 – A sample for the content page
  14. CONTENT 1 – A sample for the content page
  15. CONTENT 1 – A sample for the content page
  16. CONTENT 1 – A sample for the content page
  17. TABLE CONTENT – Tables can be created in Word or Excel and dragged in here. They can also be generated directly in PowerPoint. This is what the overall look and feel is
  18. CONTENT 1 – A sample for the content page
  19. CONTENT 1 – A sample for the content page
  20. CONTENT 1 – A sample for the content page
  21. CONTENT 1 – A sample for the content page
  22. CONTENT 1 – A sample for the content page
  23. CONTENT 1 – A sample for the content page
  24. CONTENT 1 – A sample for the content page
  25. CONTENT 1 – A sample for the content page
  26. CONTENT 1 – A sample for the content page
  27. CONTENT 1 – A sample for the content page
  28. CONTENT 1 – A sample for the content page
  29. CONTENT 1 – A sample for the content page
  30. CONTENT 1 – A sample for the content page
  31. CONTENT 1 – A sample for the content page
  32. CONTENT 1 – A sample for the content page
  33. CONTENT 1 – A sample for the content page
  34. CONTENT 1 – A sample for the content page
  35. COVER 1 – A sample for the cover