Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular into drupal integration - Eugene Mickhnitskyy & Dmitriy Petruk

111 views

Published on

1. Drupal theme or headless Drupal;
2. Drupal integration. Drupal flexibility.
3. Routing. Subdomains.
4. Gotchas related to Angular Drupal integration.
5. Drupal or Angular filtering, sorting.
6. SEO.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Angular into drupal integration - Eugene Mickhnitskyy & Dmitriy Petruk

  1. 1. AngularJS front-end для Drupal. От этапа настройки до готового проекта
  2. 2. ❖ О проекте ❖ Почему AngularJS 1.x? ❖ Почему Angular 2+?
  3. 3. О проекте и условиях ● Платформа для саб-сайтов Homepage: https://domain.com Subsite homepage: https://domain.com/subsitename ● Система гибких виджетов ● Большой объем данных ● Сжатые сроки и неопытные члены команда
  4. 4. Почему AngularJS 1.x? ● Большая база знаний и готовых решений (ограниченное время, фокус на бизнес логике) ● Активное, отзывчивое сообщество (https://t.me/angular_js) ● Прост в освоении ● Все еще развивается ● Angular 2+ сайт написан на AngularJS :)
  5. 5. Почему Angular 2+? ● Отсутствие большой базы знаний и готовых решений (менее ограниченное время) ● Активное, отзывчивое сообщество (https://t.me/angular_ru). ● TypeScript ● ...
  6. 6. ❖ Headless Drupal ❖ Drupal theme
  7. 7. Headless Drupal. Front End структура
  8. 8. Drupal theme
  9. 9. Подключение скриптов
  10. 10. HTML через $templateCache
  11. 11. Установка $templateCache ● Grunt $ npm install grunt-angular-templates ● Gulp $ npm install gulp-angular-templatecache
  12. 12. Headless Drupal ● полная автономия Angular от Drupal темы (+); ● удобно поддерживать и расширять (+).
  13. 13. Drupal тема ● авторизация админа и пользователей (+); ● drupalSettings (+); ● мультиязычность (+); ● интеграция модулей, админ toolbar и Drupal меню (+).
  14. 14. AngularJS generators
  15. 15. Angular сборка от yeoman http://yeoman.io/ - инструмент для создания сборки. https://github.com/yeoman/generator-angular - cборка для Angular 1 (grunt, gulp)
  16. 16. Шаги : ● $ npm install -g grunt-cli bower yo generator-karma generator-angular ● $ yo angular
  17. 17. Yeoman Angular generator ● Простота установки; ● gulp или grunt; ● templates и минификация проекта; ● console commands: yo angular:service myService yo angular:controller myController ● karma тесты.
  18. 18. ❖ HTML5 push state ❖ UI Router Routing. Subdomains
  19. 19. HTML5 pushState ● Красивый URL: C pushState: https://domain.com/node-name Без: https://domain.com/#!/node-name ● Настройка AngularJS ● Настройка сервера / Drupal
  20. 20. UI Router ● Path, query параметры, а также non-url параметры ● Архитектура приложения на основе state ● Tabs на основе state ● Resolve ● Subdomains
  21. 21. ❖ Фильтрация и сортировка. ❖ Angular или Drupal
  22. 22. Angular сортировка или фильтрация
  23. 23. Drupal фильтрация и сортировка .state('articles', { url: '/articles?filter&page, params: { filter: { value: 'A', squash: true }, page: { value: '1', squash: true } } }) Запрос на сервер: /articles/A/1?_format=json
  24. 24. ➢ Необходим при больших объемах данных ➢ Сортировка, фильтрация и пейджинг. DrupalAngular ➢ Небольших объемах данных ➢ без лишних запросов ➢ Прост в применении
  25. 25. Интеграция AngularJS templates и Drupal. Widgets
  26. 26. Интеграция AngularJS templates и Drupal ● Цель - страницы настраиваемые администратором ● Возможности Drupal ● Способы решения
  27. 27. Компонентный подход
  28. 28. Виджеты
  29. 29. “Подводные камни”
  30. 30. “Подводные камни” ➢ Прототипирование ➢ Local и Dev окружение ➢ Drupal как proxy для Web Services ➢ Drupal.t(), drupalSetting для Headless Drupal ➢ Drupal 404 page
  31. 31. AngularJS и SEO
  32. 32. AngularJS и SEO ● https://prerender.io/ ● Deprecating of Google AJAX crawling scheme (https://webmasters.googleblog.com/2015/10/deprecati ng-our-ajax-crawling-scheme.html) ● Используйте Fetch as Google (https://www.google.com/webmasters/tools/googlebot-f etch) ● ⚠ Baidu поиcковик
  33. 33. Эпилог

×