Ember Component Libraries for Ember Apps

Learn how to build Component Libraries as a Living Style Guide for Ember Apps

Transcript

1. Ember Component Libraries for Ember Apps - Living Style Guides Ember Meetup Israel – 27/08/2018 Alon Bukai Inspired by a talk by Chris LoPresto
2. Alon Bukai • Full Stack Engineer at Camilyo – C# + Ember.js • Open Source contributor to various Ember Addons and projects • Ember Times team member • Ember Realworld Maintainer • Recently married  www.github.com/Alonski www.alonbukai.com
3. Ember Components  Allow us to break up our app and routes into manageable chunks  Increases reusability and modularity  Simplifies and shortens templates and routes/controllers (5000 line controller?)  Allows sharing of best practices among teammates
4. Component Libraries  Showcases components both for developers and for designers/product/anyone  Further increases reusability by allowing a quick overview of what is available  Allows extension to build larger components from smaller ones  Components can be built and designed in isolation without logic, layout or other concerns creating a sandbox for development  Allows showcasing different permutations of the same component so others will know exactly what is possible with each component and how it looks  Components can be updated in one place and have an effect on the whole app  Is self documenting and much more organized  Is collaborative in that when a new component is finished others can immediately know what it looks like and how to implement it.  Allow simple testing of just components. In our case in an Ember Addon
5. Component Libraries –> Component Explorer + Components
6. Ember Freestyle – Living Style Guide Addon for Ember
7. Style Guide  http://www.chrislopresto.com/presentations/living-style-guide-driven- development?h=3&ph=900&pw=1600&v=0
9. Color Themes  Ember install ember-theme-changer
10. Lets look at live examples
11. Lets look at live examples
12. Some more cool stuff  Code in VSCode – Developer Ergonomics (Snippet Extensions)
13. Additional Addons + Libraries + Info  Ember Addon Docs – Simple and powerful addon documentation  Prettier + ESLint + Ember Template Lint  Ember Cli Deploy  Tailwind – CSS Utility Library – Ember-CLI-Tailwind  https://www.youtube.com/watch?v=Z1lL_Zo62h0  http://ember-freestyle.com/
14. Thank you www.github.com/Alonski www.alonbukai.com Ember Community Slack – Alon https://emberjs.com/blog/tags/newsletter.html