React.js

"A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"

• Javascript kirjasto web-käyttöliittymien tekemiseen
• React on kirjasto eikä verrattavissa esim.AngularJS:n joka on sovellusalusta
• Käytetään monissa tilanteissa korvaamaan Backbone.js:n View komponentit
• Erittäin suorituskykyinen
• Facebook tiimin kehittämä ja laajalti käytössä (esim chat)
• Myös instagram kuvapalvelussa käytössä

Hello World käyttäen JSX:ää

					/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.renderComponent(<HelloMessage name="John" />,
    document.getElementById("container"));
				

JSX ??..

• XML:n kaltainen kieli joka kääntyy javascriptiksi
• Ei ole pakollista käyttää, mutta usein kompaktimpaa kuin Javascript
• Ei ole suoraan verrattavissa perus-HTML:n

JSX

					 /** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
				   

Javascript

				   	var HelloMessage = React.createClass({  
  render: function() {
    return React.DOM.div(null, "Hello ", this.props.name);
  }
});
				

• Miksi JSX? Miksi kömpelö DOM API? Miksei Handlebars etc?
• React toteuttaa oman virtuaalisen DOM:n
• Mahdollistaa HTML:n generoinnin optimoidusti. Vain muutokset vaikuttavat
• Virtuaalinen DOM tunnistaa muutokset ja generoi vain muuttuneet nodet koko HTML:n sijaan

Virtuaali-DOM esimerkki

				   	    var MyComponent = React.createClass({
  render: function() {
    if (this.props.first) {
      return <div classname="first"><span>A Span</span></div>;
    } else {
      return <div classname="second"><p>A Paragraph</p></div>;
    }
  }
});
				   	

Tyhjästä tilanteeseen jossa "first" arvo asetettu

• Luodaan DOM node:

  <div className="first"><span>A Span</span></div>

Virtuaali-DOM esimerkki

				   	    var MyComponent = React.createClass({
  render: function() {
    if (this.props.first) {
      return <div classname="first"><span>A Span</span></div>;
    } else {
      return <div classname="second"><p>A Paragraph</p></div>;
    }
  }
});
				   	

Tilanteesta "first" tilanteeseen "second" -vaiheet

• Korvataan className="first" className="second"
• Korvataan

  <span>A Span</span>

  <p>A Paragraph</p>

Komponentit

• Komponentti kuvaa tiettyä näkymää/toiminnallisuutta käyttöliittymässä esim.SendMessage,Messages,Message
• MVC arkkitehtuurin View-osa
• Voivat olla tilallisia tai tilattomia
• Verrattavissa AngularJS:n direktiiveihin, joiden avulla laajennetaan HTML:n syntaksia
• Voivat koostua (ja usein koostuvatkin) useista sisäkkäisistä komponenteista

Komponenttien elinkaari

				   	    var Component = React.createClass({
    componentWillMount : function(){
        console.log("componentWillMount")
    },
    render : function(){
        console.log("render");
        return <p>component</p>
    },
    componentDidMount : function(){
        console.log("componentDidMount") 
    }
});

React.renderComponent(<Component />, document.body)
				   	

Refs - DOM elementtien käsittely

				   	    var Component = React.createClass({
    componentWillMount : function(){
        console.log("componentWillMount")
    },
    render : function(){
        console.log("render");
        return <p ref="component">component</p>
    },
    componentDidMount : function(){
        console.log("componentDidMount")
        this.refs.component.getDOMNode().innerHTML="updated after render";
    }
});

React.renderComponent(<Component />, document.body)
				   	

Komponenttiesimerkki 1 - Kompositio ja propertyt

				   	    var Message = React.createClass({
    render : function(){
        return (<p><b>{this.props.sender}</b> {this.props.message}</p>)
    }
});

var Messages = React.createClass({
    render: function() {
        return (<ul>
                  {this.props.messages.map(function (msg){
                    return <li><Message sender={msg.sender} message={msg.message} /></li>
                  })}
                </ul>)
    }
});

var msgs = [{sender: "Doge", message : "Wow, such example"},
            {sender: "Swag", message : "#Yolo"}]

React.renderComponent(<Messages messages={msgs} />, document.body);
				   	

Komponenttiesimerkki 2 - Tilalliset komponentit ja esimerkkisovellus

Tilalliset komponentit

• Tila alustetaan getInitialState metodissa
• Tilaa hallinnoidaan vain ja AINOASTAAN setState metodin kautta
• Komponenttien välinen kommunikointi event callback - metodeilla

Mixins

• Voidaan jakaa toiminnallisuutta komponenttien kesken
• Perus Javascript objekteja
• Komponentilla voi olla useampia mixin-objekteja
• Huomattavasti joustavampaa kuin perintä

"Hyödyllinen" Mixin - esimerkki

React ja Clojure(Script)

• Clojuren "immutable" tietomallit sopivat täydellisesti React-filosofiaan
• Mahdollistaa jopa paremman suorituskyvyn kuin perus-Javascript
• Uusia kirjastoja ilmestyy kuin sieniä sateella. Voittaja selviää myöhemmin

Reactin käyttö ilman ClojureScript-apukirjastoa

						(def comments-data [{:author "Pete Hunt" :text "This is a comment."}
                    {:author "Jordan Walke" :text "This is *another* coment"}])

(def Comment
  (js/React.createClass
   #js {:render (fn []
                  (this-as this
                           (let [comment (.. this -props -comment)]
                             (js/React.DOM.div
                              #js {:className "comment"}
                              (js/React.DOM.h2 nil  (:author comment))
                              (js/React.DOM.span nil (:text comment))))))}))

(def CommentList 
  (js/React.createClass
   #js {:render (fn []
                  (this-as this
                           (js/React.DOM.div
                            #js {:className "commentList"}
                            (into-array
                             (map #(Comment #js {:comment %})
                                  (.. this -props -comments))))))}))

(def CommentBox
  (js/React.createClass
   #js {:render (fn []
                  (this-as this
                           (js/React.DOM.div
                            #js {:className "commentBox"}
                            (js/React.DOM.h1 nil "Comments")
                            (CommentList #js {:comments
                                              (.. this -props -comments)}))))}))

(js/React.renderComponent
 (CommentBox #js {:comments comments-data})
 (.getElementById js/document "content"))
					

Om

						(defn comment [{:keys [author text]} c]
  (om/component
   (dom/div #js {:className "comment"}
            (dom/h2 nil author)
            (dom/span nil text))))

(defn comment-list [app]
  (om/component
   (dom/div nil
            (dom/div #js {:className "commentList"}
                     (into-array (map #(om/build comment app
                                                 {:path [%]})
                                      (range (count app))))))))
(defn comment-box [app]
  (om/component
   (dom/div #js {:className "commentBox"}
            (dom/h1 nil "Comment")
            (om/build comment-list app {:path []}))))

(om/root
 comments-data
 comment-box
 (.getElementById js/document "content"))
					

Reagent (ex-Cloact)

Hoplon.io

• "Clojure, everywhere."
• Clojurea serveripäässä. ClojureScriptiä clientissa
• Koostuu useasta kirjastosta (Javelin -spreadsheet, Castra RPC,Cljson - client/server communication)
• React?
• https://github.com/tailrecursion/hoplon

Yhteenveto Reactista

• Kevyt kirjasto
• Soveltuu tilanteisiin kun ei haluta "full stack" sovelluskehystä tyyliin AngularJS mutta halutaan kompositionaalisuutta
• Ref:n avulla voidaan käyttää muita js-kirjastoja, kuten jQuery,handlebars, markdown etc etc
• Suorituskyky erittäin hyvä virtuaalisen DOM:n ja tehokkaan diff-algoritmin myötä
• ClojureScript+React erittäin mielenkiintoinen combo jonka kehitystä kannattaa seurata

Kiitos!