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
The Future of Software Development - Devin AI Innovative Approach.pdf
An introduction to Emulsify
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?
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/
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
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
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