Помню шедевральную статью из 2016: https://habr.com/post/312022/

Именно шедевральная, ибо написано все с юмором, с горьким осознанием происходящей фигни. Имх., пока взрослые дядьки занимались back-end-ом, то школьники и студенты (началось со студенческого jQuery, кста) успели сделать так сказать "революцию" в мире JS, которым взрослые дядьки заниматься просто брезговали. Мы повернули голову — а там без нас сделали бедлам.

Но, как говорится, "маемо те що маемо".

Итак, вопрос. Что изменилось с 2016 года?

Для меня неким эталоном умеренного следования за модой служат встроенные шаблоны VS. Итак, сейчас VS предлагает ажно 3 встроенные шаблона для Web-проектов:

1. Angular.
2. React.
3. React + Reduce.

И именно все так и выглядит как в статье — для элементарного функционала, как то отображение таблицы и увеличение значения счетчика на клиенте (без передачи данных на сервер даже) — папка с исходниками Angular 120 Мб (13 502 Files, 1 720 Folders) а React чуть поменьше. Вспоминаю, ранее еще был шаблон Knockout, но сейчас его убрали.

Судя по трендам Google — Angular не так популярен как React. И этого и следовало ожидать, ведь Angular идеологически более правильный. А React — это лапша из JS кода и HTML, по сути — а толпе именно это и подавай (макаронный моннстр и его последователи, понимаш, любят лапшичку!).

Для управления зависимостями заюзан npm, для сборки/подготовки на стороне клиента — Webpack.

Осталось не ясным: Babel — уже не нужен?

Вообще, какой наиболее оптимальный набор этих самых библиотек/фреймворков сегодня?

Здравствуйте, Shmj, Вы писали:

S>Осталось не ясным: Babel — уже не нужен?

Нужен.

S>Вообще, какой наиболее оптимальный набор этих самых библиотек/фреймворков сегодня?

React + Redux или Vue.js.

Здравствуйте, vsb, Вы писали:

S>>Осталось не ясным: Babel — уже не нужен?
vsb>Нужен.

А как же дефолтные проекты в VS — Angular и React обходятся без него? Или при использовании Webpack он становится не нужным?

S>>Вообще, какой наиболее оптимальный набор этих самых библиотек/фреймворков сегодня?
vsb>React + Redux или Vue.js.

Vue не требует Redux?

S>А React — это лапша из JS кода и HTML

Эта фраза — лакмусовая бумажка, по которой можно узнать, знает ли человек что-то о Реакте, или ему что-то пропел Рабинович.

S>>>Вообще, какой наиболее оптимальный набор этих самых библиотек/фреймворков сегодня?
vsb>>React + Redux или Vue.js.

S>Vue не требует Redux?

Redux для Vue называется Vuex

Здравствуйте, Shmj, Вы писали:

S>А как же дефолтные проекты в VS — Angular и React обходятся без него? Или при использовании Webpack он становится не нужным?

Webpack это просто сборщик, сам по себе он особо ничего не делает. Код на JSX должен превратиться в код на JS и эту задачу выполняет Babel. Думаю, ты просто не нашёл его, но он там где-то должен быть.

S>>>Вообще, какой наиболее оптимальный набор этих самых библиотек/фреймворков сегодня?
vsb>>React + Redux или Vue.js.

S>Vue не требует Redux?

Про Vue я знаю только то, что это что-то, похожее на React, сам с ним не знаком. Но выше уже ответили, видимо так.

S>Судя по трендам Google — Angular не так популярен как React. И этого и следовало ожидать, ведь Angular идеологически более правильный. А React — это лапша из JS кода и HTML

Минвайл правильный Ангуляр, который "не лапша JS и HTML". Ну-ну. Ты веб-программирование в руки взял за пять минут до написания своего тролль-поста?

import { Component, Input } from '@angular/core';
 
import { Hero } from './hero';
 
@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

import { Component } from '@angular/core';
 
import { HEROES } from './hero';
 
@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

@Component({
  selector: 'app-version-parent',
  template: `
    <h2>Source code version</h2>
    <button (click)="newMinor()">New minor version</button>
    <button (click)="newMajor()">New major version</button>
    <app-version-child [major]="major" [minor]="minor"></app-version-child>
  `
})
export class VersionParentComponent {
  major = 1;
  minor = 23;
 
  newMinor() {
    this.minor++;
  }
 
  newMajor() {
    this.major++;
    this.minor = 0;
  }
}

Здравствуйте, andini, Вы писали:


S>>Судя по трендам Google — Angular не так популярен как React. И этого и следовало ожидать, ведь Angular идеологически более правильный. А React — это лапша из JS кода и HTML

A>Минвайл правильный Ангуляр, который "не лапша JS и HTML".

И что эти примеры должны показать?

Здравствуйте, andini, Вы писали:

A>Минвайл правильный Ангуляр, который "не лапша JS и HTML". Ну-ну. Ты веб-программирование в руки взял за пять минут до написания своего тролль-поста?

A>

A>import { Component, Input } from '@angular/core';
 
A>import { Hero } from './hero';
 
A>@Component({
A>  selector: 'app-hero-child',
A>  template: `
A>    <h3>{{hero.name}} says:</h3>
A>    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
A>  `
A>})
A>export class HeroChildComponent {
A>  @Input() hero: Hero;
A>  @Input('master') masterName: string;
A>}

A>

A>

A>import { Component } from '@angular/core';
 
A>import { HEROES } from './hero';
 
A>@Component({
A>  selector: 'app-hero-parent',
A>  template: `
A>    <h2>{{master}} controls {{heroes.length}} heroes</h2>
A>    <app-hero-child *ngFor="let hero of heroes"
A>      [hero]="hero"
A>      [master]="master">
A>    </app-hero-child>
A>  `
A>})
A>export class HeroParentComponent {
A>  heroes = HEROES;
A>  master = 'Master';
A>}
A>

A>

A>@Component({
A>  selector: 'app-version-parent',
A>  template: `
A>    <h2>Source code version</h2>
A>    <button (click)="newMinor()">New minor version</button>
A>    <button (click)="newMajor()">New major version</button>
A>    <app-version-child [major]="major" [minor]="minor"></app-version-child>
A>  `
A>})
A>export class VersionParentComponent {
A>  major = 1;
A>  minor = 23;
 
A>  newMinor() {
A>    this.minor++;
A>  }
 
A>  newMajor() {
A>    this.major++;
A>    this.minor = 0;
A>  }
A>}
A>

Одно дело указать шаблон. Совсем другое дело смешивать JS и куски HTML (как то в цикле прописать кусок HTML-я).

А вообще Angular позволяет писать html-шаблоны в отдельном файле. А в React — все в куче.

не уверен, что оно изменилось

бесконечные, просто бесконечные итерации по выбору фреймворка
давайте попробуем на этом и посмотрим
давайтие попробуем на том и посмотрим
причем "попробуем" — это еще хороший вариант, обычно вообще за уши притянутые аргументы честно вычитанные в мануале используются

пока всё плохо, в общем
жить можно, но есть ощущение что кто-то придумает нормальный фреймворк и всё это схлопнется в момент нафиг
наверное, это ощущение обманчиво

S>Одно дело указать шаблон.

Доооо. Оно ЬВНЕЗАПНО перестает быть смесью JS и HTML, если его назвать шаблоном, ага-ага

S>Совсем другое дело смешивать JS и куски HTML (как то в цикле прописать кусок HTML-я).

В Реакте нет ХТМЛя

S>А вообще Angular позволяет писать html-шаблоны в отдельном файле. А в React — все в куче.

Перевод: Ангуляр позволяет писать мешанину из ХТМЛя, ангулярных директив и JS в отдельном файле. В Реакте нет ХТМЛя

Здравствуйте, evilbloodydemon, Вы писали:

E>Здравствуйте, andini, Вы писали:


S>>>Судя по трендам Google — Angular не так популярен как React. И этого и следовало ожидать, ведь Angular идеологически более правильный. А React — это лапша из JS кода и HTML

A>>Минвайл правильный Ангуляр, который "не лапша JS и HTML".

E>И что эти примеры должны показать?

Что именно ангуляр является лапшой

Здравствуйте, andini, Вы писали:

A>Доооо. Оно ЬВНЕЗАПНО перестает быть смесью JS и HTML, если его назвать шаблоном, ага-ага

В шаблоне нет логики, нет операндов. Он обычно находится в отдельном файле — никто не смешивает.

A>Перевод: Ангуляр позволяет писать мешанину из ХТМЛя, ангулярных директив и JS в отдельном файле. В Реакте нет ХТМЛя

Ангуляр позволяет писать шаблон в одном файле с JS, но так никто не делает. И даже в этом случае в шаблоне нет логики.

А вот Реакт:

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

Отсюда: https://www.tutorialspoint.com/reactjs/reactjs_forms.htm

Куски HTML-я разбросаны по разным функциям и в этих кусках еще и указаны привязки к событиям и пр.

A>>Доооо. Оно ЬВНЕЗАПНО перестает быть смесью JS и HTML, если его назвать шаблоном, ага-ага

S>В шаблоне нет логики, нет операндов. Он обычно находится в отдельном файле — никто не смешивает.

В ангулярном шаблоне есть и логика и "операнды" (что за "операнды"?)

A>>Перевод: Ангуляр позволяет писать мешанину из ХТМЛя, ангулярных директив и JS в отдельном файле. В Реакте нет ХТМЛя

S>Ангуляр позволяет писать шаблон в одном файле с JS, но так никто не делает. И даже в этом случае в шаблоне нет логики.

Есть. Есть. И еще раз есть.


S>А вот Реакт:
S>Отсюда: https://www.tutorialspoint.com/reactjs/reactjs_forms.htm

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

S>Куски HTML-я разбросаны по разным функциям и в этих кусках еще и указаны привязки к событиям и пр.

Я же говорю. Ты веб-программирование увидел пять минут назад и уверен, что ты все уже знаешь. Нет. JSX это не HTML. Для этого, правда, надо разбираться в предмете больше, чем "посмотрел на код 30 секунд и полез на форум со своим ИМХО".

Здравствуйте, andini, Вы писали:

A>Есть. Есть. И еще раз есть.

Ну так вы обратили внимание, что там специальная конструкция введена, сильно ограничивающая возможности по написанию скриптов внутри шаблонов. В React же ничего не мешает вам захерачить любой JS внутри шаблона. В этом разница.

S>>А вот Реакт:
S>>Отсюда: https://www.tutorialspoint.com/reactjs/reactjs_forms.htm

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

А что там иначе написано? Вот, все та же помесь HTML и JS:

	Скрытый текст
	render() { const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); }); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( <div className="game"> <div className="game-board"> <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div> <div className="game-info"> <div>{status}</div> <ol>{moves}</ol> </div> </div> ); }

A>Я же говорю. Ты веб-программирование увидел пять минут назад и уверен, что ты все уже знаешь. Нет. JSX это не HTML. Для этого, правда, надо разбираться в предмете больше, чем "посмотрел на код 30 секунд и полез на форум со своим ИМХО".

Я немало (несколько лет) работал в Web-е еще до того как там появились эти ангуляры и React-ы. Немного (недели 2) работал с Angular на небольшом приложении.

Зачем отрицать очевидное — как ты не назови — это сместь JS и HTML. Т.е. в шблоне у вас куски кода.

Здравствуйте, Shmj, Вы писали:

S>Здравствуйте, andini, Вы писали:

A>>Есть. Есть. И еще раз есть.

S>Ну так вы обратили внимание, что там специальная конструкция введена

Не важно, что там внедрено. Следующее твое заявления является ложью:

И даже в этом случае в шаблоне нет логики.

S>>>А вот Реакт:
S>>>Отсюда: https://www.tutorialspoint.com/reactjs/reactjs_forms.htm

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

S>А что там иначе написано? Вот, все та же помесь HTML и JS:

Код поскипан. Ты не прочитал, что написано по ссылке, от слова совсем.



S>Я немало (несколько лет) работал в Web-е еще до того как там появились эти ангуляры и React-ы. Немного (недели 2) работал с Angular на небольшом приложении.

S>Зачем отрицать очевидное — как ты не назови — это сместь JS и HTML. Т.е. в шблоне у вас куски кода.

Это ты про ангуляр. Не про реакт.

Так как ты не понял, что написано по ссылке, перевожу. Медленно и один раз.

JSX — это тончайший HTML-подобный DSL, который напрямую транслируется в вызовы функций. Там нет ни куска HTML'я. При желании JSX можно не использовать воообще, и ничего не изменится.В ангуляре такое невозможно. Я надесюь ты знаешь, что такое DSL.

То есть:

<div className="class">text</a>

это просто более лаконичный способ записи следующего кода

React.createElement('div', {className: "class"}, ["text"]);

Эти два куска кода идентичны. Более того, второй кусок кода это то, во что транслируется JSX при транспиляции Babel'ем. Именно потому что JSX — это тончайший DSL для вызова функций, в нем и вокруг него работает все, что есть в JS: variable scope, функции, циклы и прочее. Потому что там нет HTML'я (строки). Там есть Javascript.

В отличие от ангуляра, который имеет:

— HTML-подобный шаблон в виде строки
— со специальными маркерами для интерполяции некоторого ограниченного набора JS {{}}
— со специальными маркерами для байндинга свойств []
— со специальными маркерами для байндинга событий (), которые позволяют написать некоторый ограниченный набор JS-подобных конструкций (например: (input)="currentHero.name=$event.target.value" — все смешалось в доме облонских)
— со специальными конструкциями для логики ngFor, ngIf, ngSwitch, каждый из которых дополнительно имеют свои полускриптовые куски (например: <div *ngFor="let hero of heroes" [hero]="hero">)

Но да, но да. "Ангуляр более правильный, ведь он ничего не смешивает, я это знаю, потому что когда-то что-то писал для веба, а с ангуляром работа целых две недели, а среактом не работал никогда НО МНЕНИЕ ИМЕЮ".

Здравствуйте, Shmj, Вы писали:

S>Зачем отрицать очевидное — как ты не назови — это сместь JS и HTML. Т.е. в шблоне у вас куски кода.

Не спора ради, но так оно и должно быть. В шаблоне же происходит связывание.

В cshtml тоже городят, а с помощью tag helpers — вообще необъятные пространства доступны. Но и без них умудрялись и делают досихпормассивыхренпобедишьнахервывооьщеэтихелперыпридумаливыколотьвамглаза.

Ну и в целом — реактивность не везде нужна. Выпендреж в виде реакта — имхо, вообще не нужен. Сам подход — известен был до того как они фейсом то научились торговать. Ангуляр — аналогично. По большому счету вкусовщина.

Вот как найдут единственно правильный...

Здравствуйте, andini, Вы писали:

A>Но да, но да. "Ангуляр более правильный, ведь он ничего не смешивает, я это знаю, потому что когда-то что-то писал для веба, а с ангуляром работа целых две недели, а среактом не работал никогда НО МНЕНИЕ ИМЕЮ".

Стоит посмотреть на размер реакта и успокоится. Ребятам явно стоит учится писать свой фейсбук дальше. Кстати он и выглядит отвратно и работает так же

Здравствуйте, Mystic Artifact, Вы писали:

MA>Здравствуйте, andini, Вы писали:

A>>Но да, но да. "Ангуляр более правильный, ведь он ничего не смешивает, я это знаю, потому что когда-то что-то писал для веба, а с ангуляром работа целых две недели, а среактом не работал никогда НО МНЕНИЕ ИМЕЮ".

MA> Стоит посмотреть на размер реакта и успокоится. Ребятам явно стоит учится писать свой фейсбук дальше. Кстати он и выглядит отвратно и работает так же

Ядро реката не такое большое. И точно не требует AOT и Bazel, чтобы собраться в что-то вменяемое, как Angular. Самая большая его часть — это React DOM. В основном из-за того, что там внутри до сих пор поддержка всякой экзотики и, например, "выравнивание" событий между браузерами ("synthetic events" https://reactjs.org/docs/events.html). DOM там урезается чуть ли не на порядок, если это из него убрать, но они пока не могут (хотя планы есть).

Здравствуйте, vsb, Вы писали:

S>>Vue не требует Redux?

vsb>Про Vue я знаю только то, что это что-то, похожее на React, сам с ним не знаком. Но выше уже ответили, видимо так.

Vue начинал делать чувак, который до этого делал Angular, но потом свалил из гугла,
решив что Angular содержит тонны синтаксического оверхеда,и потому не нужен.
В общем решил запилить свой лунапарк с блэк-джеком и шлюхами, без поддержки корпорации добра

Redux, нет, не требует. Но использовать совместно можно