Изучение Vue.js в 2023 году: дорожная карта разработчика
Хотите начать изучение Vue.js в 2023 году? В этом поможет дорожная карта с включёнными в неё этапами изучения и необходимыми инструментами.
Изучение Vue.js стоит начать с того, что это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Ядро Vue включает в себя библиотеку ядра и маршрутизатор, а сам фреймворк пригоден для постепенного внедрения, в отличие от аналогов-монолитов.
Дорожная карта для изучения Vue.js в 2023:
В первую очередь посетите русскоязычную версию официального сайта Vue.js: там вы найдёте ответы на большинство вопросов, которые будут возникать в ходе изучения. Далее переходите к инструментам и технологиям, которые вам потребуются для эффективной работы с фреймворком.
Сборка
Менеджеры пакетов npm и Yarn облегчат вам жизнь, самостоятельно вычисляя комплекс операций для каждого пакета и запуская установщик пакетов с нужными параметрами. Также освойте работу инструментом сборки Vite и таск-раннерами по типу npm-scripts.
Что касается Vite, то это альтернатива Vue CLI. Вместо Webpack он использует однофайловые компоненты без шага сборки бандлов. Подробнее об этом инструменте вы узнаете из видео:
Стилизация
Это базис, необходимый любому фронтендеру. Углубляйте знания, изучая препроцессоры Sass/SCSS и PostCSS, фреймворк Tailwind и однофайловые компоненты.
Управление состоянием
Необходимо разобраться с состоянием компонентов во Vue, а также способом определения компонентов Composition API. Подробнее о том, что такое Composition API и как им пользоваться, вы узнаете из нашей статьи.
Проверка типов
Предположим, приложение растёт, и риск получить баги, связанные с проверкой типов, — тоже. В некоторых случаях следует использовать TypeScript для корректной проверки типов во всём приложении, а в некоторых — PropTypes. Как это работает? Можно перечислить входные параметры с помощью объекта, в котором свойство и значение содержат информацию о типе конкретного параметра и его имени. Например:
props: < title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // или любой другой конструктор > API
Что же касается работы с API, здесь всё стандартно:
Маршрутизация
Vue Router — это официальная библиотека маршрутизации фреймворка. К её преимуществам относится модульная конфигурация маршрутизатора, удобный контроль навигации, настраиваемая прокрутка страниц, анимация переходов представлений и многое другое. Суть в том, что Vue Router добавляет текущий маршрут в каждый компонент — достаточно лишь указать this.$route внутри необходимого компонента.
Библиотеки утилит
Библиотека утилит OpenGL (GLU) — это графическая библиотека, которая является надстройкой над OpenGL. На самом деле, здесь намного больше вариантов для изучения, чем представлено в дорожной карте по изучению Vue.js. Среди них:
Тестирование
Разработчики Vue также являются создателями Vue Test Utils — официальной библиотеки для модульного тестирования: советуем ознакомиться.
И хотя тестирование end-to-end не связано напрямую с Vue.js, оно также необходимо для обеспечения бесперебойной работы приложения. К популярным инструментам для E2E тестирования относятся Cypress, Selenium, Puppeteer и Cucumber.js.
i18n
Интернационализацией в программировании называется процесс планирования и реализации продуктов и услуг так, чтобы их можно было адаптировать для пользователей из любого региона. Именно для этого и разработан Vue I18n — плагин, который легко интегрирует функции локализации в приложение Vue.js.
Десктоп
Electron — это фреймворк, разработанный GitHub, с Node.js под капотом. Нельзя сказать, что он напрямую связан с изучением Vue.js, но если планируете создавать нативные графические приложения для десктопа на Vue, обязательно обратите внимание на Electron.
Серверный рендеринг
Для разработки высокопроизводительных приложений на Vue потребуется разделение кода, маршрутизация на базе компонентов, серверный рендеринг и многое другое. Эти и дополнительные возможности вроде Progressive Web Applications (PWA) предоставляются прямо из коробки с минималистичным фреймворком Nuxt.js.
Заключение
Так как же начать изучение Vue.js в 2023 году? В дорожную карту включены не только технологии, которые касаются непосредственно Vue. Вы должны уметь работать с инструментами сборки вроде менеджеров пакетов и Vite, владеть CSS на уровне архитектуры и препроцессоров, управлять состоянием, выполнять проверку типов, работать с инструментами API, маршрутизации, тестирования и библиотеками утилит. Не стоит забывать и о локализации приложения, серверном рендеринге, а также фреймворках для десктопной разработки.
Вас также могут заинтересовать другие гайды:
- Дорожная карта по фронтенду
- Дорожная карта по React
Хотите выучить React, но не знаете с чего начать? Вот, что вам нужно знать
React — это бесплатная внешняя библиотека JavaScript с открытым исходным кодом для создания сложных пользовательских интерфейсов путем разделения приложения на более мелкие компоненты. Он поддерживается Facebook и сообществом разработчиков.
Предпосылки для изучения React
Прежде чем изучать React, мы бы посоветовали ознакомиться с HTML, CSS и JavaScript. Вы можете изучить HTML и CSS в течение 2-3 недель, поскольку они используются для создания макетов для веб-приложений. На освоение JavaScript требуется время, поскольку это язык программирования. Потратьте как минимум месяц или два на изучение JavaScript. Нужно не просто учиться, но и все время практиковаться, создавая небольшие проекты для реализации полученных знаний. Вы можете создавать мини-проекты, такие как списки дел , калькулятор , генератор случайных шуток и т. д.
JavaScript
Изучая JavaScript, вы должны избегать некоторых ошибок. Часто новички, когда изучают JavaScript, я думают, что они должны стать абсолютными мастерами JavaScript, чтобы писать код React (что бессмысленно). Изучая продвинутые концепции (как новичок), и потерпев неудачу, могут подумать, что недостаточно хороши. Но, как новичку вам нужно выучить ровно столько, чтобы вы могли создавать базовые проекты на ванильном JavaScript. Некоторые темы для изучения и глубокого понимания:
- Переменные
- Условия if / else и операторы переключения
- Разница между var, let и const
- Функции
- Массивы
- Методы массива, такие как filter , map , reduce и т. д.
- Концепции ES6
- Promises
- Обратные вызовы
- Концепции классов и ООП
- Работа с API
Опять же, не просто учите, ПРИМЕНЯЙТЕ .
React
На данный момент, когда вы изучили основы JavaScript, вам пора погрузиться в React. Вы можете начать изучение React, просмотрев официальную документацию React или воспользовавшись официальным руководством по React.
React Docs очень хорошо написаны, охватывая основы React. Изучите эти темы очень хорошо, чтобы понять React фундаментально.
- JSX
- Компоненты (функциональные и классовые)
- Методы жизненного цикла
- Состояние
- Обработка событий
- Формы
- Условный рендеринг
- Работа со сторонними API.
Как только вы разобрались в этих темах, пора создавать проекты для их реализации. Вы можете создавать новые проекты или переделывать те, которые вы создали при изучении ванильного JavaScript с помощью React.
React Router
Узнайте о маршрутизаторе React. React router — это библиотека маршрутизации для React, которая поможет вам перемещаться по различным страницам в вашем приложении. Узнайте о загрузке содержимого конкретной страницы, передаче параметров в URL-адресе, перенаправлении и т. д. Кроме того, поймите, что маршрутизатор не является частью React, это библиотека маршрутизации, созданная для React.
Продвинутый React
Теперь, когда у вас есть базовые знания React, а также созданы некоторые базовые проекты, пришло время изучить некоторые продвинутые концепции, такие как хуки , контекст и т. д. Взгляните на React Docs и изучите эти концепции.
- Контекст
- Хуки
- Границы ошибок
- Компоненты высшего порядка
- Разделение кода
- Ссылки
- Пересылка ссылок
- Рендеринг реквизита
Дополнительно
Вы можете изучить некоторые дополнительные библиотеки , как Material UI , reactstrap , tailwindcss , Semantic UI и т.д. Эти библиотеки помогут вам в повседневной работе React Dev. Однако не обязательно изучать все, вы можете попробовать изучить их, когда закончите с основами React и сможете создавать проекты.
Поздравляем
Вы разработчик React. Теперь вам просто нужно отточить свои навыки, создавая проекты, часто посещая React Docs и узнавая что-то новое.
Зарегистрируйтесь на Портале
и получите красивый адрес своей странички вида: senior.ua/sergey.ivanov
senior.ua/ |
Потом все адреса будут Заняты 🙁