Дизайн сложного компонента в Ember.js — Введение


Заголовок лучше бы поменять на "Кое-что о дизайне сложных компонентов в Ember.js". Но любое заглавие с "кое-что" исключает его помпезность. Поэтому я не утверждаю, что эта серия статей будет представлять апофеоз дизайна компонентов в Ember. Определенно есть и непременно будут более сложные структуры компонентов и сценарии.

На протяжении этой серии мы будем создавать компонент, который позволит автоматически заполнять поле ввода при наборе текста и показывать фиксированный список вариантов для выбора. Ничего экстраординарного, но задача достаточно сложная, чтобы можно было воспользоваться принципами дизайна/взаимодействия и объяснять их по мере разработки компонента.

Важная оговорка: я не эксперт по дизайну компонентов (что, как мне кажется, достаточно сложная тема). Меня заинтересовала эта тема благодаря Райану Флоренсу и его лекциям. С его помощью я изучил основную базу. Компонент я выбрал, вероятно, тоже под его влиянием. Он разработал компонент автозаполнения, из которого я позаимствовал некоторые идеи, а иногда просто копировал реализацию.

Основная причина

Вам, наверное, интересно, зачем изобретать велосипед? Зачем разрабатывать то, что уже есть, и почему не придумать нечто новое?

Прежде всего, я (и наука доказывает, что большинство из нас) лучше понимаю материал на практике. Я хотел использовать пример, где у меня уже есть готовая реализация образца, но также понять, почему оригинальный код работает именно таким образом, и посмотреть, смогу ли я сделать компонент проще или эффективнее. Я хотел столкнуться с теми же проблемами, ощутить ту же "боль" и найти решения для типичных и частых затруднений.

Еще важно помнить, что когда Райан разрабатывал свой компонент автозаполнения, не было блочных параметров, не было замкнутых действий и прямых привязок атрибута. Тогда все еще приходилось обращаться к наблюдателям. Двусторонние привязки были все еще в ходу и фактически обеспечивали связь между частями структуры компонента.

С того времени Ember прошел немалый путь, и его компоненты устремились в сторону представителей из React в плане их реактивности, к подходу "отобразить все заново". Потенциально, некоторые идеи из этой серии статей можно применить к React и другим библиотекам, и тогда они принесут пользу большему числу людей.

Так много слов и столь мало кода

Дабы внести что-то более материальное (почти) в эту первую статью, позвольте показать, как будет происходить взаимодействие с законченным (?) компонентом. Если вы читали мои предыдущие посты или мою книгу, для вас не станет сюрпризом, что я использую здесь этот компонент, чтобы отбирать великих артистов из предопределенного списка:

Selecting an artist

Перевод статьи - Complex Component Design in Ember.js - Intro


Комментарии (0)

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.