Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

(Somewhat) Complex Component Design – Ember.BP,...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Balint Erdi Balint Erdi
February 11, 2016
Technology
110
1

(Somewhat) Complex Component Design – Ember.BP, 2015/02/11

Avatar for Balint Erdi

Balint Erdi

February 11, 2016

More Decks by Balint Erdi

See All by Balint Erdi
Data Loading Patterns with JSON API
Avatar for Balint Erdi balint
5
1.5k
Why you should consider Ember.js for your next project
Avatar for Balint Erdi balint
4
370
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
260
Auth* in Ember apps with Torii
Avatar for Balint Erdi balint
1
330
Complex Component Design in Ember
Avatar for Balint Erdi balint
0
410
Don't call me back - How Ember uses promises and how you can, too
Avatar for Balint Erdi balint
5
11k
Acceptance testing in Ember.js
Avatar for Balint Erdi balint
1
540
Unit testing in Ember.js
Avatar for Balint Erdi balint
0
120
Introduction to ember-data
Avatar for Balint Erdi balint
0
190

Other Decks in Technology

See All in Technology
オブザーバビリティを高める AI エージェント体験を考える / Designing AI Agent Experiences That Enhance Observability
Avatar for Kento Kimura aoto
PRO
1
170
Lambda MicroVMsは常駐サーバーの代わりに なるか？ Kiro Crew を動かして検証してみた / Kiro Crew on Lambda MicroVMs
Avatar for Kazuki Adachi k_adachi_01
2
350
The seven pitfalls of AI (revised version)
Avatar for Uwe Friedrichsen ufried
0
180
『GOエコノミー 』(相乗りサービス) におけるスペック駆動開発
Avatar for GO Inc. dev mot_techtalk
1
170
1人アドミンな私は AWSアカウント申請をSlackで完結したい！
Avatar for Yosuke Suzuki ysuzuki
0
110
VS Code × GitHub Copilot での Fabric 開発
Avatar for Ryoma Nagata ryomaru0825
1
210
KanaAI
Avatar for shreyas shinde shreyas1009
0
140
FinTech 1-2 : Overview of FinTech
Avatar for Kenji Saito ks91
PRO
0
120
セルフサービスのオブザーバビリティ基盤をOpenTelemetryで作る / Building a Self-Service Observability Platform with OpenTelemetry
Avatar for ymotongpoo ymotongpoo
3
500
HacobuにおけるFDEとは/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
1
700
Databricksメトリクスビューはじめてのもくもく会
Avatar for Takaaki Yayoi taka_aki
0
150
人にやさしく、AIにやさしく、書き手を選ばないIaCのガードレール再考 / Rethinking IaC Guardrails for Humans and AI Alike
Avatar for kohbis kohbis
5
2k

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
How to make the Groovebox
Avatar for あそなす asonas
2
2.5k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
610
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
510
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
3
4.3k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
330
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
2k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
390
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.1k

Transcript

  1. Complex Component Design Ember.BP – 2015/02/11

  2. Best of the month

  3. None
  4. None

  5. Song of the month

  6. http://frontside.io/blog/2016/01/22/functional-templating-in- ember.html

  7. https://github.com/samselikoff/ember-cli-mirage

  8. Survey results

  9. (Somewhat) Complex Component Design

  10. Basic component concepts

  11. None

  12. Non-block form (no hash)

  13. Non-block form (no hash) Block form (with hash)

  14. Non-block form (no hash) Block form (with hash) Yields parameters

    to the block form (function call)

  15. Non-block form (no hash) Block form (with hash) Yields parameters

    to the block form (function call) Block params (function params)

  16. Closure (vs. element) actions

  17. Element actions (iact “string” actions)

  18. None
  19. None
  20. None

  21. Closure actions

  22. None

  23. Why closure actions? • They can return values • Enable

    reacting to actions sent from the controller • Better debuggability • They can also bubble (check out ember-route- action-helper)

  24. Component design guidelines

  25. Short & sweet non-block form

  26. Don’t assume too much

  27. Allow customization

  28. Data down, actions up (Use actions)

  29. Data down, actions up (Use actions) Don’t do that.

  30. Advanced concepts • Keep your component layers decoupled • Find

    ways to prevent registering • Replace observers with (DOM) actions

  31. Advanced concepts http://balinterdi.com/2015/09/10/complex-component-design- in-ember-intro.html

  32. Thank you.