Апостроф 3.0 идет активным образом! Наша CMS Node.js с 100% открытым исходным кодом находится на пути к следующему выпуску долгосрочной поддержки.

Недавно Брайан Гантик и Том Бутелл на P'unk Avenue запрограммировали парой в течение трех дней, чтобы запустить самую амбициозную часть Apostrophe 3.0: распотрошить конвейер активов Apostrophe в пользу Webpack и восстановить админку Apostrophe. UI с Vue.

Зачем перестраивать интерфейс администратора Apostrophe, если он уже работает? Потому что мы хотим, чтобы все сообщество разработчиков чувствовало себя комфортно. И выбор современного фреймворка, такого как Vue, - отличный способ добиться этого.

И с тех пор Том упорно трудился над тем, чтобы отказаться от всего нашего старого кода, основанного на обратном вызове, в пользу новых ключевых слов JavaScript async и await. Стандартные в Node 8.x и новее, async и await делают бэкэнд-разработку намного более доступной, устраняя препятствия для более широкого использования Apostrophe.

Вы можете видеть, к чему мы стремимся: он должен быть максимально простым для участия и помощи в продвижении Apostrophe в любом месте, где его хочет видеть сообщество.

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

С тех пор мы утвердили решение использовать Vue, а не React, из-за его легкого инструментария, удобства включения в проекты, которые не являются 100% Vue на интерфейсе, и доступности для новых разработчиков. Vue также приобрел значительную популярность среди корпоративных клиентов, которые поддерживают разработку Apostrophe - клуба, в который вы сердечно приглашаетесь.

Так что именно мы сделали? Совсем недавно мы:

  • Заменена большая часть апострофов задачей «build», использующей Webpack.
  • Приняли соглашение о загрузке компонентов Vue от Apostrophe и приложений Vue. Компоненты Vue будут автоматически загружены из подкаталога src/apos/components любого модуля Apostrophe, если пользователь вошел в систему, и глобально зарегистрирован во Vue как именованные компоненты, такие как ApostrophePiecesManagerModal; не нужно вызывать pushAsset в 3.x.
  • Продемонстрирована возможность переопределить, какие компоненты Vue используются через конфигурацию серверного модуля, не делая код Vue слишком странным для чтения.
  • Полностью исключены moog, apos.define, apos.create и т. д. во внешнем интерфейсе. Код администратора Vue от Apostrophe будет знаком разработчикам Vue, и в нем будет нетрудно принять участие . Благодаря отличным функциям Vue, таким как динамические компоненты, мы можем сохранить гибкость нашей старой системы, перенося шаблоны Vue.
  • Разделение ответственности за различные части пользовательского интерфейса администратора между приложениями «панель администратора» и «модальные окна». Также будет приложение для настроек страницы и приложение, которое создается для каждой редактируемой области на странице. . Мы делаем это таким образом, потому что приложения Vue должны полностью «владеть» той частью DOM, в которую они вставляются на страницу. И им не принадлежит большая часть содержания страницы; см. следующий пункт.
  • Рекомендуется, чтобы Nunjucks оставался на виду и значительно сокращал объем кода JavaScript, передаваемого браузеру для типичных посетителей сайта. По умолчанию вышедший из системы пользователь почти не получает от нас JavaScript, за исключением очень простой библиотеки, подобной модулю apostrophe-Lean-frontend, который мы уже выпустили для тех, кто хочет облегченный интерфейс в Apostrophe 2.x. Так что во что бы то ни стало, просто начните использовать этот модуль прямо сейчас. Мы используем этот подход, потому что Nunjucks имеет отличную производительность и хорошо справляется с созданием простых старых веб-страниц ..., то есть, если вы не используете наш модуль без апострофа, который по-прежнему является правильным выбором для тех, кто создание одностраничных приложений.
  • Оставил открытой дверь для веб-интерфейса, полностью ориентированного на Vue, в будущем. Мы изменяем конвейер рендеринга Apostrophe, чтобы обеспечить асинхронный рендеринг, а это означает, что в будущем возможна реализация всего интерфейса Vue, когда рендеринг на стороне сервера станет зрелым и окажется достаточно быстрым для работы. И это означает, что мы, вероятно, представим некоторые асинхронные функции даже с шаблонами Nunjucks, такие как «компоненты», которые ведут себя так же, как в Rails.
  • Выбрано не использовать Vuex… по крайней мере, пока! Vue имеет несколько популярных шаблонов для управления состоянием, в зависимости от потребностей вашего приложения. Когда состояние разделяется между многими компонентами, и изменения происходят быстро и быстро со всех сторон, и одно главное «хранилище» этого состояния имеет смысл, Vuex - отличный способ. Однако для Apostrophe хранилища должны быть вложенными для поддержки составных модальных интерфейсов в нескольких ситуациях. И тогда контент почти всегда оказывался «живущим» в единственном родительском модальном компоненте. Когда состояние принадлежит одному компоненту, а дочерние компоненты могут хорошо сообщать о своих потребностях, просто передавая события родителю, Vuex обычно считается излишним. Вот почему он нам, кажется, не нужен - по крайней мере, пока.
  • Реализована двусторонняя привязка данных. Мы делаем изящные вещи, например, создаем собственные компоненты, которые поддерживают двустороннюю привязку данных с @model, как это делают обычные элементы формы. Это позволит нам делать отличные вещи со схемами апострофа в Vue.
  • Мы также решили создать глобальный объект шина событий Apostrophe, apos.bus, для отправки нескольких событий, которые представляют интерес для более чем одного приложения Vue. Например, именно так мы поступим, когда приложение панели администратора (или что-то еще!) Хочет, чтобы модальное приложение открывало модальное окно Управление продуктами. И мы используем безголовый экземпляр Vue в качестве этого busobject.

Больше прогресса 3.x: за пределами Vue

Помимо этих достижений, в этом году уже были предприняты еще два важных шага на пути к 3.x:

  • Обязан использовать async / await во всем серверном коде 3.x. Это значительно улучшит доступность серверной разработки Apostrophe. Не будет никаких API, основанных на старом соглашении об обратных вызовах. Обещания будут использоваться только там, где async/await не покрывает территорию. Например, если предполагается параллелизм, вы можете увидеть Promise.all или Promise.map Bluebird, примененные к массиву обещаний, возвращаемых async функциями. Поскольку Apostrophe обычно избегает параллельного кода при обработке одного запроса, вы не увидите это очень часто. Наша философия заключается в том, что высокая посещаемость веб-сайта уже обеспечивает достаточный параллелизм.
  • Представлены события обещания Apostrophe. События обещания решают многочисленные проблемы, с которыми сталкиваются разработчики, стремящиеся расширить Apostrophe. В отличие от обычных шин событий, обещанные события (асинхронные события в 3.x) обеспечивают выполнение действий в предсказуемом порядке и предоставляют способы переопределения определенных обработчиков событий при создании подкласса, что значительно снижает риск конфликтов имен методов. Уже в версии 2.x это наиболее предпочтительный способ подключения к жизненному циклу веб-запроса в Apostrophe, а написание callAll методов устарело. В 3.x события обещания будут единственным способом летать. Конечно, их можно реализовать с помощью ключевого слова async и ожидать с помощью ключевого слова await.
  • Создал apostrophe-Lean-frontend, как упоминалось ранее. Необязательно в 2.x, это будет стандартный подход к интерфейсу в 3.x. Определенно хорошая идея принять его пораньше.

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

И, конечно же, мы приветствуем ваш вклад в код! Вы можете найти наши коммиты до 3.0 здесь. В отдельной ветке прорабатываем преобразование в async / await. Во время спринтов по парному программированию мы будем работать непосредственно с веткой 3.0; между спринтами мы будем прорабатывать пул-реквесты к нему.

Здесь также есть крайне минимальный тестовый проект, хотя я должен напомнить вам, что 3.x еще не является используемой CMS и не достигнет этого уровня зрелости в течение некоторого времени. Кстати, о котором:

2.x - это подходящая версия для начала проектов сейчас (и даже в 2019 году)

Этот пост был бы неполным без быстрого обновления Apostrophe 2.x!

Apostrophe 2.x в ближайшее время не уйдет. У нас самих более 50 клиентов, сайты которых успешно работают на Apostrophe 2.x, зрелой долгосрочной платформе поддержки. по которым мы сами будем запускать новые проекты, по крайней мере, в первой половине 2019 года. Чтобы разумно спланировать наш конвейер разработки, многие функции 2.x не будут сразу существовать в 3.x, особенно корпоративные функции, такие как рабочий процесс , Локализация и мультисайт .

Общие шаблоны фронтенд-разработки и даже бэкэнд-разработки, которые вы освоите с помощью Apostrophe 2.x, будут легко преобразованы в 3.x, и будет четкий путь обновления для ваших существующих проектов.

Так что не стесняйтесь использовать 2.x и не ждите 3.x. Мы тоже не ждем!

Наш следующий спринт

Наш следующий спринт запланирован на конец октября ... и теперь, когда мы вернулись с посещения Node + JS Interactive в Ванкувере, мы почти у цели!

Говоря о которых…

Что мы узнали в Node + JS Interactive

Это был наш второй год спонсирования Node + JS Interactive. Каждый год мы узнаем много нового о рынке и о том, что нужно разработчикам от CMS, полностью построенной на Node.js.

В этом году конференция была расширена, чтобы охватить разработку JavaScript в целом, а не только Node.js. Это привлекло в комнату больше разработчиков внешнего интерфейса, многие из которых были взволнованы, увидев CMS, не требующую постоянного переключения передач между JavaScript во внешнем интерфейсе и PHP на заднем плане.

Конечно, были и пожелания по функциям. Наиболее распространенной является поддержка GraphQL. У Apostrophe есть безголовый модуль, который мы добавили в ответ на частые запросы на прошлогодней конференции. Этот модуль предоставляет отличный REST API для частей и страниц Apostrophe.

Очевидно, что разработчики хотели бы видеть GraphQL следующим, и мы с нетерпением ждем добавления его поддержки.

Что дальше

Как я уже упоминал, скоро состоится наш следующий спринт. Мы перейдем от этапов подтверждения концепции поддержки Vue к реализации основных принципов управления контентом Apostrophe с помощью Vue. Вскоре после этого вы сможете увидеть, как обретают форму новые дизайны 3.x. Чтобы подогреть ваш аппетит, вот макет нового диалогового окна «Управление изображениями»: