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-кодом, которые находятся в одной и той же компоненте.

Олександр К.

Готуємось до ЗНО з української мови: визначення та ознаки займенника як частини мови

Все про правопівкульне малювання

Географія материків та океанів

ТікТок сленг: вчимося розуміти своїх дітей

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 і робототехніка

Дизайн одягу

Гра на арфі

Гра на баяні, акордеоні

Німецька мова

Архітектура

Оригамі

Режисура

Литовська мова

В'єтнамська мова

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

Нарисна геометрія

Біохімія

Сольфеджіо

Веб-Дизайн

Латинь

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

Електротехніка

Геодезія

Будівельна механіка

Графічний дизайн

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

Ораторське мистецтво

Давньогрецька мова

Аудит

Економетріка

Тайська мова

Технічна механіка

Менеджмент

Математичне моделювання

Латиська мова

Гра на віолончелі

Гра на флейті

Відеомонтаж

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

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

Гра на контрабасі

Тамільська мова

Гра на бандурі

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

Дефектолог

Скульптура

Історія України

Гра на губній гармоніці

Анімація

Чорногорська мова

Кримськотатарська мова

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

Профорієнтація

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

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

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

Географія

Їдиш мова

Гра на фаготі

Етика

Гра на кларнеті

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

Тренер з тенісу

Кулінарні курси

Рукоділля

Швидкочитання

Італійська мова

Польська мова

Турецька мова

Грецька мова

Всесвітня історія

Програмування

Креслення та проектування

Економіка

Живопис

Малювання

Психологія

Китайська мова

Гра на гітарі

Гра на фортепіано

Музика

Іспанська мова

Російська мова

Зарубіжна література

Чеська мова

Вища математика

Математичний аналіз

Фламандська мова

Акторська майстерність

Японська мова

Нідерландська мова

Естонська мова

Підготовка до школи

Молодші класи

Правознавство

Румунська мова

Норвезька мова

Угорська мова

Словацька мова

Філософія

Арабська мова

Португальська мова

Астрономія

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

Фінська мова

Гінді

Корейська мова

Хореографія і танці

Уроки вокалу

Вірменська мова

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

Теорія ймовірностей

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

Данська мова

Розвиток пам'яті

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

Статті про освіту

Блог репетитора компанії BUKI – Олександр К.