An introduction to Emulsify In this presentation, Safallia Joseph of Valuebound has walked us through Emulsify -a component driven prototyping-tool using Pattern Lab. The various agendas include: A brief intro to Components, Atomic Designs and Pattern Lab How to get up and running with Pattern Lab in Drupal An intro to Emulsify Emulsify’s implementation of CDD Getting started with Emulsify Connecting Emulsify to Drupal Benefits and challenges of a decoupled front end workflow in Drupal Projects ---------------------------------------------------------- Get Socialistic Our website: http://valuebound.com/ LinkedIn: http://bit.ly/2eKgdux Facebook: https://www.facebook.com/valuebound/ Twitter: http://bit.ly/2gFPTi8

1. An introduction to Emulsify
A component driven prototyping-tool using
Pattern Lab
Safallia Joseph
https://www.drupal.org/u/safallia-joseph
https://twitter.com/safallia

2. ● A brief intro to Components, Atomic Designs and Pattern Lab
● How to get up and running with Pattern Lab in Drupal
● An intro to Emulsify
● Emulsify’s implementation of CDD
● Getting started with Emulsify
● Connecting Emulsify to Drupal
● Benefits and challenges of a decoupled front end workflow in
Drupal Projects
Agenda

3. According to wikipedia, A component is,
“An individual software component is a software package, a
web service, a web resource, or a module that encapsulates a
set of related functions (or data)”
Components are isolated reusable chunks of web sites.
What’s a Component?

4. Click to add text
What’s a Component?

5. Click to add text
Why Componentize?

6. Atomic design is a methodology on how to organize components
in a clean and methodological way.
What’s Atomic Design?

7. Click todd text
How does Atomic Design Work

8. ● Fields and Field formatters
● Entities and View modes
● Paragraph module
Component Patterns in Drupal

9. ● Sitebuilding > Content > Theming
● Theming depends on content during development
● Theming occurs within the entire Drupal context
● Issues?
Front end Workflow in Drupal 7/8

10. Pattern lab is a static site generator (Powered by either PHP or
Node) that stitches together UI components, But there is a whole
lot more to it than that!
Pattern Lab

11. What’s Pattern Lab?
Living Style Guide is a set of tools for managing, testing and documenting
UI components in an organized and dynamic visual way. Outputting
dynamically created pages to keep designers, clients and developers in
sync.
● PHP or Node
● Pattern Lab Editions - PHP - Mustache, Twig, Drupal, Thin.
● Use your own methodology
● Dave Olsen, Brad Frost and
● Brian Muenzenmeyer
● http://demo.patternlab.io/

12. What’s Pattern Lab?

13. Pattern Lab & Atomic Design

14. Pattern Lab & Atomic Design

15. Pattern Lab & Atomic Design

16. Pattern Lab & Atomic Design

17. Pattern Lab & Atomic Design

18. Ok, Cool… But how do we tie this
to Drupal??

19. Required
● Components Library
(https://www.drupal.org/project/components)
Will make your life easier
● https://www.drupal.org/project/twig_field_value
● https://www.drupal.org/project/twig_tweak
Pattern Lab & Atomic Design in
Drupal

20. Pattern Lab & Atomic Design in
Drupal

21. Ready to go PL frameworks

22. What is Emulsify?
Emulsify is a design and prototyping tool, which uses atomic
design principles and modern frontend best practices to
develop a living style guide that can be easily implemented into
any CMS that can render twig files.

23. ● Have a single authoritative source (no duplication)
● All HTML, CSS and JS in the component library
● A front end designer with no Drupal experience can design
the site without even touching Drupal.
Goals of Emulsify

24. ● Emulsify implements Pattern Lab.
● By integrating Pattern Lab components can be built in a way that
make sense for your workflow
● Once the template is ready for production connecting to Drupal is
as easy as using the twig functions include, extend and embed.
Emulsify’s Component Driven
Development

25. Emulsify Standalone
● Install with NPM composer create-project fourkitchens/emulsify --
stability dev --no-interaction emulsify && cd emulsify && npm
install
● Install with Yarn: composer create-project fourkitchens/emulsify --
stability dev --no-interaction emulsify && cd emulsify && yarn
install
Getting started with Emulsify

26. Drupal Specific Installation
● composer require fourkitchens/emulsify
● composer create-project fourkitchens/emulsify --stability dev --
no-interaction emulsify
● You can download from Emulsify github page
Getting started with Emulsify

27. Conclusion: Benefits and
Challenges

28. Conclusion: Benefits and
Challenges

29. Benefits
● Decoupled workflow
○ Front end workflow can be completely decoupled from
Drupal
○ Theme outside of Drupal
● Flexible Project Workflow
○ Permits for a frontend to be designed and built out before a
sitebuild must be committed to, without “Losing” that time
● Componentized Structure
● Style Guide

30. ● Testing
○ Provides an entire set of data for frontend design system that
does not depend on the project database.
○ Quick Regression test
● Communities
○ Pattern Lab is an existing tool with a lot of dedicated
followers
Benefits

31. Conclusion: Benefits and
Challenges

32. ● Time
○ With a reasonable base setup, the time investment to use this
workflow should not be that great.
○ Though, initial learning curve will be present and all members
of the team must have a buy in it.
○ Medium/large scale project can save much more time.
● Too many tools?
Challenges

33. Thank you