Когда мы в последний раз собирались переделывать наш веб-сайт, многие мудрые головы мудро кивали и говорили: «Внутренние проекты всегда самые трудные». И традиционно компаниям сложно выкроить время для создания качественных работ и продуктов для себя. По общему признанию, некоторые предыдущие версии нашего собственного сайта были созданы с узкой направленностью и лишь занимали время для проектирования и разработки. Но мы - гораздо больше, чем просто компания по обслуживанию клиентов - мы создаем продукты для себя, а не только для других.

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

Переход на открытый исходный код

Мы также хотели использовать проект как «песочницу», чтобы поэкспериментировать с продвижением нашего подхода - ранним выпуском работы, тестированием и поиском информации извне основной команды и, конечно же, совместной работой дизайнеров и разработчиков в одной команде. У нас было несколько итераций и неудачных стартов как в области дизайна, так и в технических решениях, но наше заявление о видении - «место, которое вдохновляет вас присоединиться к нашему путешествию» - упростило процесс перестройки. Это было нашей путеводной звездой, и мы регулярно возвращались к ней, чтобы помочь проработать трудные решения. Наше решение перейти на открытый исходный код отчасти было естественным продолжением этого видения продукта.

Наша цель состояла в том, чтобы создать инновационную настройку внешнего интерфейса, и чтобы сосредоточиться на этом - и получить максимальную отдачу от нашего инженерного опыта - мы решили, что серверная часть будет создана специализированным агентством разработки WordPress Human Made.

Открыть по умолчанию

Как группа, мы с самого начала говорили о желании сделать нашу работу открытым исходным кодом. Пригласить мир заглянуть за кулисы может быть немного страшно, но это также увлекательно и мотивирует.

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

В конце концов, мы создали нечто новое и достаточно отточенное, чтобы опубликовать его. Мы хотим, чтобы это было действительно полезно для других - в конце концов, все это очень хорошо читается в блоге о том, как хорошо использовать React или Docker, с некоторыми примерами Hello World, но имея возможность заглянуть под Другое дело капот производственного сайта. То, как мы использовали WordPress в качестве автономной установки, доступной только через API для высокопрофессионального производственного веб-сайта, было в некотором роде технологической ставкой - с появлением WP-API в ядре WordPress через шесть месяцев после того, как мы решили пойти на это, - так что поделитесь своим опытом а кодовая база должна давать идеи исполнения и уверенность всем, кто рассматривает эту установку.

Во многих областях мышление «ustwo» эволюционировало в сторону «открытого по умолчанию» мышления. Поэтому вопрос, который мы задали себе, был не «почему», а скорее «почему бы и нет?». Для нас гораздо больше пользы можно получить, опираясь на работу и знания друг друга, чем пытаясь удержать краткосрочное технологическое преимущество. Кроме того, поскольку люди увлечены разработкой продуктов, мы больше заинтересованы в создании отличных продуктов с использованием правильных технологий в нужное время, а не в попытках извлекать прибыль из многократного применения одних и тех же методов.

Технические детали

Мы решили создать сайт как одностраничное приложение, чтобы иметь полный контроль над всеми его аспектами, включая переходы между страницами, и сделать навигацию сверхбыстрой, не перезагружая браузер. Для этого мы выбрали React.js в качестве основной технологии JavaScript, поскольку он имеет встроенную поддержку для рендеринга страниц также на стороне сервера (так называемый изоморфный рендеринг). Таким образом, мы могли поддерживать начальную производительность рендеринга на мобильных устройствах и позволять посетителям видеть контент без дополнительного этапа загрузки данных, который обычно происходит с большинством клиентских фреймворков JavaScript. Чтобы включить рендеринг на стороне сервера и иметь правильные URL-адреса, мы поместили небольшой внутренний сервер Node за нашим приложением.

Наша система управления контентом, стоящая за этим, представляет собой экземпляр WordPress, который на самом деле не отображает сами страницы, а вместо этого обслуживает контент через API через сочетание стандартных и настраиваемых конечных точек JSON REST, что делает подавляющее большинство контента редактируемым.

На протяжении всего этого проекта мы пытались построить систему непрерывного совершенствования. Мы создали среду разработки для нашего веб-сайта, которая требует от нас чистого, единообразного кода и, благодаря этому, более удобной в обслуживании базы кода, которую позже может подобрать другая команда.

Как полное совпадение, наш стек и идеи кажутся очень похожими на то, что Automattic сделала с Calypso, чтобы переосмыслить интерфейс администратора WordPress. Так что, если вам нравится то, что они сделали, чтобы редактор был удобен, вам понравится то, что мы сделали, чтобы посетители остались довольны.

Так что, пожалуйста, смотрите, копайтесь и открывайте вопросы или напишите нам на [email protected], если вы увидите что-нибудь интересное!

Эта статья была написана Даниэлем Деммелем и первоначально опубликована на ustwo.com

✨ Мы ustwo. Мы создаем цифровые продукты, услуги и бизнес, которые оказывают значительное влияние на мир.

👏 Если вы хотите создать с нами что-то невероятное, свяжитесь с нами - [email protected]

📥 Зарегистрируйтесь прямо здесь, чтобы получать самые свежие идеи прямо на ваш почтовый ящик.