30 Components in 30 minutes or Some Components in 30ish minutes (or more)

1. Components

2. Hi
Miguel Madero

3. 3 Practice Fusion

4. 4
Production “Quality”
Code

5. 30 Components in 30 Minutes

6. 30 Components in 30 Minutes
Some components in 30ish
minutes (or more)

7. 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

8. Encapsulation
8

9. Encapsulation
9

10. Survey Time!!!
Demo

11. Demo. Yay!!!!
Hello world!!!
Demo

12. Components and other roles
12

13. Routable Components (No more Controllers)
13
Component

14. Quick Note on 2.0
+ A lot is changing
+ Use components today you will be fine
+ More
 github.com/emberjs/rfcs
 The Road to Ember 2.0
14

15. Longer Note on 2.0
+ 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
15

16. Types of Components
Widgets
Domain Components

17. Types of Components
Widgets Domain

18. Types of Components
Main Principle Key Benefits Secondary
Benefits
Widgets Encapsulation Reuse, consistency Composition
Domain Encapsulation Separation of
concerns,
composition
Reuse, testability

19. Demo yay!!!!
Tyrion Component Library
Demo

20. Widgets
+ Reuse
+ Consistency
+ Manipulate DOM
+ Internally speak view. External language
20

21. Domain
21

23. 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.

24. 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

25. Demo Yay!!!
29
Handlebars as a DSL

26. Demo Yay!!!
Handlebars as a DSL
30

27. 31

28. Resources
+ The Road to Ember 2.0 (bunch of changes to
components)
+ github.com/practicefusion
+ github.com/MiguelMadero
+ Building Ember CLI Addons
+ Ember RFCs
32