Ember Component Patterns

Todd Jordan

A Little About Me

Triangle Ember Meetup Tomster

Triangle Ember Meetup Organizer

Ember Learn Team Tomster

Ember Learn Team

LTS Tomster

Senior Dev at Interactive Intelligence

https://inin.com/careers

A Little About Ember

Commitment to Semver, "Stability without Stagnation"

Convention over Configuration

Pre-Built Local Environment and Build Pipeline
(node, tests, linting, es6)

Community Owned and Maintained

A Little About This Talk

Components are Everywhere

Lessons Forged in Fire

Not Dogma, but understand your tradeoffs

Basic Component Mechanics of Ember

Inspire some ideas, thoughts

Basics of an Ember Component

Functional Components and DDAU

Ember's sweetspot

Functional Giphy Ping

Tradeoff

Predictable vs. In Control

Data Morphing "Tagless" Components

Adding Decoration

Morphing Giphy Ping

Tradeoff

Simple vs Declarative

Alternative: Handlebars Helpers

Block Components

Ultimate Flexibility

Flexible Giphy Ping

Tradeoff

Customization vs Easy Defaults

Coodinating Components

Easy Reuse

Coordinating Giphy Ping

Tradeoff

Ease of Use vs Power Over State

Service Event Bus

Communicating Across Complexity

Eventing Giphy Ping

Tradeoff

Predictable Data Flow vs. Data Flow Complexity

Anti-Patterns

Giants

Antidote

Sub-Components - Create building blocks

Single Responsibility

JQuery as a hammer

Antidote

Use it within the proper scope as a last resort

Return Promises from actions

Coupling to App Implementation

Antidote

Adhere to DDAU

Treat Services like data, push them up the tree

Service Mayham

Antidote

Limit service injection to top level or coordinating components

Avoid Circular Service Dependencies

Adhere to good programming principles

Use Ember Data for persistence when you can

Thanks!!!

Twitter: @tddjordan

Github: toddjordan

Slack(Ember, Triangle): todd.jordan

Triangle Ember: https://www.meetup.com/Triangle-Ember/