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

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

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
360
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
250
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
『止めない』を設計する — 制約の中で、事業の根幹を支える判断
Avatar for Terry hiroyaterui
0
210
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
210
AI時代におけるプロダクト横断勉強会の設計
Avatar for ZOZO Developers zozotech
PRO
0
160
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
130
推論の観測、できていますか？ 〜 Google Cloud Gemini Enterprise Agent Platformで 3つの Gemini モデルを実測して踏んだ、評価の罠 〜
Avatar for Shu Kobuchi shukob
PRO
0
160
PM領域でのAI Agentの活用
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
270
AIで実装は速くなった。なのにプロダクトは速くならない。職能の壁を越えて価値のフローを設計する
Avatar for nwiizo nwiizo
6
7.3k
Kiro Crewしか勝たん！？
Avatar for Kazuki Miura miu_crescent
PRO
0
180
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
160
20260903 Tokyo Jazug Night #62 | Azure エンジニアよ、 その環境は本当にセキュアか？
Avatar for Olivia olivia_0707
1
620
データエンジニアリングワークショップ：Auto LoaderとSparkで学ぶデータパイプライン構築
Avatar for Databricks Japan databricksjapan
PRO
0
190
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
Avatar for kaz classmethod_kaz
0
260

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
970
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
11k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
550
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
500
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
260
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
530

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.