Майбутнє фреймворків: що чекає на решту 2020 року?

Зміст

• 01. Кутовий
• 02. Зреагуйте
• 03. Вуе
• Як порівнюється синтаксис фреймворків?
• Популярність та ринок
• Розробка мобільних додатків
• Інші рамки, на які слід звернути увагу в 2020 році
• Висновок

У 2020 році ми отримали багато фреймворків та бібліотек, які допоможуть нам у веб-розробці. Але не завжди було так багато різноманітності. У 2005 році хлопець на ім'я Брендан Ейх створив нову мову сценаріїв під назвою Mocha. Через кілька місяців після перейменовування в LiveScript ім’я знову було змінено на JavaScript. Відтоді JavaScript пройшов довгий шлях.

У 2010 році ми побачили введення Backbone та Angular як перших фреймворків JavaScript, і до 2016 року 92 відсотки всіх веб-сайтів використовували JavaScript. У цій статті ми поглянемо на три основні фреймворки JavaScript (Angular, React та Vue) та їх статус в наступному десятилітті. Хочете зробити власний сайт? Спробуйте цей список розробників веб-сайтів.

Для отримання кількох чудових ресурсів перегляньте наш список найкращих інструментів веб-дизайну, наш огляд послуг веб-хостингу, а також цей список чудового програмного забезпечення для тестування користувачів.

01. Кутовий

AngularJS був випущений в 2010 році, але до 2016 року він був повністю переписаний і випущений як Angular 2. Angular - це повномасштабна веб-структура, розроблена Google, яка використовується Wix, Upwork, The Guardian, HBO та ін.

Плюси:

• Виняткова підтримка TypeScript
• MVVM дозволяє розробникам розділити роботу над тим самим розділом програми, використовуючи той самий набір даних
• Відмінна документація

Мінуси:

• Має трохи кривої навчання
• Перехід зі старої версії може бути складним.
• Оновлення вводяться досить регулярно, що означає, що розробники повинні адаптуватися до них

Що далі?

У Angular 9 Ivy є компілятором за замовчуванням. Він був створений для вирішення багатьох проблем, пов’язаних з продуктивністю та розміром файлу. Це має зробити програми меншими, швидшими та простішими.

Коли ви порівнюєте попередні версії Angular з React та Vue, файл
кінцеві розміри наборів були набагато більшими, коли використовували Angular. Ivy також робить можливим прогресивну гідратацію, що команда Angular показала на I / O 2019. Прогресивна гідратація використовує Ivy для поступового завантаження на сервері та клієнті. Наприклад, як тільки користувач починає взаємодіяти зі сторінкою, код компонентів разом із будь-яким часом виконання отримується поштучно.

Плющ здається великим акцентом для Angular, і сподіваємося зробити його доступним для всіх додатків. У версії 9 буде доступний варіант відмови аж до Angular 10.

02. Зреагуйте

Спочатку React був випущений у 2013 році Facebook і використовується для побудови інтерактивних веб-інтерфейсів. Його використовують Netflix, Dropbox, PayPal та Uber, щоб назвати декілька.

Плюси:

• React використовує віртуальний DOM, що позитивно впливає на продуктивність
• JSX легко писати
• Оновлення не порушують стабільність

Мінуси:

• Однією з головних невдач є необхідність сторонніх бібліотек для створення більш складних програм
• Розробники залишають у темряві найкращий спосіб розвитку

Що далі?

На React Conf 2019 команда React торкнулася низки речей, над якими працювала. Перший - це селективна гідратація, де React призупинить все, над чим працює, щоб визначити пріоритети компонентів, з якими взаємодіє користувач. Коли користувач переходить до взаємодії з певним розділом, ця область буде зволоженою. Команда також працювала над Suspense, що є системою React для організації завантаження коду, даних та зображень. Це дозволяє компонентам чекати чогось, перш ніж вони відтворюються.

Селективна гідратація та призупинення стали можливими завдяки паралельному режиму, який дозволяє додаткам реагувати швидше, надаючи React можливість входити у великі блоки роботи з нижчим пріоритетом, щоб зосередитись на чомусь із вищим пріоритетом, наприклад, відповіді на введення користувачами. Команда також згадала доступність як ще одну сферу, яку вони розглядали, зосередившись на двох конкретних темах - управління фокусом та інтерфейсами введення.

03. Вуе

Vue був розроблений в 2014 році Еваном Ю, колишнім співробітником Google. Його використовують Xiaomi, Alibaba та GitLab. Vue вдалося за короткий проміжок часу і без підтримки великого бренду завоювати популярність та підтримку розробників.

Плюси:

• Дуже легкі за розміром
• Для новачків - легко навчитися
• Чудова спільнота

Мінуси:

• Не підтримується величезною компанією, як React з Facebook та Angular з Google
• Немає реальної структури

Що далі?

Vue поставив собі за мету бути швидшим, меншим, ремонтопридатнішим та полегшити розробникам націлювання на рідну (якщо у вас виникають проблеми з підтримкою, розгляньте послугу веб-хостингу). Наступний випуск (3.0) відбудеться у 1 кварталі 2020 року, що включає віртуальний перепис DOM для кращої продуктивності, а також покращену підтримку TypeScript. Також додано Composition API, який надає розробникам новий спосіб створювати компоненти та впорядковувати їх за функціями замість операцій.

Ті, хто розробляє Vue, також були зайняті роботою над Suspense, яка призупиняє візуалізацію вашого компонента та відображає резервний компонент, доки не буде виконана умова.

Однією з чудових речей з оновленнями Vue є підтримка зворотної сумісності. Вони не хочуть, щоб ви ламали свої старі проекти Vue. Ми побачили це в переході з 1,0 на 2,0, де 90 відсотків API було однаковим.

Як порівнюється синтаксис фреймворків?

Усі три фреймворки зазнали змін після їх випусків, але одне, що важливо зрозуміти, - це синтаксис та те, як він відрізняється. Давайте подивимося, як синтаксис порівнюється, коли справа стосується простого прив’язки подій:

Vue: v-on Директива використовується для приєднання прослуховувачів подій, які викликають методи в екземплярах Vue. Директиви мають префікс v- для того, щоб вказати, що вони є спеціальними атрибутами, наданими Vue, і застосовувати особливу реактивну поведінку до відтвореного DOM. Обробники подій можуть бути надані як вбудовані, так і як назва методу.

template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {name: “HelloWorld”, методи: {clickHandler: function () {console.log (“На мене клацнули! ”); }}}; / script>

Реагуйте: React розміщує розмітку та логіку в JS та JSX, розширенні синтаксису до JavaScript. З JSX функція передається як обробник подій. Обробка подій з елементами React дуже схожа на обробку подій з елементами DOM. Але є деякі синтаксичні відмінності; наприклад, події React називаються за допомогою camelCase, а не з малої літери.

function Button () {function clickHandler (e) {console.log (“Мене натиснули”); } кнопка повернення onClick = {clickHandler}> Клацніть мене! / кнопка>; }

Кутова: Синтаксис прив’язки подій складається з назви цільової події в дужках ліворуч від знака рівності та висловленого шаблону оператора праворуч. Крім того, ви можете використовувати на- префікс, відомий як канонічна форма.

@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) клас експорту ClickMeComponent {onClickMe () {console.log (“ Ти клацнув на мене! »); }}

Популярність та ринок

Почнемо з розгляду загальної картини трьох фреймворків щодо решти Інтернету, вивчивши статистику W3Techs. В даний час Angular використовується 0,4% усіх веб-сайтів, а частка ринку бібліотек JavaScript становить 0,5%. React використовується 0,3 відсотками всіх веб-сайтів та 0,4 відсотка часткою ринку бібліотек JavaScript, і Vue має 0,3 відсотка для обох. Це здається досить рівним, і ви очікували б, що цифри зростуть.

Тенденції Google: За останні 12 місяців React є найпопулярнішим у пошукових термінах, за яким слідкує Angular. Vue.js досить відстає; проте слід пам’ятати одне, що Vue все ще молодий у порівнянні з двома іншими.

Пошук роботи: На момент написання статті React та Angular досить тісно співпадають між собою з точки зору списку вакансій на сайті Indeed, Vue надовго відстає. Однак у LinkedIn, як видається, попит на розробників Vue більший.

Переповнення стеку: Якщо ви подивитесь на результати опитування розробників стеків за 2019 рік, React та Vue.js є найбільш улюбленими та бажаними веб-фреймворками. Кутовий сідає на дев'яту позицію для найулюбленіших, але третіх найбільш бажаних.

GitHub: Vue має найбільшу кількість зірок із 153 тис., Але найменша кількість учасників (283). З іншого боку, у React є 140 тис. Зірок та 1341 співавтор. У Angular лише 59,6 тис. Зірок, але найбільша кількість учасників із трьох - 1579.

Тенденції NPM: На зображенні вище показано статистику за останні 12 місяців, де ви можете бачити, що React має більшу кількість завантажень на місяць порівняно з Angular та Vue.

Розробка мобільних додатків

Одним з основних напрямків для великої трійки є розгортання мобільних пристроїв. React має React Native, який став популярним вибором для створення додатків для iOS та Android не тільки для користувачів React, але й для ширшої спільноти розробників додатків. Кутові розробники можуть використовувати NativeScript для власних програм або Ionic для гібридних мобільних додатків, тоді як розробники Vue мають вибір NativeScript або Vue Native. Через популярність мобільних додатків це залишається ключовою сферою інвестицій.

Інші рамки, на які слід звернути увагу в 2020 році

Якщо ви хочете спробувати щось нове у 2020 році, перевірте ці фреймворки JavaScript.

Ембер: Фреймворк з відкритим кодом для створення веб-додатків, який працює на основі шаблону MVVM. Він використовується декількома великими компаніями, такими як Microsoft, Netflix та LinkedIn.

Метеор: Повна стекова платформа JavaScript для розробки сучасних веб- і мобільних додатків. Це легко навчитися і має дуже підтримуючу спільноту.

Висновок

Усі три основи постійно вдосконалюються, що є обнадійливим знаком. Кожна людина має свою власну точку зору та бажане рішення щодо того, яке саме з них слід використовувати, але це насправді зводиться до розміру проекту і завдяки якому ви почуваєтесь комфортніше.

Найважливішим аспектом є постійна підтримка їхніх спільнот, тому, якщо ви плануєте розпочати новий проект і ніколи раніше не використовували жодного з трьох, то я вважаю, що ви в надійних руках усіх них. Якщо у вас ще не було можливості вивчити будь-яку з трьох рамок, тоді я пропоную прийняти вашу новорічну дозвіл розпочати навчання. Майбутнє буде обертатися навколо цих трьох.

Цей вміст спочатку з’являвся у нетто-журналі.