Frontendlab: Cравнить Несравнимое - Юлия Пучнина

1,318 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,318
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Frontendlab: Cравнить Несравнимое - Юлия Пучнина

  1. 1. Сравнить несравнимое Юлия Пучнина
  2. 2. Юлия Пучнина kira__kit yulia.puchnina probably-kira
  3. 3. Мы рассмотрим:
  4. 4. Мы рассмотрим: ❖ Обзор архитектурных особенностей ❖ Создание компонентов ❖ Экосистема ❖ Возможности для тестирования ❖ Сообщество, лицензирование и все-все
  5. 5. Особенности архитектуры
  6. 6. Sencha Touch ExtJs
  7. 7. ЭТО ЭНТЕРПРАЙЗ
  8. 8. Умеет прямо из коробки: ❖ настоящее ООПэ ❖ Классический MVC ❖ и еще AJAX, и REST, и JSONP, и SOAP… ❖ Компоненты на любой вкус! ❖ офигенная работа с данными
  9. 9. Не умеет: ❖ Promises/deferred ❖ Двухсторонний биндинг ❖ Dependency injection реализован криво ..но DeftJS спасет отца русской демократии!
  10. 10. Также предоставляет: ❖ Sencha Architect ❖ Sencha Eclipse Plugin ❖ Sencha Mobile and Desktop Application Packagers ❖ Sencha CMD
  11. 11. это модный тренд
  12. 12. Умеет прямо из коробки: ❖ Двухсторонний биндинг ❖ Очень гибкий MV - ЧоСможетеПостроить ❖ Dependency injections ❖ Promises/Deferred ❖ и тоже и AJAX, и REST, и JSONP
  13. 13. Не умеет: ❖ Отделять логику от представления ❖ Нет готовых интерфейсных решений ❖ Нет классического механизма наследования ❖ Нет жестко заложеной архитектуры
  14. 14. это минимализм
  15. 15. Умеет прямо из коробки: ❖ Хороший односторонний биндинг ❖ Очень гибкий MV - ЧоСможетеПостроить ❖ Хорошая работа с данными в модели ❖ Слушает события и реагирует на них
  16. 16. Не умеет: ❖ Нет готовых интерфейсных решений ❖ Нет жестко заложеной архитектуры ❖ Не работает без ряда зависимостей (кроме версии exoskeleton) ❖ И вообще он самый простой
  17. 17. СОВЕТИКИ
  18. 18. Спросите себя ❖ Это миграция либо эмуляция native app? ❖ Вы джавист и не хотите знать CSS? ❖ Декларативность и простота? ❖ Обязателен ли responsive design? ❖ Важно ли быстрое прототипирование в режиме WYSIWYG?
  19. 19. Компоненты
  20. 20. ❖ Готовые UI контроллеры для всего, что вы только можете себе представить ❖ Темы как возможность кастомизации ❖ Абсолютная кроссбраузерность ❖ Шаблонизатор XTemplate
  21. 21. просто передаем JSON-конфиг в функцию-конструктор: new myClass({config})
  22. 22. ❖ Есть ряд готовых интерактивных директив, но без UI ❖ Прекрасно интегрируется с любыми бутстрапами ❖ Встроеный шаблонизатор
  23. 23. ❖ AngularUI ❖ AngularUI Bootstrap ❖ Angular-Kendo ❖ Wijmo
  24. 24. Мы просто вставляем HTML-таг с кастомным аттрибутом <div ng-click=”...”></div>
  25. 25. ❖ Backbone Thorax ❖ Backbone Chaplin ❖ Backbone Marionette ❖ и другие
  26. 26. ❖ Все богатство jQuery ❖ Восхитительный ReactJS ❖ Underscore templates ❖ Огромный выбор сторонних реализаций для UI
  27. 27. Тут мы тоже просто расширяем базовый класс своим конфигом
  28. 28. СОВЕТИКИ
  29. 29. Спросите себя ❖ Подойдет ли готовый набор Sencha для ваших целей? ❖ Что дешевле: кастомизация существующих или саппорт 3rd-party? ❖ Готова ли команда отказаться от “настоящего программирования” в пользу плясок с DOM?
  30. 30. Экосистема
  31. 31. ❖ Sencha CMD ❖ Sencha Packagers
  32. 32. ❖ Для сборки: GruntJS ❖ Для установки компонентов и зависимостей: Yeoman, Bower, Compy
  33. 33. Для дебага: ❖ Angular Batarang
  34. 34. ❖ Для сборки: GruntJS ❖ Для установки компонентов и зависимостей: Yeoman, Bower, Compy
  35. 35. Для дебага: ❖ Backbone Debugger
  36. 36. СОВЕТИКИ
  37. 37. Спросите себя ❖ Нужен ли вам хоть и чей-то, но уже готовый инструмент для сборки? ❖ Может быть у вас есть свой? ❖ Сможете ли вы сами настроить все необходимое для данного проекта?
  38. 38. Тестируемость
  39. 39. ❖ Нет готового инструментика :( ❖ Siesta от Bryntum(коммерческая) ❖ Jasmine ❖ Travis + Mocha + Karma(стек от DeftJS)
  40. 40. ❖ Все просто фантастически круто ❖ Mocha, Chai, Jasmine, QUnit... ❖ Для директив: $compile + jQuery ❖ Angular Protractor ❖ Karma test runner от той же команды
  41. 41. ❖ Встроенных инструментов нет ❖ Отдельного специального фреймворка тоже нет ❖ Зато можно взять любой понравившийся!
  42. 42. СОВЕТИКИ
  43. 43. Спросите себя ❖ Будет ли у вас автотестирование вообще? ❖ Насколько важны встроенные возможности? ❖ Легко ли писать на этом фреймворке слабосвязаные компоненты?
  44. 44. Сообщество и легкость в обращении
  45. 45. ❖ Стоимость пакетной лицензии:
  46. 46. ❖ Sencha touch - бесплатная с 2010! ❖ ExtJS - $329 за разработчика ❖ Отдельная плата за каждый продукт ❖ Свой форум для каждого вида лицензии ❖ Много платных тренингов и курсов ❖ Код в закрытом SVN репозитории
  47. 47. ❖ API: очень подробный ❖ Высокий порог вхождения, сложные компоненты ❖ Монструозное количество методов-накомпонент(до 180)
  48. 48. ❖ 19 135 звезд на гитхабе(15 891 было 25.10) ❖ 606 контрибьюторов(vs 467) ❖ 10 628 членов в G+ (vs 9 720) ❖ отличный набор видеоуроков на egghead. io
  49. 49. ❖ API: ужасное ❖ Низкий порог вхождения, но сложность растет экспоненциально ❖ Довольно сложно разобраться в магии ❖ Очень любим американскими кастомерами
  50. 50. ❖ 16 781 звезд на гитхабе(vs 16 041) ❖ 207 контрибьюторов(vs 195) ❖ 1988 членов в G+ (vs 869) ❖ Огромное количество внятных туториалов от Эдди Османи
  51. 51. ❖ API: хорошее, и даже есть на русском ❖ Мало кто пишет на чистом BB, прийдется учить еще фреймворки ❖ Низкий порог вхождения, все просто и легко
  52. 52. СОВЕТИКИ
  53. 53. Спросите себя ❖ Важна ли для вас открытость фреймворка? ❖ Захочет ли клиент платить за лицензии? ❖ Насколько легко обучить специалиста и/или найти замену?
  54. 54. ИТАК:
  55. 55. Интранет, CRM, ERP и все, где стабильность важнее гибкости. Серьезные приложения для серьезных парней.
  56. 56. Типовые формы, CRUDприложения и все, где важно немедленное обновление содержания. Cutting edge во всей красе.
  57. 57. Любые стандартные и нестандартные приложения, где важна легкая расширяемость компонентов. Любители писать уникальные штуки — вам сюда.
  58. 58. Спасибо! Поговорим?

×