Tło na licencji CC: Trevor Bexon
Jest stabilny - jeden z pierwszych izomorficznych frameworków, a obecnie najpopularniejszy. Duża waga jest przyłożona do kompatybilności wstecznej.
Nie zniknie tak łatwo - duża społeczność, wiele produkcyjnych aplikacji, ponad 31 milionów dolarów dofiansowania ;-)
Łatwy do nauki - wiele rozwiązań działa out-of-the-box
W całości oparty i podporządkowany koncepcji reaktywnych danych - znakomity do budowania aplikacji gdzie jest to potrzebne
Grafika: Sashko Stubailo
Grafika: Sashko Stubailo
Grafika: react-ive.meteor.com
meteor add react
npm install react
(obecnie w fazie beta)
+ różne oddolne próby połączenia Meteora z Webpackiem
Tymczasowe oficjalne rozwiązanie: ReactMeteorData mixin
const MyComponent = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
Meteor.subscribe('tasks');
return {
tasks: Tasks.find({}).fetch()
}
},
render() {
return this.data.tasks.map((task) => {
return <Task key={task._id} task={task} />;
});
}
});
Wersja Vazco: AutorunMixin
const MyComponent = React.createClass({
mixins: [AutorunMixin],
autorun () {
Meteor.subscribe('tasks');
const tasks = Tasks.find().fetch() || [];
this.setState({tasks});
},
render () {
return this.state.tasks.map((task) => {
return <Task key={task._id} task={task} />;
});
}
});
Pochodzi z paczki universe:utilities-react
Przykładowe użycie Reduxa
const { connect } = ReactRedux;
TaskList = class TaskList extends React.Component {
getMeteorData() {
const {visibilityFilter} = this.props;
Meteor.subscribe('tasks', visibilityFilter);
return {
tasks: Tasks.find({}).fetch() || []
}
}
render () {
const { dispatch } = this.props;
return this.data.tasks.map((task) => {
return <Task key={task._id} task={task}
onClick={() => dispatch(toggleTodo(todo._id))} />;
});
}
};
reactMixin(TaskList.prototype, ReactMeteorData);
const mapStateToProps = (state) => {
return { visibilityFilter: state.visibilityFilter}
};
TaskList = connect(mapStateToProps)(TaskList);
Mantra
import TasksList from '../components/tasklist/index.jsx';
import {useDeps} from 'react-simple-di';
import {composeWithTracker, composeAll} from 'react-komposer';
export const composer = ({context}, onData) => {
const {Meteor, Tasks} = context();
if (Meteor.subscribe('tasks').ready()) {
const tasks = Tasks.find().fetch();
onData(null, {tasks});
}
};
export default composeAll(
composeWithTracker(composer),
useDeps()
)(TaskList);
Co przyniesie przyszłość?
Meteor Development Group zapowiedziało wsparcie dla
Reactive GraphQL
Użycie na poziomie komponentów będzie prawdopodobnie zbliżone do Relay, ale ma być też łatwe wsparcie dla Reduxa i innych rozwiązań
Po stronie serwera pojawi się możliwość obsługi dodatkowych baz danych
repo z kodem źródłowym