Native js или react.js(vue.js) – почему сегодня нужно знать современный js-фреймворк

Язык программирования JavaScript(+его довольно «старенькая» библиотека jQuery) существует и активно используется программистами по всему миру довольно давно. JavaScript сегодня является самым популярным языком программирования, так как(по моему мнению) просто не имеет для себя альтернативы, как язык, который используется на front-end(в отличие, например, от целой группы back-end языков – Python, Java, C, PHP etc.).
Но сегодня знать(и уметь использовать) только native JS(назовем его так) стало недостаточно для соискателей на открытую вакансию front-end(full-stack) developer. Сейчас текст любой соответствующей вакансии обязательно содержит требование знания одного(а лучше - нескольких) из современных js-фреймворков, основные из которых это react.js(самый мощный и востребованный), vue.js(попроще и лучше документирован), angular.js(ниша использования которого, конечно, значительно уже).
В этой связи напрашивается вопрос «Почему же сейчас уже недостаточно простого native JS и нужен какой-то из его современных фреймворков?». В данной статье я постараюсь на реальном примере попробовать ответить на этот вопрос.
Во-первых, любой фреймворк(в любом языке программирования) нужен в качестве дополнения (!хочу подчеркнуть – именно «дополнения», т.е. нельзя «войти» в, например, react.js, если вы не владеете на достаточно хорошем уровне обычным native JS(events, DOM, class/extends, export/import)), которое упрощает и ускоряет написания кода.
Во-вторых, кроме упрощения/ускорения написания кода для современных(иногда очень сложных) front-приложений очень важен момент скорости работы данного приложения, даже если мы имеем дело с отображением на странице довольно большого объема информации.
По первому пункту можно упомянуть, например, дополнительные готовые библиотеки или компоненты, использование которых в значительной степени масштабирует и ускоряет разработку.
Но, в данной своей статье я хотел бы более подробно остановиться именно на втором моменте – скорости отображения большого объема данных, которые поступают с сервера и должны быть отображен на странице с минимальной задержкой.
И вот как раз для эффективного решения этой второй задачи все современные js-фреймворки используют такую(я считаю – самую полезную) свою опцию, как «реактивность».
Чтобы разобраться в сути «реактивности» (далее - на примере native JS vs react.js), давайте рассмотрим следующий пример.
Предположим, сайт имеет страницу корзины, куда попадают товары, которые выбрал пользователь: 
Верстка одной строки корзины (т.е. для одного выбранного товара) выглядит следующим образом:
Пример кода 1.
                               &lt;div class="row"&gt;                                   &lt;div class="col-xl-3 border cart_product_img text-center p-2"&gt;                                    &lt;img src="img/bg-img/cart3.jpg" alt="Product" /&gt;                                 &lt;/div&gt;                                     &lt;div class="col-xl-3 border cart_product_name p-2"&gt;                                    &lt;h5&gt;Minimal Plant Pot&lt;/h5&gt;                                   &lt;/div&gt;                                 &lt;div class="col-xl-3 border cart_product_price p-2"&gt;                                    &lt;h5&gt;$180&lt;/h5&gt;                                     &lt;/div&gt;                                  …                               &lt;/div&gt;  
По существующему алгоритму пользователь может удалить какой-то товар из корзины (красная кнопка в столбце Remove one). При этом после удаления данной записи из БД с использованием технологии ajax(т.е. без перезагрузки страницы) front с back-а получает текущее (после удаления) состояние корзины (т.е., например, было 3-и товара, удалили 1-н товар, с сервера поступает массив из 2-х оставшихся товаров – image, name, price). Далее(в соответствии с ajax-технологией) JS должен в цикле сформировать 2-а элемента верстки (Пример кода 1.), заполнив image, name, price данными, поступившими из БД. Для этого в native JS можно, например, написать функцию, использующую методы createElement, setAttribute, innerHTML, appendChild(или их аналоги из jQuery). Но это будет довольно непростой метод, содержащий около 30-и строк. Плюс при таком подходе (кроме сложности кода) падает скорость отображения пропорционально объему возвращаемых с массива данных. А как можно ускорить/упростить этот процесс в react.js? Как уже говорилось выше, одно из главных достоинств современных js-фреймворков – «реактивность». Ее суть состоит в том, что в js-код вводится некая переменная-состояние:
Пример кода 2.
     this.state = {        cartDataDb: [],     };
…и тут же в html-template react-кода(для тех, кто не знаком со структурой react-кода – html-верстка находится тут же в react-компоненте) стоит цикл(map), в котором формируется верстка строк корзины с заполнением данными из этой переменной-состояния (this.state.cartDataDb):
Пример кода 3.
                  {this.state.cartDataDb.map((item, key) =&gt;                   &lt;div className="row" key={key}&gt;                        &lt;div className="col-xl-3 border cart_product_img text-center p-2"&gt;                         &lt;img src={item.image} alt="Product" /&gt;                      &lt;/div&gt;                          &lt;div className="col-xl-3 border cart_product_name p-2"&gt;                         &lt;h5&gt;{item.name}&lt;/h5&gt;                        &lt;/div&gt;                      &lt;div className="col-xl-3 border cart_product_price p-2"&gt;                         &lt;h5&gt;{item.price}&lt;/h5&gt;                          &lt;/div&gt;                      …                   &lt;/div&gt;                   )}
Суть «реактивности» состоит в том, что как только в react-коде меняется переменная-состояние (Пример кода 2.), т.е. поступивший с сервера обновленный после удаления массив продуктов корзины присваивается ей, react моментально перерендеривае (перестраивает) html-верстку в своей компоненте(автоматом сработает map (Пример кода 3.)).
В результате имеем очевидный выигрыш – во-первых, проще реализация (без лишней native JS-функции с createElement, setAttribute, innerHTML, appendChild), во-вторых, «реактивная» мгновенная связь react-html-кода с react-js-кодом, которые находятся в одной и той же компоненте.

Олександр К.

Как поступить на архитектора в Украине в 2027 году: предметы, экзамены и требования

Регистрация на НМТ-2027 – пошаговая инструкция: даты, документы, процедура

Черновицкий национальный университет им. Юрия Федьковича: поступление, учёба и студенческая жизнь

Что такое ЕВИ и как готовиться к поступлению в 2027 году

400 грн/час

Репетитор з web-розробки (js (jq, Vue, React), php (mysql, laravel)). Про мене та мої курси докладніше можна ознайомитися на ...

Про [:site]

Все города

Все онлайн предметы

Все предметы

Рейтинг: 

Присоединяйтесь

Полезные ссылки

Слава Украине!

Слава Україні! Героям слава!

Ми используем файлы cookie для упрощения навигации по сайту, анализу того, как он используется, предоставления актуальной рекламы. Если вы нажимаете "Разрешить все cookies", вы соглашаетесь на использование нами всех файлов cookies на сайте. Если вы нажимаете "Не разрешать", то будут использоваться только обязательные файлы cookies. Узнать подробнее в нашей <a [:privacy_link]>Политике конфиденциальности</a> и <a href='/p/cookies/'>Политике файлов cookie</a>

Выберите файлы cookie!

Вход

Больше

Если вы хотите сменить преподавателя, пожалуйста, напишите об этом менеджеру

Вы уже забронировали пробный урок с преподавателем [:TUTOR_NAME]

Забронируйте бесплатное пробное занятие с преподавателем BUKI School

Пожалуйста. выберите время, которое вам подходит, иначе это время репетитора может быть занято другим учеником

Вы не забронировали пробный урок с преподавателем 😔

Район/микрорайон

Ваши контакты никогда не будут отображаться на сайте и будут предоставлены только репетитору и менеджеру поддержки компании [:SITE]

Оформление и отправка заявки

казахский

русский

английский

Отправляя заказ, вы соглашаетесь с

Я ознакомился и согласен с

, даю согласие на обработку моих персональных данных в соответствии с 

и подтверждаю достижение мной 16-летнего возраста или я являюсь родителем/опекуном

Я ознакомлен и согласен с 

Наши менеджеры уже обрабатывают вашу заявку и свяжутся с вами как можно быстрее.

Спасибо за ваш запрос!

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

Ваша заявка принята!

Если у вас возникли любые вопросы или сложности - просто закажите звонок

Украинский язык и литература

Сербский язык

Грузинский язык

Македонский язык

Боснийский язык

Каталонский язык

Анатомия

Искусствоведение

Юриспруденция

Логика

Социология

Химия

Ботаника

Зоология

Экология

Генетика

Молекулярная физика

Электрика и магнетизм

Оптика

Казахский язык

Татарский язык

Игра на саксофоне

Биология

Иврит

Игра на скрипке

Дизайн

Исландский язык

Словенский язык

Игра на сопилке

Игра на барабанах

Игра на трубе

Журналистика

Интернет-маркетинг

Английский язык

Каллиграфия

Бухгалтерский учет

Уроки фотошопа (Photoshop)

Фарси (персидский язык)

Французский язык

Уроки кроя и шитья

Фотография

Фитнес тренер

Албанский язык

Шашки

STEM и робототехника

Дизайн одежды

Игра на арфе

Игра на баяне, аккордеоне

Немецкий язык

Архитектура

Оригами

Режиссура

Литовский язык

Вьетнамский язык

Дискретная математика

Начертательная геометрия

Биохимия

Сольфеджио

Веб-Дизайн

Латынь

Инструктор йоги

Электротехника

Геодезия

Строительная механика

Графический дизайн

Математическая статистика

Ораторское искусство

Древнегреческий язык

Аудит

Эконометрика

Тайский язык

Техническая механика

Менеджмент

Математическое моделирование

Латышский якык

Игра на виолончели

Игра на флейте

Видеомонтаж

Компьютерная грамотность

Гра на тромбоне

Игра на контрабасе

Тамильский язык

Игра на бандуре

Фармакология

Дефектолог

Скульптура

История Украины

Игра на губной гармонике

Анимация

Черногорский язык

Крымскотатарский язык

Автоинструктор

Профориентация

Уроки игры на Укулеле

Ментальная арифметика

Художественная гимнастика

География

Идиш язык

Игра на фаготе

Этика

Игра на кларнете

Спортивная гимнастика

Тренер по теннису

Кулинарные курсы

Рукоделие

Скорочтение

Итальянский язык

Польский язык

Турецкий язык

Греческий язык

Всемирная история

Программирование

Черчение и проектирование

Экономика

Живопись

Рисование

Психология

Китайский язык

Игра на гитаре

Игра на фортепиано

Музыка

Испанский язык

Русский язык

Зарубежная литература

Чешский язык

Высшая математика

Математический анализ

Фламандский язык

Актерское мастерство

Японский язык

Нидерландский язык

Эстонский язык

Подготовка к школе

Младшие классы

Правоведение

Румынский язык

Норвежский язык

Венгерский язык

Словацкий язык

Философия

Арабский язык

Португальский язык

Астрономия

Няня для детей

Финский язык

Хинди

Корейский язык

Хореография и танцы

Уроки вокала

Армянский язык

Дифференциальные уравнения

Теория вероятностей

Теоретическая механика

Датский язык

Развитие памяти

Все статьи репетитора: Олександр К.

Статьи об образовании

Блог репетитора – Александр К.