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

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