components
TRANSCRIPT
Components
Hi
Miguel Madero
3Practice Fusion
4
Production “Quality”
Code
30 Components in 30 Minutes
30 Components in 30 Minutes
Some components in 30ish
minutes (or more)
What do you think when you hear component?
7
+ Encapsulation/isolation
+ Composition
+ Controls/widgets
+ Web Components (today)
+ Controller+View in one
+ 42
+ Something Ember devs abuse because they're
lazy and they don't want to create routes,
controllers, views
+ Reuse
Encapsulation
8
Encapsulation
9
Components and other roles
12
Routable Components (No more Controllers)
13
Component
+ A lot is changing
+ Use components today you will be fine
+ More
github.com/emberjs/rfcs
The Road to Ember 2.0
Quick Note on 2.0
14
+ Routable Components
+ Nicer hbs syntax for components,
+ Better attribute bindings, with support for
interpolation
+ One-way binding the default,
+ Block parameters,
+ Separating the component attributes set by its
consumers from the component properties,
+ Improved actions
Longer Note on 2.0
15
Widgets
Types of Components
Domain Components
Types of Components
Widgets Domain
Types of Components
Main Principle Key Benefits Secondary
Benefits
Widgets Encapsulation Reuse, consistency Composition
Domain Encapsulation Separation of
concerns,
composition
Reuse, testability
+ Reuse
+ Consistency
+ Manipulate DOM
+ Internally speak view. External language
Widgets
20
Domain
21
Domain
+ Encapsulation
+ Separation of Concerns
+ DOM Manipulation
+ Internally avoid view language. Externally speak
in the language of the domain
+ External Contributors and Data Access
Ember-data? Inject
Services? Inject-properties, require.
Controllers? No.
Widgets vs Components
Data Access? DOM Manipulation
Widgets Data is provided (usually…) Yes. Often it’s the main task
Domain Components Often params are provided
and they know who to ask
for data.
{{medication-detail
medicationGuid=“AB-123”}}
Avoid
Demo Yay!!!
29
Handlebars as a DSL
Demo Yay!!!
Handlebars as a DSL
30
31
+ The Road to Ember 2.0 (bunch of changes to
components)
+ github.com/practicefusion
+ github.com/MiguelMadero
+ Building Ember CLI Addons
+ Ember RFCs
Resources
32