vitali.pe@gmail.com
day 0
vitali.pe@gmail.com
day 0
day 1546
the particular condition that something is in at a specific time
the particular condition that something is in at a specific time
the particular condition that something is in at a specific time
the particular condition that something is in at a specific time
the particular condition that something is in at a specific time
the particular condition that something is in at a specific time
{
user(id: 1) {
age
friends {
name
}
}
}
{
user(id: 42) {
name
friends {
age
}
}
}
String based DSL
No clear schema (by design)
Works well on dense graphs
Solves a more general problem
(def click-count (r/atom 0))
(defn counting-component []
[:div
"The atom " [:code "click-count"] " has value: "
@click-count ". "
[:input {:type "button" :value "Click me!"
:on-click #(swap! click-count inc)}]])
(def click-count (r/atom 0))
(defn counting-component []
[:div
"The atom " [:code "click-count"] " has value: "
@click-count ". "
[:input {:type "button" :value "Click me!"
:on-click #(swap! click-count inc)}]])
(def foo-cursor (cursor app-state [:foo]))
(defn inside-foo-cursor []
[:div (str "Inside foo-cursor: " @foo-cursor)])
var me = mobx.observable({
firstName : "vitali",
lastName : "Perchonok",
favoriteNumbers : [0],
age : 29
})
var me = mobx.observable({
firstName : "vitali",
lastName : "Perchonok",
favoriteNumbers : [0],
age : 29
})
mobx.autorun(
() => console.log("your name:",
me.firstName, me.lastName))
var me = mobx.observable({
firstName : "vitali",
lastName : "Perchonok",
favoriteNumbers : [0],
age : 29
})
mobx.autorun(
() => console.log("your name:",
me.firstName, me.lastName))
var me = mobx.observable({
firstName : "vitali",
lastName : "Perchonok",
favoriteNumbers : [0],
age : 29
})
mobx.autorun(
() => console.log("your name:",
me.firstName, me.lastName))
me.fullName = "Other";
// console: your name: Other Perchonok
me.lastName = "Name";
// console: your name: Other Name
me.age = 30;
me.favoriteNumbers.push(12);
// no effect
var me = mobx.observable({
....
fullName : function() {
return [this.firstName, this.lastName].join(" ")
}
})
var me = mobx.observable({
....
fullName : function() {
return [this.firstName, this.lastName].join(" ")
}
})
mobx.autorun(() => console.log("your name:", me.fullName))
var me = mobx.observable({
....
fullName : function() {
return [this.firstName, this.lastName].join(" ")
}
})
mobx.autorun(() => console.log("your name:", me.fullName))
var me = mobx.observable({
....
fullName : function() {
return [this.firstName, this.lastName].join(" ")
}
})
mobx.autorun(() => console.log("your name:", me.fullName))
var me = mobx.observable({
....
fullName : function() {
return [this.firstName, this.lastName].join(" ")
}
})
mobx.autorun(() => console.log("your name:", me.fullName))
var me = mobx.observable({
....
fullName : function() {
console.log("computed full name!");
return [this.firstName, this.lastName].join(" ")
}
})
mobx.autorun(() => console.log("your name:", me.fullName))
me.fullName = "Other";
// console: computed full name!
// console: your name: Other Perchonok
me.lastName = "Name";
// console: computed full name!
// console: your name: Other Name
me.fullName;
me.fullName;
// no effect
me.fullName = "Other";
// console: computed full name!
// console: your name: Other Perchonok
me.lastName = "Name";
// console: computed full name!
// console: your name: Other Name
me.fullName;
me.fullName;
// no effect
var me = mobx.observable({
...
rename : action(function (first, last) {
this.firstName = first;
this.lastName = last;
})
})
var me = mobx.observable({
...
rename : action("rename user",
function (first, last) {
this.firstName = first;
this.lastName = last;
})
})
var me = mobx.observable({
...
rename : action("rename user",
function (first, last) {
this.firstName = first;
this.lastName = last;
})
})
me.rename("Other", "name");
// console: computed full name!
// console: your name: Other Name
me.fullName;
me.fullName;
// no effect
me.rename("Other", "name");
// console: computed full name!
// console: your name: Other Name
mobx.useStrict(true);
me.firstName = "boo"; // throws:
// [mobx] Invariant failed: It is not allowed to
// create or change state outside an `action`
class Person {
@observable firstName = "vitali";
@observable lastName = "Perchonok";
...
@computed get fullName() {
return [this.firstName, this.lastName].join(" ");
}
@action("rename user") rename(first, last) {
this.firstName = first;
this.lastName = last;
}
}
Simple things should be simple, complex things should be possible.
Alan Kay
"mobx-react"
class Crap extends React.Component {
render() {
return <Layout>
<Component data={this.props.user}/>
<SimpleWidget />
</layout>
}
}
export default observer(Crap);
class Crap extends React.Component {
render() {
return <Layout>
<Component data={this.props.user}/>
<SimpleWidget />
</layout>
}
}
export default observer(Crap);
var StatelessCrap = observer(({user}) => {
return <Layout>
<Component data={user}/>
<SimpleWidget />
</layout>
})
export default StatelessCrap ;
@observer
class Crap extends React.Component {
render() {
return <Layout>
<Component data={this.props.user}/>
<SimpleWidget />
</layout>
}
}
export default Crap;
@observer
class Crap extends React.Component {
render() {
return <Layout>
<Component data={this.props.user}/>
<SimpleWidget />
</layout>
}
}
export default Crap;
class Counter extends React.Component {
@observable times = 0
render() {
var addOne = ()=> this.times++;
return <div>
<label>clicked {this.times} times</label>
<button onClick={addOne}>+1</button>
</div>
}
}
class Counter extends React.Component {
@observable times = 0
render() {
var addOne = ()=> this.times++;
return <div>
<label>clicked {this.times} times</label>
<button onClick={addOne}>+1</button>
</div>
}
}