Angular vs react+flux (помогите выбрать)
 

Уже как дня 3 гуглю и не могу выбрать - что же учить?
Я пересмотрел кучу конференций по ангуляру и реакту, но так и не выбрал..

Angular vs react + flux? Ваш опыт, советы?

p.s я их не сравниваю, а лишь хочу понять, что лучше будет учить первым?=)

Странный вопрос. У них разный подход к архитектуре: ангуляр - MVC, реакт - flux. И используют либо одно, либо другое.

Ангуляр старый, базируется на проверенном временем MVC, с большим коммьюнити, сам по себе тот еще швейцарский нож.
Реакт новый, коммьюнити меньше, реализует новейшие смелые архитектурные идеи и отлично дружит с ES6, сугубо модулен.

Вообще, взялся бы хоть что-то выучить - куда быстрее было бы.

Дак в том то и дело, я могу выбрать=).

Теперь, скорее всего - определился :D

React, потому, что быстрее развивается.
Возможно в будущем Ангуляр 2 будет мегакрут, но пока до него далеко.

Safort, все круто, только jsx пугает немного=)

Lemme,
это только поначалу)

"use strict";

import React from 'react';

class Hello extends React.Component {

	render() {
		return <div>Hello, { this.props.name }</div>
	}
}

React.render(<Hello name="World" />, document.body);

Аж в дрожь бросает =)

Если что, JSX - всего лишь синтаксический сахар, диалект ES, предлагаемый к использованию вместе с реактом. Можно и без него:

import React from "react";

class HelloMessage extends React.Component {
    render() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
}

React.render(React.createElement(HelloMessage, {name: "World"}), document.body);

Но лучше таки привыкай, там ничего сложного нет)

Да, еще, касательно того кода, а не задачи: "use strict" в модулях ES6 писать нет смысла, они и так по дефолту в строгом режиме работают.

По мне так jsx это, как бы по приличнее, плохо. Сам реакт не плох, есть такая штука react template, позволяет избавиться от jsx

Почему?

Erolast, да эт я видел, но я уже привык =). Только одно мне непонятно, например.
Буду знать =)

Есть компонент..... Да пусть новости :D

<div>
	<article>
		<h2>News item #1</h2>
		<p>Lorem ipsum dolor sit amet</p>
	</article>
	<article>
		<h2>News item #2</h2>
		<p>Lorem ipsum dolor sit amet</p>
	</article>
</div>

Вот вывод этого дела (код не проверял, поэтому вдруг не работает, но, по идее, должен:D)

import React from 'react';

class NewsList extends React.Component {

	// 1) - Где это должно быть? =) По сути, оно не в рендере, поэтому можно и сюда запихнуть, но все же?=)
	getDataFromServer() {
		return [
			{id: 1, title: 'News item #1', snippet: 'Lorem ipsum dolor sit amet'},
			{id: 2, title: 'News item #2', snippet: 'Lorem ipsum dolor sit amet'}
		];
	}

	renderItem(item) {
		return (
			<article key={item.id}>
				<h2>{item.title}</h2>
				<p>{item.snippet}</p>
			</article>
		);
	}

	render() {
		let items = this.getDataFromServer().map(this.renderItem);

		return (
			<div>{items}</div>
		);
	}
}

// где то там, из компонентов собираем страничку ;)
export default NewsList;

Вопросы:

1) По сути, в этом классе должна быть только манипуляция DOM, да? Т.е данные с сервера я должен тащить уже с помощью flux, там же и обрабатывать, а тут только выводить.
2) Допустим, есть сущность "Новости", которая содержит всю инфу о новостях. Должен ли быть один компонент News, а в нем уже вывод полной новости и списка новостей? Либо это уже два разных компонента?

Пока все=)

p.s по сути, данный тред себя изжил, вопрос на него был получен, пора апать React'а тред ;)

p.s уехал, вернусь чарез часик, надеюсь на кучу постов с ответами :D

обе (или оба как кому нравиться) - распиаренные продукты известных брендов

ни то ни другое :)
http://javascript.ru/forum/offtopic/...tml#post369258

nerv_, топик уже читал=)
Оба это само собой, но мне было интересно, что выбрать как первый fw, но уже определился=). Все равно спасибо=)

Я сторонник разделения шаблонов и js кода.

tsigel, ага, именно это меня и смутило в jsx ;D
Но если смотреть на React, как на "представление", то jsx вполне разумен и даже удобен, ибо видно, за что отвечает этот класс и.т.д

Но опять же, если класс будет раза в 2-3 больше, чем этот.
http://javascript.ru/forum/misc/5799...tml#post386417, а он обязательно будет, то будет громоздко:(

я дал ссылку на пост, а не на топик :)
В след. раз я не буду настолько любезен указывать на очевидные вещи.

и я. Тут был "срач" на эту и около нее темы.

nerv_, да, имел ввиду пост).

Lemme,
Это все очень хорошо и замечательно выглядит на примере сложностью швабры, а вот в реальном проекте сложный шаблон превращается в огромную кучу говнокода. И тут появляются варианты. Например дробить на огромное количество мелких компонентов, что вообщем -то не плохо, но: я люблю чтобы весь код был покрыт доками и чтобы система всегда знала что надо класть в тот или иной метод (в частности очень люблю тайпскрипт), так вот с этим в jsx проблема. Ещё мы пробовали ООП подход, и всесто деления на компоненты делали объект. Что-то типа такого:

{

   render: () {
       return (
         <div>
             {this.getHeader()}
             {this.getContent()}
             {this.getFooter()}
         </div>
       )
   }

}

Когда методы умещаются в 7-8 строк, то получается давольно аккуратный код, но смысл шаблона в том чтобы увидеть хтмл структуру кода, а в таком варианте она полностью теряется.

и с болью верстается :)

tsigel, я это и имел введу, когда говорил
Тут должно было быть "троеточие" :D

У каждого компонента свой файл, если придерживаться методологии БЭМ.. Все разбито по компонентам aka блокам, компоненты собираются из компонентов=). Для маленьких проектов, глупо, сложно, нерационально, но для больших, имхо - единственное правильное решение, с точки зрения внесения изменений.


Банальный пример из Jade

//- navigation.jade
mixin navigation(items)
	.navigation
		each item in items
			a.navigation__link(href=item.url)
				= item.title

//- header.jade

include path/to/navigation-mixin

mixin header()
  .header
     +navigation([
	     {url: '#/page/1', title: 'link #1'},
	     {url: '#/page/2', title: 'link #2'},
	     {url: '#/page/3', title: 'link #3'},
	     {url: '#/page/4', title: 'link #4'},
	     {url: '#/page/5', title: 'link #5'}
     ]);

А это уже ужас=),

Но помимо всего, я согласен, что jsx ужасен :agree:

по моему, с болью верстается все, что верстается не целиком=)

Реакт, конечно же. Ангуляр - это тромознутое нечто, заставляющее плясать с бубном при любой нестандартной ситуации.

Ты плохой и говоришь неправду, я пишу с бубном всегда!

Ну вот и порешали. Все говно. :)

tsigel, нет, всё круто