Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Balint Erdi Balint Erdi
February 11, 2016
Technology
100
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.4k
Why you should consider Ember.js for your next project
Avatar for Balint Erdi balint
4
350
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
240
Auth* in Ember apps with Torii
Avatar for Balint Erdi balint
1
320
Complex Component Design in Ember
Avatar for Balint Erdi balint
0
400
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
180

Other Decks in Technology

See All in Technology
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
Avatar for CyberAgent cyberagentdevelopers
PRO
4
4.3k
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
200
Claude Code×Terraform IaC テンプレート駆動開発
Avatar for Itou Hideki itouhi
1
490
データサイエンスを価値につなげるプロジェクト設計 〜 DS一年目が現場で得た気づき 〜
Avatar for Yusei Doi ysd113
1
150
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
非定型業務をAI slackbotで自動化する ~ 社内要望を自動壁打ちするbotを作った ~/automating-ad-hoc-work-with-ai-slackbot
Avatar for shibayu36 shibayu36
0
580
Disciplined Vibes: Scaling AI-Assisted Engineering
Avatar for Sheharyar Naseer sheharyar
0
130
protovalidate-es を導入してみた
Avatar for 弁護士ドットコム bengo4com
0
170
AIっぽい文章を採点して人間らしく直すアプリを作ってみた
Avatar for Yuuki Yamashita yama3133
2
120
ルールやカスタム機能、どう活かす?ハンズオンで体感するIBM Bobの出力コントロール
Avatar for mu (Mizuho Uehara) muehara
1
130
RAG を使わないという選択肢
Avatar for tatsutaka tatsutaka
1
150
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
Avatar for iwashi iwashi86
19
6.4k

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
188
29k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
71
40k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
300
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
200
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
440
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
250
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k

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.