An introduction to Emulsify
Download as PPTX, PDF•2 likes•5,856 views
This document introduces Emulsify, a component-driven prototyping tool that integrates with Pattern Lab and Drupal, emphasizing the importance of atomic design in creating reusable UI components. It outlines the benefits of a decoupled front-end workflow, including flexibility and time-saving, while also addressing challenges such as the initial learning curve and tool complexity. The document serves as a guide for setting up and connecting Emulsify to Drupal to improve front-end development processes.
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?
- 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/
- 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
- 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
- 33. Thank you