Введение в независимую от фреймворков интерфейсную разработку
Компиляция - это общий термин в программировании, обозначающий преобразование одной единицы кода, написанной на одном языке, в другой язык. Однако транспиляция относится к конкретному действию перемещения одной единицы кода, написанной на одном языке, на другой язык с аналогичным уровнем абстракции.
В следующей статье мы опишем варианты использования для переноса кода между фреймворками во внешнем интерфейсе. Мы также рассмотрим, как мы можем использовать простой транспилятор фреймворка, с примерами.
Развитие гибкости
При разработке предприятия необходимо учитывать множество факторов, прежде чем внедрять новую технологию. Поскольку внедрение технологий - дело немалое, этот выбор является одним из самых трудных для технической организации. Давайте рассмотрим два сценария, с которыми обычно сталкиваются при внедрении новой технологии.
Технология блокировки
Представьте себе следующий сценарий: сейчас 2010 год, и вы находитесь в комнате принятия решений в своем офисе. Споры длились год, и заинтересованные стороны в области технологий наконец-то определились с новой структурой для восстановления устаревшего интерфейса. Они выбрали Backbone - вы в восторге, потому что это передовая технология. У вас такой большой потенциал по сравнению с вашим унаследованным стеком. Отслаивание займет большую часть пропускной способности вашей инженерной команды в течение следующих шести месяцев. Это потребует значительного обучения и новых сотрудников, которые уже знакомы с новой технологией.
Теперь перенесемся на 5 лет вперед (или два срока жизни в экосистеме JavaScript). Сейчас споры ведутся между React, Vue или множеством альтернатив, на которые вы делаете ставку, принимая ваше решение.
Этот сценарий иллюстрирует общую проблему в корпоративном мире, известную как технологическая блокировка. Изменение технологии может означать перестройку огромных стеков и обучение сотен разработчиков. Финансовые обязательства, вложение времени и ресурсов - вот почему многие опасаются технологических нововведений и осуществляют их только тогда, когда это необходимо.
Организационная гибкость
Во втором сценарии я приведу пример из SSENSE:
Мы были ранними последователями Vue, например 1.0. Недавно мы исполнили первую годовщину полного перехода на фреймворк. В настоящее время Vue находится на версии 2.8 и только недавно стал популярным в Северной Америке.
Поскольку фреймворк настолько новый, разработчиков Vue сложно найти. В результате мы обычно нанимаем разработчиков с другим опытом работы с интерфейсом и вместо этого обучаем их.
Кроме того, у нас есть целый аспект нашей организации, который создает собственные приложения для внутреннего использования. Поскольку на момент написания внутреннего программного обеспечения у Vue не было мобильной версии, мы решили использовать React Native. Это означает, что, хотя и веб-команды, и группы мобильных технологий используют одни и те же ресурсы дизайна и художественное направление, и что каждая платформа имеет много общего в дизайне, нам остается поддерживать две кодовые базы, которые почти идентичны при рендеринге.
Преобразование проблем в решения
Чтобы повторить вышесказанное, ситуация, с которой мы сейчас сталкиваемся, заключается в том, что наши разрозненные команды разработчиков используют два фреймворка для создания аналогичного интерфейсного интерфейса. Предлагаемое нами решение этой проблемы (а также другая проблема, о которой мы упоминали) - как вы уже догадались - транспиляция компонентов.
Цель нашего решения - создать общую библиотеку компонентов, не зависящую от фреймворка. Мы будем писать компоненты на одном языке, которые после экспорта могут использоваться любым приложением. Работа над этой библиотекой все еще продолжается, однако я могу поделиться маленьким кусочком головоломки и, что самое важное, с точки зрения транспиляции: Flip!
Flip был создан для решения проблемы в сценарии №2 выше. По своей сути Flip - это оболочка для нескольких пользовательских Babel AST, созданных командой Vue. Вместе со многими модификациями они переносят компоненты React в компоненты Vue.
Пример файловой структуры, в которой можно использовать Flip, будет выглядеть примерно так:
- src
- app
- pages
- components
- configs
- node_modules
- @company/components
- @ssense/flip
Мы можем запустить flip /node_modules/components и импортировать их в приложение из dist каталога, который сгенерирует Flip. Это может работать в основном приложении или внутри модуля узла, который использует Flip для экспорта компонентов React и Vue.
Не стесняйтесь клонировать Flip и запускать тесты, чтобы увидеть этот транспилятор в действии. Я также отправил небольшой пример вышеупомянутого взаимодействия на GitHub.
Следующие шаги
Выше я упоминал, как транспилирование компонентов связано с более крупным шаблоном - этот шаблон называется микро-интерфейсами.
Микро-фронтенды
Если вы знакомы с архитектурой микросервисов, микро-интерфейсы следуют аналогичной схеме. Вот краткий обзор: с помощью микро-интерфейсов мы разбиваем наш пользовательский интерфейс на основе некоторого предопределенного фактора. Хотя факторы различаются, вот самые распространенные:
- Масштабируемость: чтобы вы не отображали весь веб-сайт, когда 80% трафика приходится на одну страницу.
- Организационный: чтобы дать командам исключительное право собственности на свои услуги и пользовательский интерфейс.
- Практичность: чтобы ваша организация могла постепенно инвестировать в технологии.
Если вас интересует этот паттерн, вы можете найти несколько интересных инструментов здесь и здесь, список ресурсов здесь и ознакомиться с некоторыми интересными материалами здесь и здесь. Шаблон новый, поэтому вы также можете следить за отчетом ThoughtWorks о нем здесь.
P.S. - мы выпустили Flip как инструмент с открытым исходным кодом на GitHub - попробуйте его в следующем проекте! Вы можете найти его на www.github.com/ssense/flip.
Редакционные обзоры Deanna Chow, Liela Touré и Prateek Sanyal
Хотите с нами работать? Щелкните здесь, чтобы увидеть все открытые вакансии на SSENSE!
