1

Тема: Angular vs React

трошки знайомий з Angular JS
знайомлячись з іншиими засобами фронт-нду , прочитав, що "ReactJS, как мне кажется, самый простой фреймворк и самый элегантный из ныне существующих в JS. "
подивився код для виводу "хелло ворлд"  - мені так не здалося, що він простіший за то й же ангулар.

якщо хто має досвід застосування цих звірів - поділіться плюсами/мінусами і критеріями вибору.

Подякували: Monolith, 221VOLT, ostap34PHP, bunyk4

2 Востаннє редагувалося 221VOLT (21.04.2017 23:32:45)

Re: Angular vs React

коли мені сказали вибрати між ангуляром і реактом - я вибрав Vue.js і продовжую писати на vanilla.js

Прихований текст
:D  я абсолютно серйозно
критеріїв два - 1) легковісність 2) менше мозго***ства
Це ще не кінець. Це навіть не початок кінця. Але, можливо, це кінець початку.
Зростання мудрості можна точно вимірювати ступенем зменшення злоби.

https://coderhero.win/ Розбудовуємо інтернет разом!
Подякували: ping, 0xDADA11C7, Monolith, bunyk4

3

Re: Angular vs React

221VOLT написав:

коли мені сказали вибрати між ангуляром і реактом - я вибрав Vue.js і продовжую писати на vanilla.js

Прихований текст
:D  я абсолютно серйозно
критеріїв два - 1) легковісність 2) менше мозго***ства

пішов читати про ванілу :)

Подякували: 221VOLT1

4

Re: Angular vs React

Реакт не фреймвокр, це просто вюха.

5

Re: Angular vs React

Ще є riot.js. Сам не пробував(взагалі нічого з цих не пробував), але казали, що як мікро, він дуже і дуже класний.

Навчаюсь вчитись, щоб навчатись.

6

Re: Angular vs React

По-перше, з точки зору архітектури, краще порівнювати React з  Angular v2+, але не з першою версією. Хоча старт може й легший у AngularJS, але Angular v2+ таки значно-значно кращий у багатьох інших аспектах. Раджу не витрачати час на вивчення першої версії, якщо ви ще її не знаєте.

По-друге, з тих багатьох порівнянь, які я встиг почитати, виходить що React - це щось середнє між jQuery й Angula v2+, з усіма вихідними наслідками. Angular, на відміну від React, надає комплексне рішення.

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

Подякували: ping1

7

Re: Angular vs React

ktretyak написав:

Хоча старт може й легший у AngularJS, але Angular v2+ таки значно-значно кращий у багатьох інших аспектах.

Розумію, ща такі питання це як порівнювати релігії, але менш з тим: цікаво було би почитати, в яких аспектах Angular кращий

Був собі цебер, та переполуцебрився на полуцебренята

8

Re: Angular vs React

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

Подякували: ostap34PHP1

9

Re: Angular vs React

Така собі відповідь, якщо чесно

Був собі цебер, та переполуцебрився на полуцебренята
Подякували: ostap34PHP1

10

Re: Angular vs React

Вам подавай "Мед та ще й ложку".

Подякували: ostap34PHP1

11

Re: Angular vs React

панове, продовжуйте, бажано з конкретикою і особистим досвідом :)

12 Востаннє редагувалося karmeljuk (15.05.2017 14:26:35)

Re: Angular vs React

https://trends.google.com/trends/explor … ular,react

Графік на користь реакту, якщо дивитися на останній рік

Був собі цебер, та переполуцебрився на полуцебренята
Подякували: ostap34PHP1

13

Re: Angular vs React

І ще трішки графіків, котрі краще показують тенденцію
http://www.npmtrends.com/react-vs-angular

Був собі цебер, та переполуцебрився на полуцебренята
Подякували: ostap34PHP1

14

Re: Angular vs React

karmeljuk написав:

І ще трішки графіків, котрі краще показують тенденцію
http://www.npmtrends.com/react-vs-angular

Цей сервіс не відрізняє AngularJS від Angular, тобто першу від другої+ версії.

Значно більш показовий аргумент - кількість вакансій:
JavaScript - 595 вакансій
AngularJS - 261 вакансій
ReactJS - 153 вакансії
Angular 2 - 28 вакансій.

Звичайно ж, це лише поточна картина, яку ще потрібно інтерпретувати для конкретної метрики.

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

Ось тут би було б цікаво глянути динаміку популярності. Можу лише сказати, що буквально пів року назад Angular 2 згадувався десь у 3 актуальних вакансіях, зараз - у 28. І це при тому, що AngularJS стабільно тримається біля 250-300 вакансій.

Стосовно конкретики власного досвіду використання, то потрібна конкретика у питаннях, що саме вас цікавить.

Дуже відчутний плюс - відпала потреба "ворожіння" над $scope, бо тепер такої змінної і такого поняття немає. Є компонент або директива, і є клас, що відповідає за його роботу. У цьому класі усі публічні члени доступні у шаблоні.

Наприклад, я використовую наступний компонент для показу повідомлень:

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'cst-msg',
  templateUrl: './msg.component.html',
  styleUrls: ['./msg.component.css']
})
export class MsgComponent implements OnChanges
{
  @Input() msg: string[];
  printMsg: string[] = [];

  constructor(){}

  ngOnChanges()
  {
    if(this.msg && this.msg[0])
    {
      this.printMsg = this.msg;
    }
    else if(this.msg && !Array.isArray(this.msg))
    {
      console.warn(`Для компонента 'cst-msg', повідомлення повинні бути в масиві`)
    }
    else
    {
      this.printMsg = [];
    }
  }
}

Ми тут бачимо що є selector: 'cst-msg', він говорить Angular, що за усі елементи <cst-msg></cst-msg>, у батьківському HTML-шаблоні, відповідальний даний клас.

Також ми тут бачимо @Input() msg, де Input - це декоратор, який говорить Angular що змінна msg у цьому компоненті прийде ззовні, тобто в батьківському HTML-шаблоні очікується ось такий запис:

<cst-msg [msg]="message"></cst-msg>

Батьківський компонент передасть дочірньому компоненту змінну message у змінну msg. Усі такі конструкції у HTML-шаблоні заміняться на наступний шаблон:

<ul *ngIf="printMsg[0]">
  <li *ngFor="let m of printMsg; let i = index" class="animate-repeat msg-warning">
    {{ m }}
    <i
      title="Закрити"
      (click)="printMsg.splice(i, 1)"
      class="fa fa-close msg-close msg"></i>
  </li>
</ul>
Подякували: karmeljuk, ostap34PHP2

15 Востаннє редагувалося karmeljuk (15.05.2017 16:25:59)

Re: Angular vs React

ktretyak - дякую за пояснення

Ось кількість вакансій на ДОУ:
React - 24
Angular - 21

Був собі цебер, та переполуцебрився на полуцебренята
Подякували: ostap34PHP1

16

Re: Angular vs React

Очевидно, що DOU має меншу вибірку вакансій, а значить - і меншу точність.

Подякували: ostap34PHP1

17

Re: Angular vs React

особливий прикол, коли ці вакансії розміщені для статистики і не більше

- Поганому трояну фаєрвол заважає
- Ніколи не програмуйте та не пийте пиво
Якщо ви з першого разу написали програму, в якій немає жодної помилки, повідомте про це системного програмісту: він виправить помилки в компіляторі
Подякували: ostap34PHP1

18 Востаннє редагувалося bunyk (16.05.2017 20:26:00)

Re: Angular vs React

vue.js всіх взуває Хоча це ще треба вміти рівноцінні тренди вибрати.

Бо мені Google каже що з angular часто шукають momentum

Подякували: 221VOLT, karmeljuk2

19

Re: Angular vs React

На StackOverflow інші тренди: https://insights.stackoverflow.com/tren … js%2Cd3.js

20

Re: Angular vs React

До речі, питання до знайомих з ReactJS, що у ньому передбачено для авторизації користувача? SPA-сайти мають свою специфіку, фреймворки повинні враховувати її.

В Angular 2+ є так звані Guards (охоронці) в системі маршрутизації, вони перевіряють права доступів, причому можна робити перевірки як на рівні конкретного маршруту, так і на рівні цілого розділу (для кореневих компонентів, що мають дочірні компоненти).

Функції для цих Guards можуть працювати як синхронно, так і асинхронно, причому вони можуть повертати не лише Promise, а й Observable (що можна використовувати у вебсокетах).

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

export class MyComponent
{
  constructor( public user: UserService ){}
}

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