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
[RSJ26] NarrativeFlow: Flow-Based Vision-Language-Action Model Using Robot Velocity Fields
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
160
When Does a Local Qwen Start to Break
Avatar for Shoto morshoto
0
180
enechainの内製セルフサービスプラットフォーム
Avatar for Tomoya Usami hiyosi
0
110
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
880
どんな手を使っても絶対間に合わせるスケジューラ
Avatar for asari asari194617
0
1.6k
Jetpack Compose で挑む新聞紙面UI ─ 複合ジェスチャー・ポリゴン記事領域・適応的ページ構成という3つの壁/droidkaigi2026
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
190
Nav2、Nav3 ... はたまた自作？〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
Avatar for Yuki Anzai yanzm
0
220
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
Avatar for MasahiroKawahara masahirokawahara
1
300
Bet AI Day 2026丨AIを「使う」から、AIが「働く」へ ― LayerXが進める「組織AI」の社会実装
Avatar for LayerX layerx
PRO
3
2.2k
Level Up Your CDK DX: 5 Tools I’ve Been Building
Avatar for k.goto gotok365
2
190
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
150
データエンジニアリングワークショップ：Auto LoaderとSparkで学ぶデータパイプライン構築
Avatar for Databricks Japan databricksjapan
PRO
0
150

Featured

See All Featured
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
410
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
570
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
420
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
840
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
290
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
800
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
550
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
890
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
660

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.