Мне очень нравится редукция и отделение логики от кода. Даже если это создает некоторые дополнительные проблемы, а иногда и более высокую кривую обучения для разработчика. Подход команды ngrx к использованию Observables для побочных эффектов ngrx (асинхронные вызовы, такие как HTTP-запросы), с моей точки зрения, очень хорош. Тот же подход теперь доступен для собственной реализации redux и называется redux-observable. Я очень ценю эту реализацию.

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

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

Примерно 7 месяцев я работаю с StencilJS, а также представил его в нескольких проектах. Stencil - это компилятор веб-компонентов. Преимущество по сравнению с написанием ванильных компонентов JavaScript для меня состоит в том, что существуют хорошо задокументированные правила использования компонентов. С моей точки зрения, также полезно использовать декораторы Typescript для украшения компонентов и повторного использования подхода из реакции с функцией рендеринга в компоненте. Он сочетает в себе полезные элементы с точки зрения angular и реагирует с точки зрения кодирования, упрощает разработку отдельного компонента, предоставляет такие аспекты, как плагины для SCSS и многое другое. Несмотря на то, что он предлагает все это, в конечном итоге он создает только собственные веб-компоненты, которые могут быть поняты всеми браузерами ›= IE 11.

За последние несколько месяцев мы создали множество компонентов с помощью StencilJS и в В каждом проекте компоненты превосходили предыдущие реализации JS-фреймворка. С моей точки зрения, одним из основных преимуществ является то, что компоненты можно разрабатывать в отдельных проектах и ​​легко интегрировать в проект angular с помощью тегов HTML, а привязка работает так же, как и с собственными компонентами HTML. Эта слабая привязка и отделение логики приложения от интерфейса в сочетании со скоростью рендеринга и обновления этого нативного подхода дает мне уверенность в том, что мы нашли правильное решение для наших нужд.

  • В каком фреймворке / библиотеке у команды больше опыта?
  • Какие приложения мы разрабатываем?
  • Какие компоненты уже есть в нашей компании (или мы уже работаем с компонентным подходом)?
  • и многие, многие другие
  • Обычно я мало пишу о своем опыте разработчика, и если я что-то пишу, то это скорее практические рекомендации, чем мой личный опыт. Сегодня, когда я лежал на солярии на острове Корфу, мне в голову пришли некоторые воспоминания, и я решил поделиться некоторым опытом последних лет в области фронтенд-разработки.

    В течение многих лет мы использовали несколько подходов для получения поведения, подобного веб-компонентам, в разных фреймворках. У меня всегда были проблемы с разными подходами, поскольку я видел, как фреймворки развиваются за минимальное время, и оборотной стороной этой эволюции всегда была необходимость адаптировать компоненты интерфейса к новому состоянию технологии. Часто это были лишь незначительные изменения в синтаксисе, иногда это было полное переписывание.

    Когда вышел Polymer, я надеялся, что смогу решить эти проблемы и иметь возможность писать компоненты интерфейса независимо от логики. . Я сделал это в то время, когда angular 1 был актуален, а полимер был в младшей версии. Было много проблем, касающихся привязки атрибутов, совместимости с браузером и разработки в HTML, а работа с импортом HTML несколько раз нарушала наш рабочий процесс. Не буду утверждать, что это была вина одного из фреймворков, но я понял, что их комбинация не работает ни в нашей команде, ни в наших фреймворках.

    В нашей команде мы тогда работали с подходами из различные фреймворки и библиотеки. Мы сделали большую часть разработок в различных версиях angular, а некоторые - с реакцией и комбинацией разных библиотек. Для меня реакция всегда вызывала некоторое беспокойство по поводу процесса обновления, потому что я помнил из различных проектов JavaScript, в которых использовалась комбинация библиотек, что в какой-то день мы всегда сталкивались с проблемами при использовании современных библиотек. Я не уверен, что это вообще разрешимо, но, честно говоря, даже у angular возникают проблемы с обновлениями, как только вы используете сторонние библиотеки в своем проекте (и вы обычно делаете это, если это более крупный проект).
    Я так и сделал. Сначала это было не похоже на jsx / tsx, поскольку, с моей точки зрения, это было смешивание кода с шаблоном. Я ошибался! Если вы разделите компоненты на части подходящего размера, это будет невероятно полезно. Этот страх возник в то время, когда у нас были большие шаблоны PHP, и они до сих пор меня до чертиков пугают :-).

    Для этого плана нет единственного решения. Это то, чему меня очень быстро научила моя работа консультантом. Решение об использовании angular, реакции или любого другого фреймворка также часто определялось командами и бизнес-потребностями, такими как:

У нас уже есть несколько примеров, когда мы использовали одни и те же компоненты трафарета в проекте веб-сайта трафаретов, в приложении angular и CMS на основе PHP. Преимущество для нас и для заказчика заключается в получении библиотеки компонентов по сравнению с различными решениями и повышении скорости разработки. Кроме того, с точки зрения конечных пользователей приложения часто кажутся более отзывчивыми, а время начальной загрузки значительно сокращается. Попробуйте StencilJS и расскажите мне о своем мнении и своем опыте.

Желаю вам всего наилучшего на Корфу!

Доминик

INSPIRATIONlabs - студия цифровых решений и консалтинга, расположенная в Гейдельберге, Германия. Если вы заинтересованы в нашей работе, приходите к нам, будь то физически или в цифровом виде, на «http://www.inspirationlabs.com»

Путь к нативным веб-компонентам и как StencilJS может вам помочь