deku / le mini

Quelques infos

créé part Anthony Short 

le 08/10/2014

habite à San Francisco
travaille chez Segment

version : V2 en RC
2 310 stars

Philosophie deku

• Virtual DOM
   
• Approche purement fonctionnelle
   
• Aucun state
   
• API minimal
   
• IE10+

Utilisation du JSX

import {element} from 'deku';
import {string as toStyle} from 'to-style';

function render({props, context}) {
  const style = {backgroundImage: 'url('+props.image+')'};
  let cardClassName = 'card';
  return (
    <li id={props.id} class={cardClassName}>
      <div class="card-image" style={toStyle(style)}></div>
      <div>
        <div>{pros.title}</div>
        <div class="card-type">{props.type}</div>
      </div>
    </li>
  );
}

const propTypes = {
  id: {type: 'integer'},
  image: {type: 'string'},
  title: {type: 'string'},
  type: {type: 'string'},
};

export default {propTypes, render};

import React, {PropTypes} from 'react';

const Card = ({image, id, title, type}) => {
  let style = {backgroundImage: 'url('+image+')'};
  let cardClassName = "card";
  return (
    <li id={id} className={cardClassName}>
      <div className="card-image" style={style}></div>
      <div>
        <div>{title}</div>
        <div className="card-type">{type}</div>
      </div>
    </li>
  );
}

Card.propTypes = {
    id: PropTypes.number,
    image: PropTypes.string,
    title: PropTypes.string,
    type: PropTypes.type,
  };

export default Card;

Lifecycle

import {element} from 'deku';
import {string as toStyle} from 'to-style';

function onCreate({props, context}){
    console.log('create element');
}

function onUpdate({props, context}){
    console.log('update element');
}

function onRemove({props, context}){
    console.log('remove element');
}

function render({props}) {
  const style = {backgroundImage: 'url('+props.image+')'};
  let cardClassName = 'card';
  return (
    <li id={props.id} class={cardClassName}>
      <div class="card-image" style={toStyle(style)}></div>
      <div>
        <div>{props.title}</div>
        <div class="card-type">{props.type}</div>
      </div>
    </li>
  );
}

const propTypes = {
  id: {type: 'integer'},
  image: {type: 'string'},
  title: {type: 'string'},
  type: {type: 'string'},
};

export default {propTypes, render, onCreate, onUpdate, onRemove};

import React, {Component, PropTypes} from 'react';

class Card extends Component {

  static propTypes = {
    id: PropTypes.number,
    image: PropTypes.string,
    title: PropTypes.string,
    type: PropTypes.type,
  };

  componentDidMount() {
    console.log('mount');
  }

  componentDidUpdate() {
    console.log('update');
  }

  componentWillUnmount() {
    console.log('unmount');
  }

  render() {
    let style = {
      backgroundImage: 'url(' + this.props.image + ')',
    };
    let cardClassName = "card";
    return (
      <li id={this.props.id} className={cardClassName}>
        <div className="card-image" style={style}></div>
        <div>
          <div>{this.props.title}</div>
          <div className="card-type">{this.props.type}</div>
        </div>
      </li>
    );
  }

}

export default Card;

Les Events

import {element} from 'deku';

function render () {
  return <button onClick={save}>Submit</button>;
}

function save (event) {
  // event = MouseClick dom event
}

export {render}

import React from 'react';

Element = () => {
  return <button onClick={save}>Submit</button>;
}

function save (event) {
  // event = MouseClick dom event
}

export default Element;

Le Rendering

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route} from 'react-router';
import App from './App';

ReactDOM.render(<App />, 
  document.getElementById('body'));

import {dom, element} from 'deku';
import App from './App';
const {createRenderer} = dom;
const render = 
  createRenderer(document.getElementById('body'));

render(<App />);

Avec Redux

import {dom, element} from 'deku';
import App from './App';
import Store from './Store';
const {createRenderer} = dom;
const render = 
  createRenderer(document.getElementById('body'), 
    Store.dispatch);

Store.subscribe(() => {
  render(<App />, Store.getState());
});

render(<App />, Store.getState());

// App.js

import {element} from 'deku';

let save = dispatch => event => {
  dispatch({
    type: 'SAVED'
  })
}

function render ({dispatch}) {
  return <button onClick={save(dispatch)}>X</button>;
}

export {render}

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route} from 'react-router';
import App from './App';

ReactDOM.render(<App />, 
  document.getElementById('body'));

// App.js
import React from 'react';
import {sendAction} from './Action';

function save(){
  sendAction();
}

const App = () => 
  return <button onClick={save}>X</button>;

export default App;

//Action.js
import Store from './Store';

export const sendAction = () {
  Store.dispatch({
    type: 'SAVED',
  });
}
 

Conclusion

• Utilisation de JSX très appréciable
   
• S'intègre très bien avec Redux
   
• Léger, pure functions
   
• Besoin de nombreuses libs (styling, routing...)
   
• Lifecycle beaucoup moins puissant que React
   
• Maturité de la librairie, encore des bugs