Практическое руководство по созданию SPA на AEM с использованием React
Когда я говорил о современной производительности интерфейса на AEM прошлый год Я посетовал, что не было хорошего решения для шаблонов Javascript (на самом деле, одностраничных приложений).
Шаблонирование ... Шаблонирование - это сложная задача, которую я не считаю достаточно решенной. Рули - это естественная посадка, но в определенных контекстах она не попадает в цель. Если я делаю новый проект AEM сегодня, я использую HBS, но я жажду чего-то лучшего.
Пыль немного осела после того поста:
- Экспортеры слинговых моделей уже год отгружаются.
- Фрагменты контента теперь естественно отображаются как JSON.
- Базовые компоненты 2.0 теперь поддерживаются экспортерами слинговых моделей.
- Реакт МИТ.
Тем не менее, мы все еще держим себя в узде. Скорее всего, нам все еще нужно полагаться на HTL (рендеринг на стороне сервера) в 2018 году. Особенно, если мы хотим 100% глобальное SEO охват. Итак, что мы хотим от структуры SPA?
Идеальные требования SPA
- 100% глобальный охват SEO
- Мало-нет вспышек неустановленного контента (FUOC)
- Authorable
- Фронт-энд дружественный для разработчиков ... импульс сообщества, документация, возможность найма и т.д.
- Смешивать и сочетать с существующими компонентами HTL
Выбери два? Может быть?
Введите React DOM Components
Короче говоря, компоненты React DOM позволяют разработчику создавать модели данных Javascript со стандартным старым DOM. Этот DOM может быть построен с использованием PHP, .NET или, в нашем случае, Java (HTL). Хотите построить свою модель Javascript с атрибутами данных? Дочерние узлы? Детские массивы? Текстовый контент? API позволяет создавать простые или сложные модели, чтобы данные могли передаваться из DOM на стороне сервера в компонент React.
Как это выглядит на земле AEM?
На высоком уровне вот так:
- Sling Model (с экспортером) поддерживает рендеринг как на стороне сервера, так и на стороне клиента.
- Компонент HTL построен так же, как всегда (но с собственным именем элемента для эффективности)
- Модель DOM создается для определения атрибутов, узлов и содержимого, которые будут использоваться из DOM.
- Компонент DOM создается для поиска пользовательского элемента, построения модели данных и передачи этих данных в компонент React.
- Компонент React - это просто ванильный компонент React.
- Класс DAO создается для извлечения данных из Sling Model Exporter. Нажмите кнопку? Компонент React указывает DAO на выборку данных и обновление состояния.
Большим недостатком этого процесса является то, что мы строим две модели и два представления. Это не идеально, но позволяет каждой команде (FE & BE) продолжать строить так, как они знакомы. Внутренний разработчик все еще может работать на Java. Фронтальный разработчик, который никогда не использовал AEM, может работать почти на 100% в чистом виде. Реагировать в день, когда они начинают работу.
Компоненты React DOM также совместимы с AEM. Они знают, когда editor.html видоизменил страницу для разработки, и автоматически отправляет состояние в компонент React.
Образец кода
Шаг 1 - Модель слинга
Шаг 2 - Компонент TabControl HTL
Шаг 3 и 4 - TabControlDOM и TabControlModel
Шаг 5 и 6 - Реагирующий компонент TabControl с DAO
Компонент React и объект доступа к данным (DAO) были объединены для простоты демонстрации.
До искусства
То, что изложено выше, не является единственным способом интеграции AEM с React. Eсть отдельный проект используя Typescript и Nashorn для достижения чего-то похожего. Для моих целей это немного более самоуверенно и жестко, чем мне нравится, отсюда и процесс выше.
Полный проект
Весь источник с примером реализации может быть найдено на GitHub , Этот проект я называю «Pug Ranch 2018», который является эталонной реализацией AEM Archetype 12, плюс несколько тонкостей внешнего интерфейса для создания компонента «Tab-Control» с использованием HTL и React.
Похожие
Практическое руководство по подаче статейО стратегиях построения ссылок всегда много шума. Некоторые, как утверждают, являются передовыми, другие так же стары, как Роллинг Стоунз; некоторым говорят, что они дают большие результаты, другим - потерю усилий. Сегодня мы рассмотрим несколько классическую стратегию: маркетинг статей или представление каталогов статей. Здесь есть два варианта: вы можете передать эту задачу стороннему поставщику услуг или сделать это самостоятельно. В последнем случае вам необходимо выполнить следующие Концептуальное руководство по созданию сайта
Нам действительно нужно концептуальное руководство для создания веб-сайта, и, конечно, эта базовая концепция очень важна для нас в процессе создания веб-сайта. Прежде чем мы планируем создать веб-сайт, который будет иметь профессиональный внешний вид, мы, как веб-создатель, должны иметь идеи и идеи о том, какие вспомогательные моменты мы будем отображать на веб-странице, которую мы создаем. Человек, который хочет создать сайт, должен проконсультироваться с разработчиком или Карьера DOM360: Графический дизайнер - DOM360 Цифровой маркетинг и реклама
... DOM360 Карьера: Графический дизайнер ОБЩАЯ ЦЕЛЬ: DOM360 ищет опытного графического дизайнера, чтобы присоединиться к нашему инновационному агентству цифрового и традиционного маркетинга и рекламы в Бока-Ратон, Флорида. Кандидаты должны иметь опыт работы не менее одного года и иметь базовые знания о Photoshop, Illustrator и / или InDesign и иметь опыт работы с типографикой и версткой. Дизайнерские работы будут интегрированы в веб-сайты и электронные Рейтинг рейтинга Google 200: полный список
Если вы знаете что-то о SEO, вы знаете, что это не легкая работа. Для опытного SEO-стратега или даже владельца бизнеса, использующего базовая поисковая оптимизация , необходимо постоянно следить за обновлениями Google, чтобы знать, что влияет на повышение рейтинга в результатах поисковой системы. По сути, задача состоит в том, чтобы проникнуть в мысли Google и сделать так, чтобы ваш сайт удовлетворял то, что ему нравится. Однако SEO плагины для Wordpress - SEO руководство и руководство для Wordpress
Одним из наиболее важных моментов в CMS, такой как Worpdress, является большое сообщество, которое поддерживает и постоянно совершенствует инструмент, и каждый день они работают над созданием новых плагинов и тем. В этом разделе мы сделаем компиляцию плагинов, которые мы считаем более подходящими для улучшения определенных аспектов нашего блога или веб-сайта, созданного с помощью WordPress, поскольку они могут быть на уровне структурирования, навигации, скорости загрузки и многих других аспектов, SEO сертификация с использованием инструмента веб-анализа Forecheck
За последние 10 лет область SEO стала основным бизнесом, и последние 5 действительно завоевали популярность у SEO-компаний и консультантов, поскольку Интернет стал повсеместным в повседневной жизни наряду с постоянным развитием поисковых систем. В настоящее время не существует SEO-сертификации в сочетании с Google, Bing, Yahoo или другими поисковыми системами. Несколько SEO-компаний и веб-сайтов предлагают свой собственный бренд SEO-сертификации, но ни один из них не одобрен Google et Руководство по оптимизации SEO, используемое Yoast
Предупреждение : неверный аргумент указан для foreach () в /usr/local/web/voiqu/wp-content/plugins/mailchimp-subscribe-sm/admin/classes/admin.php в строке 542 Несколько дней назад я снова просмотрел руководство по оптимизации SEO, созданное Yoast. Я могу сказать, что речь идет о том, что я делаю на своей работе в акте онлайн-маркетинга, а именно специалист в SEO оптимизация , Статья, о которой я пишу, называется: Google Lighthouse, простой инструмент SEO-аудита ... но не полный
Расширение Chrome подверглось серьезному обновлению для профессионалов SEO ... все еще ожидающих улучшений. Расширение Google Lighthouse на Chrome было обогащено IAB выпустил руководство по SEO для интернет-магазинов
IAB, Великобритания, выпустила пособие для интернет-магазинов, чтобы помочь им в их усилиях по продвижению своего бренда и максимизации своего присутствия в Интернете за счет повышения их экономической эффективности с помощью поисковых систем. руководство SEO архивы
Руководство по SEO В настоящее время все говорят о сайтах, оптимизированных для поисковых систем, и об их оптимизации. Хорошо, но как насчет этого? Что должен встретить мой веб-сайт, если он должен быть дружественным Google, и что на самом деле является Как сделать блог и советы начинающим блоггерам
Вы хотите знать, как создать блог? Хотите знать последние советы по ведению блога? Раньше вам нужно было заранее знать, что такое блоггинг и зачем его начинать. Блоги являются расширением Weblog, где деятельность по созданию блога называется ведением блога. Ведение блога - это деятельность по написанию веб-сайта. Ведение блога не только для деловых нужд. Вы можете получить финансовую, профессиональную и личную выгоду от ведения блога, особенно если писательство является одним из ваших
Комментарии
Исследование ключевых слов: полное руководство (обновлено 2017) - Вы действительно занимаетесь SEO, если вас не интересуют ключевые слова?Поскольку потребители становятся все более зависимыми от Интернета для взаимодействия с брендами и для покупки товаров и услуг, как вы можете гарантировать, что веб-сайт вашего бренда будет виден этим онлайн-потребителям в поисковых системах? Google стремится предоставлять наиболее релевантные и полезные результаты тем, кто выполняет поиск, и поощряет веб-сайты, которые обеспечивают отличный опыт работы с клиентами и публикуют высококачественный, ориентированный на клиентов контент. Сегодня Переадресация URL - это сложная вещь, но, надеюсь, это руководство прояснило вопрос: как мне перенаправить URL?
Переадресация URL - это сложная вещь, но, надеюсь, это руководство прояснило вопрос: как мне перенаправить URL? Дальнейшее чтение: Эта статья о: URL перенаправления Как перенаправить URL Перенаправление URL Служба перенаправления URL Фото в основном изображении Натан Думлао с помощью Скорее курс, чем руководство?
Скорее курс, чем руководство? В течение месяца MailChimp курс Все важные части MailChimp расположены четко и в правильном порядке. MailChimp спокойно объясняется на обычном человеческом языке, вы все сами попробуете, и я сразу же помогу, если вы застряли. Курс MailChimp: программа, даты и регистрация » Что вы делаете, когда руководство говорит об этом?
Что вы делаете, когда руководство говорит об этом? Как структурирована ваша команда? Почему вы пришли к такому решению? Как вы справляетесь со сборкой ссылок?» «Это тематические исследования, которые агентства слюноотделят, чтобы делиться ими публично, но они не разрешены. Уровень откровенности, с которым мы сталкиваемся, является редким, и повестка дня полностью основана на том, что участники хотят поговорить». [Посетите этот сайт, Это руководство может быть естественно связано со шлемами магазина, а может быть, даже с другим руководством о том, что следует учитывать при выборе шлема для снегоходов?
Это руководство может быть естественно связано со шлемами магазина, а может быть, даже с другим руководством о том, что следует учитывать при выборе шлема для снегоходов? В дополнение к использованию Google Trends, чтобы выяснить, какие руководства вы можете написать, вы также можете подумать о том, чтобы попытаться использовать ключевые слова в связанных поисках в вашем тексте, заголовке страницы и заголовках. Еще больше связанных ключевых слов могут быть включены Прочитайте и следуйте всем инструкциям нашего SEO Руководство для фотографов , Что теперь?
Это руководство может быть естественно связано со шлемами магазина, а может быть, даже с другим руководством о том, что следует учитывать при выборе шлема для снегоходов? В дополнение к использованию Google Trends, чтобы выяснить, какие руководства вы можете написать, вы также можете подумать о том, чтобы попытаться использовать ключевые слова в связанных поисках в вашем тексте, заголовке страницы и заголовках. Еще больше связанных ключевых слов могут быть включены Какие требования предъявляет Голосовой поиск для вашего веб-сайта / интернет-магазина, и не в последнюю очередь для вашего SEO?
Какие требования предъявляет Голосовой поиск для вашего веб-сайта / интернет-магазина, и не в последнюю очередь для вашего SEO? 2018 год вполне может стать большим прорывом для цифровых голосовых помощников, которые захватили наши смартфоны, компьютеры и многие другие дома. Возможно, вы уже используете Siri на своем iPhone, вы добавили Голосовой поиск для вашего браузера Пользовательские требования?
Пользовательские требования? В наших услугах нет никаких ограничений, мы не используем роботов и автоматические инструменты. Мы делаем все настройки для удовлетворения конкретных требований клиента. Мы сохраняем в безопасности каждый бит вашей информации В ProfProjects обеспечение безопасности ваших данных является нашим главным приоритетом. Мы используем проверенную технологию и принимаем все меры предосторожности, чтобы обеспечить надежную доставку ваших данных в наш центр обработки Или вам нужно обновить заголовки изображений перед использованием Media File Renamer?
Или вам нужно обновить заголовки изображений перед использованием Media File Renamer? Затем позвольте мне познакомить вас с одним из первых плагинов, которые я устанавливаю на каждом сайте. SEO Auto Image Tags автоматически генерирует чистые атрибуты alt и заголовки изображений на основе имени файла. Снимок экрана с моего личного сайта выше показывает, как имя файла изображения автоматически заполняет оба поля. Кроме того, дефисы, точки и другие символы автоматически Придерживается ли сайт стандартных методов разработки с использованием адаптивной таблицы стилей CSS с медиа-запросами?
Придерживается ли сайт стандартных методов разработки с использованием адаптивной таблицы стилей CSS с медиа-запросами? Или же… Использует ли сайт отдельный мобильный поддомен (m.domain.com)? Хотя нет ничего плохого в использовании мобильного субдомена, это может усложнить SEO. Каждый раз, когда вы используете поддомен, вы, по сути, говорите Google, что это второй физический веб-ресурс. По сравнению с использованием подпапки, которая обычно является расширением сайта, Вам будет предложена 30-дневная безрисковая пробная версия с использованием приложения, так почему бы не попробовать?
Вам будет предложена 30-дневная безрисковая пробная версия с использованием приложения, так почему бы не попробовать? Цена : бесплатный тариф Список желаний - отличный инструмент для каждого посетителя, у которого нет намерения совершить покупку. Если посетитель помещает продукт в список желаний, он показывает интерес, который можно конвертировать в продажи. Например, Amazon отправляет электронное письмо каждую неделю об элементах
Итак, что мы хотим от структуры SPA?
Может быть?
Хотите построить свою модель Javascript с атрибутами данных?
Дочерние узлы?
Детские массивы?
Текстовый контент?
Как это выглядит на земле AEM?
Нажмите кнопку?
Хорошо, но как насчет этого?
Хотите знать последние советы по ведению блога?
