Внедряем Vue.js в готовый проект, безболезненное избавление от jQuery. - Александр Майоров - Vue.js Moscow Meetup

Внедряем Vue.js в готовый проект, безболезненное избавление от jQuery. - Александр Майоров - Vue.js Moscow Meetup

3fa2f88e8c707ec90e4ecd1ac2ed023a?s=128

Vue.js Moscow Meetup

March 28, 2018
Tweet

Transcript

  1. 
 и/или
 jQuery Moscow Vue.js Meetup #1

  2. Александр Майоров ▸ CTO and co-founder at New.HR ▸ Ведущий

    RadioJS ▸ t.me/prowebit ▸ medium.com/@frontman ▸ major@new.hr
  3. 1. Прелюдия Когда-то давным-давно в одной компании

  4. 2013 год


  5. Frontend 2013

  6. Frontend 2013 Basis.js

  7. 2013 год


  8. Frontend 2014

  9. Frontend 2014

  10. Frontend 2014

  11. Frontend 2014

  12. Frontend 2014

  13. Trend

  14. 2018 год
 Наши дни

  15. CTO
 в небольшой компании

  16. MVP CONCEPT Minimum Viable Product

  17. Как хочется • Написать библиотеки • Написать свой фреймворк •

    Создать компоненты • Собрать готовый продукт
  18. Как учат делать • Создать что-то из желудей и палок

    • Создать 1ю версию продукта • Создать 2ю версию продукта • А потом раз и сразу хорошо
  19. Как учит жизнь • Создать что-то из GNU и палок

    и палки из GNU, чтоб быстрее • Развивать то, что получилось, постепенно улучшая то, что уже есть
  20. Но я мечтаю, что будет как-то так

  21. Реальность быстрой разработки

  22. Что делать?

  23. Что делать? - Переписать с нуля весь код, используя те

    же самые технологии, но теперь сделать это нормально!
  24. Что делать? - Переписать с нуля весь код, используя те

    же самые технологии, но теперь сделать это нормально! (гы гы гы) - Взять какую-то библиотеку, которая позволит разрабатывать “правильно”, но не будет фреймворком и в итоге построить свой фреймворк на базе библиотек(и).
  25. Что делать? - Переписать с нуля весь код, используя те

    же самые технологии, но теперь сделать это нормально! - Взять какую-то библиотеку, которая позволит разрабатывать “правильно”, но не будет фреймворком и в итоге построить фреймворк на базе библиотек(и). - Выбрать какой-нибудь готовый фреймворк, который из коробки заставит сразу писать хороший код.

  26. 2. Трудности выбора Всем кажется лучшим то, от чего отказались

  27. Что выбрать?

  28. Что есть - React стек - Angular 5+ - Ember

    - … - Vue.js
  29. Как выбрать? И зачем!

  30. Что хотим - Можно внедрять итеративно - Запускается без систем

    сборки и сложных настроек - Порог вхождения низкий - Не накладывает сильные ограничения - Возможность работать с WEB Components - Должна работать на мобильных устройствах - Должно быть сообщество и готовые компоненты - Компонентный подход - Варит кофе, обладает телепатией…
  31. Взял Vue.js и…

  32. Vue.js плюсы - Нашел документацию и даже на русском

  33. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low
  34. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ
  35. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ - Умеренное количество магии
  36. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ - Умеренное количество магии - Можно просто подключить как либу, а можно работать по энтерпрайзному через vue-cli и webpack
  37. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ - Умеренное количество магии - Можно просто подключить как либу, а можно работать по энтерпрайзному через vue-cli и webpack - Простое управление состоянием через data и props. Для всего остального есть Vuex и другие
  38. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ - Умеренное количество магии - Можно просто подключить как либу, а можно работать по энтерпрайзному через vue-cli и webpack - Простое управление состоянием через data и props. Для всего остального есть Vuex и другие - Есть SSR - Сочетает в себе все лучшее от React и AngularJS
  39. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ - Умеренное количество магии - Можно просто подключить как либу, а можно работать по энтерпрайзному через vue-cli и webpack - Простое управление состоянием через data и props. Для всего остального есть Vuex и другие - Есть SSR - Сочетает в себе все лучшее от React и AngularJS - Работа с формами – одно удовольствие - Компонентный подход
  40. Vue.js плюсы - Нашел документацию и даже на русском -

    Порог вхождения: low low low - Можно использовать в любом проекте как и jQ - Умеренное количество магии - Можно просто подключить как либу, а можно работать по энтерпрайзному через vue-cli и webpack - Простое управление состоянием через data и props. Для всего остального есть Vuex и другие - Есть SSR - Сочетает в себе все лучшее от React и AngularJS - Работа с формами – одно удовольствие - Компонентный подход - Проще нанять разработчика на Vue, даже без опыта
  41. С чего начать?

  42. С чего начать? Добавляем к <script src="jquery.min.js"></script> eще и <script

    src=”vue.min.js"></script>
  43. Вы стали стажер
 Vue.js фронтендер
 ☺ 


  44. Типичный Application

  45. jQuery version

  46. Vue.js version

  47. Vue.js APP

  48. Vue.js APP

  49. jQ
 плагины

  50. jQuery плагины

  51. jQuery плагины

  52. jQuery плагины

  53. jQuery плагины

  54. jQuery плагины

  55. bootstrap-vue.js.org

  56. WEB
 Components

  57. WEB Components Vue.config.ignoredElements = [ ‘x-your-web-component’, ‘x-your-web-components-template’, … ];

  58. Vue.js минусы - Инфраструктура Vue.js еще довольно молодая - Мало

    стабильных компонентов (но…) - Работа над состоянием происходит “под капотом” - Холиварно: шаблонизация менее гибкая чем в том же React (DSL vs JS) - Раньше было: мало информации на английском и на русском, но уже пофиксили :)
  59. Итого - Vue.js пришел на замену jQuery… - …но стал

    успешно конкурировать с React - Легко начать - Что будет трендом в 2019 – узнаем на следующих митапах ☺
  60. СПАСИБО! Вопросы? Подписывайтесь на @prowebit Пишите письма на major@new.hr Интересные

    вакансии на сайте vacancy.new.hr