components
TRANSCRIPT
![Page 1: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/1.jpg)
Components
![Page 2: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/2.jpg)
Hi
Miguel Madero
![Page 3: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/3.jpg)
3Practice Fusion
![Page 4: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/4.jpg)
4
Production “Quality”
Code
![Page 5: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/5.jpg)
30 Components in 30 Minutes
![Page 6: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/6.jpg)
30 Components in 30 Minutes
Some components in 30ish
minutes (or more)
![Page 7: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/7.jpg)
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
![Page 8: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/8.jpg)
Encapsulation
8
![Page 9: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/9.jpg)
Encapsulation
9
![Page 12: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/12.jpg)
Components and other roles
12
![Page 13: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/13.jpg)
Routable Components (No more Controllers)
13
Component
![Page 14: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/14.jpg)
+ 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
![Page 15: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/15.jpg)
+ 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
![Page 16: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/16.jpg)
Widgets
Types of Components
Domain Components
![Page 17: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/17.jpg)
Types of Components
Widgets Domain
![Page 18: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/18.jpg)
Types of Components
Main Principle Key Benefits Secondary
Benefits
Widgets Encapsulation Reuse, consistency Composition
Domain Encapsulation Separation of
concerns,
composition
Reuse, testability
![Page 20: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/20.jpg)
+ Reuse
+ Consistency
+ Manipulate DOM
+ Internally speak view. External language
Widgets
20
![Page 21: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/21.jpg)
Domain
21
![Page 22: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/22.jpg)
![Page 23: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/23.jpg)
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.
![Page 24: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/24.jpg)
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
![Page 25: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/25.jpg)
Demo Yay!!!
29
Handlebars as a DSL
![Page 26: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/26.jpg)
Demo Yay!!!
Handlebars as a DSL
30
![Page 27: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/27.jpg)
31
![Page 28: Components](https://reader034.vdocuments.us/reader034/viewer/2022042817/55a8523d1a28abac4f8b473a/html5/thumbnails/28.jpg)
+ 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