Привет! Меня зовут Александр и я опытный frontend-разработчик в области e-commerce, специализируюсь на разработке больших высоконагруженных приложений таких как маркетплейсы с высокой посещаемостью и объемной бизнес логикой. Работал в таких крупных компаниях как Коммерсантъ, Л`Этуаль, Камаз
Подробнее обо мне тут:
Подписывайтесь в телеграм
Проект только в процессе запуска, будет много интересного, подпишись чтобы ничего не пропустить :)
Vue interactive book включает в себя текстовые уроки, тестирование и практические задания - https://vib-online.ru
Пара слов о проекте
В ру сегменте интернета присутствует небольшое количество обучающих материалов по vue.js Более-менее качественными являются платные курсы и то, они дают только поверхностное представление о базовых вещах во vue. Крупные площадки по какой то причине редко делают курсы по vue, хотя фреймворк очень популярен и продолжает захватывать рынок вытесняя конкурентов за счет своих явных преимуществ. Не смотря на великолепную документацию vue, она все равно является справочником, а не самоучителем. Так и возникла идея создать собственную платформу которая позволит быстро и качественно обучаются vue, а так же поспособствует его популяризации в ру сегменте.
Цели проекты
- Предоставить удобный сервис для качественного обучения
- Популяризировать vue в ру сегменте
Преимущества платформы VIB
- Источник качественной теоретической информации
- Возможность закрепить теорию (за счет тестирования)
- Возможность разобраться во всех деталях на практике (практические задания)
Что такое Vue
Vue.js это JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле. На данный момент поддерживается создателем Эваном Ю и остальными активными членами основной команды из различных компаний, таких как Netlify, Netguru, Baidu, Livestorm.
История
история создания одним человеком такого мощного инструмента
В 2013 году сотрудник Google Эван Ю (Evan You), работая над одним из проектов, пришёл к выводу, что не существует готовых решений для быстрого прототипирования сложных пользовательских интерфейсов веб-приложений: React тогда был на ранней стадии разработки, основными инструментами были такие сложные фреймворки, как AngularJS или ориентированный на MVC-архитектуру Backbone.js, не отличавшиеся простотой и ориентированные на разработку больших приложений. Для преодоления этого пробела Ю начал разработку Vue.js, которая, сохраняя простоту, оказалась пригодна не только для прототипирования, но и для полноценной разработки
В октябре 2015 года была выпущена версия 1.0 библиотеки, в сентябре 2016 года — версия 2.0. Начиная с версии 2.0 он поддерживает также рендеринг на стороне сервера, он же SSR (Server-Side Rendering).
Переход на 3-ю версию18 cентября 2020 года была выпущена версия Vue.js 3.0.0 «One Piece», по словам разработчиков «обеспечивает улучшенную производительность, меньший размер пакетов, лучшую интеграцию с TypeScript, новые API для решения крупномасштабных задач и прочную основу для будущих итераций фреймворка в долгосрочной перспективе»
Релиз 3.0 вобрал в себя более 2 лет усилий по разработке, включая более 30 RFC, более 2600 коммитов, 628 запросов от 99 разработчиков, плюс огромный объём работы над разработкой и документацией. Весь код был переписан на более эффективный TypeScript, что даёт преимущества в гибкой разработке. Также представлен новый набор API Composition
Мировое признание
Опрос разработчиков о JavaScript, проведенный в 2022 году, показал, что Vue удовлетворяет 77,4 % сообщества. Vue версии 2 имеет 204 тысячи звезд на GitHub, версия 3 — 38 тысяч. Является третьим по величине проектом в истории GitHubКонцепцияПодходы и структура
Разработчики называют Vue.js прогрессивным и постепенно адаптируемым по сравнению с другими веб-фреймворками. Это позволяет разработчику настроить структуру приложения в соответствии с собственными требованиями.
Эффекты перехода
Vue предоставляет различные способы применения эффектов перехода при вставке, обновлении или удалении DOM. Включает следующие инструменты： Автоматически применять CSS классы при переходах и анимации Вы можете работать со сторонними библиотеками анимации CSS, такими как Animate.css. Используйте JavaScript функции для перехвата перехода, чтобы напрямую управлять DOM Может использоваться в сочетании со сторонними библиотеками анимации JavaScript, такими как Velocity.js.
Разработчики считают Vue.js более простым в освоении, чем AngularJS, поскольку API построен намного проще в освоении. В Vue.js можно использовать только знания JavaScript и HTML. Возможно применение Typescript. У Vue.js есть собственная официальная достаточно богатая документация на многих языках, выложенная на vuejs.orgкоторая может послужить примером в объяснении проектирования и разработки в браузере.
Реактивность
Реактивность означает, что представление в модели MVC изменяется по мере изменения модели. В Vue разработчики просто привязывают представление к соответствующей модели, и Vue автоматически наблюдает за изменениями в модели и перерисовывает представление. Эта функция делает управление состоянием Vue довольно простым и интуитивно понятным.
В Vue.js реализуется шаблон MVVM, Vue.js предлагает возможность привязки данных на Javascript, так что вывод и ввод данных сопрягаются непосредственно с источником данных. Таким образом, режим ручного определения данных (например, через jQuery) из HTML-DOM не нужен. При этом нет необходимости в никаких дополнительных аннотациях, как в Knockout.js, объявленные в Vue-Element обычные переменные JavaScript включаются в качестве реактивных элементов.
Ссылка на статью:
Добавь статей по VUE в Битрикс24, залетит трафик сразу думаю)
Доброе утро, Александр!
Очень удачно вы решили сделать курс, я как раз размышлял как бы мне научиться пилить фронт 😄 Спасибо!
Там правда столько вариантов, как его пилить..
Не могли бы вы сказать пару слов про js с Vue VS Flutter?
Не могу определиться с чего начать, так как далёк от фронта!
Привет! Flutter это фреймворк заточенный под разработку мобильных приложений для Android / iOS, а Vue.js это javascript фреймворк созданный для работки web приложений (SPA, PWA, SSR) при желании можно компилировать веб приложение в мобильное / desktop, но качество будет конечно намного хуже чем у нативных приложений, созданных специально под андроид или ios. Сам я с flutter не работал, но по слухам он справляется с задачей создания универсальных мобильных приложений лучше чем Vue Native или React Native. В любом случае flutter ближе к мобильной разработке, у мобильщиков тоже есть фронтенд но по нему особо не подскажу.
Upd
Что-то не могу редактировать коммент..
А не могли бы вы ещё порекоммендовать какие-нибудь вводные статьи про фронт вообще? (можно на английском)
В частности, бывают ли проблемы с производительностью на фронте? Какой РПС потянет?
Не совсем даже понимаю, что именно запускается в браузере у пользователя, а что на сервере 😄😄
Если есть цель стать фронтендером, то я бы советовал начать с верстки, изучить HTML, CSS и базовый JavaScript для создания простых сайтов (статичных), научится хорошо верстать все базовые элементы, собирать проект с помощью сборщиков (webpack, vite, gulp и тд), разобраться с препроцессорами(Sass, Scss) и научиться создавать типовые элементы типа слайдер, попапы и тд с помощью js библиотек и параллельно изучать сам чистый js без фреймворков (фреймворки меняются, js остается) фреймворк изучите в последнюю очередь. Можно пойти на курсы, там кстати первые блоки будут посвящены верстке, но мое мнение что курсы это долго и дорого, поэтому когда меня спрашивают как стать фронтенд разработчиком я всегда рекомендую этот план:
1. Потратьте пару месяцев на изучения верстки, блочная, flexbox, grid верстка, препроцессоры, сборщики, оптимизация сборки, деплой.
Есть автор Иван Петриченко и у него курс "Web разработчик" - https://www.udemy.com/course/webdeveloper - можно купить на udemy или аналогичных площадках, либо получить каким нибудь другим способом если сейчас по понятным причинам оплаты невозможны (не советую, но на торренте лежит) Если заниматься каждый день то этот курс можно пройти за месяц интенсивных занятий, в нем вы разберете все темы что я описал выше и еще дополнительные. Далее я бы советовал найти 5-10 макетов различной сложности и их полностью сверстать, адаптировать, реализовать все элементы (слайдеры и тд) на js. Макеты должны быть различной сложности, первые 2-3 советую брать самые простые, потом посложнее и в конце пару макетов повышенной сложности, со сложными элементами, графиками, переходами, и тд. (ps совсем сложные темы типа паралакса, анимаций, 3d и прочего НЕ нужно изучать, во-первых сразу не поймете, во-вторых такое надо изучать под задачу либо уже в будущем когда станет интересно)
2. После шага 1 вы будете уже уверенным верстальщиком и не плохо разбираться в web, работать с браузером, dev tools, будете знать про хостинг и деплой, про сборку dev, prod, и прочие важные вещи (по мимо самой верстки) на шаге 2 очень желательно изучить сам js, мои рекомендации такие, есть книга "Секреты JavaScript ниндзя" Джон Резиг Бейэр Бибо Иосип Марас, рекомендую, возможно для новичка она будет трудновата, если так то сперва возьмите любую книгу для самых самых новичков и изучите базовые вещи, потом переходите к этой книге. Обязательно конспектируйте материал (руками, ручкой в тетрадке) подход такой - читаете / конспектируете главу, затем идете на codewars и там решаете одну задачку на js, задачи можете брать по темам из уроков либо в целом любую какая понравится, по ходу решения гуглите что не понятно (или перечитывайте в книге) примерно 6 месяцев такого обучения - теория + практика и вам не будет страшен лайвкодинг почти в любой компании (кроме алгоритмических собесов, но к ним надо отдельно готовиться)
3. Шаг 3, выбираете фреймворк, изучаете его по документации, реализуете пару учебных проектов на нем, устраиваетесь в компанию где используется данный фреймворк. По ходу изучения разбираетесь с линтерами, форматтерами, настройками сборки фреймворка и тд (после опыта с настройкой с нуля ничего сложного в этом не будет)
4. Шаг 4, после всего этого изучаете TypeScript (в нем на самом деле ничего сложного нет)
Ну и конечно есть технологии которые напрямую не относятся к верстке и js, например git, или в компаниях будет gitlab (может что то другое но суть одна и та же) изучайте эти технологии параллельно, заливайте свои проекты на гит, сделайте свой сайт портфолио, в любом случае в процессе работы все эти навыки сами собой наработаются до нужного уровня, главное знать базовые вещи и уметь с ними работать правильно.
Большое спасибо за развёрнутый ответ!
Вообще у меня немного другая ситуация, я раньше работал бекендером в компании, с фронтом вообще не сталкивался на работе. А сейчас вот присоединился к стартапу и тут уже мне приходится в это частично тоже погружаться. Очень, конечно, интересная тема😄
Комментарий недоступен